8 ms·

Took me a while to REALLY realize this is all CSS no WebGL. You just blew my mind... and ruined my weekend: I'm not leaving home untilI learn this sort of wizar

by 0xCAP 4y ago

Took me a while to REALLY realize this is all CSS no WebGL. You just blew my mind... and ruined my weekend: I'm not leaving home untilI learn this sort of wizardry!

jeroenhd 4y ago
It's deceptively easy, actually: https://github.com/simeydotme/pokemon-cards-css/blob/main/static/cards.css 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/src 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.
- skavi 4y ago
  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.
  - Aeolun 4y ago
    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).
  - mrdoob2 4y ago
    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.
  - sktrdie 4y ago
    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.
    - rasz 4y ago
      Maybe faster as in less potential for frame drop, but not more efficient
      - mijoharas 4y ago
        *not necessarily more efficient.
    - Kiro 4y ago
      There's a lot of JS involved here though. This is not a "pure CSS" demo.
  - rasz 4y ago
    We are sure it isnt, see my other post https://news.ycombinator.com/item?id=33365694 https://news.ycombinator.com/item?id=33365694 or just look at CPU utilization while flipping those cards.
  - BoorishBears 4y ago
    in Safari on iOS 16 the effect is clearly bugged, showing a weird tiling artifact on the front of the cards
  - ZiiS 4y ago
    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.
- mrdoob2 4y ago
  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.
  - CivBase 4y ago
    Working for me on Firefox/Android
- apineda 4y ago
  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.
bergenty 4y ago
This is so sad. CSS is so hard to do anything in we have to gush over basic animations like this. It’s sad as a former flash developer.
- lucideer 4y ago
  Flash supported CSS & JS (ActionScript) so I'm not sure what you're comparing. Dynamic rendering like this wasn't possible with CSS in Flash - you needed JS (ActionScript). People aren't gushing over this being possible in modern browsers - it's been possible to do this and much more in browsers for many years. They're gushing over it being possible with just CSS (no rendering using JS).
  - bergenty 4y ago
    Of course it wasn’t possible with CSS in flash (not even sure how useful that was) but was child’s play with only flash (actionscript).
    - lucideer 4y ago
      as it is now with webgl
  - thinkloop 4y ago
    Love it or hate it, something was lost with Flash. Sure the web can do it, but for some reason it doesn't. The combination of tools and language in Flash hit a magic sweet spot that let all kinds of people play and create. This demo is extra impressive for doing it in CSS, but it's also impressive for simply being done at all. You don't see stuff like this on the web too often. If this were a Flash world, I feel like it would be ancient news. I don't wish it were, but it's worth noting.
    - lucideer 4y ago
      Absolutely no doubt a lot was lost with flash. Regaining it has been a slow process, mainly due to the challenge of achieving the expressiveness of what flash offered in an open, interoperable and secure way (flash was never any of those things). But we're here now and you can do a lot more today with open web tech than was ever possible in flash.
rasz 4y ago
>all CSS no WebGL For majority of users (chrome) this is a detriment. Google really screwed up GPU Accelerated CSS Transitions. Open taskbar and look for yourself. Moving those cards around takes >10% of my old GPU (~1050) but 100% of one CPU core (3.4GHz Haswell). This is the most basic possible single quad texture being tilted around and Chrome eats whole CPU core! Its just as bad with even simpler 2D primitive operations like "animation: linear infinite" used for example here as one line text scroller under the video: https://ustka-panorama.webcamera.pl https://ustka-panorama.webcamera.pl ~20% of GPU and ~15% of one CPU core is being eaten by Chrome scrolling _one line of text_. Nothing on modern machines Chrome devs are used to, but translates to around 30% of whole CPU burning cycles on Thinkpad X230 just to move that text around!
- blondin 4y ago
  that's not true in my case. every single webgl demo i open up on my 10 years old macbook air sends the fan spinning like crazy. this demo works fine and chrome is there sitting under 0.2 cpu usage. this is one of the most cpu efficient 3D web demo i have seen in a while.
  - rasz 4y ago
    In Safari, right?
    - notRobot 4y ago
      Parent mentions Chrome.
coryfklein 4y ago
As a backend engineer with no frontend experience, why do folks care so much when something is done "only with CSS"? Is it because there is some technical advantage, or is it more of a "code golf" thing like, "Look at this rainbow quine I wrote that renders itself in assembly ascii art!"
- momojo 4y ago
  It's a little of both. If I can do something with CSS, like animation, I'll take that over trying to do something custom with javascript. It's a perform But it also feels great when you can cleverly replace a piece of javascript with a CSS effect.

