Test: Terminal WebGL Renderer

[Tyriar]

Refs: #84949

• Windows @connor4312
• Linux @joaomoreno
• macOS @rebornix

Complexity: 5

---

A new WebGL renderer is available for the terminal which is significantly faster than both the canvas and dom renderers. To enable it:

"terminal.integrated.rendererType": "experimentalWebgl"

This is a rewrite of all the rendering code which includes basically everything inside the terminal panel. You can read about some of the improvements made in the PR, but basically:

• Selection color can now be opaque as it is drawn under the foreground
• Characters are no longer clipped on the sides/top/bottom
• Rendering of all characters is much faster

Do some exploratory testing of the terminal, here are some ideas of where to start:

• Various attributes render correctly (note underline and strikethrough isn't supported)
• Different color types render correctly
  • 256 palette color (eg. https://github.com/gawin/bash-colors-256)
  • True color (eg. https://unix.stackexchange.com/a/404415/115410)
• Heavy data streams in terminal is performant (eg. tree, ls -lR, yes)
• Trying out different font settings, cursor styles, etc.

Here's a list of known issues (there aren't many):

• https://github.com/xtermjs/xterm.js/issues?q=is%3Aopen+is%3Aissue+label%3Aarea%2Faddon%2Fwebgl
• WebGL renderer isn't hot swappable

[joaomoreno]

This is so good, I'm switching to this for self hosting.

[joaomoreno]

@Tyriar Fantastic work here, really works great! 👏

Some perf numbers, running tree -a in vscode with canvas:

tree -a  0.56s user 0.63s system 57% cpu 2.062 total

When running with webgl:

tree -a  0.54s user 0.51s system 71% cpu 1.455 total

2s down to 1.5s, that's very impressive.

[Tyriar]

@joaomoreno good to hear! For these types of commands the webgl renderer ends up rendering more frames with less CPU time too 🙂, less rendering time = more parsing time.

[connor4312]

Color test script if others find it useful:

const chalk = require('chalk');

const modifiers = ["reset", "bold", "dim", "italic", "underline", "inverse", "hidden", "strikethrough", "visible"];
const colors = ["black", "red", "green", "yellow", "blue", "magenta", "cyan", "white", "blackBright", "redBright", "greenBright", "yellowBright", "blueBright", "magentaBright", "cyanBright", "whiteBright"];

const colWidth = 20;

for (const modifier of modifiers) {
    process.stdout.write(chalk[modifier](modifier.padEnd(colWidth)));
}

process.stdout.write('\r\n');
for (const color of colors) {
    for (const modifier of modifiers) {
        process.stdout.write(chalk[modifier][color](color.padEnd(colWidth)));
    }
    process.stdout.write('\r\n');
}

And naughty strings: https://github.com/minimaxir/big-list-of-naughty-strings/blob/master/blns.txt

[rebornix]

Incredible performance ⚡️ I tried to cat a relative large log file (300MB, 2M lines)

WebGL

cat basedata.txt  0.01s user 2.51s system 5% cpu 47.281 total

Canvas

cat basedata.txt  0.01s user 3.01s system 2% cpu 2:24.70 total

DOM

after waiting for 10 minutes, it didn't finish but stopped printing ...