No WebGL, no <canvas>, just simple CSS. Web developers should really learn how to combine CSS effects because the heavy WebGL/WASM rendering is often complete overkill and an unnecessary battery drain.
I also notice that on older devices, CSS animations/transitions/etc. run _way_ smoother than JS-powered renderers. I'm assuming this is because the native CSS renderer is quite optimized whereas the JS rendering engines are... JS, really.
Are we sure this kind of GPU accelerated CSS is actually more efficient than WebGL? Besides, CSS is far more prone to being impacted by browser quirks.
CSS 3d transforms happen on a different thread and don't block main thread. Whilst with WebGL you still have to do some work on the JS thread. So I would say CSS animations are faster.
I imagine the browser is better able to limit the redraw behavior of CSS effects. WebGL will render as long as your tab is open (though as others have said, the speed is probably better in WebGL).
I am very sure that the Firefox/Chrome developers have written more efficient GPU accelerated rendering for CSS then I am likely to bother writing in yet another custom WebGL renderer.
I am also sure that a dedicated renderer optimized for one subject _could_ be even more efficient.
At least JS-powered renderers can do something about making sure it looks the same in all browsers. With CSS you can't do anything about the fact that this simple demo doesn't render correctly in Safari/iOS and Firefox/Android.
CSS gradients + background images + alpha channel.
There's some supporting JS + CSS as well over here: https://github.com/simeydotme/pokemon-cards-css/tree/main/sr...
No WebGL, no <canvas>, just simple CSS. Web developers should really learn how to combine CSS effects because the heavy WebGL/WASM rendering is often complete overkill and an unnecessary battery drain.
I also notice that on older devices, CSS animations/transitions/etc. run _way_ smoother than JS-powered renderers. I'm assuming this is because the native CSS renderer is quite optimized whereas the JS rendering engines are... JS, really.