pixi-effects 0.42.0 → 0.43.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.43.0
+
+A `three` layer on WebGPU shares PixiJS's GPU device, and the tests stop depending on the gallery. Nothing breaks.
+
+- **Changed (tests, nothing for users): no library test uses a gallery piece as its subject.** The tests whose subject is the gallery or the site are in `tests/site/` (`npm run test:site`); the pages made for the tests, formerly `examples/_checks/`, are in `tests/films/`; the player and the timeline viewer have films of their own; `noFalseWarnings` runs every test film.
+- **New: a `three` layer with `renderer: 'webgpu'` draws on PixiJS's own GPU device (`shareGpu`, default `true`).** In a movie PixiJS draws on WebGPU, the layer renders into a texture that PixiJS samples directly: no canvas of its own, no copy. The picture is the same (0 of 255 different in every channel of nine pictures, with antialias, fog and tone mapping), it is faster (spike: 0.7 against 1.1 ms for one layer, 1.6 against 5.7 ms for ten), and the browser's limit of about 32 WebGPU canvases no longer applies (a 60-layer film draws every layer; such a layer is not counted by the "too many three layers" warning). `shareGpu: false` keeps a canvas of its own; PixiJS on WebGL or any failure of the shared route does the same (one warning, before `setup`). `movie.inspect()` shows `sharedGpu`. The default `renderer` stays `'webgl'`. `tests/films/three-renderers`, `three-budget`, `tests/core/gpuShare.test.ts`.
+
 ## 0.42.0
 
 Interaction on top of `pick`: hover, dragging, a hit that looks at the picture, and a fix for a false warning that every rebuilt page with a `three` layer showed since 0.40.0. Nothing breaks.

package/README.md

@@ -1,6 +1,6 @@
 # pixi-effects
 
