@odori/cli 0.0.6 → 0.0.7

package/dist/{chunk-6CE7U5KB.js → chunk-STVORYOF.js}

@@ -1757,9 +1757,10 @@ var renderUrl = (origin, target, frame) => {
   if (target.prepared !== void 0) params.set("prepared", encodeParam(target.prepared));
   return `${origin}/?${params.toString()}`;
 };
+var BROWSER_ARGS = ["--enable-unsafe-swiftshader"];
 var openRenderPage = async (origin, target, config) => {
   const executablePath = await browserExecutable(config);
-  const browser = await chromium.launch({ executablePath, headless: true });
+  const browser = await chromium.launch({ executablePath, headless: true, args: BROWSER_ARGS });
   const page = await browser.newPage({
     viewport: { width: target.width, height: target.height },
     deviceScaleFactor: 1
@@ -3427,15 +3428,36 @@ var CANVAS_SCRIPT = `(() => {
   });
 
   return canvases.map(function (canvas, index) {
-    var context = canvas.getContext("2d");
-    if (!context || canvas.width === 0 || canvas.height === 0) {
+    if (canvas.width === 0 || canvas.height === 0) {
       return {index: index, hash: "no-context", blank: true};
     }
     var data;
-    try {
-      data = context.getImageData(0, 0, canvas.width, canvas.height).data;
-    } catch (error) {
-      return {index: index, hash: "tainted", blank: false};
+    var isGl = false;
+    var context = canvas.getContext("2d");
+    if (context) {
+      try {
+        data = context.getImageData(0, 0, canvas.width, canvas.height).data;
+      } catch (error) {
+        return {index: index, hash: "tainted", blank: false};
+      }
+    } else {
+      /*
+       * A canvas that already holds a GL context returns null for "2d", and
+       * reading that as an empty canvas reported every shader video as having
+       * drawn nothing while it was drawing correctly. Pixels come back through
+       * readPixels instead, which is the only way to see a GL surface.
+       *
+       * Worth knowing when this comes back empty: a drawing buffer is cleared
+       * once it has been composited unless the context was asked for with
+       * preserveDrawingBuffer, so an author who has not set that gets a real
+       * frame on screen and nothing here.
+       */
+      var gl = canvas.getContext("webgl2") || canvas.getContext("webgl");
+      if (!gl) return {index: index, hash: "no-context", blank: true};
+      var pixels4 = new Uint8Array(canvas.width * canvas.height * 4);
+      gl.readPixels(0, 0, canvas.width, canvas.height, gl.RGBA, gl.UNSIGNED_BYTE, pixels4);
+      data = pixels4;
+      isGl = true;
     }
 
     // A prime stride over the whole buffer rather than a coarse grid: a grid
@@ -3451,7 +3473,7 @@ var CANVAS_SCRIPT = `(() => {
       hash =
         ((hash << 5) + hash + data[offset] + data[offset + 1] * 3 + data[offset + 2] * 7 + data[offset + 3] * 11) | 0;
     }
-    return {index: index, hash: String(hash), blank: opaque === 0};
+    return {index: index, hash: String(hash), blank: opaque === 0, gl: isGl};
   });
 })()`;
 var FRAME_SCRIPT = `(() => {
@@ -3466,6 +3488,11 @@ var FRAME_SCRIPT = `(() => {
 
   for (var index = 0; index < nodes.length; index += 1) {
     var node = nodes[index];
+    /* The subtree an effect surface is photographing is deliberately parked
+       outside the frame. It is the input to a canvas, not something a viewer
+       ever sees, so judging its position or its type size is judging the
+       wrong thing. */
+    if (node.closest("[data-odori-capture]")) continue;
     var box = node.getBoundingClientRect();
     if (box.width === 0 || box.height === 0) continue;
     var style = getComputedStyle(node);
@@ -3572,7 +3599,10 @@ var testVideo = async (origin, video, config, failures, quiet = false) => {
         for (const canvas of canvases) {
           const second = again.find((item) => item.index === canvas.index);
           if (canvas.blank) {
-            failures.push({ video: id, message: `Frame ${frame}: canvas ${canvas.index} drew nothing.` });
+            failures.push({
+              video: id,
+              message: canvas.gl ? `Frame ${frame}: canvas ${canvas.index} read back empty. A WebGL drawing buffer is cleared once it has been composited, so ask for the context with {preserveDrawingBuffer: true}.` : `Frame ${frame}: canvas ${canvas.index} drew nothing.`
+            });
             continue;
           }
           if (canvas.hash === "tainted") {

package/dist/cli.js

@@ -2,7 +2,7 @@ import {
   checkFlags,
   parseArgs,
   run
-} from "./chunk-6CE7U5KB.js";
+} from "./chunk-STVORYOF.js";
 export {
   checkFlags,
   parseArgs,

package/dist/index.js

@@ -75,7 +75,7 @@ import {
   withServer,
   writeGenerated,
   writePrepareCache
-} from "./chunk-6CE7U5KB.js";
+} from "./chunk-STVORYOF.js";
 export {
   CHROME_BUILD,
   FORMATS,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odori/cli",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "type": "module",
   "description": "The odori command line: discovery, Studio, component installation, stills, tests, and export jobs.",
   "license": "Apache-2.0",
@@ -28,7 +28,7 @@
     "playwright-core": "1.55.0",
     "tsx": "4.20.5",
     "vite": "7.3.0",
-    "odori": "0.0.6"
+    "odori": "0.0.7"
   },
   "devDependencies": {
     "@types/node": "22.19.0",
@@ -36,7 +36,7 @@
     "@types/react-dom": "19.2.3",
     "tsup": "^8.5.1",
     "typescript": "5.9.3",
-    "@odori/registry": "0.0.6"
+    "@odori/registry": "0.0.7"
   },
   "publishConfig": {
     "access": "public"

package/src/commands/test.ts

@@ -35,15 +35,36 @@ const CANVAS_SCRIPT = `(() => {
   });
 
   return canvases.map(function (canvas, index) {
-    var context = canvas.getContext("2d");
-    if (!context || canvas.width === 0 || canvas.height === 0) {
+    if (canvas.width === 0 || canvas.height === 0) {
       return {index: index, hash: "no-context", blank: true};
     }
     var data;
-    try {
-      data = context.getImageData(0, 0, canvas.width, canvas.height).data;
-    } catch (error) {
-      return {index: index, hash: "tainted", blank: false};
+    var isGl = false;
+    var context = canvas.getContext("2d");
+    if (context) {
+      try {
+        data = context.getImageData(0, 0, canvas.width, canvas.height).data;
+      } catch (error) {
+        return {index: index, hash: "tainted", blank: false};
+      }
+    } else {
+      /*
+       * A canvas that already holds a GL context returns null for "2d", and
+       * reading that as an empty canvas reported every shader video as having
+       * drawn nothing while it was drawing correctly. Pixels come back through
+       * readPixels instead, which is the only way to see a GL surface.
+       *
+       * Worth knowing when this comes back empty: a drawing buffer is cleared
+       * once it has been composited unless the context was asked for with
+       * preserveDrawingBuffer, so an author who has not set that gets a real
+       * frame on screen and nothing here.
+       */
+      var gl = canvas.getContext("webgl2") || canvas.getContext("webgl");
+      if (!gl) return {index: index, hash: "no-context", blank: true};
+      var pixels4 = new Uint8Array(canvas.width * canvas.height * 4);
+      gl.readPixels(0, 0, canvas.width, canvas.height, gl.RGBA, gl.UNSIGNED_BYTE, pixels4);
+      data = pixels4;
+      isGl = true;
     }
 
     // A prime stride over the whole buffer rather than a coarse grid: a grid
@@ -59,11 +80,11 @@ const CANVAS_SCRIPT = `(() => {
       hash =
         ((hash << 5) + hash + data[offset] + data[offset + 1] * 3 + data[offset + 2] * 7 + data[offset + 3] * 11) | 0;
     }
-    return {index: index, hash: String(hash), blank: opaque === 0};
+    return {index: index, hash: String(hash), blank: opaque === 0, gl: isGl};
   });
 })()`;
 
-type CanvasReport = Array<{index: number; hash: string; blank: boolean}>;
+type CanvasReport = Array<{index: number; hash: string; blank: boolean; gl?: boolean}>;
 
 /**
  * Evaluated as source in the page so no bundler helpers leak into the browser.
@@ -81,6 +102,11 @@ const FRAME_SCRIPT = `(() => {
 
   for (var index = 0; index < nodes.length; index += 1) {
     var node = nodes[index];
+    /* The subtree an effect surface is photographing is deliberately parked
+       outside the frame. It is the input to a canvas, not something a viewer
+       ever sees, so judging its position or its type size is judging the
+       wrong thing. */
+    if (node.closest("[data-odori-capture]")) continue;
     var box = node.getBoundingClientRect();
     if (box.width === 0 || box.height === 0) continue;
     var style = getComputedStyle(node);
@@ -211,7 +237,12 @@ const testVideo = async (
         for (const canvas of canvases) {
           const second = again.find((item) => item.index === canvas.index);
           if (canvas.blank) {
-            failures.push({video: id, message: `Frame ${frame}: canvas ${canvas.index} drew nothing.`});
+            failures.push({
+            video: id,
+            message: canvas.gl
+              ? `Frame ${frame}: canvas ${canvas.index} read back empty. A WebGL drawing buffer is cleared once it has been composited, so ask for the context with {preserveDrawingBuffer: true}.`
+              : `Frame ${frame}: canvas ${canvas.index} drew nothing.`,
+          });
             continue;
           }
           if (canvas.hash === "tainted") {

package/src/render.ts

@@ -35,6 +35,23 @@ const renderUrl = (origin: string, target: RenderTarget, frame: number) => {
   return `${origin}/?${params.toString()}`;
 };
 
+/**
+ * Flags the render browser is launched with.
+ *
+ * Headless Chrome has no GPU, so a WebGL context is simply refused and
+ * `getContext("webgl2")` returns null: a video that post-processes through a
+ * shader renders black in the export and nowhere else, which is the worst
+ * shape a bug can take. This turns on ANGLE's software backend, which draws
+ * the same picture on any machine and is therefore the right one for a
+ * renderer that has to agree with itself across parallel workers.
+ *
+ * Measured against the pinned build rather than guessed. The combination that
+ * reads as obvious, `--use-gl=angle --use-angle=swiftshader`, leaves WebGL2
+ * off; this flag alone turns it on. Nothing changes for a video that never
+ * asks for a GL context.
+ */
+export const BROWSER_ARGS = ["--enable-unsafe-swiftshader"];
+
 export type RenderPage = {browser: Browser; page: Page; errors: string[]};
 
 /** Open one video in render mode and wait for its first frame to mount. */
@@ -44,7 +61,7 @@ export const openRenderPage = async (
   config: ResolvedConfig,
 ): Promise<RenderPage> => {
   const executablePath = await browserExecutable(config);
-  const browser = await chromium.launch({executablePath, headless: true});
+  const browser = await chromium.launch({executablePath, headless: true, args: BROWSER_ARGS});
   const page = await browser.newPage({
     viewport: {width: target.width, height: target.height},
     deviceScaleFactor: 1,