Show HN: A CSS 3D Engine (no WebGL)

madrox 79 days ago |

Over a weekend about a decade ago, I toyed with making a Final Fantasy Tactics-like game in the browser using CSS for the renderer. I could not get it to work in the time I gave it. I realized too late I needed to make some abstractions and stop trying to manipulate CSS directly.

Which is a long way of saying I appreciate how challenging this probably was to figure out. I love stuff like this.

Rohansi 79 days ago |

But why not use WebGL? It's widely available, more efficient, and can render at a much higher quality.

https://polycss.com/gallery/?model=2843066616

https://threejs.org/examples/#webgl_animation_multiple

rofko 79 days ago | |

Hi there! This is not trying to be a three.js replacement, scenes with huge polygon counts naturally should render in canvas.

For me, the interesting case is smaller low-poly or voxel scenes where loading a full 3D stack may be overkill, and where keeping the scene in DOM/CSS gives you easier integration with normal layout, styling, events, etc. Once you have the HTML, you don't even need to load the library to render a static model.

Also, part of the experiment is testing the browser’s limits and getting a clearer sense of where this approach works, where it breaks down, and what the tradeoffs are.

Cheers!

woodrowbarlow 79 days ago | | |

ha, so you could run this on the server and send down a page with no javascript at all? (with, i assume, a static camera only.) that's fun. i mean, you could also just render the model to an image at that point, but still, this is neat.

semolino 79 days ago | | |

You can have a dynamic camera with 3D CSS only and no JS. The trick is move the scene instead of the "camera". CSS Doom uses this technique (although unlike the project I'm working on, it relies heavily on JS for the interaction logic).

capitainenemo 79 days ago | | |

Then there's "minecraft in CSS" which uses invisible form elements for camera rotation and works with no JS at all.

https://benjaminaster.com/css-minecraft/

It's been on HN before ( https://news.ycombinator.com/item?id=44100148 )

apresmoi 79 days ago | | |

Yes, you can render on server and if you include CSS transitions/animations, you get an animated 3d render without the need for JS !

We haven't built it yet, but its on the roadmap

Rohansi 79 days ago | | |

I'm all for experimentation but getting rid of JS in this case almost certainly results in worse performance. You're trading a bit of load time for significantly slower runtime/rendering.

capitainenemo 79 days ago | | |

Huh.... why would a CSS animation of a transform be slower than JS? This is strictly for the "CSS transform" case ofc - obviously pure webgl would be way faster.

I'm having a hard time seeing it. My experiments with CSS animation have always performed much better in CSS than JS (again, excluding it being pure webgl/canvas JS).

And ofc there's the nice bonus that it works if I haven't chosen to trust and whitelist their website for JS yet.

socalgal2 79 days ago | |

Same thought. Even that simple Apple on the front pages runs < 60fps on my M1 Mac. Rendering 3D objects with CSS is like rendering Doom in Excel Cells. Yes, you can do it. No you should not do it except as a joke/curiosity.

tomaytotomato 79 days ago |

Always thought it would be cool to make an RTS or simple city builder game in the browser.

Would you recommend this for hacking around or not?

blueboo 79 days ago | |

I think the answer is no, as this is a creative repurposing of css3d as a basis for a general 3d engine. That lets you put web content everywhere, even on the triangles of your teapot. Cool, but extravagant

Whereas THREE.js or webgl is purpose-built for realtime animated 3d scenes.

apresmoi 79 days ago | |

What about https://terra.layoutit.com

thih9 79 days ago | |

It’s a wide range from an RTS to a simple city builder. I’d say “no” for the former and “maybe” for the latter. Perhaps try it for a couple of hours and see whether you like it or not.

1taimoorkhan0 79 days ago |

The per-polygon DOM events are what make this more than a trick. Getting click handlers on individual faces in WebGL means raycasting. Here it's just onClick. For certain use cases that's the whole argument.

cush 79 days ago |

I give it 15 minutes before someone on here ports Doom

bryanrasmussen 79 days ago | |

https://github.com/NielsLeenheer/cssDOOM

tajoma 79 days ago |

This reminds me of the 3D maps in corru.observer, which also only used CSS transforms

luckykiddie 79 days ago |

It's cool. The performance is good but why not use WebGL, any reason?

Panzerschrek 78 days ago |

Does it support per-pixel depth test? Or it just sorts polygons?

tengbretson 78 days ago |

Is this inspired by the old famo.us work?

sgm1018 79 days ago |

wow thats cool