DOOM sur CSS ? Un programmeur fait rendre un tireur par le navigateur sans moteur graphique

Un programmeur des Pays-Bas a publié une version du tireur classique DOOM qui fonctionne sans moteur graphique. Tous les graphismes du jeu sont rendus via CSS, et le javascript ne gère que la logique, le mouvement du joueur et le comportement des monstres.

Le projet s'appelle cssDoom, et pour le créer, l'auteur a pris les fichiers WAD originaux de la version de 1993 et a transformé chaque élément de scène en blocs HTML, avec leur position dans l'espace définie via des transformations CSS. Le principal problème technique : CSS n'a pas de caméra, donc l'auteur a contourné cela avec un truc classique — le joueur ne bouge pas, c'est le monde entier autour de lui qui bouge. Le javascript passe quatre paramètres à CSS : les coordonnées X, Y, Z du joueur et l'angle de vue, et le moteur CSS déplace et fait pivoter toute la scène dans la direction opposée. Faire fonctionner DOOM sur divers appareils est une vieille nouvelle maintenant, mais le retravailler de cette manière est plus intéressant.

Le principal problème est que les navigateurs ne sont pas optimisés pour des milliers d'éléments transformés en 3D. De grandes cartes provoquent des plantages de Safari sur iOS, donc un système de culling a été ajouté : les éléments en dehors du champ de vision ou trop éloignés sont cachés. Il y avait un problème avec le ciel dans le jeu. Puisque le DOOM original triche et dessine la texture du ciel sur des murs 2D au-dessus de la vraie géométrie. En 3D honnête, ce truc ne fonctionne pas, et à travers les fenêtres, on peut voir des choses qui ne devraient pas être là.

Dans cssDoom, tous les neuf niveaux du premier épisode et cinq niveaux de difficulté sont disponibles. En plus de la vue à la première personne standard, il y a un mode où la caméra monte au plafond, ainsi qu'un mode de suivi à la troisième personne — et la position de la caméra y est entièrement calculée en CSS.

Le code source est sur GitHub et tout le monde peut jouer à la version navigateur.

Que pensez-vous — des expériences comme celle-ci ont-elles une utilité pratique au-delà de "CSS peut-il faire fonctionner DOOM ?" Ou est-ce juste un stunt technique qui n'affecte pas le développement réel ? Partagez vos réflexions dans les commentaires.