pixi-effects 0.42.0 → 0.44.0

package/dist/three.js

@@ -1,8 +1,8 @@
 import { Sequence, buildScope, evaluateExpr, registerSequenceType } from './chunk-4QVQ5UJJ.js';
 import './chunk-32MMNDDN.js';
 import './chunk-BXOCEZ4U.js';
-import { Texture, Sprite } from 'pixi.js';
-import { WebGLRenderer, Scene, PerspectiveCamera, Raycaster, Vector2, Vector3, Quaternion, Plane, Box3, Group, AnimationMixer, LoopOnce, LoopRepeat, AmbientLight, DirectionalLight, SpotLight, PointLight, Color, SRGBColorSpace, Fog } from 'three';
+import { Texture, Sprite, TextureSource } from 'pixi.js';
+import { WebGLRenderer, Scene, PerspectiveCamera, Raycaster, Vector2, Vector3, Quaternion, Plane, Box3, RenderTarget, Group, AnimationMixer, LoopOnce, LoopRepeat, AmbientLight, DirectionalLight, SpotLight, PointLight, Color, SRGBColorSpace, Fog } from 'three';
 
 // src/three/defaults.ts
 var pageRenderer = "webgl";
@@ -159,7 +159,7 @@ function trackThree(kind) {
   live[kind]++;
   if (live[kind] > WARN_ABOVE[kind] && !warned.has(kind)) {
     warned.add(kind);
-    console.warn(`pixi-effects: ${live[kind]} three layers are alive with renderer: '${kind}', and a browser keeps ${LIMIT[kind]} for the whole page; layers beyond that draw nothing, without an error. Put several objects in one three layer, destroy layers that are over, ` + (kind === "webgl" ? `or use renderer: 'webgpu' for some (its limit is about 32)` : `or use renderer: 'webgl' for some of them (a different pool of contexts)`));
+    console.warn(`pixi-effects: ${live[kind]} three layers are alive with renderer: '${kind}', and a browser keeps ${LIMIT[kind]} for the whole page; layers beyond that draw nothing, without an error. Put several objects in one three layer, destroy layers that are over, ` + (kind === "webgl" ? `or use renderer: 'webgpu' for some (in a movie PixiJS draws on WebGPU they share its GPU device and have no limit; otherwise it is about 32)` : `or use renderer: 'webgl' for some of them (a different pool of contexts), or leave shareGpu on in a movie PixiJS draws on WebGPU (the layers then share its device)`));
   }
 }
 function releaseThree(kind) {
@@ -176,6 +176,19 @@ var ThreeSequence = class extends Sequence {
   backend = null;
   _gpu = false;
   // renderer: 'webgpu': async init and async render
+  /** True when the layer draws on PixiJS's own GPU device into a texture PixiJS samples directly (no canvas of its own, no copy, no share of the page's context cap). */
+  sharedGpu = false;
+  _rt = null;
+  // the texture a shared layer draws into
+  _sharedTexture = null;
+  _texture = null;
+  // what the layer's sprite shows (the canvas's, or the shared render target's)
+  /** What a rebuilt layer is compared with to take this one's place (core/reuse.ts); null: this layer is never kept (`reuse: false`, no `name`). */
+  _key = null;
+  /** The layer of the tree being replaced whose state this one is using until the new tree is on stage (`commitReuse`): not this layer's to let go. */
+  _borrowed = null;
+  /** True once another layer owns this layer's state: destroying this one must not let it go. */
+  _donated = false;
   _scene = null;
   _camera = null;
   _ctx = null;
@@ -207,12 +220,18 @@ var ThreeSequence = class extends Sequence {
     const width = resolveDim(spec.width, scope) ?? this.parent?.width ?? this.root.width;
     const height = resolveDim(spec.height, scope) ?? this.parent?.height ?? this.root.height;
     const resolution = spec.resolution ?? 1;
-    const canvas = document.createElement("canvas");
     const antialias = spec.antialias ?? true;
     const kind = spec.renderer ?? getPageRenderer();
     checkRendererKind(kind, "a three layer's renderer");
     this._gpu = kind === "webgpu";
     this.renderer = kind;
+    this._key = spec.reuse === false || !spec.name ? null : JSON.stringify([spec.name, idOf(spec.setup), width, height, resolution, antialias, kind, spec.shareGpu !== false && !!this.root.gpu, !!spec.followCamera, !!spec.followLights, !!spec.followFog]);
+    const donor = this._key !== null ? this.root.reuse?.claim(this._key) : null;
+    if (donor && donor._lendable()) {
+      this._borrow(donor, width, height, spec.name);
+      return;
+    }
+    const canvas = document.createElement("canvas");
     let renderer;
     if (this._gpu) {
       let mod;
@@ -221,24 +240,36 @@ var ThreeSequence = class extends Sequence {
       } catch (err) {
         throw new Error(`pixi-effects: renderer: 'webgpu' needs three 0.17x or later with "three/webgpu" in the import map (${err instanceof Error ? err.message : err})`);
       }
-      renderer = new mod.WebGPURenderer({ canvas, alpha: true, antialias });
-      this._renderer = renderer;
-      this._track();
-      const warn = console.warn;
-      let noGpu = false;
-      console.warn = (...args) => {
-        if (/WebGPU is not available/.test(String(args[0]))) noGpu = true;
-        else warn.apply(console, args);
-      };
-      try {
-        await renderer.init();
-      } catch (err) {
-        this._disposeRenderer();
-        throw err;
-      } finally {
-        console.warn = warn;
+      let shared = spec.shareGpu === false ? void 0 : this.root.gpu;
+      for (; ; ) {
+        renderer = new mod.WebGPURenderer(shared ? { device: shared.device, alpha: true, antialias } : { canvas, alpha: true, antialias });
+        this._renderer = renderer;
+        if (!shared) this._track();
+        const warn = console.warn;
+        let noGpu = false;
+        console.warn = (...args) => {
+          if (/WebGPU is not available/.test(String(args[0]))) noGpu = true;
+          else warn.apply(console, args);
+        };
+        try {
+          await renderer.init();
+          if (shared) {
+            renderer.setSize(Math.round(width * resolution), Math.round(height * resolution), false);
+            renderer.setClearColor(0, 0);
+            this._prepareShared(renderer, shared, width, height, resolution, antialias);
+          }
+          this.backend = noGpu ? "webgl2" : "webgpu";
+          break;
+        } catch (err) {
+          this._disposeRenderer();
+          if (!shared) throw err;
+          console.warn(`pixi-effects: three layer${spec.name ? ` "${spec.name}"` : ""}: could not draw on PixiJS's GPU device (${err instanceof Error ? err.message : err}); it uses a canvas of its own (shareGpu: false does this on purpose)`);
+          shared = void 0;
+          this._closing = false;
+        } finally {
+          console.warn = warn;
+        }
       }
-      this.backend = noGpu ? "webgl2" : "webgpu";
     } else {
       renderer = new WebGLRenderer({ canvas, alpha: true, antialias });
       this._renderer = renderer;
@@ -272,20 +303,59 @@ var ThreeSequence = class extends Sequence {
       if (!("camera" in this._objects)) this._objects.camera = this._camera;
       if (this._gpu) this._checkWebGpuMaterials(scene, spec.name);
       this._draw(0);
-      const texture = Texture.from(canvas);
-      const sprite = new Sprite({ texture, label: spec.name });
-      sprite.cullable = true;
-      sprite.width = width;
-      sprite.height = height;
-      this.target = sprite;
-      this.intrinsicWidth = width;
-      this.intrinsicHeight = height;
-      this.buildFilters();
+      this._texture = this._sharedTexture ?? Texture.from(canvas);
+      this._makeSprite(this._texture, width, height, spec.name);
     } catch (err) {
       this._disposeRenderer();
       throw err;
     }
   }
+  _makeSprite(texture, width, height, name) {
+    const sprite = new Sprite({ texture, label: name });
+    sprite.cullable = true;
+    sprite.width = width;
+    sprite.height = height;
+    this.target = sprite;
+    this.intrinsicWidth = width;
+    this.intrinsicHeight = height;
+    this.buildFilters();
+  }
+  /** Reuse (core/reuse.ts): the key this layer is matched by, while it can still lend its state. */
+  reuseKey() {
+    return this._renderer && !this._donated && !this._closing ? this._key : null;
+  }
+  _lendable() {
+    return this.reuseKey() !== null && !!this._scene && !!this._ctx && !!this._texture;
+  }
+  /** Take over a layer of the tree being replaced: its scene, renderer, texture and mirrors. Nothing is drawn until the new tree is on stage; the old layer goes on drawing meanwhile. */
+  _borrow(d, width, height, name) {
+    this.renderer = d.renderer;
+    this.backend = d.backend;
+    this._gpu = d._gpu;
+    this.sharedGpu = d.sharedGpu;
+    this._renderer = d._renderer;
+    this._scene = d._scene;
+    this._camera = d._camera;
+    this._ctx = d._ctx;
+    this._objects = d._objects;
+    this._rt = d._rt;
+    this._sharedTexture = d._sharedTexture;
+    this._texture = d._texture;
+    this._lightMirror = d._lightMirror;
+    this._fogMirror = d._fogMirror;
+    this._tracked = d._tracked;
+    this._borrowed = d;
+    if (this.spec && this._threeSpec.followCamera) this._checkFollowShape(width, height, name);
+    this._makeSprite(this._texture, width, height, name);
+  }
+  /** The new tree is on stage: the layer this one borrowed from has given its state away for good. */
+  commitReuse() {
+    const d = this._borrowed;
+    if (!d) return;
+    d._donated = true;
+    d._tracked = false;
+    this._borrowed = null;
+  }
   /**
    * Per-frame sync hook. Movie._awaitVideoFrames duck-types on this method
    * (same contract as VideoSequence) and awaits it inside gotoFrame — the
@@ -308,7 +378,7 @@ var ThreeSequence = class extends Sequence {
       }
     }
     this._draw(t);
-    this.target?.texture.source.update();
+    if (!this.sharedGpu) this.target?.texture.source.update();
   }
   /**
    * `movie.pick`: a ray through the point (u, v) of the layer's picture (0..1, v down) from the layer's camera, and what it meets first: the object's name (its own, or its nearest
@@ -398,7 +468,7 @@ var ThreeSequence = class extends Sequence {
       try {
         this._followSpace(t);
         this._threeSpec.update?.(t, ctx);
-        this._draw(t);
+        this._draw(t, true);
         g.clearRect(0, 0, w, h);
         g.drawImage(source, 0, 0);
       } catch {
@@ -501,10 +571,45 @@ var ThreeSequence = class extends Sequence {
    * follow each other in one task (a seek, an export) would all show the lights of the last animation frame: a lamp keyframed with `three.lamp.intensity` would not move.
    * So before each render the layer advances the node frame itself, and gives `time` the layer's own time (not three's wall clock).
    */
-  _draw(t) {
+  _draw(t, toCanvas = false) {
     if (!this._renderer || !this._scene || !this._camera) return;
     if (this._gpu) this._advanceNodeFrame(t);
-    this._renderer.render(this._scene, this._camera);
+    if (!this._rt || toCanvas) {
+      this._renderer.render(this._scene, this._camera);
+      return;
+    }
+    const r = this._renderer;
+    r.setOutputRenderTarget(this._rt);
+    try {
+      this._renderer.render(this._scene, this._camera);
+    } finally {
+      r.setOutputRenderTarget(null);
+      r.setRenderTarget(null);
+    }
+  }
+  /**
+   * A shared layer's texture: a render target of the layer's size, drawn into once (the GPU texture exists only after a draw) and adopted by a PixiJS texture source. Throws when something
+   * is not as this expects (the build then makes the layer again on a canvas of its own). Done before `setup`, so nothing the author made yet depends on the renderer.
+   */
+  _prepareShared(renderer, shared, width, height, resolution, antialias) {
+    const w = Math.round(width * resolution), h = Math.round(height * resolution);
+    const rt = new RenderTarget(w, h, { depthBuffer: true, samples: antialias ? 4 : 0 });
+    this._rt = rt;
+    const r = renderer;
+    if (typeof r.setOutputRenderTarget !== "function") throw new Error("this three has no setOutputRenderTarget");
+    r.setOutputRenderTarget(rt);
+    try {
+      renderer.render(new Scene(), new PerspectiveCamera());
+    } finally {
+      r.setOutputRenderTarget(null);
+      r.setRenderTarget(null);
+    }
+    const gpuTexture = r.backend?.get?.(rt.texture)?.texture;
+    if (!gpuTexture || typeof gpuTexture.createView !== "function") throw new Error("three keeps no GPU texture for a render target");
+    const source = new TextureSource({ width: w, height: h, format: gpuTexture.format, label: "three layer (shared GPU)" });
+    shared.adopt(source, gpuTexture);
+    this._sharedTexture = new Texture({ source });
+    this.sharedGpu = true;
   }
   /**
    * The author chose renderer: 'webgpu'. Three's WebGPU renderer turns materials into node materials: a ShaderMaterial / RawShaderMaterial cannot run there (three logs an error on
@@ -599,28 +704,40 @@ var ThreeSequence = class extends Sequence {
       console.warn("pixi-effects: three renderer dispose threw \u2014", err);
     }
     this._renderer = null;
+    try {
+      this._rt?.dispose();
+    } catch {
+    }
+    this._rt = null;
   }
   destroy() {
     const spec = this._threeSpec;
-    if (this._ctx && spec.dispose) {
+    const kept = this._donated || this._borrowed !== null;
+    if (!kept && this._ctx && spec.dispose) {
       try {
         spec.dispose(this._ctx);
       } catch (err) {
         console.warn("pixi-effects: three dispose() threw \u2014", err);
       }
     }
-    const texture = this.target?.texture;
-    this._lightMirror?.dispose();
+    const texture = this._texture;
+    if (!kept) {
+      this._lightMirror?.dispose();
+      this._fogMirror?.dispose();
+      this._disposeRenderer();
+    }
     this._lightMirror = null;
-    this._fogMirror?.dispose();
     this._fogMirror = null;
-    this._disposeRenderer();
+    this._renderer = null;
+    this._rt = null;
     this._scene = null;
     this._camera = null;
     this._ctx = null;
     this._objects = {};
     super.destroy();
-    texture?.destroy(true);
+    if (!kept) texture?.destroy(true);
+    this._texture = null;
+    this._sharedTexture = null;
   }
 };
 function resolveDim(v, scope) {
@@ -628,6 +745,17 @@ function resolveDim(v, scope) {
   if (typeof v === "number") return v;
   return evaluateExpr(v, scope);
 }
+var ids = /* @__PURE__ */ new WeakMap();
+var lastId = 0;
+function idOf(fn) {
+  if (typeof fn !== "function") return 0;
+  let id = ids.get(fn);
+  if (id === void 0) {
+    id = ++lastId;
+    ids.set(fn, id);
+  }
+  return id;
+}
 async function threeGltf(url, options = {}) {
   const label = "pixi-effects: threeGltf";
   if (typeof url !== "string" || !url) throw new Error(`${label}: the first argument is the URL of a .glb or .gltf file`);