For clarity, I have not rebuilt DOOM in CSS...yet.
No this is far simpler:
rendering the output of DOOM
into a single div
using a single backgro...
For further actions, you may consider blocking this person and/or reporting abuse
This is great! One little suggestion: Add
user-select: none;to the controls.Ahhh, I should have tested it more on mobile, added, hopefully that fixes it!
Awesome
Awesome
As always, amazing work!
Replacing the OLED display with CSS
Haha, maybe we should be rendering games and tv shows in CSS gradients to take, full advantage of OLEDs :-P
"James Cameron, hear me out, Avatar 5... in CSS"
🤣💗
How else are we going to max those lch() colors?
this is so fun haha, love seeing people push css to the absolute limit for no reason except curiosity
No reason? Are ytou trying to say that you don't think it would be a good idea to render a whole website using CSS gradients? :-P
Haha no I'm not saying that. More of a joke.
I'm a big fan of gradients :)
Awesome
This is hilarious and honestly the amount of browser abuse here cracks me up. anyone else ever dig way too deep just because youre curious?
Literally my whole back catalogue is me digging too deep! hahahaha 💗
Do you think the CSS gods stay inline because they too live in fear of what they've created?
Seriously, so so so so impressive. You're nothing short of a maestro 🔮
Haha thanks, pretty sure the CSS Gods are scared of their own creation with the new Houdini stuff, the stuff we can do with that is just scary (and fun!). 💗
hehe tops
Cool! But, um, doesn't that basically just make this a filter for DOOM?....
Not quite, we are rendering the image with CSS, not adjusting it (other than the resizing before we render it).
You really made my browser sweat but I love it! Pretty sure CSS was never meant to handle this much chaos, but now I want to see what breaks first - the GPU or my patience.
Haha, I should have added a discalimer "warning, I will not be responsible for loss of GPU or fires on your PC when running this demo!" 🤣💗
insane seeing doom run like that in a single div, honestly stuff like this always makes me wonder - you think messing with limits like this actually teaches more than just following tutorials?
I think you learn things more deeply doing stupid stuff, as to do something that is not normal means you have to work out the solution yourself plus understand all the fundamental parts of whatever you are playing with to know where you can push the boundaries / combine things in unexpected ways.
I don't think I would learn the same depth from tutorials (not that tutorials are bad though, just different purpose!)
I hope you had fun with this one!
Also, let me know if you have never dealt with image data from a canvas before and the tutorial was useful (or not 😱)! 💗
Nice post!
Hope to learn more about this from you.
This is awesome. I always love your articles, keep it up!
Awww thanks! 💗
honestly this kinda stuff feels like magic to me, love seeing how folks break things down to make it possible. you ever find yourself just sucked into a problem so deep you forget how weird it is?
Honestly, I love seeing web tech pushed this far just for the fun of it. Did you notice any major differences in performance across browsers while testing this?
Not really, firefox was a little more stressed at higher resolutions but as everything else uses chromium under the hood they all performed pretty much the same.
To be fair, I just did a "does it look jerky" manual look, never did any true performance checking. Feel free to steal my stuff and up the resolution and do some browser comparisons, would be pretty cool to see which are faster with CSS gradient parsing / massive CSS file parsing! 💗
Bro, this is bonkers level stuff - I never would've thought to do doom with just CSS.
DOOM can truly run on anything
Doom using Supabase next? 💗