5 ms·

AFAIK modern browsers all use GPU accelerated rendering, so using HTML/CSS does give you a GPU-backed user interface. Also desktop PWAs are IMO underrated and

AFAIK modern browsers all use GPU accelerated rendering, so using HTML/CSS does give you a GPU-backed user interface. Also desktop PWAs are IMO underrated and a really good way to distribute a desktop app without having to bundle a whole browser engine with your app. We do this for Construct (www.construct.net) - a complete game development IDE - and I think it's worked out great.

pjmlp 4y ago
Not really it is a bit more subtle than that, unless you do some magic incantations with CSS, like z-ordering or transforms, it may bet that software rendering is used instead. There are a couple of talks regarding CSS tricks to force GPU redrawing.
- AshleysBrain 4y ago
  I think that was the case several years ago but I thought these days much more of the browser rendering pipeline was automatically GPU accelerated. It's hard to find up-to-date references (would appreciate any links) but for example going to chrome://gpu shows it using GPU acceleration for both compositing and rasterization (including "multiple raster threads"), as well as the usual suspects like video decoding, canvas and WebGL.
  - pjmlp 4y ago
    Don't be fooled by canvas/WebGL support. I remember seeing this kind of content on Google IO and WebDev talks. Would need to also go treasure hunting to find them.
    - AshleysBrain 4y ago
      Treasure hunting to find an API widely supported on 95%+ of devices?
      - pjmlp 4y ago
        Treasure hunting the Google IO/WebDev talks about the CSS magic incantations that force GPU rendering. Here is an old article, https://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome/ https://www.chromium.org/developers/design-documents/gpu-acc...
- esperent 4y ago
  Do we know for sure if this is still true in modern browsers? Browser makers are constantly updating their rendering engines and these pieces of wisdom do go out of date so it's important to verify them every few years.
  - pjmlp 4y ago
    As answered on sibling comment I remember seeing this on Google talks, not sure about latest versions without going hunting for this information.
starburst 4y ago
Saying HTML/CSS is "GPU-backed" gives the wrong impression. What's the point of saying a UI is GPU-backed (which usually means a UI hand-crafted using mesh, texture atlas, shaders, minimal draw calls, etc.) if it's also grouped together with one of the most bloated and inefficient means to output pixels on the screen (HTML/CSS). I love the web, not hating at all, but this is comparing apple and oranges.
- dahart 4y ago
  The point is that GPU-backed is faster than not, which is why your browser (and your OS) is doing all those things except maybe hand-crafted meshes (and I don’t agree that hand-crafted meshes is the usual definition of a GPU-backed UI). The GPU-backed UI does benefit from simple things like faster scrolling, especially on high DPI displays, in addition to speeding up the rendering of new pixels for HTML/CSS/SVG/image/video elements. The point is the browsers are actively trying to fix the inefficiency you’re referring to, and it might now be further along than you think. BTW, the GPU-backed browser UI and GPU-backed OS UI, these come with a bunch of things that someone’s hacked UI doesn’t, namely transparent software fallback when a GPU isn’t available, full compatibility with the UI spec, accessibility support, and tolerance for a wide range of GPUs. People making their own UIs directly almost never do these things (I’m guilty as charged), and as such their UIs are often some combination of more brittle, device dependent, and limited to a narrower audience.
  - starburst 4y ago
    Sure hand-crafted mesh might push the envelop too much (I work in game dev) but GPU-Backed UI referred to a specialized form of UI. Have you read the article? They specifically mention how nowadays app are just a web page instead of being a GPU-Backed UI. Trying to push the narrative that HTML / CSS is somehow a GPU-Backed UI is almost comical. The browser is GPU-accelerated, it is not what anyone in the industry would consider a GPU-Backed UI.
    - dahart 4y ago
      Yes sir, I did in fact read the article. I used to work in game dev. After that I built a WebGL-based whiteboard a lot of people used. Now I help make GPUs. I think it’s great if you agree with the author. > The browser is GPU-accelerated, it is not what anyone in the industry would consider a GPU-Backed UI. Now this is a different argument than what you said above. I agree that browsers are what make it GPU-backed, not the HTML/CSS spec per se. But HTML/CSS is becoming effectively a GPU-backed UI in practice, by virtue of the fact that all the browsers use GPUs to render HTML & CSS. This is also true of the UIs provided by Windows and MacOS and Linux - the UI isn’t required to use the GPU, but the OSes will use GPUs for performance when possible. This is all anyone here actually means when they call HTML & CSS a GPU-backed UI. Is there a meaningful difference once there doesn’t exist a modern browser that doesn’t use a GPU to significantly render web apps? What I reject is the notion that “GPU-backed” is limited to more than what the words mean literally. If the implementation is using a GPU to render the UI elements, then it’s GPU backed. It doesn’t need to be hand-coded, or a one-off, or using shaders, or guaranteed by the UI spec.
