● Korben 📅 31/03/2026 à 08:24

Énergie & Environnement 👤 Korben

🏷️ Tags : rte

Un développeur fait tourner Doom dans un navigateur, avec du CSS et rien d'autre31 mars 2026 / PAR VINCENT LAUTIER / 3 MIN DE LECTURE / À lire plus tard SauvegardéCe qu’il faut retenirNiels Leenheer a porté Doom 1993 dans un navigateur en utilisant uniquement du CSS et du JavaScript : chaque élément du jeu (murs, ennemis, textures) est une div positionnée en 3D, sans WebGL ni Canvas.Le projet exploite des fonctions CSS modernes (hypot, atan2, clip-path, @property) pour gérer la trigonométrie, la caméra inversée et les animations complexes comme les portes et ascenseurs.Le rendu fonctionne mais reste limité en performances (plantages sur iOS, ralentissements sur gros niveaux), prouvant que le CSS moderne peut faire du 3D sans être une solution viable pour du rendu sérieux.Résumé généré par IANiels Leenheer a porté le mythique Doom de 1993 dans un navigateur web, mais sans WebGL ni Canvas. Tout le rendu 3D repose sur des div et des transformations CSS. Le résultat est jouable, open source, et un brin absurde. On adore.Doom en divLe principe est aussi fou qu'il en a l'air. Chaque mur, chaque sol, chaque tonneau et chaque ennemi est une balise div, positionnée dans l'espace 3D grâce aux transformations CSS. Le jeu lit les données du fichier WAD original de 1993, celui-là même qui contenait les niveaux du Doom d'id Software, et en extrait les coordonnées des murs, des secteurs et des textures.La logique du jeu, elle, tourne en JavaScript. Mais côté affichage, c'est 100 % CSS : pas de Canvas, pas de WebGL, pas de bibliothèque graphique. Juste des div, des calculs trigonométriques en CSS et des propriétés personnalisées.Pour simuler une caméra, le développeur a trouvé une astuce assez maline : plutôt que de déplacer le joueur dans la scène, c'est la scène entière qui bouge dans le sens inverse. Le CSS ne gère pas nativement la notion de caméra, du coup Leenheer a tout simplement inversé le problème.Des fonctions CSS qu'on ne soupçonnait pasLe projet exploite des fonctions CSS relativement récentes : hypot() pour le théorème de Pythagore, atan2() pour les angles de rotation, clip-path pour découper les sols en polygones complexes, et @property pour animer des propriétés personnalisées qui servent à gérer les portes, les ascenseurs et même la chute du joueur.Les ennemis utilisent des spritesheets classiques avec un effet de billboard, c'est-à-dire qu'ils font toujours face à la caméra. Les effets de lumière passent par un filtre brightness sur chaque secteur, et le fameux ennemi invisible Spectre utilise un filtre SVG pour reproduire l'effet de distorsion du jeu original.Leenheer a même ajouté un mode spectateur avec caméra libre, absent du Doom de 1993, et les calculs de positionnement de cette caméra reposent eux aussi sur les fonctions trigonométriques du CSS.Les limites du CSS poussé à fondLe jeu est jouable sur cssdoom.wtf, et le code source est disponible sur GitHub sous licence GPL 2. Par contre, les performances restent limitées. Sur Safari iOS, le jeu peut planter au bout de quelques minutes, et les gros niveaux font souffrir le navigateur.Leenheer le reconnaît lui-même : le projet ne remplacera jamais WebGL ou WebGPU pour du rendu 3D sérieux. Le but était avant tout de montrer jusqu'où le CSS moderne peut aller, et sur ce point, la démonstration est plutôt convaincante.C'est le genre de projet complètement absurde qui force le respect. Doom a déjà été porté sur à peu près tout ce qui contient un processeur, des calculatrices aux tests de grossesse, et voilà qu'il tourne maintenant dans une feuille de style.L'air de rien, ça montre que le CSS de 2026 n'a plus grand-chose à voir avec celui qu'on utilisait pour centrer un div il y a dix ans.Source : Huckster.ioRéférenceshttps://www.hackster.io/news/niels-leenheer-s-cssdoom-brings-everyone-s-favorite-1993-fps-game-to-cascading-style-sheets-css-f3f8b756bd4aCet article peut contenir des images générées à l'aide de l'IA - J'apporte le plus grand soin à chaque article, toutefois, si vous repérez une boulette, faites-moi signe !Vous avez aimé cet article ?Alors rejoignez ma communauté sur Patreon et accédez à des articles exclusifs, des tutos avancés et plein d'autres surprises que je réserve à mes soutiens. C'est grâce à vous que je peux continuer à partager ma passion depuis 20 ans !Rejoindre l'aventure Décuplez votre potentiel créatif avec les nouvelles offres o2switchContenu partenaireVous en avez assez d'être bridé par les restrictions de votre hébergeur actuel ? Il est temps de passer à la vitesse supérieure !Les nouvelles offres o2switch sont LA solution pour libérer enfin tout votre potentiel créatif.Avec l'offre Cloud à seulement 1,86 € HT/mois, profitez de 12 CPU Threads et 48 Go de RAM, de 42MB/s I/O, d'un espace disque illimité en NVMe, de 8 sous-comptes inclus pour gérer plusieurs sites, et d'une instance NextCloud 250Go. Le tout avec l'interface cPanel ultra intuitive, même si vous débutez !Et comme votre tranquillité d'esprit est primordiale, o2switch héberge vos données en France, avec un support prioritaire 24/7 N2 et des sauvegardes sur 45 jours. Antivirus ImunifyAV+ et TigerGuard veillent sur votre hébergement en temps réel. Cerise sur le gâteau : votre nom de domaine est inclus !Vous hésitez encore ? Trois offres s'adaptent à vos besoins : Grow à 7,00 € HT/mois, Cloud à 1,86 € HT/mois, ou Pro à 6,25 € HT/mois. C'est le moment de sauter le pas et de donner vie à tous vos projets !Découvrez les nouvelles offres o2switch

🔗 Lire l'article original 👁️ 1 lecture