@perspective-dev/viewer-charts 4.5.0 → 4.5.2

package/src/ts/webgl/gl-context.ts

@@ -0,0 +1,191 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import { ShaderRegistry } from "./shader-registry";
+import { SHADER_MANIFEST } from "./shader-manifest";
+
+export type WebGLCanvas = HTMLCanvasElement | OffscreenCanvas;
+
+/**
+ * The unit the browser actually counts against its per-agent WebGL
+ * context cap (~16 in Chromium): one canvas + one GL context + the
+ * shader programs compiled against it.
+ *
+ * Factored out of {@link WebGLContextManager} so that *many* managers
+ * (one per chart) can share *one* GL context. The browser limit is on
+ * contexts, not on the buffers/programs living inside one — a single
+ * context can host an arbitrary number of independent
+ * `WebGLBuffer`s/programs (bounded only by memory). So N charts can
+ * render through K ≪ N contexts as long as each keeps its own
+ * `BufferPool` (buffers are keyed by name; two charts would otherwise
+ * collide) and renders are serialized per context (the shared drawing
+ * buffer can hold one chart's frame at a time). See
+ * [context-pool.ts](./context-pool.ts) and the scheduler's per-backend
+ * grouping in [../render/scheduler.ts](../render/scheduler.ts).
+ *
+ * Shaders are shared per context: programs are immutable GLSL once
+ * compiled (uniforms are set per draw), so co-tenant charts reuse them
+ * and only pay the compile cost once per context.
+ */
+let NEXT_CONTEXT_ID = 1;
+
+export class GLContext {
+    readonly id: number;
+    readonly canvas: WebGLCanvas;
+    readonly gl: WebGL2RenderingContext | WebGLRenderingContext;
+    readonly isWebGL2: boolean;
+    shaders: ShaderRegistry;
+    private _maxVertexAttribs: number;
+    private _angle: ANGLE_instanced_arrays | null = null;
+    private _precompile: boolean;
+    private _destroyed = false;
+
+    /**
+     * Per-tenant hooks fired after a `webglcontextrestored`. Each
+     * {@link WebGLContextManager} on this context registers one that
+     * rebuilds its `BufferPool` (the shaders are rebuilt here, once, for
+     * all tenants). On an intentional {@link destroy} these are dropped
+     * without firing.
+     */
+    private _onRestore = new Set<() => void>();
+
+    constructor(canvas: WebGLCanvas, options: { precompile?: boolean } = {}) {
+        this.id = NEXT_CONTEXT_ID++;
+        this.canvas = canvas;
+        this._precompile = options.precompile ?? false;
+        const gl2 = canvas.getContext("webgl2", {
+            antialias: true,
+            alpha: true,
+            premultipliedAlpha: false,
+        });
+
+        if (gl2) {
+            this.gl = gl2 as WebGL2RenderingContext;
+            this.isWebGL2 = true;
+        } else {
+            const gl1 = canvas.getContext("webgl", {
+                antialias: true,
+                alpha: true,
+                premultipliedAlpha: false,
+            });
+
+            if (!gl1) {
+                throw new Error("WebGL is not supported");
+            }
+
+            this.gl = gl1 as WebGLRenderingContext;
+            this.isWebGL2 = false;
+        }
+
+        this.shaders = new ShaderRegistry(this.gl);
+        if (this._precompile) {
+            this.shaders.precompile(SHADER_MANIFEST);
+        }
+
+        this._maxVertexAttribs = this.gl.getParameter(
+            this.gl.MAX_VERTEX_ATTRIBS,
+        ) as number;
+        if (!this.isWebGL2) {
+            this._angle = this.gl.getExtension("ANGLE_instanced_arrays");
+        }
+
+        // Both `HTMLCanvasElement` and `OffscreenCanvas` dispatch
+        // `webglcontextlost` / `webglcontextrestored` on the canvas.
+        (canvas as EventTarget).addEventListener(
+            "webglcontextlost",
+            (e: Event) => {
+                // Don't reserve the slot for a restore once we've
+                // intentionally torn the context down — `destroy()`
+                // calls `loseContext()`, which fires this event.
+                if (this._destroyed) {
+                    return;
+                }
+
+                e.preventDefault();
+            },
+        );
+
+        (canvas as EventTarget).addEventListener("webglcontextrestored", () => {
+            // Rebuild the shared program cache once for the whole
+            // context, then let each tenant rebuild its own buffers.
+            this.shaders.releaseAll();
+            this.shaders = new ShaderRegistry(this.gl);
+            if (this._precompile) {
+                this.shaders.precompile(SHADER_MANIFEST);
+            }
+
+            for (const cb of this._onRestore) {
+                cb();
+            }
+        });
+    }
+
+    /**
+     * Return every vertex-attribute slot to its default state: disabled,
+     * with a zero instance divisor. Vertex-array state (enable flags,
+     * pointers, divisors) is global to a context's default VAO — there
+     * are no per-chart VAOs in this codebase — so when many charts share
+     * one pooled context, a slot a prior chart enabled stays enabled for
+     * the next chart, now pointing at a buffer the prior chart's
+     * teardown deleted. Its next `drawArraysInstanced` then fails GL
+     * validation: "no buffer is bound to enabled attribute", silently
+     * dropping the draw.
+     *
+     * Glyphs already (re)enable + bind + set the divisor for every slot
+     * they use on each frame, so clearing to the default here is a safe
+     * baseline — it only removes the *leftover* enables a sibling chart
+     * left behind. Called from {@link WebGLContextManager.beginFrame} in
+     * shared (pooled) mode only; the 1:1 default never shares a context
+     * and so keeps its original, reset-free path.
+     */
+    resetVertexArrayState(): void {
+        const gl = this.gl;
+        for (let i = 0; i < this._maxVertexAttribs; i++) {
+            gl.disableVertexAttribArray(i);
+            if (this.isWebGL2) {
+                (gl as WebGL2RenderingContext).vertexAttribDivisor(i, 0);
+            } else {
+                this._angle?.vertexAttribDivisorANGLE(i, 0);
+            }
+        }
+    }
+
+    /**
+     * Register a tenant's post-restore rebuild hook. Returns a disposer.
+     */
+    onRestore(cb: () => void): () => void {
+        this._onRestore.add(cb);
+        return () => this._onRestore.delete(cb);
+    }
+
+    /**
+     * True once lost — either our own {@link destroy} or a browser
+     * eviction of the oldest context past the per-agent cap.
+     */
+    isContextLost(): boolean {
+        return this._destroyed || this.gl.isContextLost();
+    }
+
+    get destroyed(): boolean {
+        return this._destroyed;
+    }
+
+    destroy(): void {
+        this._destroyed = true;
+        this._onRestore.clear();
+        this.shaders.releaseAll();
+        const ext = this.gl.getExtension("WEBGL_lose_context");
+        if (ext) {
+            ext.loseContext();
+        }
+    }
+}

