Post

DOOM fully rendered in CSS. Every surface is a <div> that has a background image, with a clipping path with 3D transforms applied. Of course CSS does not have a movable camera, so we rotate and translate the scene around the user.

Amazing! Is there something in particular that landed to make this possible today, vs a year ago?

No, I don’t think so. Most of the complexity is actually in JavaScript with parsing the WAD file and calculating the positions of each DOM element. I do want to offload some of those calculations to CSS now that we have Math functions. Just because we can.

The only CSS feature that is a relative new addition is using clip-path for ceilings and floors, because they are not rectangles shapes.

Nice! Incredible work

Thanks! I've now also implemented the CSS math and it works flawlessly. I just feed in the player location from the game loop as CSS properties and the whole scene renders around it. All completely in CSS.