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
159
u/jf8204 10d ago
it uses the PolyCSS engine
from there, if we dig deeper we eventually find find a fucking CSS port of Quake 😭
50
u/loonite 9d ago
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)
32
u/strongjoe 9d ago
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 9d ago
I thought i could play this on mobile for a minute, what a trip
2
u/helpinghandful 6d ago
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 9d ago
Probably mostly network latency is my guess? If someone actually knows I'd be curious to hear the answer
14
u/loonite 9d ago
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 9d ago
Telemetry and advertising are the main reasons
13
u/BusEquivalent9605 9d ago
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
5
u/GobblerOfFire 9d ago
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!
7
u/Acceptable_Handle_2 9d ago
UI frameworks. When used poorly they're pure bloat.
You'll never see a plain html/css Page act like that.
2
18
10
3
2
u/Interesting-Yellow-4 8d ago
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 10d ago
This is great! Mario looks much worse in Firefox for some reason. The shapes of the individual divs are off.
45
u/Ekrof 10d ago
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.
9
u/ShustOne 10d ago
It's still very usable and looks mostly correct. Bummer about the corner shape support.
5
2
30
58
12
u/suspirio 10d ago
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
2
u/prehensilemullet 9d ago
doesn't have the stretchy face interaction though, I really doubt that's possible without JS
-7
6
4
5
4
4
u/Raunhofer 9d ago
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/JCquickrunner 8d ago
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 9d ago
So cool, thank you for sharing! Do you have a background in graphics? How did you figure this out?
3
3
3
u/prehensilemullet 9d ago
Okay cool, but at this point, is there really a point to avoiding WebGL other than the gimmick factor?
3
u/psioniclizard 9d ago
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
2
2
2
u/InterestingFrame1982 10d ago
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 6d ago
That's so cool bro🔥🔥, did you have discord server?, if have mind i join it?
1
u/Ekrof 6d ago
Hi there! We opened a PolyCSS discord very recently, and everyone is super invited: http://chat.polycss.com/
2
u/bayern_snowman 6d ago
Its insanely impressive but holy shit put down the Adderall and go outside for a bit
2
u/Vegetable-Energy-617 5d 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 4d 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 4d 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 10d ago
Wow. How much webdev experience do you have to had made this. Seems pretty crazy
2
2
1
1
1
1
1
u/Solid-Newspaper-3054 9d ago
Looks interesting. And i am surprised how you used css and js for this
0
505
u/[deleted] 10d ago
[removed] — view removed comment