ADSENSE
|
Questo post é stato letto 60 volte!
Quake nel browser: un innovativo progetto che stupisce
Un FPS senza webgl né canvas
Realizzare un videogioco sparatutto tridimensionale nel browser solitamente implica l’uso di tecnologie come WebGL o WebGPU, che sfruttano la GPU per elaborare scene complesse.
Tuttavia, un progetto recente, denominato cssQuake, ha scelto una strada completamente diversa: costruire un FPS in stile Quake nel browser utilizzando il DOM (Document Object Model) e le trasformazioni CSS come base per il rendering.
Questo esperimento è uno dei più insoliti emersi negli ultimi anni nel mondo dello sviluppo web, dimostrando le capacità native dei browser moderni senza ricorrere alle tradizionali API grafiche 3D.
Dietro a cssQuake c’è PolyCSS, un motore che spinge i limiti delle possibilità del web.
La caratteristica distintiva di cssQuake è l’assenza totale di WebGL e dell’elemento canvas.
L’intera scena viene costruita attraverso normali elementi HTML posizionati nello spazio mediante trasformazioni CSS tridimensionali.
Pareti, pavimenti, oggetti e nemici diventano nodi del DOM che il browser compone come se fossero poligoni di una scena 3D tradizionale.
Dal punto di vista dell’utente, l’esperienza ricorda quella di un classico arena shooter, con movimento tramite WASD, visuale controllata dal mouse, salto, corsa e combattimento in ambienti tridimensionali.
Tecnologia dietro cssquake
Come funziona il motore polycss
Dietro le quinte, il browser non sta renderizzando una scena grafica convenzionale, ma una struttura complessa di elementi HTML trasformati in tempo reale.
Il motore PolyCSS sfrutta funzionalità CSS supportate dai browser da oltre un decennio.
In particolare, “perspective” viene utilizzato per definire la profondità della scena e “transform-style: preserve-3d” per mantenere la posizione degli elementi nello spazio tridimensionale.
Trasformazioni come “translate3d”, “rotateX” e “rotateY” si occupano di posizionare e orientare gli oggetti, mentre JavaScript gestisce la logica di gioco, l’input e le collisioni.
Questo interessante esperimento è disponibile per essere testato sulla pagina ufficiale del progetto o su GitHub.
Prestazioni e vantaggi inaspettati
Limiti e funzionalità sorprendenti
L’utilizzo del DOM come struttura principale della scena introduce vincoli diversi rispetto ai motori basati su GPU.
Ogni poligono corrisponde a uno o più elementi HTML che il browser deve gestire e ricomporre a ogni frame.
All’aumentare degli oggetti a schermo, crescono anche le operazioni di layout e composizione, richiedendo una gestione attenta delle risorse e un numero relativamente contenuto di elementi visibili.
WebGL e WebGPU rimangono nettamente superiori per applicazioni commerciali complesse, e cssQuake non è stato creato per competere con queste tecnologie, ma per dimostrare cosa sia possibile fare con strumenti pensati per altri scopi.
Ci sono però vantaggi curiosi.
Poiché muri, oggetti e strutture sono effettivamente elementi HTML, è possibile ispezionarli e modificarli direttamente con i DevTools del browser, esattamente come qualsiasi altro componente di una pagina web.
Il progetto integra anche un pannello di debug con statistiche sulle prestazioni, monitoraggio degli FPS e visualizzazione dei contorni degli oggetti.
Sul fronte delle funzionalità, cssQuake è sorprendente, supportando persino aspetti come il multiplayer, limiti di tempo e punteggio, scelta delle mappe e condivisione dei link per invitare altri giocatori.
Questo post é stato letto 60 volte!