Quake gira nel browser usando solo CSS: il progetto che stupisce

Realizzare un videogioco sparatutto tridimensionale nel browser significa, nella quasi totalità dei casi, affidarsi a WebGL o WebGPU, tecnologie che sfruttano direttamente la GPU per elaborare scene complesse e modelli 3D.

Un progetto apparso online negli scorsi giorni ha scelto una strada completamente diversa: costruire un FPS in stile Quake usando il DOM e le trasformazioni CSS come base per il rendering.

Il risultato si chiama cssQuake ed è uno degli esperimenti più insoliti emersi negli ultimi anni nel mondo dello sviluppo web. Dietro al progetto c’è PolyCSS, un motore che dimostra fino a dove sia possibile spingere le capacità native dei browser moderni senza ricorrere alle tradizionali API grafiche 3D.

Un FPS completo senza WebGL né canvas

La caratteristica che distingue cssQuake da qualsiasi altra reinterpretazione del classico sparatutto di id Software è 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: movimento con WASD, visuale controllata dal mouse, salto, corsa e combattimento in ambienti tridimensionali.

Dietro le quinte, però, 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: perspective 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 logica di gioco, input e collisioni.

Chiunque può testare questo interessante esperimento attraverso la pagina ufficiale dello stesso o su GitHub.

Prestazioni, limiti e vantaggi inaspettati

Usare il DOM come struttura principale della scena introduce vincoli molto 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, rendendo necessaria una gestione attenta delle risorse e un numero relativamente contenuto di elementi visibili.

WebGL e WebGPU restano nettamente superiori per applicazioni commerciali complesse: cssQuake non nasce per competere con queste tecnologie, ma per dimostrare cosa sia possibile fare con strumenti pensati per tutt’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 multiplayer, limiti di tempo e punteggio, scelta delle mappe e condivisione dei link per invitare altri giocatori.