airstrike 4y ago
> We do this for Construct (www.construct.net) - a complete game development IDE - and I think it's worked out great. Mind sharing what you used for backend / frontend of your desktop PWA? I'm planning to work on a similarly complex UI and have been searching around for best-in-class (or best-trade-offs) technologies today Any books, tips, tutorials, whatever you can share that inspired your architecture decisions would be ___immensely___ appreciated.
- AshleysBrain 4y ago
  We have an in-house UI library, mainly because we started writing code in the mid-2010s and there was nothing good out there at the time. Maybe that's changed but while I haven't researched it thoroughly, I also haven't come across anything that looks like it does everything ours does. But our UI lib aims to be as simple and straightforward as possible, standard model-view-controller, no virtual DOM, making full use of HTML and CSS features. Personally I view a lot of modern CSS frameworks with suspicion as they all seem to massively overengineer this stuff. We have a whole desktop IDE running on basically old fashioned desktop app engineering style but on top of HTML, and it works great. Apart from a few extra services on the side, the main app is all static resources so no real backend to speak of. Again, engineered like a traditional desktop app with everything running locally, which also means the UI always responds promptly (no waiting for network) and it all works offline. Maybe I should write up a blog post about how it all works, but not sure how many people out there want to hear more!
  - runlaszlorun 4y ago
    I’d love to see a writeup if yyou had a chance to write one!
  - airstrike 4y ago
    If it's any indication, I posted a link on a related topic earlier today and it made the front page, so I think folks are definitely interested in the topic ;-) https://news.ycombinator.com/item?id=34696635 https://news.ycombinator.com/item?id=34696635

pjmlp 4y ago

Not really it is a bit more subtle than that, unless you do some magic incantations with CSS, like z-ordering or transforms, it may bet that software rendering is used instead. There are a couple of talks regarding CSS tricks to force GPU redrawing.

AshleysBrain 4y ago
I think that was the case several years ago but I thought these days much more of the browser rendering pipeline was automatically GPU accelerated. It's hard to find up-to-date references (would appreciate any links) but for example going to chrome://gpu shows it using GPU acceleration for both compositing and rasterization (including "multiple raster threads"), as well as the usual suspects like video decoding, canvas and WebGL.
- pjmlp 4y ago
  Don't be fooled by canvas/WebGL support. I remember seeing this kind of content on Google IO and WebDev talks. Would need to also go treasure hunting to find them.
  - AshleysBrain 4y ago
    Treasure hunting to find an API widely supported on 95%+ of devices?
    - pjmlp 4y ago
      Treasure hunting the Google IO/WebDev talks about the CSS magic incantations that force GPU rendering. Here is an old article, https://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome/ https://www.chromium.org/developers/design-documents/gpu-acc...
esperent 4y ago
Do we know for sure if this is still true in modern browsers? Browser makers are constantly updating their rendering engines and these pieces of wisdom do go out of date so it's important to verify them every few years.
- pjmlp 4y ago
  As answered on sibling comment I remember seeing this on Google talks, not sure about latest versions without going hunting for this information.

starburst 4y ago

Saying HTML/CSS is "GPU-backed" gives the wrong impression. What's the point of saying a UI is GPU-backed (which usually means a UI hand-crafted using mesh, texture atlas, shaders, minimal draw calls, etc.) if it's also grouped together with one of the most bloated and inefficient means to output pixels on the screen (HTML/CSS). I love the web, not hating at all, but this is comparing apple and oranges.

