3 ms·

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://po

by Rohansi 5mo 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://polycss.com/gallery/?model=2843066616 https://threejs.org/examples/#webgl_animation_multiple https://threejs.org/examples/#webgl_animation_multiple

socalgal2 5mo 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.
rofko 5mo 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 5mo 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.
  - apresmoi 5mo 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 5mo 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 5mo 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.
        Rohansi 5mo ago
        I meant slower vs. WebGL rendering, which requires JS. Each triangle is rendered as a DOM node. There can be thousands of triangles in a single model. The gallery has been updated with more models. Compare the same model in PolyCSS vs. Three.js: https://polycss.com/gallery/?model=205023689 https://polycss.com/gallery/?model=205023689 (13 fps) https://threejs.org/examples/#webgl_animation_skinning_morph https://threejs.org/examples/#webgl_animation_skinning_morph (60 fps)
        capitainenemo 5mo ago
        Oh. Sure, that is pretty obvious. A triangle in webgl is so much more lightweight than building it out of DOM elements but this was more about "if one is going to use this CSS system, why not support a pure CSS viewing mode" - which right now, it does not - rotation requires JS and is pretty stuttery. I was thinking it should actually be a bit smoother if there was a "toggle on/off rotation using a CSS animation" option. Plus, something like that could easily be done in pure CSS if JS was disabled, which would make the output all the more accessible and offer a good usecase. It could also be helpful in scenarios where JS is restricted - emails? iframes? bulleting board user content? Dunno. Trying to come up with some that aren't just "nemo was running umatrix and doesn't trust your site just yet"
  - semolino 5mo 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 5mo 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/ https://benjaminaster.com/css-minecraft/ It's been on HN before ( https://news.ycombinator.com/item?id=44100148 https://news.ycombinator.com/item?id=44100148 )

by Rohansi 5mo ago

socalgal2 5mo 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.

rofko 5mo 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 5mo 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.
- apresmoi 5mo 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 5mo 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 5mo 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.
      - Rohansi 5mo ago
        I meant slower vs. WebGL rendering, which requires JS. Each triangle is rendered as a DOM node. There can be thousands of triangles in a single model. The gallery has been updated with more models. Compare the same model in PolyCSS vs. Three.js: https://polycss.com/gallery/?model=205023689 https://polycss.com/gallery/?model=205023689 (13 fps) https://threejs.org/examples/#webgl_animation_skinning_morph https://threejs.org/examples/#webgl_animation_skinning_morph (60 fps)
        capitainenemo 5mo ago
        Oh. Sure, that is pretty obvious. A triangle in webgl is so much more lightweight than building it out of DOM elements but this was more about "if one is going to use this CSS system, why not support a pure CSS viewing mode" - which right now, it does not - rotation requires JS and is pretty stuttery. I was thinking it should actually be a bit smoother if there was a "toggle on/off rotation using a CSS animation" option. Plus, something like that could easily be done in pure CSS if JS was disabled, which would make the output all the more accessible and offer a good usecase. It could also be helpful in scenarios where JS is restricted - emails? iframes? bulleting board user content? Dunno. Trying to come up with some that aren't just "nemo was running umatrix and doesn't trust your site just yet"
- semolino 5mo 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 5mo 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/ https://benjaminaster.com/css-minecraft/ It's been on HN before ( https://news.ycombinator.com/item?id=44100148 https://news.ycombinator.com/item?id=44100148 )