-> **Status**: experimental — current release `0.42.0`. The API may still change between minor versions; see the [CHANGELOG](./CHANGELOG.md) for what each release changed.
+> **Status**: experimental — current release `0.43.0`. The API may still change between minor versions; see the [CHANGELOG](./CHANGELOG.md) for what each release changed.
 
 **[Gallery →](https://yjmtmtk.github.io/pixi-effects/examples/gallery/)** · 43 pieces written as plain data by AI models · **[For AI →](https://yjmtmtk.github.io/pixi-effects/for-ai.html)** · what an AI reads and runs · **[Playground →](https://yjmtmtk.github.io/pixi-effects/examples/playground.html)** in the browser.
 
@@ -49,8 +49,8 @@ Drop the imports into an [importmap](https://developer.mozilla.org/docs/Web/HTML
   "imports": {
     "pixi.js":                 "https://esm.sh/pixi.js@8.22.0?bundle-deps",
     "mediabunny":              "https://esm.sh/mediabunny",
-    "pixi-effects":            "https://cdn.jsdelivr.net/npm/pixi-effects@0.42.0/dist/index.js",
-    "pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.42.0/dist/Controller.js"
+    "pixi-effects":            "https://cdn.jsdelivr.net/npm/pixi-effects@0.43.0/dist/index.js",
+    "pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.43.0/dist/Controller.js"
   }
 }
 </script>
@@ -61,7 +61,7 @@ Drop the imports into an [importmap](https://developer.mozilla.org/docs/Web/HTML
 </script>
 ```
 
-Load the `dist/` files **as they are** (jsDelivr's `/npm/…/dist/…`, or unpkg's `https://unpkg.com/pixi-effects@0.42.0/dist/index.js`) rather than a CDN-rebundled build such as `esm.sh/pixi-effects` or jsDelivr's `+esm`: the entries (`pixi-effects`, `…/controller`, `…/three`) share internal chunks, which only works when each file is served untouched.
+Load the `dist/` files **as they are** (jsDelivr's `/npm/…/dist/…`, or unpkg's `https://unpkg.com/pixi-effects@0.43.0/dist/index.js`) rather than a CDN-rebundled build such as `esm.sh/pixi-effects` or jsDelivr's `+esm`: the entries (`pixi-effects`, `…/controller`, `…/three`) share internal chunks, which only works when each file is served untouched.
 
 > **Using three.js?** Add two more entries (`three` and `pixi-effects/three`) to this importmap — see [Adding three.js](#adding-threejs-optional) below.
 >
@@ -78,7 +78,7 @@ Add two more entries to the importmap above: three.js itself, and the `pixi-effe
     "...":                     "(everything from the importmap above)",
     "three":                   "https://esm.sh/three@0.178.0",
     "three/addons/":           "https://cdn.jsdelivr.net/npm/three@0.178.0/examples/jsm/",
-    "pixi-effects/three":      "https://cdn.jsdelivr.net/npm/pixi-effects@0.42.0/dist/three.js"
+    "pixi-effects/three":      "https://cdn.jsdelivr.net/npm/pixi-effects@0.43.0/dist/three.js"
   }
 }
 </script>

package/ai/chat-template.html

@@ -59,9 +59,9 @@
     "imports": {
       "pixi.js":                 "https://cdn.jsdelivr.net/npm/pixi.js@8.22.0/dist/pixi.min.mjs",
       "mediabunny":              "https://cdn.jsdelivr.net/npm/mediabunny@1.61.3/+esm",
-      "pixi-effects":            "https://cdn.jsdelivr.net/npm/pixi-effects@0.42.0/dist/index.js",
-      "pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.42.0/dist/Controller.js",
-      "pixi-effects/present":  "https://cdn.jsdelivr.net/npm/pixi-effects@0.42.0/dist/present.js"
+      "pixi-effects":            "https://cdn.jsdelivr.net/npm/pixi-effects@0.43.0/dist/index.js",
+      "pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.43.0/dist/Controller.js",
+      "pixi-effects/present":  "https://cdn.jsdelivr.net/npm/pixi-effects@0.43.0/dist/present.js"
     }
   }
   </script>

package/dist/{Base-Jgkud1Aw.d.ts → Base-DKFQtqzW.d.ts}

@@ -1,5 +1,5 @@
 import { Container } from 'pixi.js';
-import { S as SequenceSpec, C as CompositionShape } from './types-DIh93lFb.js';
+import { S as SequenceSpec, C as CompositionShape } from './types-DiNHtdrS.js';
 
 /**
  * Resolves a routed keyframe path to a concrete tween target.

package/dist/{Base-DQWIJ6bJ.d.cts → Base-lb5Uhaqu.d.cts}

@@ -1,5 +1,5 @@
 import { Container } from 'pixi.js';
-import { S as SequenceSpec, C as CompositionShape } from './types-DIh93lFb.cjs';
+import { S as SequenceSpec, C as CompositionShape } from './types-DiNHtdrS.cjs';
 
 /**
  * Resolves a routed keyframe path to a concrete tween target.

package/dist/Controller.d.cts

@@ -1,7 +1,7 @@
-import { M as Movie } from './Movie-BHGhg-fJ.cjs';
+import { M as Movie } from './Movie-BdUm2Mc9.cjs';
 import 'pixi.js';
 import './soundEntry-DT13DNt8.cjs';
-import './types-DIh93lFb.cjs';
+import './types-DiNHtdrS.cjs';
 
 /**
  * The look of the bar. Each key sets a CSS custom property on the bar (so you can also set `--mc-accent` … in your own CSS, on the

package/dist/Controller.d.ts

@@ -1,7 +1,7 @@
-import { M as Movie } from './Movie-CBVFZ1kg.js';
+import { M as Movie } from './Movie-B_qQIYV6.js';
 import 'pixi.js';
 import './soundEntry-DT13DNt8.js';
-import './types-DIh93lFb.js';
+import './types-DiNHtdrS.js';
 
 /**
  * The look of the bar. Each key sets a CSS custom property on the bar (so you can also set `--mc-accent` … in your own CSS, on the

package/dist/{Movie-CBVFZ1kg.d.ts → Movie-B_qQIYV6.d.ts}

@@ -1,6 +1,6 @@
 import { Application } from 'pixi.js';
 import { A as AudioReport, a as AudioInspectOptions } from './soundEntry-DT13DNt8.js';
-import { b as Stop, A as AssetSpec, a as CompositionSpec } from './types-DIh93lFb.js';
+import { b as Stop, A as AssetSpec, a as CompositionSpec } from './types-DiNHtdrS.js';
 
 type EaseFn = (p: number) => number;
 
@@ -213,6 +213,8 @@ interface LayerInfo {
     /** A `three` layer: the renderer it draws with (`'webgl'` / `'webgpu'`) and the backend under it (`'webgl2'`: three's WebGPURenderer found no WebGPU and used its own WebGL2 backend: the same picture). */
     renderer?: 'webgl' | 'webgpu';
     backend?: 'webgl' | 'webgpu' | 'webgl2';
+    /** A `three` layer with `renderer: 'webgpu'`: true when it draws on PixiJS's own GPU device (no canvas of its own); false when it has a canvas of its own (`shareGpu: false`, or PixiJS is on WebGL). */
+    sharedGpu?: boolean;
 }
 interface InspectReport {
     frame: number;

package/dist/{Movie-BHGhg-fJ.d.cts → Movie-BdUm2Mc9.d.cts}

@@ -1,6 +1,6 @@
 import { Application } from 'pixi.js';
 import { A as AudioReport, a as AudioInspectOptions } from './soundEntry-DT13DNt8.cjs';
-import { b as Stop, A as AssetSpec, a as CompositionSpec } from './types-DIh93lFb.cjs';
+import { b as Stop, A as AssetSpec, a as CompositionSpec } from './types-DiNHtdrS.cjs';
 
 type EaseFn = (p: number) => number;
 
@@ -213,6 +213,8 @@ interface LayerInfo {
     /** A `three` layer: the renderer it draws with (`'webgl'` / `'webgpu'`) and the backend under it (`'webgl2'`: three's WebGPURenderer found no WebGPU and used its own WebGL2 backend: the same picture). */
     renderer?: 'webgl' | 'webgpu';
     backend?: 'webgl' | 'webgpu' | 'webgl2';
+    /** A `three` layer with `renderer: 'webgpu'`: true when it draws on PixiJS's own GPU device (no canvas of its own); false when it has a canvas of its own (`shareGpu: false`, or PixiJS is on WebGL). */
+    sharedGpu?: boolean;
 }
 interface InspectReport {
     frame: number;

package/dist/{chunk-NFJKBWYO.js → chunk-6N5ZBUOU.js}

@@ -7,6 +7,21 @@ import { warnUnknownOptions, suggestName } from './chunk-BXOCEZ4U.js';
 import { extensions, CullerPlugin, Application, Container, Rectangle, Culler, CanvasTextMetrics, TextStyle, Assets, ExtensionType, Filter, Texture, UniformGroup, GpuProgram, GlProgram, defaultFilterVert } from 'pixi.js';
 import { Output, BufferTarget, CanvasSource, AudioBufferSource, Input, ALL_FORMATS, BlobSource, WavOutputFormat, Conversion, VideoSampleSink, OggOutputFormat, QUALITY_VERY_HIGH, QUALITY_HIGH, QUALITY_MEDIUM, QUALITY_LOW, QUALITY_VERY_LOW, MkvOutputFormat, WebMOutputFormat, MovOutputFormat, Mp4OutputFormat, canEncodeVideo, getFirstEncodableAudioCodec } from 'mediabunny';
 
+// src/core/gpuShare.ts
+function sharedGpuOf(renderer) {
+  const r = renderer;
+  if (!r || r.name !== "webgpu" || !r.gpu?.device) return void 0;
+  const uid = r.uid;
+  return {
+    device: r.gpu.device,
+    adopt(source, texture) {
+      const data = source._gpuData;
+      if (!data || typeof data !== "object") throw new Error("this PixiJS keeps no _gpuData on its texture sources");
+      data[uid] = { textureView: null, textureViews: /* @__PURE__ */ Object.create(null), gpuTexture: texture, destroy() {
+      } };
+    }
+  };
+}
 var registered = false;
 function ensureLoadersRegistered(audioContext) {
   if (registered) return;
@@ -1634,6 +1649,7 @@ function inspectScene(root, frame, time, canvas, opts = {}) {
       if (typeof drawn.renderer === "string") {
         info.renderer = drawn.renderer;
         if (typeof drawn.backend === "string") info.backend = drawn.backend;
+        if (info.renderer === "webgpu") info.sharedGpu = drawn.sharedGpu === true;
       }
       layers.push(info);
       chainAlpha.set(info, parentAlpha * alpha);
@@ -2727,12 +2743,15 @@ var Movie = class {
    */
   async _construct(composition, vars, width, height, lp, sizeWins = this._resized) {
     const spec = applyVars(composition, vars);
+    const gpu = sharedGpuOf(this.app?.renderer);
+    const gpuField = gpu ? { gpu } : {};
     const rootShape = {
       width,
       height,
       duration: this.duration,
       frameRate: this.frameRate,
       vars: numericVars(vars),
+      ...gpuField,
       ...lp ? { onLayerBuilt: async () => {
         lp.tick();
         await lp.yieldIfDue();
@@ -4724,5 +4743,5 @@ function withFade(spec, opts) {
 }
 
 export { Movie, animateText, audioEnvelope, bpmEnvelope, cameraPath, computeEnvelope, dismissLoader, failLoader, followPath, kenBurns, measureText, musicBuffer, musicEnvelope, musicEvents, orbit, parseEase2 as parseEase, particles, react, resolveLoader, samplePath, splitText, stagger, wiggle, withFade };
-//# sourceMappingURL=chunk-NFJKBWYO.js.map
-//# sourceMappingURL=chunk-NFJKBWYO.js.map
+//# sourceMappingURL=chunk-6N5ZBUOU.js.map
+//# sourceMappingURL=chunk-6N5ZBUOU.js.map