DOOM na CSS? Programista sprawia, że przeglądarka renderuje strzelankę bez silnika graficznego
Arkadiy Andrienko
A programmer from the Netherlands wydał wersję klasycznego strzelca DOOM , który działa bez silnika graficznego. Cała grafika w grze jest renderowana za pomocą CSS, a javascript zajmuje się tylko logiką, ruchem gracza i zachowaniem potworów.
Projekt nazywa się cssDoom, a aby go stworzyć, autor wziął oryginalne pliki WAD z wersji z 1993 roku i zamienił każdy element sceny na bloki HTML, z ich pozycją w przestrzeni określoną za pomocą transformacji CSS. Główny problem techniczny: CSS nie ma kamery, więc autor obejść to klasycznym trikiem — gracz się nie porusza, cały świat wokół niego się porusza. javascript przekazuje cztery parametry do CSS: współrzędne X, Y, Z gracza oraz kąt widzenia, a silnik CSS przesuwa i obraca całą scenę w przeciwnym kierunku. Uruchamianie DOOM na różnych urządzeniach to już stara wiadomość, ale przerobienie go w ten sposób jest bardziej interesujące.
Głównym problemem jest to, że przeglądarki nie są zoptymalizowane do obsługi tysięcy elementów 3D z transformacjami. Duże mapy powodują, że Safari na iOS się zawiesza, więc dodano system culling: elementy poza polem widzenia lub zbyt daleko są ukrywane. Był problem z niebem w grze. Ponieważ oryginalny DOOM oszukuje i rysuje teksturę nieba na 2D ścianach nad prawdziwą geometrią. W uczciwym 3D ten trik nie działa, a przez okna można zobaczyć rzeczy, których tam nie powinno być.
W cssDoom dostępne są wszystkie dziewięć poziomów pierwszego odcinka oraz pięć poziomów trudności. Oprócz standardowego widoku z pierwszej osoby, jest tryb, w którym kamera podnosi się do sufitu, a także tryb trzeciej osoby — a pozycja kamery jest obliczana całkowicie w CSS.
Źródło kod jest na GitHubie i każdy może zagrać w wersję przeglądarkową.
Co myślisz — czy takie eksperymenty mają jakiekolwiek praktyczne zastosowanie poza „czy CSS może uruchomić DOOM?” Czy to tylko techniczny stunt, który nie wpływa na rzeczywisty rozwój? Podziel się swoimi przemyśleniami w komentarzach.