pixi-effects 0.41.0 → 0.43.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, Box3, Vector3, 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,11 @@ 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;
   _scene = null;
   _camera = null;
   _ctx = null;
@@ -187,6 +192,8 @@ var ThreeSequence = class extends Sequence {
   _fogMirror = null;
   _warnedSpace = /* @__PURE__ */ new Set();
   _tracked = false;
+  /** Set when this layer lets its renderer go on purpose: the context loss that follows is its own doing, not the browser's. */
+  _closing = false;
   get _threeSpec() {
     return this.spec;
   }
@@ -219,31 +226,43 @@ 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;
       this._track();
       let said = false;
       canvas.addEventListener("webglcontextlost", () => {
-        if (said) return;
+        if (said || this._closing) return;
         said = true;
         console.warn(`pixi-effects: three layer${spec.name ? ` "${spec.name}"` : ""}: the browser took this layer's WebGL context away (a page keeps about 16 for all its layers, PixiJS and shader layers: too many were alive), so the layer draws nothing. Put several objects in one three layer, or destroy layers that are over`);
       });
@@ -270,7 +289,7 @@ 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 texture = this._sharedTexture ?? Texture.from(canvas);
       const sprite = new Sprite({ texture, label: spec.name });
       sprite.cullable = true;
       sprite.width = width;
@@ -306,7 +325,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
@@ -334,6 +353,36 @@ var ThreeSequence = class extends Sequence {
     }
     return null;
   }
+  /**
+   * `hit.three.grab(plane)`: drag a grabbed point of the scene. Returns a function of a point (u, v) of the layer's picture (0..1, v down) that gives where the pointer's ray through the layer's
+   * camera meets a plane through the grabbed point, and how far that is from the grabbed point (`delta`): move the object by it and it follows the pointer exactly. `plane`: `'screen'` (facing the
+   * camera: the default), `'floor'` (horizontal, the three y up), `'wall'` (z constant), or a normal `[x, y, z]`. null where the ray never meets it (a floor seen edge-on, behind the camera).
+   */
+  dragPlane(point, plane = "screen") {
+    const grabbed = new Vector3(...point);
+    let normal;
+    if (plane === "floor") normal = new Vector3(0, 1, 0);
+    else if (plane === "wall") normal = new Vector3(0, 0, 1);
+    else if (Array.isArray(plane)) normal = new Vector3(...plane).normalize();
+    else {
+      const turn = new Quaternion();
+      this._camera?.updateMatrixWorld();
+      this._camera?.getWorldQuaternion(turn);
+      normal = new Vector3(0, 0, 1).applyQuaternion(turn);
+    }
+    const surface = new Plane().setFromNormalAndCoplanarPoint(normal, grabbed);
+    return (u, v) => {
+      const scene = this._scene, camera = this._camera;
+      if (!scene || !camera) return null;
+      scene.updateMatrixWorld();
+      camera.updateMatrixWorld();
+      const ray = new Raycaster();
+      ray.setFromCamera(new Vector2(u * 2 - 1, -(v * 2 - 1)), camera);
+      const at = ray.ray.intersectPlane(surface, new Vector3());
+      if (!at) return null;
+      return { point: at.toArray(), delta: at.clone().sub(grabbed).toArray() };
+    };
+  }
   /**
    * The determinism check (`check`, `movie.review()`): the scene drawn at a few moments in two orders, with one draw thrown away first, and the pictures compared, as the canvas layer
    * does. A layer whose same frame is not the same picture (a clock, `Math.random`, a mixer advanced with `update(dt)`, any state that builds up from call to call) is reported.
@@ -366,7 +415,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 {
@@ -469,10 +518,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
@@ -555,6 +639,7 @@ var ThreeSequence = class extends Sequence {
   }
   _disposeRenderer() {
     if (!this._renderer) return;
+    this._closing = true;
     if (this._tracked) {
       this._tracked = false;
       releaseThree(this._gpu ? "webgpu" : "webgl");
@@ -566,6 +651,11 @@ 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;
@@ -588,6 +678,7 @@ var ThreeSequence = class extends Sequence {
     this._objects = {};
     super.destroy();
     texture?.destroy(true);
+    this._sharedTexture = null;
   }
 };
 function resolveDim(v, scope) {