Uruchamianie DOOM-a na wszystkim, co ma ekran, mogłoby spokojnie zostać nową dyscypliną olimpijską. Lista urządzeń, na których już działał, dawno wymknęła się spod kontroli. Testy ciążowe, zegarki, kalkulatory, a teraz do tego zestawu dołącza przeglądarka.
Tak, DOOM w przeglądarce był już wcześniej, ale zawsze opierał się na WebGL, WebAssembly albo klasycznym porcie silnika. Ten projekt jest pierwszym, który robi to bez jakiegokolwiek silnika 3D, bez WebGL i bez shaderów. Tu jest tylko HTML i CSS.
Mieszanka HTML, CSS i odrobina JavaScript. Komu chciało się to robić?
Za tym szalonym pomysłem stoi Niels Leenheer, który postanowił sprawdzić, jak daleko można przesunąć granice współczesnych przeglądarek. Zamiast używać WebGL czy gotowych bibliotek 3D, zbudował cały świat DOOM‑a z płaskich elementów HTML, a za renderowanie odpowiada wyłącznie CSS.
JavaScript pełni tu rolę mózgu. Pilnuje logiki, ruchu i kolizji, natomiast arkusze stylów stają się oczami, które wyliczają perspektywę, szerokość ścian i ich położenie w przestrzeni. Co najważniejsze, projekt korzysta z oryginalnych plików WAD. Zatem każdy korytarz, każdy przeciwnik i każdy sekret znajduje się dokładnie tam, gdzie w wersji shareware sprzed ponad trzy dekady.
Przeglądarka wykonuje za kulisami całą geometrię, od trygonometrii po obliczenia dystansu, aby z tysięcy prostokątów stworzyć iluzję pełnoprawnego świata 3D.
Największe wrażenie robi to, jak naturalnie zachowuje się cały świat. Drzwi i windy nie są animowane klatka po klatce, tylko reagują na zmianę stanu i płynnie przesuwają się dzięki mechanizmom przeglądarki.
Przeciwnicy to płaskie sprite’y, które zawsze ustawiają się przodem do gracza, a ich wygląd zmienia się w zależności od kąta patrzenia. Oświetlenie sektorów, migotanie lamp i charakterystyczne efekty niewidzialnych demonów również zostały odwzorowane, co sprawia, że całość wygląda zaskakująco autentycznie.
Gra dopasowuje się nawet do ekranu telefonu, zmieniając układ HUD‑u i pozycję broni. Przygotowano też tryb obserwatora, który pozwala swobodnie latać nad mapą i oglądać poziomy z zupełnie nowej perspektywy.
Ciekawostka jest taka, że w przeglądarce można uruchomić nawet Quake III Arena. Tam natomiast działa to już na klasycznym WebGL i WebAssembly, a nie na szalonym połączeniu HTML i CSS, które napędza tego DOOM‑a.
Przeglądarki zaszły bardzo daleko, ale wciąż widać pole do poprawy
Choć projekt nie zastąpi profesjonalnych silników 3D, udowadnia, że współczesne standardy sieciowe potrafią znacznie więcej, niż większość osób zakłada. Tak ekstremalne wykorzystanie CSS i HTML ujawniło nawet błędy w popularnych przeglądarkach, które nie były przygotowane na tak intensywne obciążenie ich systemów graficznych.
To z kolei może pomóc w ich dalszym rozwoju, bo niewiele projektów testuje je w tak bezlitosny sposób. Najważniejsze jednak jest to, że DOOM działa tu naprawdę i można go normalnie przejść, nie instalując absolutnie niczego. Wystarczy otworzyć stronę i wejść do świata, który trzydzieści lat temu zmienił oblicze gier.
Źródło: nielsleenheer.com, TechEBlog / Zdj. otwierające: cssdoom.wtf