Cosa succederebbe se un algoritmo potesse creare mappe dettagliate di mondi fantastici, con strade, fiumi e città, senza bisogno di dadi o tavoli da gioco? Felix Turner, fondatore di Airtight Interactive, ha realizzato proprio questo: un sistema che genera mappe medievali complete di strade, fiumi e decorazioni, tutto in tempo reale.
La magia dietro questo progetto è una combinazione di algoritmi di Wave Function Collapse (WFC) e rendering WebGPU. Il sistema utilizza 30 tipi di piastrelle diverse, organizzate in 19 griglie esagonali, per creare mappe di circa 4.100 celle. Ogni piastrella è progettata per allinearsi perfettamente con le altre, grazie a UV mapping preciso e una texture atlas condivisa.
Ma non è solo una questione di geometria. Il rendering è ottimizzato con BatchedMesh, che permette di disegnare tutte le piastrelle in pochi draw call, mantenendo un frame rate elevato anche su dispositivi mobili. Inoltre, l’uso di TSL (Three.js Shading Language) per gli shader permette effetti visivi avanzati come l’ombreggiatura dinamica e la profondità di campo.
Come smanettone, non posso che apprezzare l’approccio di Turner. Ha risolto problemi complessi come l’allineamento delle texture, l’ottimizzazione del rendering e l’implementazione di algoritmi generativi in modo pulito e efficiente. Inoltre, ha reso tutto open source, permettendo a chiunque di sperimentare e migliorare il sistema.
Tuttavia, c’è un lato negativo: l’uso di WebGPU e TSL potrebbe limitare la compatibilità con alcuni dispositivi più vecchi. Inoltre, l’algoritmo richiede una certa potenza di calcolo, il che potrebbe essere un problema per chi ha hardware limitato.
In conclusione, questo progetto dimostra come la generazione procedurale e il rendering avanzato possano creare esperienze immersive senza bisogno di asset preconfezionati. Se sei un appassionato di generative art o di sviluppo WebGL, vale sicuramente la pena dare un’occhiata al codice sorgente su GitHub.
Per chi vuole provare, c’è una demo interattiva che permette di generare mappe cliccando sui bottoni esagonali. E se sei un vero smanettone, puoi anche modificare i parametri del WFC e del rendering per creare mappe uniche.
Source: Building a Procedural Hex Map with Wave Function Collapse