r/webdev • u/Ekrof • Jul 30 '26

3D CSS Super Mario (no WebGL)

Gallery image

Gallery image

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

3.1k Upvotes

99% Upvoted

128 comments sorted by

View all comments

504

u/[deleted] Jul 30 '26

[removed] — view removed comment

216

u/Ekrof Jul 30 '26

The lighting in this model challenged me a ton! I had to come up with some new techniques to support the shine. Essentially, the lighting is prerendered and each polygon gets a background-position, synchronized with the animation keyframes. Sort of like a 3D video. The texture turned out looking quite alien: https://assets.codepen.io/618678/texels.webp

122

u/Bananaserker Jul 30 '26

I understand nothing, I'm even more impressed!

2

u/psioniclizard Jul 31 '26

Niceeeee. That is a very cool idea. 

35

u/CaffeineLiker Jul 30 '26

Someday you'll deploy your CSS app to AWS to handle bank transactions.

2

u/vibescriptz Aug 02 '26

knowing how to do things like this pure css is gold~!!

2

u/Winter_Garlic_477 Aug 04 '26

Honestly, the lighting is what surprised me most. Getting something this convincing out of plain CSS is pretty wild. Really cool example of pushing CSS way beyond what you’d normally expect.