CSS Doom : rendu du jeu sans Canvas

# Doom en pur CSS : Rendu sans Canvas ni WebGL

Le développeur Niels Lehner a publié le projet cssDoom — une implémentation complète du jeu classique Doom, où tous les graphismes sont rendus uniquement à l'aide de CSS. La logique du jeu est implémentée en JavaScript, sans utiliser canvas ni WebGL. Il utilise le code source original de Doom d'id Software, disponible dans des fichiers WAD. Le projet est hébergé sur GitHub sous licence GPLv2.

Tous les éléments visuels — sprites, murs texturés, niveaux, effets — sont formés à partir d'éléments div. Ils sont positionnés dans un espace 3D à l'aide des propriétés CSS transform et transform-style: preserve-3d. JavaScript n'interfère pas directement avec les styles : il définit plutôt des propriétés CSS personnalisées basées sur la géométrie des sommets issue du fichier WAD. CSS calcule indépendamment la largeur, la hauteur et les transformations en utilisant des fonctions trigonométriques.

Adaptation des coordonnées et boucle de jeu

Le système de coordonnées de Doom diffère de celui du CSS 3D : Doom utilise un système 2D où Y augmente vers le nord, tandis qu'en CSS Y pointe vers le haut et Z vers le spectateur. La transformation est implémentée via translate3d(x, -z, -y). Les propriétés personnalisées sont définies en coordonnées Doom, et CSS les interprète.

La boucle de jeu en JavaScript suit la position du joueur, les entrées, les collisions et l'IA des ennemis. Il s'agit d'un portage direct du code original. La séparation est stricte : JS ne met à jour que les propriétés clés comme --player-x, --player-y, --player-z, --player-angle. CSS déplace l'ensemble du monde par rapport au joueur, simulant une caméra (CSS n'en possède pas). Les mouvements et la vue ne sont que des mises à jour de ces quatre propriétés.

Il prend en charge la vue à la première personne, avec l'option de basculer vers la vue d'ensemble de la carte.

Détails techniques de la construction de la scène

Le processus commence par l'analyse du fichier WAD : les définitions de lignes, les définitions de côtés et les paramètres de secteurs sont extraits. Des éléments div sont générés à partir d'eux avec la géométrie des sommets originale. CSS utilise calc() pour les calculs :

• La largeur et la hauteur des éléments sont déterminées par les angles du champ de vision et la distance.
• Les transformations tiennent compte de la perspective.

Exemple de structure simplifiée de propriétés personnalisées :

: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));
}

Cette approche garantit les performances : le moteur de rendu CSS du navigateur optimise les transformations 3D sur le GPU.

Comparaison avec d'autres expériences

cssDoom poursuit la lignée des ports de Doom non conventionnels. Précédemment, Adam Rice a développé Doom Over DNS : le jeu s'exécute via des enregistrements TXT DNS de Cloudflare. Le fichier WAD est compressé en ~1964 enregistrements et décompressé à la volée par un script PowerShell. Les DLL .NET sont chargées en mémoire sans écriture sur disque. Cela démontre les limites du protocole mais reste en deçà de cssDoom en complexité visuelle.

| Aspect | cssDoom | Doom Over DNS |

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

| Rendu | div CSS 3D | Standard (navigateur) |

| Logique | JS (port Doom) | PowerShell + .NET |

| Dépendances | Seulement CSS/JS | Requêtes DNS |

| Accessibilité | GitHub | Zone Cloudflare publique |

Points clés

• Rendu complet de Doom en CSS : des div en espace 3D simulent le raycasting.
• Propriétés personnalisées + calc() pour des transformations dynamiques à partir des données WAD.
• Séparation stricte entre JS (logique) et CSS (visuels) pour l'optimisation.
• Adaptation des coordonnées Doom au CSS 3D via inversion des axes.
• Open source sur GitHub, licence GPLv2.

Le projet est utile pour étudier les limites de CSS3 dans le développement de jeux, en particulier les animations transform et les propriétés personnalisées dans des scénarios en temps réel.

— Editorial Team