Was klingt wie ein absurdes Experiment, ist in Wahrheit ein beeindruckendes Zeugnis dafür, wie weit sich Webtechnologien in den vergangenen drei Jahrzehnten entwickelt haben: Ein Entwickler hat den legendären Ego-Shooter DOOM vollständig im Browser gerendert – und zwar ausschließlich mit CSS. Jede Wand, jeder Boden, jedes Fass und jeder Imp-Gegner existiert dabei als einzelnes HTML-<div>-Element, das über CSS-Transforms im dreidimensionalen Raum positioniert wird.
Wie funktioniert CSS-basiertes 3D-Rendering?
Die eigentliche Spiellogik läuft dabei weiterhin in JavaScript – das ist auch kaum anders denkbar. Die komplette Rendering-Pipeline hingegen, also die Darstellung aller visuellen Elemente auf dem Bildschirm, übernimmt ausschließlich CSS. Konkret bedeutet das: Für jedes sichtbare Objekt in der Spielwelt wird ein HTML-Element erzeugt und mittels CSS-Transformationen wie translateX, translateY, translateZ und rotateY exakt im dreidimensionalen Raum platziert. Das Ergebnis ist ein vollständig im Browser laufendes DOOM – ohne WebGL, ohne Canvas, ohne jede spezialisierte Grafik-API.
Der Entwickler gibt an, die Idee ursprünglich aus einem früheren Projekt entwickelt zu haben, bei dem er DOOM auf einem Oszilloskop aus den 1980er-Jahren zum Laufen brachte. Viele der dabei gelösten Grundprobleme konnten direkt in das CSS-Projekt übernommen werden. Dennoch stieß er beim CSS-Rendering an neue, spezifische Grenzen – etwa bei der Performance, wenn Hunderte von DOM-Elementen gleichzeitig transformiert und neu berechnet werden müssen.
Mehr als nur ein Gimmick – ein Gradmesser für CSS
Auf den ersten Blick wirkt das Projekt wie eine kuriose Spielerei. Tatsächlich ist es aber ein aussagekräftiger Stresstest für moderne Browser-Engines. CSS hat sich seit seinen Anfängen in den 1990er-Jahren fundamental gewandelt. Was einst nur für einfache Textformatierung gedacht war, umfasst heute Funktionen wie Grid-Layout, Custom Properties, Container Queries, komplexe Animationen und eben auch vollwertige 3D-Transformationen. Projekte wie dieses zeigen plastisch, wo die Leistungsgrenzen dieser Technologien heute liegen.
Für Webentwickler ist das mehr als Unterhaltung: Die Erkenntnisse aus solchen Extremexperimenten fließen regelmäßig in die Praxis ein. Wer versteht, wie der Browser mit Hunderten gleichzeitig transformierter Elemente umgeht, versteht auch, warum bestimmte Animationen auf produktiven Websites ruckeln oder warum das Layout bei komplexen Interfaces einbricht. Performance-Bottlenecks werden in solchen Projekten schonungslos sichtbar.
DOOM als universeller Benchmark der Technikgeschichte
DOOM hat sich über die Jahrzehnte zu einer Art inoffiziellen Benchmark der Technikwelt entwickelt. Das 1993 von id Software veröffentlichte Spiel wurde seitdem auf Druckern, Taschenrechnern, Schwangerschaftstests, in Minecraft und unzähligen anderen ungewöhnlichen Plattformen zum Laufen gebracht. Die Frage „Aber kann es DOOM spielen?" ist längst ein geflügeltes Wort in der Entwickler-Community. Die CSS-Version reiht sich würdig in diese Tradition ein – und beantwortet die Frage mit einem klaren Ja.
Für tech-affine Nutzer und Entwickler lohnt sich ein Blick auf das Projekt allein schon deshalb, weil es eindrücklich demonstriert, dass der Browser als Plattform heute leistungsfähiger ist als je zuvor – und dass die Grenzen des Machbaren im Web noch längst nicht erreicht sind.
Quellen: Hacker News