Hacker News Reader

Comment by jeroenhd | Hacker News Reader

It's deceptively easy, actually: https://github.com/simeydotme/pokemon-cards-css/blob/main/st...

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.

View on HN

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.

Maybe faster as in less potential for frame drop, but not more efficient

*not necessarily more efficient.

There's a lot of JS involved here though. This is not a "pure CSS" demo.

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).

Definitely not more efficient. The only thing JS would need to do here is updating a 4x4 matrix. Everything else would be in the GPU.

in Safari on iOS 16 the effect is clearly bugged, showing a weird tiling artifact on the front of the cards

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.

We are sure it isnt, see my other post https://news.ycombinator.com/item?id=33365694 or just look at CPU utilization while flipping those cards.

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.

Working for me on Firefox/Android

I don't know. 1000 lines of CSS doesn't seem particularly easy. I'm not a css grokker myself but maybe it's easier for others.

Reply on news.ycombinator.com