ui: WebGL renderer

[stevegolton]

WIP 'simple' WebGL based renderer that doesn't involve changing how the tracks work all that much.

Improves canvas rendering on the android example trace (on a 3440x1440 monitor) on my M1 Pro MacBook from ~45ms per frame to ~10ms per frame.

How it works

• Render two canvases on top of one another - one with a WebGL context and one with a 2d context. Rects are rendered to the webgl canvas, text and other decorations are rendered to the 2D canvas.
• We use 2 canvases because doing a ctx.drawImage() from the webgl canvas to the 2d one is expansive and introduces latency. Simply overlaying 2 canvases and letting the compositor do the work is much more efficient.
• Instead of calling ctx.fillRect() each track just passed a renderer object and invokesrenderer.drawRect(), passing the rect position, width, color and pattern(s).
• Note: We are still doing N (where N is the number of rects on screen) javascript rect calls per frame, and we are actually also building all the buffers in JS and uploading them in their entirety into WebGL every frame, but this is still much more efficient that calling ctx.fillRect() N times. In fact, the dominating bottleneck is now doing the time->px conversion in JS. Copying data into webgl and rendering quads is very cheap.

Where to go from here?

• Stabilise and test this approach. Does it work on all systems? What's the cross browser behaviour? WebGL2 is well supported and has been for a long time but performance may vary. What happens when we don't support gpu acceleration at all (e.g. cloudtop). Does it work on phones? Do we need to fallback to 2d rendering if webgl isn't available?
• Move the time -> px calculation to the vertex shader - simply upload the screen space transformation as a uniform - this will save a lot of pre-calculation every frame in JS, but at the expense of less precision in the shaders.
• Potentially if required - pre-cache buffers of data in the right format up front so they don't have to be built every frame, or can be copied into the webgl buffers more efficiently - but I'm not sure we'll need this.
• Make other JS work more efficient - e.g. caching colors, loading less data from TP or yielding every now and again to allow a frame to render.

[github-actions]

🎨 Perfetto UI Build

✅ UI build is ready: https://storage.googleapis.com/perfetto-ci-artifacts/gh-21456480899-1-ui/ui/index.html