CSS Doom: Rendering des Spiels ohne Canvas

# Doom in reinem CSS: Rendering ohne Canvas oder WebGL

Entwickler Niels Lehner hat das Projekt cssDoom veröffentlicht – eine vollständige Umsetzung des Klassikers Doom, bei der alle Grafiken ausschließlich mit CSS gerendert werden. Die Spiellogik ist in JavaScript implementiert, ohne Canvas oder WebGL zu nutzen. Es verwendet den originalen Doom-Quellcode von id Software, der in WAD-Dateien verfügbar ist. Das Projekt ist auf GitHub unter der GPLv2-Lizenz gehostet.

Alle visuellen Elemente – Sprites, texturierte Wände, Level, Effekte – bestehen aus div-Elementen. Sie werden im 3D-Raum mit den CSS-Eigenschaften transform und transform-style: preserve-3d positioniert. JavaScript greift nicht direkt in Styles ein: Stattdessen setzt es benutzerdefinierte CSS-Eigenschaften basierend auf der Vertex-Geometrie aus der WAD-Datei. CSS berechnet eigenständig Breite, Höhe und Transformationen mit trigonometrischen Funktionen.

Koordinatenanpassung und Spielschleife

Das Koordinatensystem von Doom unterscheidet sich vom CSS-3D-System: Doom nutzt ein 2D-System, in dem Y nach Norden zunimmt, während bei CSS Y nach oben zeigt und Z auf den Betrachter zu. Die Transformation erfolgt über translate3d(x, -z, -y). Benutzerdefinierte Eigenschaften sind in Doom-Koordinaten definiert, und CSS interpretiert sie.

Die Spielschleife in JavaScript verfolgt die Position des Spielers, Eingaben, Kollisionen und die KI der Gegner. Dies ist ein direkter Port des Originalcodes. Die Trennung ist strikt: JS aktualisiert nur Schlüssel-Eigenschaften wie --player-x, --player-y, --player-z, --player-angle. CSS bewegt die gesamte Welt relativ zum Spieler und simuliert damit eine Kamera (CSS hat keine Kamera). Bewegung und Blickrichtung sind lediglich Updates dieser vier Eigenschaften.

Es unterstützt die Ego-Perspektive mit der Option, zur Kartenübersicht zu wechseln.

Technische Details zum Szenenaufbau

Der Prozess beginnt mit dem Parsen der WAD-Datei: LineDefs, SideDefs und Sektorparameter werden extrahiert. Daraus werden div-Elemente mit der originalen Vertex-Geometrie generiert. CSS nutzt calc() für Berechnungen:

• Breite und Höhe der Elemente werden durch Sichtfeldwinkel und Distanz bestimmt.
• Transformationen berücksichtigen die Perspektive.

Beispiel für eine vereinfachte Struktur benutzerdefinierter Eigenschaften:

:root {
  --player-x: 0;
  --player-y: 0;
  --player-angle: 0;
}

.scene-element {
  width: calc(var(--doom-width) * var(--perspective-factor));
  height: calc(var(--doom-height) * var(--perspective-factor));
  transform: translate3d(
    calc(var(--doom-x)),
    calc(-var(--doom-z)),
    calc(-var(--doom-y))
  ) rotateY(var(--player-angle));
}

Dieser Ansatz sorgt für gute Performance: Der CSS-Renderer des Browsers optimiert 3D-Transformationen auf der GPU.

Vergleich mit anderen Experimenten

cssDoom setzt die Reihe unkonventioneller Doom-Ports fort. Zuvor entwickelte Adam Rice Doom Over DNS: Das Spiel läuft über Cloudflare-DNS-TXT-Records. Die WAD-Datei ist in ~1964 Records komprimiert und wird on the fly von einem PowerShell-Skript dekomprimiert. .NET-DLLs werden in den Speicher geladen, ohne auf die Festplatte zu schreiben. Dies demonstriert Protokollgrenzen, bleibt aber bei der visuellen Komplexität hinter cssDoom zurück.

| Aspekt | cssDoom | Doom Over DNS |

|-----------------|----------------------|---------------------|

| Rendering | CSS-3D-divs | Standard (Browser) |

| Logik | JS (Doom-Port) | PowerShell + .NET |

| Abhängigkeiten | Nur CSS/JS | DNS-Abfragen |

| Erreichbarkeit | GitHub | Öffentliche Cloudflare-Zone |

Wichtige Punkte

• Vollständiges Doom-Rendering in CSS: divs im 3D-Raum simulieren Raycasting.
• Benutzerdefinierte Eigenschaften + calc() für dynamische Transformationen aus WAD-Daten.
• Strenge Trennung von JS (Logik) und CSS (Darstellung) zur Optimierung.
• Anpassung der Doom-Koordinaten an CSS 3D durch Achseninversion.
• Open Source auf GitHub, GPLv2-Lizenz.

Das Projekt eignet sich hervorragend, um die Grenzen von CSS3 in der Spieleentwicklung zu erkunden, insbesondere Transform-Animationen und benutzerdefinierte Eigenschaften in Echtzeit-Anwendungen.

— Editorial Team