Doom je kroz godine pokrenut na svemu i svačemu – od kalkulatora do testova trudnoće. No najnoviji eksperiment ide u potpuno drugom smjeru: legendarni shooter sada radi gotovo u potpunosti na CSS-u.
Da, istom onom CSS-u koji se obično koristi za stiliziranje web stranica.
Nizozemski developer Niels Leenheer uspio je napraviti igrivu verziju Dooma u kojoj se cijela grafika renderira pomoću HTML elemenata i CSS pravila, dok JavaScript služi tek kao “motor” igre. Drugim riječima, browser više ne crta piksele kroz klasične grafičke API-je, nego slaže tisuće divova u 3D prostoru.
Kako Doom može raditi bez grafičkog enginea?
Projekt se temelji na zanimljivoj podjeli posla. JavaScript pokreće game loop preuzet iz originalnog Doom koda, prati stanje igre i šalje osnovne podatke poput koordinata i kuta gledanja. Sve ostalo prepušteno je CSS-u.
Svaki zid, pod, neprijatelj i objekt u igri zapravo je obični div s precizno definiranim koordinatama. CSS zatim koristi 3D transformacije i matematičke funkcije poput atan2() i hypot() kako bi izračunao rotaciju, veličinu i poziciju elemenata u prostoru.
Umjesto klasične kamere, igra “pomjera svijet”. JavaScript prati poziciju igrača, a CSS pomiče cijelu scenu u suprotnom smjeru kako bi se stvorio osjećaj kretanja. Neprijatelji i projektili koriste tzv. billboard tehniku, gdje se spriteovi uvijek rotiraju prema igraču.
Čak su i stvari poput osvjetljenja, vrata i lifta riješene kroz stilove. Razina svjetla definira se jednom varijablom koja se propagira kroz cijeli sektor, dok se animacije poput otvaranja vrata izvode pomoću CSS tranzicija. JavaScript u tim slučajevima samo “okida” promjenu stanja.
Je li ovo budućnost web grafike ili samo genijalni eksperiment?
Koliko god impresivno zvučalo, ovakav pristup ima svoja ograničenja. Tisuće 3D transformiranih elemenata mogu ozbiljno opteretiti browser, pogotovo na mobilnim uređajima, gdje dolazi do trzanja ili čak rušenja.
Zbog toga su uvedene optimizacije poput skrivanja objekata koji nisu u vidnom polju igrača. Dio tih rješenja čak pokušava koristiti isključivo CSS, uključujući zanimljive trikove s animacijama i varijablama za kontrolu vidljivosti.
Ipak, neke stvari iz originalnog Dooma jednostavno se ne mogu savršeno preslikati. Primjerice, način na koji igra renderira nebo ne odgovara modernom 3D pristupu u browseru, pa su potrebni dodatni “hackovi” kako bi scena izgledala ispravno.
Sam autor jasno daje do znanja da ovo nije zamjena za WebGL ili WebGPU. Performanse su ograničene, a implementacija je daleko od praktične za stvarne igre.
Poanta je negdje drugdje – pokazati koliko je moderni CSS zapravo moćan. Funkcije za trigonometriju, napredni layout, clip-path i animacije danas omogućuju stvari koje su donedavno bile nezamislive bez pravog grafičkog enginea.
Doom tako ponovno potvrđuje svoj status tehnološkog memea i eksperimentalnog igrališta. Ako nešto može pokrenuti Doom, očito može i puno više nego što se na prvi pogled čini.
