Webgpu renderer

.gitignore

@@ -21,6 +21,7 @@ build/
 .DS_Store
 yarn.lock
 test-results/
+.playwright-cli/
 
 # Keep bundled code out of Git
 dist/

README.md

@@ -108,6 +108,7 @@ The xterm.js team maintains the following addons, but anyone can build them:
 - [`@xterm/addon-web-fonts`](https://github.com/xtermjs/xterm.js/tree/master/addons/addon-web-fonts): Easily integrate web fonts
 - [`@xterm/addon-web-links`](https://github.com/xtermjs/xterm.js/tree/master/addons/addon-web-links): Adds web link detection and interaction
 - [`@xterm/addon-webgl`](https://github.com/xtermjs/xterm.js/tree/master/addons/addon-webgl): Renders xterm.js using a `canvas` element's webgl2 context
+- [`@xterm/addon-webgpu`](https://github.com/xtermjs/xterm.js/tree/master/addons/addon-webgpu): Renders xterm.js using a `canvas` element's webgpu context
 
 ## Browser Support
 

addons/addon-webgpu/LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2018, The xterm.js authors (https://github.com/xtermjs/xterm.js)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

addons/addon-webgpu/README.md

@@ -0,0 +1,24 @@
+## @xterm/addon-webgpu
+
+An addon for [xterm.js](https://github.com/xtermjs/xterm.js) that enables a WebGPU-based renderer. This addon requires xterm.js v4+.
+
+```
+npm install --save @xterm/addon-webgpu
+```
+
+```
+import { WebgpuAddon } from '@xterm/addon-webgpu';
+
+const terminal = new Terminal();
+const addon = new WebgpuAddon();
+terminal.loadAddon(addon);
+```
+
+See the full [API](https://github.com/xtermjs/xterm.js/blob/master/addons/addon-webgpu/typings/addon-webgpu.d.ts) for more advanced usage.
+
+The browser may drop WebGPU devices for various reasons like OOM or after the system has been suspended. There is an API exposed that fires a context loss event so embedders can handle it however they wish. An easy, but suboptimal way, to handle this is by disposing of WebgpuAddon when the event fires:
+
+```
+const addon = new WebgpuAddon();
+addon.onContextLoss(() => addon.dispose());
+```

addons/addon-webgpu/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@xterm/addon-webgpu",
+  "version": "0.1.0",
+  "author": {
+    "name": "The xterm.js authors",
+    "url": "https://xtermjs.org/"
+  },
+  "main": "lib/addon-webgpu.js",
+  "module": "lib/addon-webgpu.mjs",
+  "types": "typings/addon-webgpu.d.ts",
+  "repository": "https://github.com/xtermjs/xterm.js/tree/master/addons/addon-webgpu",
+  "license": "MIT",
+  "keywords": [
+    "terminal",
+    "webgpu",
+    "xterm",
+    "xterm.js"
+  ],
+  "scripts": {
+    "build": "../../node_modules/.bin/tsc -p .",
+    "prepackage": "npm run build",
+    "package": "../../node_modules/.bin/webpack",
+    "prepublishOnly": "npm run package",
+    "start": "node ../../demo/start"
+  }
+}

addons/addon-webgpu/src/WebgpuAddon.ts

@@ -0,0 +1,129 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import type { ITerminalAddon, Terminal } from '@xterm/xterm';
+import type { IWebgpuAddonOptions, WebgpuAddon as IWebgpuApi } from '@xterm/addon-webgpu';
+import { ICharacterJoinerService, ICharSizeService, ICoreBrowserService, IRenderService, IThemeService } from 'browser/services/Services';
+import { ITerminal } from 'browser/Types';
+import { Disposable, toDisposable } from 'common/Lifecycle';
+import { ICoreService, IDecorationService, IOptionsService } from 'common/services/Services';
+import { WebgpuRenderer } from './WebgpuRenderer';
+import { Emitter, EventUtils } from 'common/Event';
+import type { IGPU } from './WebgpuTypes';
+
+export class WebgpuAddon extends Disposable implements ITerminalAddon, IWebgpuApi {
+  private _terminal?: Terminal;
+  private _renderer?: WebgpuRenderer;
+
+  private readonly _onChangeTextureAtlas = this._register(new Emitter<HTMLCanvasElement>());
+  public readonly onChangeTextureAtlas = this._onChangeTextureAtlas.event;
+  private readonly _onAddTextureAtlasCanvas = this._register(new Emitter<HTMLCanvasElement>());
+  public readonly onAddTextureAtlasCanvas = this._onAddTextureAtlasCanvas.event;
+  private readonly _onRemoveTextureAtlasCanvas = this._register(new Emitter<HTMLCanvasElement>());
+  public readonly onRemoveTextureAtlasCanvas = this._onRemoveTextureAtlasCanvas.event;
+  private readonly _onContextLoss = this._register(new Emitter<void>());
+  public readonly onContextLoss = this._onContextLoss.event;
+
+  private readonly _customGlyphs: boolean;
+  private readonly _preserveDrawingBuffer?: boolean;
+
+  constructor(options?: IWebgpuAddonOptions) {
+    super();
+    this._customGlyphs = options?.customGlyphs ?? true;
+    this._preserveDrawingBuffer = options?.preserveDrawingBuffer;
+  }
+
+  public activate(terminal: Terminal): void {
+    const core = (terminal as any)._core as ITerminal;
+    if (!terminal.element) {
+      this._register(core.onWillOpen(() => this.activate(terminal)));
+      return;
+    }
+
+    this._terminal = terminal;
+    const coreService: ICoreService = core.coreService;
+    const optionsService: IOptionsService = core.optionsService;
+
+    const unsafeCore = core as any;
+    const renderService: IRenderService = unsafeCore._renderService;
+    const characterJoinerService: ICharacterJoinerService = unsafeCore._characterJoinerService;
+    const charSizeService: ICharSizeService = unsafeCore._charSizeService;
+    const coreBrowserService: ICoreBrowserService = unsafeCore._coreBrowserService;
+    const decorationService: IDecorationService = unsafeCore._decorationService;
+    const themeService: IThemeService = unsafeCore._themeService;
+
+    if (!WebgpuAddon._isWebgpuSupported()) {
+      renderService.setRenderer((this._terminal as any)._core._createRenderer());
+      renderService.handleResize(terminal.cols, terminal.rows);
+      return;
+    }
+
+    try {
+      this._renderer = this._register(new WebgpuRenderer(
+        terminal,
+        characterJoinerService,
+        charSizeService,
+        coreBrowserService,
+        coreService,
+        decorationService,
+        optionsService,
+        themeService,
+        this._customGlyphs,
+        this._preserveDrawingBuffer
+      ));
+    } catch {
+      renderService.setRenderer((this._terminal as any)._core._createRenderer());
+      renderService.handleResize(terminal.cols, terminal.rows);
+      return;
+    }
+
+    let isReady = false;
+    this._register(this._renderer.onReady(() => {
+      if ((this._terminal as any)._core._store._isDisposed) {
+        return;
+      }
+      isReady = true;
+      renderService.setRenderer(this._renderer!);
+      renderService.handleResize(terminal.cols, terminal.rows);
+    }));
+    this._register(this._renderer.onContextLoss(() => {
+      this._onContextLoss.fire();
+      if (isReady) {
+        return;
+      }
+      if ((this._terminal as any)._core._store._isDisposed) {
+        return;
+      }
+      this._renderer?.dispose();
+      this._renderer = undefined;
+      renderService.setRenderer((this._terminal as any)._core._createRenderer());
+      renderService.handleResize(terminal.cols, terminal.rows);
+    }));
+    this._register(EventUtils.forward(this._renderer.onChangeTextureAtlas, this._onChangeTextureAtlas));
+    this._register(EventUtils.forward(this._renderer.onAddTextureAtlasCanvas, this._onAddTextureAtlasCanvas));
+    this._register(EventUtils.forward(this._renderer.onRemoveTextureAtlasCanvas, this._onRemoveTextureAtlasCanvas));
+
+    this._register(toDisposable(() => {
+      if ((this._terminal as any)._core._store._isDisposed) {
+        return;
+      }
+      const renderService: IRenderService = (this._terminal as any)._core._renderService;
+      renderService.setRenderer((this._terminal as any)._core._createRenderer());
+      renderService.handleResize(terminal.cols, terminal.rows);
+    }));
+  }
+
+  public get textureAtlas(): HTMLCanvasElement | undefined {
+    return this._renderer?.textureAtlas;
+  }
+
+  public clearTextureAtlas(): void {
+    this._renderer?.clearTextureAtlas();
+  }
+
+  private static _isWebgpuSupported(): boolean {
+    return typeof navigator !== 'undefined' && !!(navigator as Navigator & { gpu?: IGPU }).gpu;
+  }
+}