Inspirací byly mapy tiny.london a Pixel Berlin. Obě ukazují celé město jako jednu velkou kresbu ze stejného šikmého pohledu. Totéž jsem chtěl pro Prahu, se Starým Městem, Hradem a Vltavou s mosty a ostrovy.
Obě zmíněné mapy vznikly tak, že obrázkový model překreslil fotorealistické 3D město dlaždici po dlaždici. Stejně jsem začal i já.
1 Cesta přes AI
Postup má čtyři kroky. Nejdřív jsem z fotorealistického 3D modelu vyrenderoval pilotní část centra. Kamera je ortografická, skloněná o 45° a pootočená o 15°, zhruba 0,29 metru na pixel. Rendery jsou čtvercové dlaždice, které na sebe přesně navazují.
Ve druhém kroku překreslil model Nano Banana Pro vybrané rendery do požadovaného stylu. Prompt popisuje jen způsob kreslení: tenké tmavé obrysy, dva až tři ploché tóny na plochu, žádné přechody, zachované barvy a stíny renderu, nic přidaného ani ubraného. Osm povedených kreseb jsem pak přikládal ke každému dalšímu požadavku jako vzor, aby styl zůstal jednotný.
Ve třetím kroku posloužily dvojice render a kresba jako trénovací data pro LoRA k otevřenému modelu pro úpravy obrázků Qwen-Image. Trénink na 90 dvojicích trval jednu noc na pronajaté grafické kartě a stál pár dolarů.
Ve čtvrtém kroku natrénovaný model překreslí celé město dlaždici po dlaždici. Dlaždice se překrývají, takže nevznikají viditelné švy. Tento krok běží na mé vlastní grafické kartě.
Nano Banana držel geometrii renderu dobře. LoRA se styl naučila z 90 příkladů.
Další kresby od Nano Banana Pro. Po kliknutí se obrázek zobrazí v plné velikosti a dá se přepínat mezi kresbou a renderem, ze kterého vznikla.
2 Problémy
Modely občas změní věci, které na renderu jsou. V jednom mezistupni tréninku LoRA se z Vltavy stal trávník.
Takové chyby se dají najít porovnáním vody s OpenStreetMap a dlaždici pak překreslit, jenže to je další krok v už tak dlouhém postupu. Víc ale vážily tři jiné věci.
Čas. Jedna dlaždice trvá na mé kartě asi půl minuty a celé město jich potřebuje tisíce, takže celý běh trvá dny. Každá změna stylu znamená spustit ho znovu.
Statický výsledek. Výstupem je jeden velký obrázek. Noc, pohyblivé slunce, tramvaje nebo klikací budovy by každá vyžadovala samostatnou práci navíc.
Licence. 3D model, ze kterého jsem renderoval, nejde volně šířit, a licence Qwen-Image povoluje jen nekomerční použití.
3 Cesta přes otevřená data
Druhá verze žádný obrázkový model nepoužívá. Prohlížeč kreslí město z otevřených dat ve stylu, který počítač zvládne dobře: plošně vybarvené budovy, jeden ostrý stín, stromy jako kulaté koruny.
IPR Praha, pražský institut plánování a rozvoje, zveřejňuje 3D model všech budov a mostů v Praze včetně detailů střech, jako jsou komíny, vikýře a věže. Zveřejňuje také model terénu, ortofoto a mapu zeleně, vše pod licencí CC BY 4.0. Ulice, parky, voda a názvy míst jsou z OpenStreetMap.
Skripty převedou data do úsporných binárních souborů po jednom čtverečním kilometru a prohlížeč načítá jen ty, které jsou v záběru. Barvy střech se berou z ortofota, barvy stěn z OpenStreetMap a 3D meshe. První funkční verze vznikla za jeden den. Používá stejnou kameru jako AI cesta, takže obě jde porovnat pohled po pohledu. Mapa dnes pokrývá asi 60 km² a první pohled se načte za méně než dvě sekundy.
Pixelový režim vykreslí stejnou 3D scénu v polovičním rozlišení, každý pixel zarovná na omezenou paletu a tam, kde se prudce mění hloubka, nakreslí tmavý obrys. Kamera se posouvá po celých pixelech, takže se obraz při posunu netřese. Přepínač vpravo dole změní styl, aniž by se pohled posunul.
4 Co přidává živá mapa
Protože se scéna kreslí živě, může se v čase měnit. Postupně přibylo:
Světlo a čas. Výchozí denní světlo, noční režim a živý režim se skutečnou polohou slunce nad Prahou a posuvníkem času. V noci se rozsvítí okna, pouliční lampy osvětlí ulice a Hrad, Karlův most a další památky jsou nasvícené.
Tramvaje a lodě. Tramvaje jezdí podle jízdního řádu PID skutečnou rychlostí po skutečných kolejích, včetně jízdy přes mosty i pod nimi. Lodě plují po Vltavě mezi jezy a další kotví u nábřeží.
Detaily. Okna na všech fasádách, stromy z několika zaoblených korun a informace o památkách: po najetí myší se významná budova zvýrazní a po kliknutí se otevře panel s popisem a fotkou z Wikimedia Commons.
Katedrála sv. Víta. Byla to jediná budova, u které model IPR nebyl dost podrobný: gotické věže a fiály z něj vyšly jako obyčejné kužele. Promítnutí AI kresby na model vypadalo flekatě, takže katedrála nakonec vznikla v Blenderu jako stylizovaný model s opěrnými oblouky, západním průčelím a helmicí hlavní věže. Používá ploché barvy a skutečnou geometrii, takže je osvětlená a vrhá stíny stejně jako zbytek města.
5 Srovnání
| AI cesta | Otevřená data | |
|---|---|---|
| Vzhled | Podrobná, ručně kreslená textura | Jednodušší, čistý a jednotný |
| Přesnost | Většinou věrná, občas vymyšlené detaily | Odpovídá datům |
| Doba výroby | Dny pro celé město | Minuty na přestavbu dat |
| Změny | Nový styl znamená překreslit vše | Změnit barvu a obnovit stránku |
| Interaktivita | Statický obrázek | Den a noc, tramvaje, lodě, informace o památkách |
| Licence | Omezený vstup i model | Otevřená data a open-source knihovny |
AI kresby mají bohatší texturu, než jakou dají ploché tvary. Možná je i kombinace: živá mapa všude a předkreslené dlaždice pro hlavní památky. Pro mapu, která se mění s denní dobou a dá se snadno rozšiřovat, jsem zvolil otevřená data.
Prozkoumat mapu →Data a poděkování
- Budovy a mosty, terén, ortofoto, zeleň: © IPR Praha, CC BY 4.0
- Ulice, využití území, voda, názvy míst: © přispěvatelé OpenStreetMap, ODbL
- Jízdní řád tramvají: otevřená data PID, CC BY 4.0
- Texty a údaje o památkách: Wikipedie (CC BY-SA 4.0), Wikidata (CC0); fotky: Wikimedia Commons
- AI cesta: rendery z Google Photorealistic 3D Tiles, kresby Nano Banana Pro, LoRA natrénovaná pro Qwen-Image
- Software: three.js, Blender; písmo Press Start 2P od CodeMan38