Comment by Rohansi
2 hours 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.
2 hours 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.
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.
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)
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.