dahart 4y ago
The point is that GPU-backed is faster than not, which is why your browser (and your OS) is doing all those things except maybe hand-crafted meshes (and I don’t agree that hand-crafted meshes is the usual definition of a GPU-backed UI). The GPU-backed UI does benefit from simple things like faster scrolling, especially on high DPI displays, in addition to speeding up the rendering of new pixels for HTML/CSS/SVG/image/video elements. The point is the browsers are actively trying to fix the inefficiency you’re referring to, and it might now be further along than you think. BTW, the GPU-backed browser UI and GPU-backed OS UI, these come with a bunch of things that someone’s hacked UI doesn’t, namely transparent software fallback when a GPU isn’t available, full compatibility with the UI spec, accessibility support, and tolerance for a wide range of GPUs. People making their own UIs directly almost never do these things (I’m guilty as charged), and as such their UIs are often some combination of more brittle, device dependent, and limited to a narrower audience.
- starburst 4y ago
  Sure hand-crafted mesh might push the envelop too much (I work in game dev) but GPU-Backed UI referred to a specialized form of UI. Have you read the article? They specifically mention how nowadays app are just a web page instead of being a GPU-Backed UI. Trying to push the narrative that HTML / CSS is somehow a GPU-Backed UI is almost comical. The browser is GPU-accelerated, it is not what anyone in the industry would consider a GPU-Backed UI.
  - dahart 4y ago
    Yes sir, I did in fact read the article. I used to work in game dev. After that I built a WebGL-based whiteboard a lot of people used. Now I help make GPUs. I think it’s great if you agree with the author. > The browser is GPU-accelerated, it is not what anyone in the industry would consider a GPU-Backed UI. Now this is a different argument than what you said above. I agree that browsers are what make it GPU-backed, not the HTML/CSS spec per se. But HTML/CSS is becoming effectively a GPU-backed UI in practice, by virtue of the fact that all the browsers use GPUs to render HTML & CSS. This is also true of the UIs provided by Windows and MacOS and Linux - the UI isn’t required to use the GPU, but the OSes will use GPUs for performance when possible. This is all anyone here actually means when they call HTML & CSS a GPU-backed UI. Is there a meaningful difference once there doesn’t exist a modern browser that doesn’t use a GPU to significantly render web apps? What I reject is the notion that “GPU-backed” is limited to more than what the words mean literally. If the implementation is using a GPU to render the UI elements, then it’s GPU backed. It doesn’t need to be hand-coded, or a one-off, or using shaders, or guaranteed by the UI spec.

airstrike 4y ago

> We do this for Construct (www.construct.net) - a complete game development IDE - and I think it's worked out great. Mind sharing what you used for backend / frontend of your desktop PWA? I'm planning to work on a similarly complex UI and have been searching around for best-in-class (or best-trade-offs) technologies today Any books, tips, tutorials, whatever you can share that inspired your architecture decisions would be ___immensely___ appreciated.

AshleysBrain 4y ago
We have an in-house UI library, mainly because we started writing code in the mid-2010s and there was nothing good out there at the time. Maybe that's changed but while I haven't researched it thoroughly, I also haven't come across anything that looks like it does everything ours does. But our UI lib aims to be as simple and straightforward as possible, standard model-view-controller, no virtual DOM, making full use of HTML and CSS features. Personally I view a lot of modern CSS frameworks with suspicion as they all seem to massively overengineer this stuff. We have a whole desktop IDE running on basically old fashioned desktop app engineering style but on top of HTML, and it works great. Apart from a few extra services on the side, the main app is all static resources so no real backend to speak of. Again, engineered like a traditional desktop app with everything running locally, which also means the UI always responds promptly (no waiting for network) and it all works offline. Maybe I should write up a blog post about how it all works, but not sure how many people out there want to hear more!
- runlaszlorun 4y ago
  I’d love to see a writeup if yyou had a chance to write one!
- airstrike 4y ago
  If it's any indication, I posted a link on a related topic earlier today and it made the front page, so I think folks are definitely interested in the topic ;-) https://news.ycombinator.com/item?id=34696635 https://news.ycombinator.com/item?id=34696635