@perspective-dev/viewer-charts 5.2.0 → 5.3.0

package/src/ts/transport/protocol.ts

@@ -100,8 +100,20 @@ export interface InitMsg {
      * `dpr` and there is no host-side GL drawing buffer.
      */
     glCanvas?: OffscreenCanvas;
-    gridlinesCanvas: OffscreenCanvas;
-    chromeCanvas: OffscreenCanvas;
+
+    /**
+     * The gridlines (bottom) and chrome/axes (top) 2D layers.
+     * Transferred via `transferControlToOffscreen` on the host, present
+     * iff `renderMode === "direct"` — their pixels reach the screen
+     * through the compositor. In blit mode the renderer allocates
+     * worker-local surfaces instead and composites both layers into the
+     * shipped `FrameBitmapMsg`, so every layer of the frame rides the
+     * host's staged-present hold (a transferred canvas presents on the
+     * compositor's own schedule, unsynchronized with the host's layout
+     * commits — the one-frame axes warp on anticipated resizes).
+     */
+    gridlinesCanvas?: OffscreenCanvas;
+    chromeCanvas?: OffscreenCanvas;
 
     /**
      * `MessagePort` to the host's `ProxySession`. Worker mode only —

package/src/ts/transport/renderer-transport.ts

@@ -299,15 +299,24 @@ export class RendererTransport {
         // `ImageBitmap`. Direct mode transfers the visible canvas's
         // drawing buffer to the renderer so GL paints straight to
         // screen.
+        // Blit mode also keeps the gridlines/chrome layers worker-side:
+        // a transferred canvas presents on the compositor's schedule,
+        // unsynchronized with the host's layout commits, so it can't
+        // participate in the staged-present hold. The renderer
+        // composites both layers into the shipped frame instead, and
+        // the host-side placeholder canvases stay untouched
+        // (transparent). Direct mode transfers all three surfaces.
         let glOC: OffscreenCanvas | undefined;
+        let gridlinesOC: OffscreenCanvas | undefined;
+        let chromeOC: OffscreenCanvas | undefined;
         if (opts.renderBlitMode === "blit") {
             this._displayCtx = opts.gl.getContext("2d");
         } else {
             glOC = opts.gl.transferControlToOffscreen();
+            gridlinesOC = opts.gridlines.transferControlToOffscreen();
+            chromeOC = opts.chrome.transferControlToOffscreen();
         }
 
-        const gridlinesOC = opts.gridlines.transferControlToOffscreen();
-        const chromeOC = opts.chrome.transferControlToOffscreen();
         const rect = opts.gl.getBoundingClientRect();
         const dpr = window.devicePixelRatio || 1;
         const themeVars = snapshotThemeVars(opts.gl);
@@ -365,14 +374,19 @@ export class RendererTransport {
             // Worker mode: the bootstrap is triggered by posting the
             // init message into the worker's scope (which the
             // `if (IS_WORKER_SCOPE)` block in `renderer.worker.ts`
-            // listens for). `glOC` is omitted in blit mode (the
-            // renderer allocates its own offscreen) — only include the
-            // GL canvas in the transfer list when present.
-            const transfer: Transferable[] = [
-                gridlinesOC,
-                chromeOC,
-                this._proxyChannel!.port2,
-            ];
+            // listens for). All three canvases are omitted in blit mode
+            // (the renderer allocates its own offscreens and ships
+            // composited frames) — only include the transferred
+            // surfaces present on this mode's init message.
+            const transfer: Transferable[] = [this._proxyChannel!.port2];
+            if (chromeOC) {
+                transfer.unshift(chromeOC);
+            }
+
+            if (gridlinesOC) {
+                transfer.unshift(gridlinesOC);
+            }
+
             if (glOC) {
                 transfer.unshift(glOC);
             }

package/src/ts/utils/css.ts

@@ -34,3 +34,15 @@ export function parseCSSColorToVec3(
 
     return [0.5, 0.5, 0.5];
 }
+
+/**
+ * Format a `[0, 1]`-range RGB triple as a plain `#rrggbb` string.
+ */
+export function vec3ToHexColor(c: [number, number, number]): string {
+    const channel = (x: number) =>
+        Math.round(Math.max(0, Math.min(1, x)) * 255)
+            .toString(16)
+            .padStart(2, "0");
+
+    return `#${channel(c[0])}${channel(c[1])}${channel(c[2])}`;
+}

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

@@ -106,6 +106,20 @@ export class WorkerRenderer {
     cssWidth: number;
     cssHeight: number;
     dpr: number;
+
+    /**
+     * Blit-mode compose surface: gridlines + GL frame + chrome are
+     * drawn here each `endFrame` and shipped as ONE `ImageBitmap`, so
+     * every layer rides the host's staged-present hold (see
+     * `InitMsg.gridlinesCanvas`). `null` in direct mode.
+     */
+    private _composeCanvas: OffscreenCanvas | null = null;
+    private _composeCtx: OffscreenCanvasRenderingContext2D | null = null;
+
+    private _lastPlot: ImageBitmap | null = null;
+
+    private _frameSerial = 0;
+    private _overlayPresentQueued = false;
     client: Client;
     view: View;
 
@@ -182,20 +196,31 @@ export class WorkerRenderer {
             });
         }
 
