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.

There is still a lot of Javascript, but... I think I can use custom properties to set the camera location, and define the location of each surface using css properties and then let CSS handle the calculation of the transform. We have cos, sin and tan now in CSS!

Did find a rendering bug in Chrome though. Rendering is extremely glitchy and non deterministic. Ceilings and floors disappear seemingly random. Firefox and Safari are flawless.

Please file a crbug!

Haha, I will.

And then link it here so we can 👀