@realsee/dnalogel 3.64.23-alpha.4 → 3.64.23-ke-webgpu.1

package/libs/PanoVideoPlugin/VideoMeshController.js

@@ -1,22 +1,21 @@
 var c = Object.defineProperty;
 var g = (v, i, e) => i in v ? c(v, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : v[i] = e;
 var t = (v, i, e) => (g(v, typeof i != "symbol" ? i + "" : i, e), e);
-import { vertexShader as I, fragmentShader as M } from "./utils/shader.js";
+import { PanoVideoMaterial as I } from "./utils/shader.js";
 import "../shared-utils/tag.js";
-import { VideoTexture as P, LinearFilter as f, ShaderMaterial as F, Vector4 as y, SphereBufferGeometry as x, Mesh as L, Vector3 as p, Quaternion as V } from "three";
+import { VideoTexture as P, LinearFilter as f, Vector4 as M, SphereGeometry as F, Mesh as y, Vector3 as u, Quaternion as V } from "three";
 import "../vendor/hammerjs/hammer.js";
 import "../shared-utils/three/PointSelector/index.js";
-import "../shared-utils/three/CSS3DRenderer/index.js";
+import "three/webgpu";
+import "three/tsl";
 import "../CSS3DRenderPlugin/utils/generateBehindFiveElement.js";
-import "@realsee/five/line";
-import "../shared-utils/three/core/Five_LineMaterial2.js";
+import "three/examples/jsm/lines/LineGeometry.js";
+import "three/examples/jsm/lines/webgpu/Line2.js";
 import "../shared-utils/three/core/Sphere.js";
-import { anime as b } from "../vendor/animejs/lib/anime.es.js";
-import "../vendor/@tweenjs/tween/dist/tween.esm.js.js";
-import "../CSS3DRenderPlugin/utils/three/CSS3DRender.js";
-import { requestAnimationFrameInterval as A } from "../shared-utils/animationFrame/index.js";
+import { anime as L } from "../vendor/animejs/lib/anime.es.js";
+import { requestAnimationFrameInterval as b } from "../shared-utils/animationFrame/index.js";
 import "../shared-utils/five/FivePuppet.js";
-import D from "./utils/index.js";
+import x from "./utils/index.js";
 import "../shared-utils/positionToVector3.js";
 import "../shared-utils/five/vector3ToScreen.js";
 import "../shared-utils/five/getFiveModel.js";
@@ -31,6 +30,7 @@ import "../shared-utils/dom/resizeObserver.js";
 import "../shared-utils/five/fiveEveryReadyListener.js";
 import "../shared-utils/throttle.js";
 import "../shared-utils/five/fiveModelLoad.js";
+import "../vendor/@tweenjs/tween/dist/tween.esm.js.js";
 import "../shared-utils/three/PointSelector/utils/PointSelectorHelper.js";
 import "../shared-utils/three/Magnifier.js";
 import "../shared-utils/three/PointSelector/utils/PointHelper.js";
@@ -40,6 +40,7 @@ import "../shared-utils/even.js";
 import "../shared-utils/CSS3DRender/OpacityMesh.js";
 import "../shared-utils/three/centerPoint.js";
 import "../shared-utils/three/getObjectVisible.js";
+import "../shared-utils/three/CSS3DRenderer/index.js";
 import "../shared-utils/isNil.js";
 import "../shared-utils/three/PointSelector/utils/html.js";
 import "../shared-utils/CSS3DRender/index.js";
@@ -64,11 +65,8 @@ import "../shared-utils/five/getPosition.js";
 import "../shared-utils/five/getRaycasterByNdcPosition.js";
 import "../shared-utils/three/PointSelector/utils/contents.js";
 import "../Sculpt/utils/three/rayOnLine.js";
-import "../CSS3DRenderPlugin/utils/three/CSS3DScene.js";
-import "../CSS3DRenderPlugin/utils/getAllCSS3DObject.js";
-import "../CSS3DRenderPlugin/utils/three/CSS3DGroup.js";
-import "@realsee/five";
-class Bi {
+import "@realsee/five-webgpu";
+class Gi {
   /** 初始化视频、模型以及相关事件监听。 */
   constructor(i, e) {
     t(this, "video");
@@ -108,7 +106,7 @@ class Bi {
     });
     /** 把 uv 值转换成位置 */
     t(this, "uv2Position", (i, e) => {
-      const o = Math.PI, r = Math.PI * 2, a = i, s = 1 - e, d = new p(
+      const o = Math.PI, r = Math.PI * 2, a = i, s = 1 - e, d = new u(
         -1 * Math.cos(r * a) * Math.sin(o * s),
         1 * Math.cos(o * s),
         1 * Math.sin(r * a) * Math.sin(o * s)
@@ -117,8 +115,8 @@ class Bi {
       const h = this.fiveUtil.workUtil.getResolvedObserver(this.panoIndex);
       if (!h)
         return this.logWarning(`点位 ${this.panoIndex} 不存在，请检查 Five 数据是否正常。`);
-      const l = h.position.clone(), m = h.quaternion.clone(), u = d.clone();
-      return u.applyAxisAngle(new p(0, 1, 0), Math.PI / 2), u.applyQuaternion(m), u.add(l), u;
+      const l = h.position.clone(), m = h.quaternion.clone(), p = d.clone();
+      return p.applyAxisAngle(new u(0, 1, 0), Math.PI / 2), p.applyQuaternion(m), p.add(l), p;
     });
     /** Five 数据加载后需要根据点位位姿调整点位模型位置 */
     t(this, "onFiveDataLoaded", () => {
@@ -127,7 +125,7 @@ class Bi {
         return this.logWarning(`点位 ${this.panoIndex} 不存在，请检查 Five 数据是否正常。`);
       this.observer = i;
       const { x: e, y: n, z: o, w: r } = i.quaternion, a = new V(e, n, o, r), s = i.position;
-      this.videoMesh.position.fromArray([s.x, s.y, s.z]), this.videoMesh.quaternion.set(0, 0, 0, 1), this.videoMesh.rotateOnAxis(new p(0, 1, 0), Math.PI / 2), this.videoMesh.applyQuaternion(a);
+      this.videoMesh.position.fromArray([s.x, s.y, s.z]), this.videoMesh.quaternion.set(0, 0, 0, 1), this.videoMesh.rotateOnAxis(new u(0, 1, 0), Math.PI / 2), this.videoMesh.applyQuaternion(a);
     });
     /** 兼容视频播放 */
     t(this, "onFiveWantsMoveToPano", (i) => {
@@ -199,22 +197,22 @@ class Bi {
       this.video.addEventListener(
         "timeupdate",
         () => {
-          if (this.enabled && this.panoIndex === this.five.getCurrentState().panoIndex && this.five.getCurrentState().mode === "Panorama" && (this.renderFiveDisposer || (this.renderFiveDisposer = A(() => {
+          if (this.enabled && this.panoIndex === this.five.getCurrentState().panoIndex && this.five.getCurrentState().mode === "Panorama" && (this.renderFiveDisposer || (this.renderFiveDisposer = b(() => {
             this.five.needsRender = !0;
-          }, 30)), this.five.scene.add(this.videoMesh), this.videoMesh.material.uniforms.opacity.value === 0)) {
+          }, 30)), this.five.scene.add(this.videoMesh), this.videoMesh.material.videoOpacity === 0)) {
             const i = {
               value: 0
             };
-            b({
+            L({
               targets: i,
               value: 1,
               duration: 300,
               easing: "linear",
               update: () => {
-                this.videoMesh.material.uniforms.opacity.value = i.value;
+                this.videoMesh.material.videoOpacity = i.value;
               },
               complete: () => {
-                this.videoMesh.material.uniforms.opacity.value = 1;
+                this.videoMesh.material.videoOpacity = 1;
               }
             });
           }
@@ -233,21 +231,12 @@ class Bi {
     n.crossOrigin = "anonymous", n.autoplay = !1, n.muted = !0, n.loop = !0, n.playsInline = !0, this.video = n;
     const o = new P(this.video);
     o.minFilter = f, o.magFilter = f;
-    const r = new F({
-      vertexShader: I,
-      fragmentShader: M,
-      uniforms: {
-        map: { value: o },
-        size: {
-          value: new y(this.origin[0], 1 - this.origin[1] - this.origin[3], this.origin[2], this.origin[3])
-        },
-        opacity: { value: 0 }
-      },
-      depthTest: !0,
-      transparent: !0
-    }), a = new x(1, 64, 64);
+    const r = new I(
+      o,
+      new M(this.origin[0], 1 - this.origin[1] - this.origin[3], this.origin[2], this.origin[3])
+    ), a = new F(1, 64, 64);
     a.scale(-1, 1, 1);
-    const s = new L(a, r);
+    const s = new y(a, r);
     s.name = "pano-video-plugin", this.videoMesh = s, this.fiveUtil.workUtil.work && this.onFiveDataLoaded(), this.enabled && this.addEventListeners(), this.mountIfNeeded(), window[`__PANOVIDEO_${this.renderID}_DEBUG__`] = this;
   }
   /** 传入的 ID，不可更改 */
@@ -285,7 +274,7 @@ class Bi {
     const e = this.uv2Position(i[0], i[1]);
     if (!e)
       return;
-    const n = new p().subVectors(e, this.observer.position).normalize(), { longitude: o, latitude: r } = D(n);
+    const n = new u().subVectors(e, this.observer.position).normalize(), { longitude: o, latitude: r } = x(n);
     this.five.setState({ panoIndex: this.panoIndex, longitude: o, latitude: r }), this.onFiveWantsMoveToPano(this.panoIndex);
   }
   /** 获取视频中心点的 uv */
@@ -324,11 +313,11 @@ class Bi {
   }
   /** 卸载：销毁视频资源；移除模型。 */
   unmount() {
-    this.video.pause(), this.videoMesh.material.uniforms.opacity.value = 0, this.video.src !== "" && (this.video.src = ""), this.five.scene.remove(this.videoMesh);
+    this.video.pause(), this.videoMesh.material.videoOpacity = 0, this.video.src !== "" && (this.video.src = ""), this.five.scene.remove(this.videoMesh);
   }
   /** 暂停视频，去除模型。 */
   hide() {
-    this.video.pause(), this.videoMesh.material.uniforms.opacity.value = 0, this.five.scene.remove(this.videoMesh);
+    this.video.pause(), this.videoMesh.material.videoOpacity = 0, this.five.scene.remove(this.videoMesh);
   }
   /** 控制台打印警告 */
   logWarning(i) {
@@ -343,5 +332,5 @@ class Bi {
   }
 }
 export {
-  Bi as VideoMeshController
+  Gi as VideoMeshController
 };

package/libs/PanoVideoPlugin/index.d.ts

@@ -1,4 +1,4 @@
-import type { FivePlugin } from '@realsee/five';
+import type { FivePlugin } from '@realsee/five-webgpu';
 import { PanoVideoPluginController } from './Controller';
 import * as _PanoVideoPluginType from './typings';
 /** 点位视频播放插件

package/libs/PanoVideoPlugin/index.js

@@ -1,7 +1,9 @@
 import { PanoVideoPluginController as r } from "./Controller.js";
-import { typings as bo } from "./typings/index.js";
+import { typings as Co } from "./typings/index.js";
 import "./VideoMeshController.js";
 import "./utils/shader.js";
+import "three/webgpu";
+import "three/tsl";
 import "../shared-utils/tag.js";
 import "../shared-utils/positionToVector3.js";
 import "three";
@@ -30,36 +32,32 @@ import "../shared-utils/three/centerPoint.js";
 import "../shared-utils/three/getObjectVisible.js";
 import "../shared-utils/three/CSS3DRenderer/index.js";
 import "../CSS3DRenderPlugin/utils/generateBehindFiveElement.js";
-import "@realsee/five/line";
+import "three/examples/jsm/lines/LineGeometry.js";
 import "../shared-utils/isNil.js";
-import "../shared-utils/three/core/Five_LineMaterial2.js";
+import "three/examples/jsm/lines/webgpu/Line2.js";
 import "../shared-utils/three/core/Sphere.js";
 import "../vendor/animejs/lib/anime.es.js";
 import "../vendor/@tweenjs/tween/dist/tween.esm.js.js";
-import "../CSS3DRenderPlugin/utils/three/CSS3DRender.js";
-import "../shared-utils/CSS3DRender/CSS3DRenderer.js";
-import "../shared-utils/createResizeObserver.js";
-import "../CSS3DRenderPlugin/utils/three/CSS3DScene.js";
-import "../CSS3DRenderPlugin/utils/getAllCSS3DObject.js";
-import "../shared-utils/util.js";
-import "../CSS3DRenderPlugin/utils/three/CSS3DGroup.js";
+import "../shared-utils/five/FivePuppet.js";
+import "@realsee/five-webgpu";
+import "../shared-utils/five/fiveModelLoad.js";
 import "../shared-utils/three/PointSelector/utils/html.js";
 import "../shared-utils/CSS3DRender/index.js";
-import "../shared-utils/five/fiveModelLoad.js";
+import "../shared-utils/CSS3DRender/CSS3DRenderer.js";
+import "../shared-utils/createResizeObserver.js";
 import "../shared-utils/three/PointSelector/utils/PointHelper2.js";
 import "../Sculpt/Meshes/Line.js";
 import "../Sculpt/typings/style.js";
 import "../shared-utils/three/IObject3D.js";
 import "../Sculpt/utils/Meshes/getLengthHTML.js";
 import "../shared-utils/three/applyObjectMatrixWorld.js";
+import "../shared-utils/util.js";
 import "../shared-utils/three/core/LineGeometry.js";
 import "../shared-utils/three/core/LineMaterial.js";
 import "../shared-utils/three/core/Line2.js";
 import "../shared-utils/three/core/LineMaterial2.js";
 import "../Sculpt/utils/unit.js";
 import "../Sculpt/utils/renderDom.js";
-import "../shared-utils/five/FivePuppet.js";
-import "@realsee/five";
 import "../CSS3DRenderPlugin/utils/three/CSS3DSprite.js";
 import "../shared-utils/isTouchDevice.js";
 import "../shared-utils/five/getPosition.js";
@@ -70,9 +68,9 @@ import "../shared-utils/animationFrame/index.js";
 import "./utils/index.js";
 import "../base/BasePlugin.js";
 import "../shared-utils/url/absoluteUrl.js";
-const wo = (o) => new r(o);
+const yo = (o) => new r(o);
 export {
-  wo as PanoVideoPlugin,
-  bo as PanoVideoPluginType,
-  wo as default
+  yo as PanoVideoPlugin,
+  Co as PanoVideoPluginType,
+  yo as default
 };

package/libs/PanoVideoPlugin/utils/shader.d.ts

@@ -1,2 +1,28 @@
-export declare const vertexShader = "\nvarying vec2 vUv;\nvoid main() {\n  vUv = uv;\n  vec4 mvPosition = modelViewMatrix * vec4(position, 1);\n  gl_Position = projectionMatrix * mvPosition;\n}\n";
-export declare const fragmentShader = "\nuniform sampler2D map;\nuniform vec4 size;\nvarying vec2 vUv;\nuniform float opacity;\n\nvoid main() {\n  float dx = max(size[0] + size[2] - 1.0, 0.0);\n  vec2 uv = vec2(((vUv.x <= dx ? vUv.x + 1.0 : vUv.x) - size[0]) / size[2], (vUv.y - size[1]) / size[3]);\n  float a = 0.1;\n  float transX = uv.x < a ? 1.0 / a * uv.x : (uv.x > (1.0 - a) ? 1.0 / a * (1.0 - uv.x) : 1.0);\n  float transY = uv.y < a ? 1.0 / a * uv.y : (uv.y > (1.0 - a) ? 1.0 / a * (1.0 - uv.y) : 1.0);\n\tfloat match = (1.0 - step(0.5, abs(uv.x - 0.5))) * (1.0 - step(0.5, abs(uv.y - 0.5))) * (transX < transY ? transX : transY);\n  gl_FragColor = vec4(texture2D(map, uv).xyz, match * opacity);\n}\n";
+import type { Texture, Vector4 } from 'three';
+import { MeshBasicNodeMaterial } from 'three/webgpu';
+/**
+ * 全景点位视频材质。
+ *
+ * 原实现是一对 GLSL 字符串（`vertexShader` / `fragmentShader`）配 `ShaderMaterial`，
+ * WebGPU 不消费裸 GLSL，这里改为 NodeMaterial + TSL，并把 shader 与材质封装在一起。
+ *
+ * 片元逻辑与原 GLSL 逐项对应：
+ * 1. `dx = max(size.x + size.z - 1, 0)`，用于处理子矩形横跨全景图接缝（UV 越过 1.0）的情况；
+ *    当 `vUv.x <= dx` 时给它 +1.0 再参与后续计算。
+ * 2. 把全景 UV 重映射到 `size`（vec4：x/y 是子矩形左下角，z/w 是宽高）描述的子矩形内。
+ * 3. `transX` / `transY`：在子矩形四边各留 `EDGE_FADE` 宽度做线性淡出。
+ * 4. `match`：用两个 `step` 把子矩形外的像素完全裁掉，再乘上 `min(transX, transY)`。
+ *    原 GLSL 写的是 `transX < transY ? transX : transY`，等价于 `min`。
+ * 5. 最终 alpha = `match * opacity`，颜色取重映射后的视频采样。
+ */
+export declare class PanoVideoMaterial extends MeshBasicNodeMaterial {
+    private readonly setOpacity;
+    private readonly readOpacity;
+    private readonly writeSize;
+    constructor(videoTexture: Texture, size: Vector4);
+    /** 淡入淡出透明度。原先外部是写 `material.uniforms.opacity.value`，NodeMaterial 下改用本访问器 */
+    get videoOpacity(): number;
+    set videoOpacity(value: number);
+    /** 更新子矩形。原先外部是写 `material.uniforms.size.value` */
+    setSize(size: Vector4): void;
+}

package/libs/PanoVideoPlugin/utils/shader.js

@@ -1,33 +1,49 @@
-const v = (
-  /* glsl */
-  `
-varying vec2 vUv;
-void main() {
-  vUv = uv;
-  vec4 mvPosition = modelViewMatrix * vec4(position, 1);
-  gl_Position = projectionMatrix * mvPosition;
+var O = Object.defineProperty;
+var z = (a, s, t) => s in a ? O(a, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[s] = t;
+var u = (a, s, t) => (z(a, typeof s != "symbol" ? s + "" : s, t), t);
+import { MeshBasicNodeMaterial as T } from "three/webgpu";
+import { uniform as m, Fn as y, max as f, select as r, uv as l, vec2 as g, texture as w, float as h, step as v, min as E } from "three/tsl";
+const S = 0.1;
+class X extends T {
+  constructor(t, x) {
+    super({ depthTest: !0, transparent: !0 });
+    // 注意两点：
+    // 1. TSL 的 uniform 是重载函数，不能用 ReturnType<typeof uniform> 标注字段
+    //    （那样只会取到最后一个泛型重载，退化成 UniformNode<unknown, unknown>，
+    //    连 .x / .z 这些分量访问都会报错）。
+    // 2. UniformNode 这个类型并没有从 three/webgpu 导出，也无法直接标注。
+    // 因此这里把 uniform 节点留在构造函数里作为局部常量（类型由重载完全推断），
+    // 对外只通过下面的访问器读写，字段本身只存最简单的读写闭包。
+    u(this, "setOpacity");
+    u(this, "readOpacity");
+    u(this, "writeSize");
+    const i = m(x), d = m(0);
+    this.setOpacity = (e) => {
+      d.value = e;
+    }, this.readOpacity = () => d.value, this.writeSize = (e) => {
+      i.value.copy(e);
+    };
+    const p = y(() => {
+      const e = f(i.x.add(i.z).sub(1), 0), n = r(l().x.lessThanEqual(e), l().x.add(1), l().x);
+      return g(n.sub(i.x).div(i.z), l().y.sub(i.y).div(i.w));
+    })();
+    this.colorNode = w(t, p).rgb, this.opacityNode = y(() => {
+      const e = p.x, n = p.y, o = h(S), c = o.reciprocal(), M = r(e.lessThan(o), c.mul(e), r(e.greaterThan(o.oneMinus()), c.mul(e.oneMinus()), h(1))), b = r(n.lessThan(o), c.mul(n), r(n.greaterThan(o.oneMinus()), c.mul(n.oneMinus()), h(1)));
+      return v(0.5, e.sub(0.5).abs()).oneMinus().mul(v(0.5, n.sub(0.5).abs()).oneMinus()).mul(E(M, b)).mul(d);
+    })();
+  }
+  /** 淡入淡出透明度。原先外部是写 `material.uniforms.opacity.value`，NodeMaterial 下改用本访问器 */
+  get videoOpacity() {
+    return this.readOpacity();
+  }
+  set videoOpacity(t) {
+    this.setOpacity(t);
+  }
+  /** 更新子矩形。原先外部是写 `material.uniforms.size.value` */
+  setSize(t) {
+    this.writeSize(t);
+  }
 }
-`
-), a = (
-  /* glsl */
-  `
-uniform sampler2D map;
-uniform vec4 size;
-varying vec2 vUv;
-uniform float opacity;
-
-void main() {
-  float dx = max(size[0] + size[2] - 1.0, 0.0);
-  vec2 uv = vec2(((vUv.x <= dx ? vUv.x + 1.0 : vUv.x) - size[0]) / size[2], (vUv.y - size[1]) / size[3]);
-  float a = 0.1;
-  float transX = uv.x < a ? 1.0 / a * uv.x : (uv.x > (1.0 - a) ? 1.0 / a * (1.0 - uv.x) : 1.0);
-  float transY = uv.y < a ? 1.0 / a * uv.y : (uv.y > (1.0 - a) ? 1.0 / a * (1.0 - uv.y) : 1.0);
-	float match = (1.0 - step(0.5, abs(uv.x - 0.5))) * (1.0 - step(0.5, abs(uv.y - 0.5))) * (transX < transY ? transX : transY);
-  gl_FragColor = vec4(texture2D(map, uv).xyz, match * opacity);
-}
-`
-);
 export {
-  a as fragmentShader,
-  v as vertexShader
+  X as PanoVideoMaterial
 };

package/libs/PipelinePlugin/Controller.d.ts

@@ -1,4 +1,4 @@
-import type { Five } from '@realsee/five';
+import type { Five } from '@realsee/five-webgpu';
 import type { State, EventMap, ServerData, PluginData, LoadOptions, ShowHideOptions, SetSpeedOptions, ShowPipelinesOptions } from './typing';
 import * as THREE from 'three';
 import * as BasePlugin from '../base/BasePluginWithData';

package/libs/PipelinePlugin/Controller.js

@@ -31,15 +31,15 @@ import { Controller as S } from "../base/BasePluginWithData.js";
 import "../shared-utils/tag.js";
 import "../vendor/hammerjs/hammer.js";
 import "../shared-utils/three/PointSelector/index.js";
-import "../shared-utils/three/CSS3DRenderer/index.js";
+import "three/webgpu";
+import "three/tsl";
 import "../CSS3DRenderPlugin/utils/generateBehindFiveElement.js";
-import "@realsee/five/line";
+import "three/examples/jsm/lines/LineGeometry.js";
 import { notNil as T } from "../shared-utils/isNil.js";
-import "../shared-utils/three/core/Five_LineMaterial2.js";
+import "three/examples/jsm/lines/webgpu/Line2.js";
 import "../shared-utils/three/core/Sphere.js";
 import "../vendor/animejs/lib/anime.es.js";
 import "../vendor/@tweenjs/tween/dist/tween.esm.js.js";
-import "../CSS3DRenderPlugin/utils/three/CSS3DRender.js";
 import { equal as O } from "../shared-utils/equal.js";
 import "../shared-utils/five/FivePuppet.js";
 import { loadTexture as x } from "../shared-utils/three/loadTexture.js";
@@ -70,6 +70,7 @@ import "../shared-utils/even.js";
 import "../shared-utils/CSS3DRender/OpacityMesh.js";
 import "../shared-utils/three/centerPoint.js";
 import "../shared-utils/three/getObjectVisible.js";
+import "../shared-utils/three/CSS3DRenderer/index.js";
 import "../shared-utils/three/PointSelector/utils/html.js";
 import "../shared-utils/CSS3DRender/index.js";
 import "../shared-utils/CSS3DRender/CSS3DRenderer.js";
@@ -93,10 +94,7 @@ import "../shared-utils/five/getPosition.js";
 import "../shared-utils/five/getRaycasterByNdcPosition.js";
 import "../shared-utils/three/PointSelector/utils/contents.js";
 import "../Sculpt/utils/three/rayOnLine.js";
-import "../CSS3DRenderPlugin/utils/three/CSS3DScene.js";
-import "../CSS3DRenderPlugin/utils/getAllCSS3DObject.js";
-import "../CSS3DRenderPlugin/utils/three/CSS3DGroup.js";
-import "@realsee/five";
+import "@realsee/five-webgpu";
 import "../shared-utils/isTruelyObject.js";
 import "../shared-utils/animationFrame/index.js";
 import "./utils/Objects/Pipe.js";
@@ -105,7 +103,7 @@ import "../shared-utils/three/Extras/Curves/BezierCurve3.js";
 import "../shared-utils/three/Extras/Core/Interpolations.js";
 import "../shared-utils/three/Extras/Core/Interpolations2.js";
 const g = { flowSpeed: 0.6, rotateSpeed: 0 };
-class it extends S {
+class et extends S {
   constructor(e) {
     super(e);
     // ==================== public properties ====================
@@ -385,5 +383,5 @@ class it extends S {
   }
 }
 export {
-  it as Controller
+  et as Controller
 };

package/libs/PipelinePlugin/index.d.ts

@@ -1,4 +1,4 @@
-import type { FivePlugin } from '@realsee/five';
+import type { FivePlugin } from '@realsee/five-webgpu';
 import { Controller } from './Controller';
 export declare const PipelinePlugin: FivePlugin<undefined, Controller>;
 export type PipelinePluginParameterType = undefined;

package/libs/PipelinePlugin/index.js

@@ -21,6 +21,8 @@ import "../shared-utils/three/PointSelector/index.js";
 import "../shared-utils/three/PointSelector/utils/PointSelectorHelper.js";
 import "../shared-utils/three/Magnifier.js";
 import "../shared-utils/three/PointSelector/utils/PointHelper.js";
+import "three/webgpu";
+import "three/tsl";
 import "../shared-utils/three/Assets/index.js";
 import "../CSS3DRenderPlugin/utils/three/CSS3DObject.js";
 import "../shared-utils/even.js";
@@ -29,36 +31,32 @@ import "../shared-utils/three/centerPoint.js";
 import "../shared-utils/three/getObjectVisible.js";
 import "../shared-utils/three/CSS3DRenderer/index.js";
 import "../CSS3DRenderPlugin/utils/generateBehindFiveElement.js";
-import "@realsee/five/line";
+import "three/examples/jsm/lines/LineGeometry.js";
 import "../shared-utils/isNil.js";
-import "../shared-utils/three/core/Five_LineMaterial2.js";
+import "three/examples/jsm/lines/webgpu/Line2.js";
 import "../shared-utils/three/core/Sphere.js";
 import "../vendor/animejs/lib/anime.es.js";
 import "../vendor/@tweenjs/tween/dist/tween.esm.js.js";
-import "../CSS3DRenderPlugin/utils/three/CSS3DRender.js";
-import "../shared-utils/CSS3DRender/CSS3DRenderer.js";
-import "../shared-utils/createResizeObserver.js";
-import "../CSS3DRenderPlugin/utils/three/CSS3DScene.js";
-import "../CSS3DRenderPlugin/utils/getAllCSS3DObject.js";
-import "../shared-utils/util.js";
-import "../CSS3DRenderPlugin/utils/three/CSS3DGroup.js";
+import "../shared-utils/five/FivePuppet.js";
+import "@realsee/five-webgpu";
+import "../shared-utils/five/fiveModelLoad.js";
 import "../shared-utils/three/PointSelector/utils/html.js";
 import "../shared-utils/CSS3DRender/index.js";
-import "../shared-utils/five/fiveModelLoad.js";
+import "../shared-utils/CSS3DRender/CSS3DRenderer.js";
+import "../shared-utils/createResizeObserver.js";
 import "../shared-utils/three/PointSelector/utils/PointHelper2.js";
 import "../Sculpt/Meshes/Line.js";
 import "../Sculpt/typings/style.js";
 import "../shared-utils/three/IObject3D.js";
 import "../Sculpt/utils/Meshes/getLengthHTML.js";
 import "../shared-utils/three/applyObjectMatrixWorld.js";
+import "../shared-utils/util.js";
 import "../shared-utils/three/core/LineGeometry.js";
 import "../shared-utils/three/core/LineMaterial.js";
 import "../shared-utils/three/core/Line2.js";
 import "../shared-utils/three/core/LineMaterial2.js";
 import "../Sculpt/utils/unit.js";
 import "../Sculpt/utils/renderDom.js";
-import "../shared-utils/five/FivePuppet.js";
-import "@realsee/five";
 import "../CSS3DRenderPlugin/utils/three/CSS3DSprite.js";
 import "../shared-utils/isTouchDevice.js";
 import "../shared-utils/five/getPosition.js";
@@ -77,8 +75,8 @@ import "../shared-utils/animationFrame/BetterTween.js";
 import "../shared-utils/three/Extras/Curves/BezierCurve3.js";
 import "../shared-utils/three/Extras/Core/Interpolations.js";
 import "../shared-utils/three/Extras/Core/Interpolations2.js";
-const zr = (r) => new o(r);
+const vr = (r) => new o(r);
 export {
-  zr as PipelinePlugin,
-  zr as default
+  vr as PipelinePlugin,
+  vr as default
 };

package/libs/PipelinePlugin/typing/index.d.ts

@@ -2,7 +2,7 @@ import type * as THREE from 'three';
 import type * as PluginData from './PluginData';
 import type * as ServerData from './ServerData';
 import type * as BasePlugin from '../../base/BasePluginWithData';
-import type { EventCallback } from '@realsee/five';
+import type { EventCallback } from '@realsee/five-webgpu';
 import type { AnimeOptions } from '../utils/Objects/Pipe';
 export interface PipelineTargetItem {
     startLibraryID: number;