A developer built a fully playable DOOM renderer using only CSS for rendering, with JavaScript handling only the game loop. Every wall, floor, sprite, and enemy is a <div> positioned in 3D space using CSS transforms. The project showcases advanced CSS features including 3D transforms with trig functions (hypot, atan2, sin, cos), @property for animatable custom properties, clip-path with shape() for irregular polygon floors, SVG filters for the spectre invisibility effect, anchor positioning for the responsive HUD, and a type-grinding hack for pure-CSS culling. Key architectural decisions include passing raw DOOM coordinates as CSS custom properties and letting CSS compute geometry, moving the world instead of a camera, and using CSS transitions/animations for doors, lifts, and projectiles. The post details browser bugs encountered in Safari and Chrome, performance limitations requiring manual culling, and depth-sorting challenges with coplanar surfaces.
Table of contents
Back to high schoolThe coordinate problemMoving the world, not the cameraFloors are divs, tipped sidewaysLining up all of those texturesAnimating doors, lifts, and @propertySprite animations and the mirror trickProjectiles, explosions and bullet puffsLighting with filter: brightness()Invisible Spectres and SVG filtersResponsive DOOM and anchor positioningSpectator viewThe culling problemDepth sortingWhere DOOM just cheatsWas it worth it?6 Comments
Sort: