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.

March 13, 2026 - 20:32 UTC

34
78
2822
Surely you've heard of Wolfensvelte 3D?
github.com/snuffyDev/Wolfensvelte-3D
0
0
2
@thebertful.bsky.social e @hugoanjos.bsky.social
2
0
0
Gosto que a galera nunca perde a dedicação há anos
0
0
2
Não consigo nem conceber o trampo que foi isso
0
0
1
whut
0
0
0
www.electronjs.org/docs/latest/
0
0
0
😍 My favorite game in … 1994. 🫠☠️
0
0
2
it feels so uncomfortable to be seeing this without the weird distance rendering artefacts
0
0
4
overcursed
0
0
2
🤯
0
0
1
@ravarcheon.com revisit your 3D CSS project NOW.
1
0
1
its so scuffed i fucked up the quaternions and the code is sooooo messy
0
0
2
this was like being injected with my own childhood
0
0
0
I mean 3D cameras are just a matrix to make it faster to translate, rotate and scale the world around the camera/world center.
0
0
4
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!
2
0
160
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.
2
0
143
Cool!
0
0
0
Doom this and Doom that.
Let me know when you get Star Wars Jedi Knight: Mysteries of the Sith running on a TI-Nspire CX II Graphing Calculator.
0
0
0
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
0
0
8
put the neurons trained to play doom in this false prison for double torment
0
0
8
0
0
18
This is pure magic! Just when I thought we ran out of things to port Doom to, here we are lol
1
0
3
Next step is modding a console emulator into the Doom Engine, so we can run Doom while we run Doom.
0
0
4
This is incredible
0
0
3
Looks like I am not the only one working (secretly) on a CSS Doom project 😅

Are you managing to add enemies, interaction, etc later?
1
0
24
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/html5test.com/post/3me27rlegts2x
2
0
47
Amazing! Is there something in particular that landed to make this possible today, vs a year ago?
1
0
0
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.
1
0
8
Yeh css is fully off the chain now. I wonder how this could work with view transitions. There could be some really cool stuff coming when it all comes together.
0
0
0
Doom fully rendered in css
0
0
0
Not seeing the Fred the imp was disturbing.
1
0
1
Here he is. And thanks to a transform that uses the camera angle, it is always facing you.
1
0
6
what the doors don't even open??? sheesh!
2
0
5
and where's the classic door open sound! no monsters!!!
1
0
1
Good point. Need to add CSS transitions for that.
1
0
9
As someone who does not like working with js and CSS...this sounds horrifying
0
0
4
@othermaciej.bsky.social
0
0
0
0
0
4
Fucked up and evil css usage
0
0
0
Cameras are an illusion so it’s closer to the real thing than you think :)
0
0
21
Can't wait for this to happen with other 3D maps 👀
0
0
0
what manner of wizardry is this
1
0
0
easy mistake to make, but Wizardry is a different game
0
0
3
"Translate the scene around the user"

At last, we went full circle on 3d graphics. Nature is healing and all thatl
0
0
4
The future of AAA games looks bleak… In a shitty effort to make games cross platform they will use electron..
0
0
1
@stopskeletons.bsky.social
0
0
0