+        // Blit mode: the 2D layers are worker-local (the host omits
+        // them from the init message) and every shipped frame is the
+        // full composite — gridlines under the GL plot under chrome,
+        // the same stacking as the host's canvas elements and the
+        // `snapshotPng` composite. Direct mode draws into the host's
+        // transferred surfaces and ships nothing.
+        const w = Math.max(1, Math.round(msg.cssWidth * msg.dpr));
+        const h = Math.max(1, Math.round(msg.cssHeight * msg.dpr));
+        this.gridlines = msg.gridlinesCanvas ?? new OffscreenCanvas(w, h);
+        this.chrome = msg.chromeCanvas ?? new OffscreenCanvas(w, h);
         if (msg.renderMode === "blit") {
             this.glManager.setFrameCallback((bitmap) => {
-                this.post({ kind: "frameBitmap", bitmap }, [bitmap]);
+                this._frameSerial += 1;
+                const frame = this._composeFrame(bitmap);
+                this.post({ kind: "frameBitmap", bitmap: frame }, [frame]);
             });
+            this.chartImpl.setOverlayPresenter?.(() => this._presentOverlay());
         }
 
-        this.gridlines = msg.gridlinesCanvas;
-        this.chrome = msg.chromeCanvas;
         this.cssWidth = msg.cssWidth;
         this.cssHeight = msg.cssHeight;
         this.dpr = msg.dpr;
 
-        this.chartImpl.setGridlineCanvas?.(msg.gridlinesCanvas);
-        this.chartImpl.setChromeCanvas?.(msg.chromeCanvas);
+        this.chartImpl.setGridlineCanvas?.(this.gridlines);
+        this.chartImpl.setChromeCanvas?.(this.chrome);
         this.chartImpl.setTheme?.(msg.themeVars);
 
         if (msg.defaultChartType) {
@@ -588,6 +613,87 @@ export class WorkerRenderer {
         return tt ?? null;
     }
 
+    /**
+     * Blit-mode frame composite: draw the gridlines (bottom), the GL
+     * plot bitmap (middle) and the chrome/axes (top) into the compose
+     * surface and transfer the result — the single `ImageBitmap` the
+     * host blits, and the unit the staged-present hold stages. Runs in
+     * `endFrame`, which the scheduler orders after `render2D`'s 2D
+     * flush, so both layers hold this frame's content.
+     *
+     * A layer whose buffer differs from the plot's dimensions is
+     * skipped rather than scaled: its content is a stale-sized frame
+     * mid-resize (the 2D draws re-size their canvas to `css × dpr` on
+     * the next flush), and scaling it would re-introduce exactly the
+     * warp this composite exists to prevent.
+     */
+    private _composeFrame(plot: ImageBitmap): ImageBitmap {
+        const w = plot.width;
+        const h = plot.height;
+        if (!this._composeCanvas) {
+            this._composeCanvas = new OffscreenCanvas(w, h);
+            this._composeCtx = this._composeCanvas.getContext("2d");
+        }
+
+        const canvas = this._composeCanvas;
+        const ctx = this._composeCtx;
+        if (!ctx) {
+            return plot;
+        }
+
+        if (canvas.width !== w || canvas.height !== h) {
+            canvas.width = w;
+            canvas.height = h;
+        } else {
+            ctx.clearRect(0, 0, w, h);
+        }
+
+        if (this.gridlines.width === w && this.gridlines.height === h) {
+            ctx.drawImage(this.gridlines, 0, 0);
+        }
+
+        ctx.drawImage(plot, 0, 0);
+        if (this._lastPlot !== plot) {
+            this._lastPlot?.close();
+            this._lastPlot = plot;
+        }
+
+        if (this.chrome.width === w && this.chrome.height === h) {
+            ctx.drawImage(this.chrome, 0, 0);
+        }
+
+        return canvas.transferToImageBitmap();
+    }
+
+    private _presentOverlay(): void {
+        if (this._overlayPresentQueued) {
+            return;
+        }
+
+        this._overlayPresentQueued = true;
+        const mark = this._frameSerial;
+        queueMicrotask(() => {
+            this._overlayPresentQueued = false;
+            const plot = this._lastPlot;
+            if (this._frameSerial !== mark || !plot) {
+                return;
+            }
+
+            const w = Math.max(1, Math.round(this.cssWidth * this.dpr));
+            const h = Math.max(1, Math.round(this.cssHeight * this.dpr));
+            if (plot.width !== w || plot.height !== h) {
+                return;
+            }
+
+            const frame = this._composeFrame(plot);
+            if (frame === plot) {
+                return;
+            }
+
+            this.post({ kind: "frameBitmap", bitmap: frame }, [frame]);
+        });
+    }
+
     /**
      * Composite the three layers into a single PNG `Blob`.
      */
@@ -649,6 +755,8 @@ export class WorkerRenderer {
         // next-RAF `drain()` can't paint/present against a dead
         // context (the "scheduler: present failed" path).
         unregister(this.glManager);
+        this._lastPlot?.close();
+        this._lastPlot = null;
         this.chartImpl.destroy();
         this.glManager.destroy();
     }