Post

Niels Leenheer
@html5test.com

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.

800 reposts2.7K likes

Niels Leenheer
@html5test.com

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.

CSS by T. Afif
@css-only.dev

Looks like I am not the only one working (secretly) on a CSS Doom project 😅 Are you managing to add enemies, interaction, etc later?

Niels Leenheer
@html5test.com

I had a lot of code lying around from my DOOM on a oscilloscope experiment. So this was relatively “easy”. So most of the hard work was already done. But yes. Enemies. Doors. Animating textures. But what I really want to do is use as much CSS math as possible. bsky.app/profile/html...

Niels Leenheer@html5test.com

So I build an oscilloscope emulator in the browser, so I could continue my little project while my old scope got repaired. That took a while. So I bought 5 other antique scopes. I now have 6. None of them work quite right. But at least I am having fun.

CSS by T. Afif
@css-only.dev

The trickiest part would be a CSS-only keyboard movement. That's what I am working on. I found a few ways to have basic movements but to move freely in a 3D scene is too complex to achieve 😫 (maybe you will find some ideas) For now, I am stuck with 2D games 👇 😆

CSS by T. Afif@css-only.dev

Ready for the first cool demo of the year? A mini Mario world with keyboard control. Yes, you can move Mario and also jump! 👀 Demo: codepen.io/t_afif/full/... via @codepen.io ✔️ 100% CSS Magic ✔️ Minimal HTML ❌ 0% JavaScript A Chrome-only experimentation using modern CSS.

Crabmeat
@crabme.at

This would probably be really cool to see on Doom custom map websites, being able to rubberneck a map or two instead of just screenshots

Niels Leenheer
@html5test.com

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!

Niels Leenheer
@html5test.com

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.