I have taken a strong interest in WebGL over the last few days and have a few questions around it. I recently realised the canvas in Figma (https://www.figma.com/) uses WebGL, and Lucidchart uses WebGL for the canvas in their editor. From a recent article on WebGL published by the Figma team, the following section caught my attention:

Instead of attempting to get one of these to work, we implemented everything from scratch using WebGL. Our renderer is a highly-optimized tile-based engine with support for masking, blurring, dithered gradients, blend modes, nested layer opacity, and more. All rendering is done on the GPU and is fully anti-aliased. Internally our code looks a lot like a browser inside a browser; we have our own DOM, our own compositor, our own text layout engine, and we’re thinking about adding a render tree just like the one browsers use to render HTML.

How does this this looks like conceptually, at an architectural level? How do you use WebGL to create a browser DOM?

  • 1
    Browsers work by painting a frame and handing it off to the operating system. Apparently FIgma works by painting a frame and handing it off to the browser via WebGL. The techniques to paint a frame are similar in both cases. The data structures are DOM-like in both cases (a tree of elements with associated properties), but they don't actually re-implement the DOM. – amon Jul 23 at 12:20
  • By writing a browser – user253751 Jul 23 at 19:48
  • 1
    In fact it's exactly the same way a normal browser works – user253751 Jul 23 at 19:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.