Doom en CSS : le moment où le web a officiellement pété un câble (et c’est fascinant)
Doom. En CSS. Oui, vraiment.
On l’a vu avec la version SNES, il y a une règle non écrite dans le monde tech : “Can it run Doom?”. Et visiblement, la réponse est désormais : oui… même en CSS. Oui, ce langage qu’on utilise normalement pour aligner des boutons et centrer des divs.
Un développeur, Niels Leenheer, s’est posé une question simple : jusqu’où peut aller le CSS moderne ? Et au lieu de faire une démo abstraite ou un benchmark inutile, il a choisi la méthode la plus directe possible : recréer Doom.
Résultat ? Un FPS jouable dans le navigateur… dont le rendu est assuré par du CSS.
Et là, clairement, on est sur un moment un peu surréaliste.
Ce que ça veut dire “Doom en CSS”
Quand on dit que Doom tourne en CSS, il faut être précis. Le jeu ne tourne pas uniquement en CSS. La logique (les déplacements, les collisions, les ennemis…) est gérée en JavaScript. Mais tout ce qui est rendu visuel — ce que vous voyez à l’écran — est géré par le CSS.
Concrètement, chaque mur, chaque sol, chaque objet du jeu est… un simple élément HTML.
Ces éléments sont ensuite positionnés dans un espace 3D grâce aux transformations CSS (transform, translate3d, etc.). Le navigateur fait ensuite le boulot de projection et d’affichage.
Autrement dit : on détourne complètement le rôle du CSS. Au lieu de styliser une page web, il devient un moteur de rendu 3D.
Comment on peut faire de la 3D avec… du CSS ?
À première vue, ça paraît absurde. Le CSS, ce n’est pas fait pour ça. Et pourtant, techniquement, il en est capable.
Depuis plusieurs années, CSS supporte des transformations 3D. On peut :
- déplacer un élément dans l’espace
- le faire pivoter
- gérer la perspective
- appliquer des filtres
En combinant tout ça, on peut créer une illusion de profondeur.
Dans ce projet, les données du jeu (positions, géométrie) sont injectées depuis JavaScript sous forme de variables. Ensuite, c’est le CSS qui calcule les transformations nécessaires pour afficher la scène.
C’est un peu comme si JavaScript donnait les coordonnées… et que le CSS faisait la trigonométrie.
Et c’est là que ça devient intéressant.
Un moteur 3D… sans WebGL
Normalement, pour faire de la 3D dans un navigateur, on utilise WebGL ou WebGPU. Ce sont des technologies pensées pour exploiter le GPU, avec des performances optimisées.
Ici, rien de tout ça.
On utilise le moteur de rendu du navigateur. Celui qui sert à afficher des pages web. Et on le pousse dans ses retranchements.
Résultat : ça fonctionne… mais ce n’est clairement pas optimisé pour ça. Certains développeurs parlent même de performances en O(N²) dans certains cas, notamment à cause des calculs d’intersections et de transparence.
Traduction simple : plus il y a d’éléments, plus ça devient vite lourd.
Et pourtant… ça reste jouable.
Une démo technique… mais aussi un message
Ce projet n’est pas là pour remplacer Unity ou Unreal. Personne ne va développer le prochain AAA en CSS.
Mais il montre quelque chose de beaucoup plus intéressant : jusqu’où le web a évolué.
Le CSS, à la base, est un langage déclaratif. Il sert à décrire le style d’une page. Pas à programmer. Et pourtant, avec les nouvelles fonctionnalités (variables, fonctions mathématiques, conditions…), il commence à ressembler de plus en plus à un langage… programmable.
Certains vont même jusqu’à dire que CSS devient “Turing-complet” dans certains cas extrêmes.
Et Doom en CSS, c’est un peu la preuve ultime que la frontière est en train de bouger.
Le web devient une plateforme d’exécution complète
Ce genre de projet montre une chose très claire : le navigateur est devenu une vraie plateforme.
Avant, on avait :
- HTML → structure
- CSS → style
- JS → logique
Aujourd’hui, les frontières sont floues.
CSS fait des calculs. JavaScript manipule le rendu. Le navigateur orchestre tout ça comme un mini système d’exploitation.
Et au final, on se retrouve avec un FPS qui tourne sans moteur graphique classique.
C’est à la fois absurde… et génial.
Est-ce que c’est une bonne idée ? Pas vraiment. Est-ce que c’est incroyable ? Complètement.
Soyons honnêtes : utiliser CSS pour faire de la 3D, ce n’est pas la bonne approche pour un vrai projet. C’est lent, compliqué, et difficile à maintenir.
Mais ce n’est pas le but.
Le but, c’est de pousser les limites. De comprendre ce qui est possible. Et de montrer que même un outil qu’on pense maîtriser peut encore surprendre.
Et dans ce cas précis, le résultat est clair :
le web est beaucoup plus puissant qu’on ne le pense.
Doom n’est qu’un prétexte
Au fond, Doom n’est qu’un symbole. C’est le benchmark ultime du monde geek. Si ça peut faire tourner Doom, c’est que c’est sérieux.
Mais ici, ce n’est pas Doom qui est intéressant.
C’est le fait qu’il tourne… là où il ne devrait pas.
Et ça pose une vraie question :
si on peut faire ça avec du CSS…
qu’est-ce qu’on sous-estime encore aujourd’hui dans le web ?
