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.
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.
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.
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.
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.
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
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!
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.
5 replies →
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.
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?
What about https://terra.layoutit.com
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.
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.
This reminds me of the 3D maps in corru.observer, which also only used CSS transforms
I give it 15 minutes before someone on here ports Doom
https://github.com/NielsLeenheer/cssDOOM
wow thats cool