package/src/ts/worker/dispatch.ts

@@ -41,7 +41,6 @@ export function dispatch(r: WorkerRenderer, msg: ControlMsg): void {
             r.redraw();
             break;
         case "resize":
-            console.log("resize");
             r.resize(msg.cssWidth, msg.cssHeight, msg.dpr);
             r.redraw();
             break;

package/src/ts/worker/renderer.worker.ts

@@ -16,6 +16,8 @@ import type { Client, Table, View } from "@perspective-dev/client";
 
 import type * as wasm_module_type from "@perspective-dev/viewer/dist/wasm/perspective-viewer.js";
 import { WebGLContextManager } from "../webgl/context-manager";
+import { ContextPool } from "../webgl/context-pool";
+import { RENDER_CONTEXT_POOL_SIZE } from "../config";
 import { ChartImplementation } from "../charts/chart";
 import { ZoomController } from "../interaction/zoom-controller";
 import {
@@ -37,7 +39,7 @@ import { viewToColumnDataMap } from "../data/view-reader";
 import { loadFontDeduped } from "./font-loader";
 import { dispatch } from "./dispatch";
 import { installSessionHost } from "./session-host";
-import { deferIfDraining } from "../render/scheduler";
+import { deferIfDraining, unregister } from "../render/scheduler";
 
 /**
  * Sentinel thrown inside the `with_typed_arrays` callback when a newer
@@ -76,6 +78,25 @@ async function resolveChartImpl(
     return await factory();
 }
 
+/**
+ * Renderer-scope shared context pool for pooled blit mode. Lazily
+ * created on first use so non-blit / non-pooled scopes never allocate
+ * one. One per renderer scope (the worker, or the main thread in
+ * in-process mode) — `WorkerRenderer`s in the same scope share its K
+ * contexts.
+ */
+let CONTEXT_POOL: ContextPool | null = null;
+
+function getContextPool(precompile: boolean): ContextPool {
+    if (!CONTEXT_POOL) {
+        CONTEXT_POOL = new ContextPool(RENDER_CONTEXT_POOL_SIZE, {
+            precompile,
+        });
+    }
+
+    return CONTEXT_POOL;
+}
+
 export class WorkerRenderer {
     chartImpl: ChartImplementation;
     glManager: WebGLContextManager;
@@ -131,20 +152,35 @@ export class WorkerRenderer {
 
         this.chartImpl = new ImplClass();
 
-        // Direct mode hands us the host's transferred `.webgl-canvas`.
-        // Blit mode omits it — the renderer owns its own offscreen
-        // surface and posts each completed frame back as an
-        // `ImageBitmap` via the `endFrame` callback wired below.
-        const glCanvas =
-            msg.glCanvas ??
-            new OffscreenCanvas(
-                Math.max(1, Math.round(msg.cssWidth * msg.dpr)),
-                Math.max(1, Math.round(msg.cssHeight * msg.dpr)),
+        // Three surfaces, by mode:
+        //  - direct: the host's transferred `.webgl-canvas` (1:1 with a
+        //    context, permanently).
+        //  - pooled blit: borrow one of K shared contexts so live-
+        //    context count stays bounded regardless of chart count.
+        //  - unpooled blit: a private offscreen surface per chart.
+        // Blit modes omit `msg.glCanvas`; the renderer ships each frame
+        // as an `ImageBitmap` via the `endFrame` callback wired below.
+        const pooled =
+            msg.renderMode === "blit" &&
+            !msg.glCanvas &&
+            RENDER_CONTEXT_POOL_SIZE > 0;
+
+        if (pooled) {
+            this.glManager = new WebGLContextManager(
+                getContextPool(msg.precompileShaders ?? false).acquire(),
             );
+        } else {
+            const glCanvas =
+                msg.glCanvas ??
+                new OffscreenCanvas(
+                    Math.max(1, Math.round(msg.cssWidth * msg.dpr)),
+                    Math.max(1, Math.round(msg.cssHeight * msg.dpr)),
+                );
 
-        this.glManager = new WebGLContextManager(glCanvas, {
-            precompile: msg.precompileShaders ?? false,
-        });
+            this.glManager = new WebGLContextManager(glCanvas, {
+                precompile: msg.precompileShaders ?? false,
+            });
+        }
 
         if (msg.renderMode === "blit") {
             this.glManager.setFrameCallback((bitmap) => {
@@ -177,41 +213,11 @@ export class WorkerRenderer {
         this.chartImpl.setView?.(view);
         this.glManager.bufferPool.maxCapacity = msg.bufferMaxCapacity;
         this.glManager.resize(msg.cssWidth, msg.cssHeight, msg.dpr);
-        const hostSink = new MessageHostSink((envelope) => {
-            switch (envelope.kind) {
-                case "pin":
-                    this.post({
-                        kind: "pinTooltip",
-                        lines: envelope.payload.lines,
-                        pos: envelope.payload.pos,
-                        bounds: envelope.payload.bounds,
-                    });
-                    break;
-                case "dismiss":
-                    this.post({ kind: "dismissTooltip" });
-                    break;
-                case "setCursor":
-                    this.post({ kind: "setCursor", cursor: envelope.cursor });
-                    break;
-                case "userClick":
-                    this.post({
-                        kind: "userClick",
-                        detail: envelope.payload as any,
-                    });
-                    break;
-                case "userSelect":
-                    this.post({
-                        kind: "userSelect",
-                        selected: envelope.payload.selected,
-                        row: envelope.payload.row,
-                        column_names: envelope.payload.column_names,
-                        insertConfig: envelope.payload.insertConfig as any,
-                    });
-                    break;
-            }
-        });
-
-        this.chartImpl.attachTooltip?.(hostSink);
+        // `MessageHostSink` emits `WorkerMsg`s directly — no translation
+        // needed here.
+        this.chartImpl.attachTooltip?.(
+            new MessageHostSink((msg) => this.post(msg)),
+        );
     }
 
     setViewByName(name: string): void {
@@ -309,13 +315,9 @@ export class WorkerRenderer {
                 }
             }
         } catch (err) {
-            // Any unexpected throw — proxy hiccup, chart-impl mutation
-            // failure, RAF chain rejection — must not leak past the
-            // outer fire-and-forget caller (`dispatch` does not await
-            // this method). Surface to the worker console; the host's
-            // pending promise still gets resolved via the `finally`
-            // ack below so `draw()` can't deadlock on a renderer error.
-            console.error("loadAndRender failed", err);
+            if ((err + "").indexOf("View not found") === -1) {
+                console.error("loadAndRender failed", err);
+            }
         } finally {
             this.post({ kind: "loadAndRenderAck", msgId: msg.msgId });
         }
@@ -417,10 +419,8 @@ export class WorkerRenderer {
 
     /**
      * Hit-test the cursor against the chart's facet grid (in faceted
-     * mode) or its current layout (single-plot). Mirrors the resolver
-     * `_setupZoomRouter` builds on the host for in-process mode — the
-     * worker owns the facet grid and controllers, so the resolution
-     * runs here.
+     * mode) or its current layout (single-plot). The worker owns the
+     * facet grid and controllers, so the resolution runs here.
      */
     private _resolveTarget(mx: number, my: number): ZoomTarget | null {
         const chart = this.chartImpl as any;
@@ -564,12 +564,14 @@ export class WorkerRenderer {
      * Composite the three layers into a single PNG `Blob`.
      */
     async snapshotPng(): Promise<Blob> {
-        // Snapshot bypasses the scheduler's drain, so it must
-        // mirror Phase 1's "apply pending resize before paint"
-        // step itself — otherwise a snapshot taken after a resize
-        // message but before the next drain would render at the
-        // previous dimensions.
-        this.glManager.applyPendingResize();
+        // Snapshot bypasses the scheduler's drain, so it must mirror
+        // the per-frame prep itself — apply any pending resize, and in
+        // pooled blit mode size the shared canvas to this chart and
+        // reset shared GL state — otherwise a snapshot taken after a
+        // resize message but before the next drain (or after a co-tenant
+        // chart left the shared canvas at its own size) would render at
+        // the wrong dimensions.
+        this.glManager.beginFrame();
         this.chartImpl._fullRender(this.glManager);
         const gl = this.glManager.gl;
         const glCanvas = gl.canvas as OffscreenCanvas;
@@ -610,6 +612,11 @@ export class WorkerRenderer {
     }
 
     destroy(): void {
+        // Drop any frame this manager still has queued in the
+        // module-level scheduler *before* losing its GL context, so a
+        // next-RAF `drain()` can't paint/present against a dead
+        // context (the "scheduler: present failed" path).
+        unregister(this.glManager);
         this.chartImpl.destroy();
         this.glManager.destroy();
     }

package/src/ts/worker/session-host.ts

@@ -21,6 +21,20 @@ import { dispatch } from "./dispatch";
 
 const RENDERERS = new Map<number, WorkerRenderer>();
 
+/**
+ * Sessions whose `destroy` arrived before their async `bootstrap`
+ * resolved. Bootstrap does multiple awaits (wasm `initSync`, font
+ * loads, `open_table`, lazy chart-impl import); a host that connects
+ * then immediately disconnects a viewer can post `init` and `destroy`
+ * back-to-back, with `destroy` landing while the renderer is still
+ * being built. The plain `RENDERERS.get(sessionId)` lookup in the
+ * destroy branch would miss it and the bootstrap would then register a
+ * renderer (and its WebGL context) that nothing ever tears down —
+ * leaking one context per raced toggle until the browser evicts the
+ * oldest. We tombstone the id here and honor it when bootstrap lands.
+ */
+const PENDING_DESTROY = new Set<number>();
+
 function postSession(
     sessionId: number,
     msg: WorkerMsg,
@@ -89,9 +103,18 @@ export function installSessionHost(
 
             bootstrap(msg as InitMsg, makeSessionPort(sessionId))
                 .then((r) => {
+                    // A `destroy` raced ahead of bootstrap completing —
+                    // honor it now instead of leaking the freshly-built
+                    // renderer + its WebGL context.
+                    if (PENDING_DESTROY.delete(sessionId)) {
+                        dispatch(r, { kind: "destroy" });
+                        return;
+                    }
+
                     RENDERERS.set(sessionId, r);
                 })
                 .catch((err) => {
+                    PENDING_DESTROY.delete(sessionId);
                     postSession(sessionId, {
                         kind: "error",
                         message: String(err),
@@ -105,6 +128,12 @@ export function installSessionHost(
             if (r) {
                 dispatch(r, msg);
                 RENDERERS.delete(sessionId);
+            } else {
+                // Renderer not registered yet — bootstrap is still in
+                // flight. Tombstone the id so the bootstrap `.then`
+                // tears it down on arrival instead of registering a
+                // leaked context.
+                PENDING_DESTROY.add(sessionId);
             }
 
             return;