Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

github.com

Post reply on HN
Print view View original

21–29 of 29 posts

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

#21

Post by apresmoi »

capitainenemo wrote: post #18
Rohansi wrote: post #14

Earlier quoted context omitted.

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.

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 the…

That is a good observation, being able to do a 3D animation only with HTML+CSS means that it works on js blocked websites!

Of course that the animations won't map to all the animations you can manage with js.

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

#22

Post by madrox »

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.

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

#23

Post by capitainenemo »

Rohansi wrote: post #20
capitainenemo wrote: post #18

Earlier quoted context omitted.

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 the…

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 (13 fps) https://threejs.org/examples/#webgl_animation_skinning_morph (60 fps)

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"

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

#24

Post by Rohansi »

capitainenemo wrote: post #23
Rohansi wrote: post #20

Earlier quoted context omitted.

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 (13 fps) https://threejs.org/examples/#webgl_animation_skinning_morph (60 fps)

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" opt…

It's like transcoding a video into a GIF so that it can render everywhere. It will probably work but it's not really a serious option.

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

#29

Post by capitainenemo »

Rohansi wrote: post #24
capitainenemo wrote: post #23

Earlier quoted context omitted.

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" opt…

It's like transcoding a video into a GIF so that it can render everywhere. It will probably work but it's not really a serious option.

well, people do in fact still do that. or APNG or WEBP. But, all I was focused on was the initial comment was on if you were going to use this particular tool, it'd be nice if it had a pure CSS rotate mode, which makes a fair amount of sense given "working without JS" is probably one of the few significant use cases anyway (unless, you reeeeeally need your model to be tightly integrated into the DOM for some reason).

So, saying that CSS would be worse than JS as a feature for this project did not really make sense. We weren't talking about "should the project even exist" (I feel it should and it's awesome ;) )

Post reply on HN