This PR introduces the 'webgl' renderer which is basically canvas but much lower level and much faster. I see this eventually replacing the canvas renderer but it will need some time before that happens.

But there's already a canvas renderer?

To illustrate the difference when drawing, the canvas renderer basically does this:

1. Tell the GPU to draw character 0,0 from texture a
2. Tell the GPU to draw character 1,0 from texture a
3. Tell the GPU to draw character 2,0 from texture a
4. and so on.

These individual instructions are costly, the webgl renderer instead builds a Float32Array containing all the data needed to draw and a "webgl program" (a vertex shader and a fragment shader) that knows how to draw things from the Float32Array is uploaded to the GPU which does the actual drawing. Of course the details are much more involved than this, but that's the basics of why the webgl renderer will be superior to the canvas renderer.

Features

• It's super fast, it also scales much better with really large viewports.
• All characters are cached in the atlas, including unicode, combined chars (emoji), etc.
• The atlas trims glyphs to their minimal rectangles and stores that in the texture, this means better space utilization of the texture. Here's a smaller 256x256 example illustrating this:
  
• Selection is now drawn underneath the text (Selection should not change text color #720), using a uniform selection fg for accessibility reasons:
  
• Since the buffer is redrawn every frame, characters are no longer trimmed at the top and the bottom (Tall characters have their top and/or bottom cut off #1138).
  
  
• Renderer pausing when the canvas is offscreen is supported

Notes

• WebGL2 is used, this reduces browser compatibility a little but allows using some niceties like vertex array objects and drawing using drawElementsInstanced.
• Render layers still work, the webgl renderer actually still utilizes the CursorRenderLayer and LinkRenderLayer in order to simplify the rendering logic (and because they're pretty fast anyway).
• When the texture atlas has reached its capacity, it will currently just clear itself and restart. This could be improved but this route was chosen due to the relatively inexpensive cost of starting over and so we don't need to juggle multiple textures.
• I experimented with disabling double buffering and drawing the minimal set of changes, it didn't appear to be worth the effort (at least given the time I had to work on this).

Issues

🛑= merge blocker

• Currently you cannot customize the selection color. This is because cached glyphs do not currently support true color, this should be trivial to fix once true color is added.
• 🛑 Character joiners are not supported yet.
• 🛑 allowTransparency is not supported yet.
• Rendering seems to become offset on my macbook when rows are increased after 300x91, I'm guessing this is related to maximum canvas dimensions?

Comparing to canvas renderer

Summary

This table shows the average time to draw the frame before and after, see below for more details.

Methodology

(<any>window).frames = [];
(<any>window).report = () => {
  const frames = (<any>window).frames as number[];
  const average = Math.round(frames.reduce((p, c) => p + c, 0) / frames.length * 100) / 100;
  console.log(`...: frames ${frames.length}, average ${average}ms`);
};

const startTime = performance.now();
...
(<any>window).frames.push(performance.now() - startTime);

Macbook Viewport 87x26 (demo default), ls -lR .

Canvas Renderer (dynamic atlas)

Canvas: frames 69, average 4.8ms

WebGL Renderer

WebGL: frames 80, average 0.69ms

Macbook Viewport 300x80, ls -lR .

Canvas Renderer (dynamic atlas)

Canvas: frames 30, average 15.28ms

WebGL Renderer

WebGL: frames 43, average 3.69ms

Windows Viewport 87x26 (demo default), tree

Canvas Renderer (dynamic atlas)

WebGL Renderer

Windows Viewport 300x80, tree

Canvas Renderer (dynamic atlas)

WebGL Renderer

Macbook Viewport 87x26, cat zh_wcag_100.txt

zh_wcag_100.txt contains this contents of https://www.w3.org/Translations/WCAG20-zh/ 100 times to help test throughput for wide characters.

Canvas Renderer (dynamic atlas)

Canvas: frames 40, average 14.63ms

WebGL Renderer

WebGL: frames 45, average 5.93ms

Macbook Viewport 87x26, cat emoji_100.txt

emoji_100.txt contains this contents of https://getemoji.com/ times to help test throughput for combined characters.

Canvas Renderer (dynamic atlas)

Canvas: frames 13, average 27.47ms

WebGL Renderer

WebGL: frames 16, average 19.28ms

Fixes #720
Fixes #1138 (microsoft/vscode#35901)
Fixes #1170 (I think)
Obsoletes a bunch of issues related to the canvas renderer: #941, #955, #1389, #1614