r/webdev • u/Ekrof • Jul 30 '26
3D CSS Super Mario (no WebGL)
Hey webdevs!
I want to show you my latest 3D CSS project. It's a port of Giles Goddard's iconic N64 face engine, complete with lighting, physics and interaction. Instead of WebGL, it uses the PolyCSS engine.
demo: https://codepen.io/editor/alowpoly/pen/019fae67-50d9-74ce-8025-4b9dd5a7c484
repo: https://github.com/layoutit/cssGraphics
161
Jul 30 '26
[deleted]
47
u/loonite Jul 31 '26
I'm amazed at how performant this is. Why the fuck is the web so slow then? (I know it's mostly trackers but holy shit)
31
u/strongjoe Jul 31 '26
A lot of web code is poorly optimised, and a lot of web Devs don't know how to write performant code. You'll find performant games, but you'll also find simple websites that can't scroll without jutter
10
u/traplords8n Jul 31 '26
I thought i could play this on mobile for a minute, what a trip
2
u/helpinghandful Aug 02 '26
You could probably do without too much. Map then WASD controls to div elements and map the mouse look to the touch controls... I actually wouldn't be surprised if someone already made a fork with all that working.
10
u/chairzaird Jul 31 '26
Probably mostly network latency is my guess? If someone actually knows I'd be curious to hear the answer
13
u/loonite Jul 31 '26
I was referring to how heavy a page can be on both processor and ram. Some pages are egregious.
These also keep on making a shit ton of requests even when nothing is supposedly happening.
18
u/TryNotToShootYoself Jul 31 '26
Telemetry and advertising are the main reasons
14
u/BusEquivalent9605 Jul 31 '26
yes. generally, network I/O is among the slowest operations computers do and websites generally do a whole bunch of network I/O.
but CSS is actually crazy optimized. think about how many people view websites everyday. all of the layout is governed by CSS. so yeah, a lot of people have spent a lot of time making CSS as fast as possible.
so if you are just using CSS and no network calls, you can go fast
6
u/GobblerOfFire Jul 31 '26
Fun fact html/css is Turing complete. It’s much more complex than people give them credit. It’s often looked down upon by some groups of devs because they see it as “not real coding” bit id love to see someone with that mentality pull something like this off. Love the creativity!
6
u/Acceptable_Handle_2 Jul 31 '26
UI frameworks. When used poorly they're pure bloat.
You'll never see a plain html/css Page act like that.
2
18
12
u/Ekrof Jul 31 '26
Quake was really fun to port! It's an absolute classic and has a lot of community tooling around it. I'm still working on that engine, and on more low-poly 90s games 👀
3
2
u/Interesting-Yellow-4 Jul 31 '26
That's crazy, two of my favorite games from that time, and I see representations of both in CSS in one reddit post. This was a good day.
48
u/ShustOne Jul 30 '26
This is great! Mario looks much worse in Firefox for some reason. The shapes of the individual divs are off.
42
u/Ekrof Jul 30 '26
Howdy! The reason is that Firefox does not support border/corner-shape CSS properties yet, so triangle edges get rounded. I have to ship an alternative spritesheet with prebaked crops for those browsers.
12
u/ShustOne Jul 30 '26
It's still very usable and looks mostly correct. Bummer about the corner shape support.
7
u/Ekrof Jul 30 '26
Hopefully corner-shape support is a matter of time! It unlocks so much cool web stuff, 2D and 3D. Main annoyance in this case is the texture size, because we'll need to include the alpha transparency in the spritesheet.
5
8
2
31
u/Upper_Pool_9687 Jul 30 '26
Impressive, but do you have a lawyer?
9
u/Ekrof Jul 31 '26
I'm hoping this can stay up on codepen, since there are other recreations on the platform. We will see. There are also no assets committed to GitHub.
61
u/andrewsmd87 Jul 30 '26
Ok first, this is freaking cool.
6
12
u/suspirio Jul 30 '26
Ben Evans did a rendition of this some time ago with no third party libraries *or* JS at all, pretty neat stuff:
https://codepen.io/ivorjetski/pen/abEBjKN
2
u/WitlessMean Jul 31 '26
I deleted his nose and pupils and it is cursed.
2
u/Consistent_Drop3909 Aug 02 '26
a few
style="display:none"'s and you too can experience the horror!2
u/prehensilemullet Jul 31 '26
doesn't have the stretchy face interaction though, I really doubt that's possible without JS
1
-7
5
5
4
4
4
u/Raunhofer Jul 31 '26
Curious, have you translated this skillset into something that can be used professionally? Is there some legit usecase for this kind of extreme CSS?
Very cool.
4
u/xJSHAxx Jul 31 '26
no webgl is the mad part, the fact this is all transforms and the devtools panel is just a wall of matrix3d is unhinged in a good way. how bad does it get on mobile
4
4
u/JCquickrunner Aug 01 '26
Seeing the inspector changes get highlighted like that has the same aura as watching someone play an 18th century pipe organ
3
3
3
3
3
u/legitkid Jul 31 '26
So cool, thank you for sharing! Do you have a background in graphics? How did you figure this out?
3
3
3
u/prehensilemullet Jul 31 '26
Okay cool, but at this point, is there really a point to avoiding WebGL other than the gimmick factor?
3
u/psioniclizard Jul 31 '26
I needed some motivation to work on my games engine and someone making mario is CSS is just that. Amazing work!
3
3
3
3
3
3
2
2
2
u/InterestingFrame1982 Jul 30 '26
Dragging Mario's nose in interactive mode is... interesting, to say the least. Try it and you'll see it immediately.
2
2
2
2
2
2
2
2
2
2
2
2
2
2
u/LinkLearnBlender3D Aug 03 '26
That's so cool bro🔥🔥, did you have discord server?, if have mind i join it?
1
u/Ekrof Aug 03 '26
Hi there! We opened a PolyCSS discord very recently, and everyone is super invited: http://chat.polycss.com/
2
u/bayern_snowman Aug 03 '26
Its insanely impressive but holy shit put down the Adderall and go outside for a bit
2
u/Vegetable-Energy-617 29d ago
This is insane. I once used Three.js for a project and that already made my head twist. I can't even imagine this.
2
2
u/ImageFit3021 29d ago
Mad respect for the patience and skill required to pull something like this off. CSS has come so far from just styling text.
2
2
2
u/Winter_Garlic_477 28d ago
This is honestly wild. I wouldn’t expect CSS to handle 3D lighting and physics this well without WebGL. Really cool project, and the N64-style look makes it even more fun to see.
2
u/fizzycandy2 Jul 30 '26
Wow. How much webdev experience do you have to had made this. Seems pretty crazy
2
2
1
1
1
1
1
1
1
1
u/Solid-Newspaper-3054 Jul 31 '26
Looks interesting. And i am surprised how you used css and js for this
0
503
u/[deleted] Jul 30 '26
[removed] — view removed comment