DOOM na CSS? Programer ustvari, da brskalnik prikaže streljač brez grafičnega motorja

A programmer from the Netherlands je objavil različico klasičnega strelca DOOM , ki deluje brez grafičnega motorja. Vse grafike v igri so prikazane preko CSS, javascript pa obravnava le logiko, gibanje igralca in obnašanje pošasti.

Projekt se imenuje cssDoom, avtor pa je za njegovo ustvarjanje vzel izvirne WAD datoteke iz različice iz leta 1993 in vsak element scene spremenil v HTML bloke, pri čemer je njihovo pozicijo v prostoru določil preko CSS transformacij. Glavni tehnični problem: CSS nima kamere, zato se je avtor izognil temu s klasičnim trikom — igralec se ne premika, celoten svet okoli njega se premika. javascript posreduje štiri parametre CSS: X, Y, Z koordinate igralca in kot gledanja, CSS motor pa premika in vrti celotno sceno v nasprotni smeri. Zagon DOOM-a na različnih napravah je že stara novica, toda predelava na ta način je bolj zanimiva.

Glavni problem je, da brskalniki niso optimizirani za tisoče 3D-transformiranih elementov. Velike karte povzročajo, da Safari na iOS-u zruši, zato je bila dodana sistem za culling: elementi zunaj vidnega polja ali predaleč so skriti. Pri igri je bil problem s nebom. Ker izvirni DOOM uporablja trike in riše teksturo neba na 2D stenah nad pravo geometrijo. V poštenem 3D ta trik ne deluje, skozi okna lahko vidiš stvari, ki tam ne bi smele biti.

V cssDoom je na voljo vseh devet nivojev prve epizode in pet težavnostnih stopenj. Poleg standardnega pogleda iz prve osebe je na voljo način, kjer kamera gre do stropa, pa tudi način sledi tretje osebe — in pozicija kamere je tam izračunana povsem v CSS.

izvorna koda je na GitHubu in kdorkoli lahko igra različico v brskalniku.

Kaj menite — ali imajo eksperimenti, kot je ta, kakšno praktično uporabo poleg “ali lahko CSS zažene DOOM?” Ali je to le tehnični trik, ki ne vpliva na pravo razvoj? Delite svoje misli v komentarjih.