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?