by 0xCAP 4y ago

Took me a while to REALLY realize this is all CSS no WebGL. You just blew my mind... and ruined my weekend: I'm not leaving home untilI learn this sort of wizardry!

jeroenhd 4y ago

It's deceptively easy, actually: https://github.com/simeydotme/pokemon-cards-css/blob/main/static/cards.css 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/src 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.

skavi 4y ago
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.
- Aeolun 4y ago
  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).
- mrdoob2 4y ago
  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.
- sktrdie 4y ago
  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.
  - rasz 4y ago
    Maybe faster as in less potential for frame drop, but not more efficient
    - mijoharas 4y ago
      *not necessarily more efficient.
  - Kiro 4y ago
    There's a lot of JS involved here though. This is not a "pure CSS" demo.
- rasz 4y ago
  We are sure it isnt, see my other post https://news.ycombinator.com/item?id=33365694 https://news.ycombinator.com/item?id=33365694 or just look at CPU utilization while flipping those cards.
- BoorishBears 4y ago
  in Safari on iOS 16 the effect is clearly bugged, showing a weird tiling artifact on the front of the cards
- ZiiS 4y ago
  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.
mrdoob2 4y ago
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.
- CivBase 4y ago
  Working for me on Firefox/Android
apineda 4y ago
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.

bergenty 4y ago

This is so sad. CSS is so hard to do anything in we have to gush over basic animations like this. It’s sad as a former flash developer.

lucideer 4y ago
Flash supported CSS & JS (ActionScript) so I'm not sure what you're comparing. Dynamic rendering like this wasn't possible with CSS in Flash - you needed JS (ActionScript). People aren't gushing over this being possible in modern browsers - it's been possible to do this and much more in browsers for many years. They're gushing over it being possible with just CSS (no rendering using JS).
- bergenty 4y ago
  Of course it wasn’t possible with CSS in flash (not even sure how useful that was) but was child’s play with only flash (actionscript).
  - lucideer 4y ago
    as it is now with webgl
- thinkloop 4y ago
  Love it or hate it, something was lost with Flash. Sure the web can do it, but for some reason it doesn't. The combination of tools and language in Flash hit a magic sweet spot that let all kinds of people play and create. This demo is extra impressive for doing it in CSS, but it's also impressive for simply being done at all. You don't see stuff like this on the web too often. If this were a Flash world, I feel like it would be ancient news. I don't wish it were, but it's worth noting.
  - lucideer 4y ago
    Absolutely no doubt a lot was lost with flash. Regaining it has been a slow process, mainly due to the challenge of achieving the expressiveness of what flash offered in an open, interoperable and secure way (flash was never any of those things). But we're here now and you can do a lot more today with open web tech than was ever possible in flash.

rasz 4y ago

>all CSS no WebGL For majority of users (chrome) this is a detriment. Google really screwed up GPU Accelerated CSS Transitions. Open taskbar and look for yourself. Moving those cards around takes >10% of my old GPU (~1050) but 100% of one CPU core (3.4GHz Haswell). This is the most basic possible single quad texture being tilted around and Chrome eats whole CPU core! Its just as bad with even simpler 2D primitive operations like "animation: linear infinite" used for example here as one line text scroller under the video: https://ustka-panorama.webcamera.pl https://ustka-panorama.webcamera.pl ~20% of GPU and ~15% of one CPU core is being eaten by Chrome scrolling _one line of text_. Nothing on modern machines Chrome devs are used to, but translates to around 30% of whole CPU burning cycles on Thinkpad X230 just to move that text around!

blondin 4y ago
that's not true in my case. every single webgl demo i open up on my 10 years old macbook air sends the fan spinning like crazy. this demo works fine and chrome is there sitting under 0.2 cpu usage. this is one of the most cpu efficient 3D web demo i have seen in a while.
- rasz 4y ago
  In Safari, right?
  - notRobot 4y ago
    Parent mentions Chrome.

coryfklein 4y ago

As a backend engineer with no frontend experience, why do folks care so much when something is done "only with CSS"? Is it because there is some technical advantage, or is it more of a "code golf" thing like, "Look at this rainbow quine I wrote that renders itself in assembly ascii art!"

momojo 4y ago
It's a little of both. If I can do something with CSS, like animation, I'll take that over trying to do something custom with javascript. It's a perform But it also feels great when you can cleverly replace a piece of javascript with a CSS effect.