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

package/libs/PipelinePlugin/utils/Objects/FlowPipe.js

@@ -1,21 +1,20 @@
-var v = Object.defineProperty;
-var u = (r, o, t) => o in r ? v(r, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[o] = t;
-var m = (r, o, t) => (u(r, typeof o != "symbol" ? o + "" : o, t), t);
+var c = Object.defineProperty;
+var h = (r, o, t) => o in r ? c(r, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[o] = t;
+var e = (r, o, t) => (h(r, typeof o != "symbol" ? o + "" : o, t), t);
 import "../../../shared-utils/tag.js";
 import "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 "../../../vendor/animejs/lib/anime.es.js";
-import "../../../vendor/@tweenjs/tween/dist/tween.esm.js.js";
-import "../../../CSS3DRenderPlugin/utils/three/CSS3DRender.js";
-import { requestAnimationFrameInterval as c } from "../../../shared-utils/animationFrame/index.js";
+import { requestAnimationFrameInterval as w } from "../../../shared-utils/animationFrame/index.js";
 import "../../../shared-utils/five/FivePuppet.js";
-import { ObjectPipe as h } from "./Pipe.js";
+import { ObjectPipe as d } from "./Pipe.js";
 import "../../../shared-utils/positionToVector3.js";
 import "../../../shared-utils/five/vector3ToScreen.js";
 import "../../../shared-utils/five/getFiveModel.js";
@@ -30,6 +29,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";
@@ -39,6 +39,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";
@@ -63,46 +64,24 @@ 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/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 d = (
-  /* glsl */
-  `
-  varying vec2 vUv;
-  uniform float uOffset;
-  uniform float vOffset;
-  uniform float opacity;
-  uniform mediump sampler2D envMap;
-
-  void main(){
-    // u > 0 时，不显示。即贴图不向前移动时，全部使用 u = 0 的值进行平铺
-    float u = min(vUv.x + uOffset, 0.0);
-    float v = vUv.y + vOffset;
-    vec2 uv = vec2(u, v);
-    gl_FragColor = texture2D(envMap, uv);
-    gl_FragColor.a = gl_FragColor.a * opacity;
-  }
-`
-);
-class Et extends h {
+class xt extends d {
   constructor(t) {
-    super(t, d);
+    super(t, { clampU: !0 });
     /** 初始状态下，当前水管内的水流在整体管道上的位移
      * @description 因为水管是不连续的，而要达到水流的连续效果，需要用过贴图的 uOffset 控制每根水管的初始状态
      */
-    m(this, "initialDisplacement", 0);
-    m(this, "oldTime", (/* @__PURE__ */ new Date()).getTime());
+    e(this, "initialDisplacement", 0);
+    e(this, "oldTime", (/* @__PURE__ */ new Date()).getTime());
     /** 横向流动速度：m / s */
-    m(this, "flowSpeed", 0.6);
+    e(this, "flowSpeed", 0.6);
     /** 纵向旋转速度：deg / s */
-    m(this, "rotateSpeed", 0);
-    m(this, "flowAnimationDisposer", () => {
+    e(this, "rotateSpeed", 0);
+    e(this, "flowAnimationDisposer", () => {
     });
   }
   setInitialDisplacement(t, i = "backward") {
@@ -114,27 +93,27 @@ class Et extends h {
    */
   moveFromOrigin(t) {
     const i = t * this.uPreMeter;
-    return this.material.uniforms.uOffset.value = i, this.material.needsUpdate = !0, this.needsRender = !0, !0;
+    return this.setUOffsetValue(i), this.material.needsUpdate = !0, this.needsRender = !0, !0;
   }
   /** 水流移动「基于调整管道差值之后的位置」
    *
    * @param distance 位移：米 * 方向
    */
   moveForwardFromInitialOffset(t) {
-    const i = t * -1, e = this.initialDisplacement + i;
-    this.moveFromOrigin(e);
+    const i = t * -1, m = this.initialDisplacement + i;
+    this.moveFromOrigin(m);
   }
   flow() {
     this.flowAnimationDisposer(), this.oldTime = (/* @__PURE__ */ new Date()).getTime();
     let t = 0, i = 0;
-    const e = c(() => {
-      const p = (/* @__PURE__ */ new Date()).getTime(), n = p - this.oldTime, s = this.flowSpeed * (n / 1e3), a = this.rotateSpeed * (n / 1e3);
-      t = t + s, i = i + a;
+    const m = w(() => {
+      const p = (/* @__PURE__ */ new Date()).getTime(), s = p - this.oldTime, n = this.flowSpeed * (s / 1e3), a = this.rotateSpeed * (s / 1e3);
+      t = t + n, i = i + a;
       const l = 1 / 360, f = i * l;
-      this.material.uniforms.vOffset.value = f, this.moveForwardFromInitialOffset(t), this.oldTime = p;
+      this.setVOffsetValue(f), this.moveForwardFromInitialOffset(t), this.oldTime = p;
     });
     this.flowAnimationDisposer = function() {
-      e(), this.moveForwardFromInitialOffset(0);
+      m(), this.moveForwardFromInitialOffset(0);
     };
   }
   stopFlow() {
@@ -148,5 +127,5 @@ class Et extends h {
   }
 }
 export {
-  Et as ObjectFlowPipe
+  xt as ObjectFlowPipe
 };

package/libs/PipelinePlugin/utils/Objects/HighlightPipe.js

@@ -1,18 +1,17 @@
 var s = Object.defineProperty;
 var n = (r, t, i) => t in r ? s(r, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : r[t] = i;
-var p = (r, t, i) => (n(r, typeof t != "symbol" ? t + "" : t, i), i);
+var o = (r, t, i) => (n(r, typeof t != "symbol" ? t + "" : t, i), i);
 import "../../../shared-utils/tag.js";
 import "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 "../../../vendor/animejs/lib/anime.es.js";
-import "../../../vendor/@tweenjs/tween/dist/tween.esm.js.js";
-import "../../../CSS3DRenderPlugin/utils/three/CSS3DRender.js";
 import { tweenProgress as h } from "../../../shared-utils/animationFrame/BetterTween.js";
 import "../../../shared-utils/five/FivePuppet.js";
 import { ObjectPipe as a } from "./Pipe.js";
@@ -30,6 +29,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";
@@ -39,6 +39,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";
@@ -63,29 +64,26 @@ 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/animationFrame/index.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";
-class Hi extends a {
+class xi extends a {
   constructor(i) {
     super(i);
-    p(this, "imageCount", 64);
-    p(this, "highlightAnime");
+    o(this, "imageCount", 64);
+    o(this, "highlightAnime");
   }
   highlight(i) {
     const m = (i == null ? void 0 : i.duration) || 500;
-    this.disposeAnime(), this.highlightAnime = h(m).onUpdate(({ progress: o }) => this.setOpacity(o)).yoyo(!0).repeat(1 / 0).play();
+    this.disposeAnime(), this.highlightAnime = h(m).onUpdate(({ progress: p }) => this.setOpacity(p)).yoyo(!0).repeat(1 / 0).play();
   }
   highlight1(i) {
     const m = (i == null ? void 0 : i.duration) || 2500;
-    this.disposeAnime(), this.highlightAnime = h(m).onUpdate(({ progress: o }) => {
-      const e = -(Math.ceil(o * this.imageCount) - 1) / this.imageCount;
-      this.material.uniforms.vOffset.value !== e && (this.material.uniforms.vOffset.value = e, this.material.needsUpdate = !0, this.needsRender = !0);
+    this.disposeAnime(), this.highlightAnime = h(m).onUpdate(({ progress: p }) => {
+      const e = -(Math.ceil(p * this.imageCount) - 1) / this.imageCount;
+      this.readVOffsetValue() !== e && (this.setVOffsetValue(e), this.material.needsUpdate = !0, this.needsRender = !0);
     }).repeat(1 / 0).play();
   }
   disposeAnime() {
@@ -94,5 +92,5 @@ class Hi extends a {
   }
 }
 export {
-  Hi as ObjectHighlightPipe
+  xi as ObjectHighlightPipe
 };

package/libs/PipelinePlugin/utils/Objects/Pipe.d.ts

@@ -1,4 +1,5 @@
 import * as THREE from 'three';
+import { MeshBasicNodeMaterial } from 'three/webgpu';
 import { BetterTween } from '../../../shared-utils';
 import { CustomBezierCurve3 } from '../../../shared-utils/three/Extras/Curves/BezierCurve3';
 export interface PipeParams {
@@ -14,7 +15,13 @@ export interface PipeParams {
 export interface AnimeOptions {
     duration?: number;
 }
-export declare class ObjectPipe extends THREE.Mesh<THREE.TubeBufferGeometry, THREE.ShaderMaterial> {
+export declare class ObjectPipe extends THREE.Mesh<THREE.TubeGeometry, MeshBasicNodeMaterial> {
+    private setOpacityValue;
+    private readOpacityValue;
+    protected setUOffsetValue: (value: number) => void;
+    protected setVOffsetValue: (value: number) => void;
+    /** HighlightPipe 会先比对当前值再决定是否更新，故需要读取器 */
+    protected readVOffsetValue: () => number;
     /** 根据控制点数量计算管道路径
      *
      * @description 两个控制点使用直线路径，多个控制点使用贝塞尔路径
@@ -24,7 +31,7 @@ export declare class ObjectPipe extends THREE.Mesh<THREE.TubeBufferGeometry, THR
     /**
      * 管道的 Texture 需要满足一定的要求，需要使用 formatTexture 先 format
      */
-    static formatTexture(texture: THREE.Texture): THREE.Texture;
+    static formatTexture(texture: THREE.Texture): THREE.Texture<unknown>;
     geometryConfig: {
         radius: number;
         tubularSegments: number;
@@ -40,7 +47,15 @@ export declare class ObjectPipe extends THREE.Mesh<THREE.TubeBufferGeometry, THR
     }>;
     /** u / m: 每米水管对应到贴图上，应该对应的 u 的长度 */
     protected uPreMeter: number;
-    constructor(params: PipeParams, fragmentShader?: string);
+    /**
+     * @param options.clampU 是否把滚动后的 u 截断到 <= 0。
+     *   原实现靠子类传入不同的 fragment shader 字符串来区分，WebGPU 下没有 GLSL 可换，
+     *   而两个变体的唯一差别就是这一句 `min(u, 0.0)`，故改为构造选项。
+     *   ObjectFlowPipe 需要它：贴图不向前移动时，全部使用 u = 0 的值平铺。
+     */
+    constructor(params: PipeParams, options?: {
+        clampU?: boolean;
+    });
     hide(options?: AnimeOptions): Promise<boolean>;
     show(options?: AnimeOptions): Promise<boolean>;
     setOpacity(value: number): boolean;

package/libs/PipelinePlugin/utils/Objects/Pipe.js

@@ -1,46 +1,45 @@
-var d = Object.defineProperty;
-var v = Object.getOwnPropertySymbols;
-var A = Object.prototype.hasOwnProperty, w = Object.prototype.propertyIsEnumerable;
-var f = (p, i, t) => i in p ? d(p, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : p[i] = t, y = (p, i) => {
-  for (var t in i || (i = {}))
-    A.call(i, t) && f(p, t, i[t]);
-  if (v)
-    for (var t of v(i))
-      w.call(i, t) && f(p, t, i[t]);
+var v = Object.defineProperty;
+var x = Object.getOwnPropertySymbols;
+var C = Object.prototype.hasOwnProperty, T = Object.prototype.propertyIsEnumerable;
+var l = (p, e, t) => e in p ? v(p, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : p[e] = t, y = (p, e) => {
+  for (var t in e || (e = {}))
+    C.call(e, t) && l(p, t, e[t]);
+  if (x)
+    for (var t of x(e))
+      T.call(e, t) && l(p, t, e[t]);
   return p;
 };
-var n = (p, i, t) => (f(p, typeof i != "symbol" ? i + "" : i, t), t);
-var l = (p, i, t) => new Promise((e, m) => {
-  var o = (s) => {
+var o = (p, e, t) => (l(p, typeof e != "symbol" ? e + "" : e, t), t);
+var g = (p, e, t) => new Promise((i, a) => {
+  var s = (u) => {
     try {
-      a(t.next(s));
-    } catch (c) {
-      m(c);
+      m(t.next(u));
+    } catch (n) {
+      a(n);
     }
-  }, r = (s) => {
+  }, r = (u) => {
     try {
-      a(t.throw(s));
-    } catch (c) {
-      m(c);
+      m(t.throw(u));
+    } catch (n) {
+      a(n);
     }
-  }, a = (s) => s.done ? e(s.value) : Promise.resolve(s.value).then(o, r);
-  a((t = t.apply(p, i)).next());
+  }, m = (u) => u.done ? i(u.value) : Promise.resolve(u.value).then(s, r);
+  m((t = t.apply(p, e)).next());
 });
-import * as u from "three";
+import * as c from "three";
+import { MeshBasicNodeMaterial as b } from "three/webgpu";
+import { uniform as O, uv as V, texture as L, vec2 as M } from "three/tsl";
 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 "../../../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 "../../../vendor/animejs/lib/anime.es.js";
-import "../../../vendor/@tweenjs/tween/dist/tween.esm.js.js";
-import "../../../CSS3DRenderPlugin/utils/three/CSS3DRender.js";
-import { BetterTween as g } from "../../../shared-utils/animationFrame/BetterTween.js";
+import { BetterTween as A } from "../../../shared-utils/animationFrame/BetterTween.js";
 import "../../../shared-utils/five/FivePuppet.js";
-import { CustomBezierCurve3 as x } from "../../../shared-utils/three/Extras/Curves/BezierCurve3.js";
+import { CustomBezierCurve3 as P } from "../../../shared-utils/three/Extras/Curves/BezierCurve3.js";
 import "../../../shared-utils/positionToVector3.js";
 import "../../../shared-utils/five/vector3ToScreen.js";
 import "../../../shared-utils/five/getFiveModel.js";
@@ -55,6 +54,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";
@@ -64,6 +64,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";
@@ -88,88 +89,71 @@ 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/animationFrame/index.js";
 import "../../../shared-utils/three/Extras/Core/Interpolations.js";
 import "../../../shared-utils/three/Extras/Core/Interpolations2.js";
-const C = (
-  /* glsl */
-  `
-  varying vec2 vUv;
-  void main() {
-    vUv = uv; 
-    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-  }
-`
-), O = (
-  /* glsl */
-  `
-  varying vec2 vUv;
-  uniform float uOffset;
-  uniform float vOffset;
-  uniform float opacity;
-  uniform mediump sampler2D envMap;
-
-  void main(){
-    float u = vUv.x + uOffset;
-    float v = vUv.y + vOffset;
-    vec2 uv = vec2(u, v);
-    gl_FragColor = texture2D(envMap, uv);
-    gl_FragColor.a = gl_FragColor.a * opacity;
-  }
-`
-);
-class h extends u.Mesh {
-  constructor(t, e = O) {
+class d extends c.Mesh {
+  /**
+   * @param options.clampU 是否把滚动后的 u 截断到 <= 0。
+   *   原实现靠子类传入不同的 fragment shader 字符串来区分，WebGPU 下没有 GLSL 可换，
+   *   而两个变体的唯一差别就是这一句 `min(u, 0.0)`，故改为构造选项。
+   *   ObjectFlowPipe 需要它：贴图不向前移动时，全部使用 u = 0 的值平铺。
+   */
+  constructor(t, i) {
     super();
-    n(this, "geometryConfig", {
+    // TSL 的 uniform 节点类型无法直接标注（uniform 是重载函数，且 UniformNode 未从
+    // three/webgpu 导出），因此节点留在构造函数里作为局部常量，这里只存读写闭包。
+    // 子类 ObjectFlowPipe 需要写 uOffset / vOffset，故设为 protected。
+    o(this, "setOpacityValue");
+    o(this, "readOpacityValue");
+    o(this, "setUOffsetValue");
+    o(this, "setVOffsetValue");
+    /** HighlightPipe 会先比对当前值再决定是否更新，故需要读取器 */
+    o(this, "readVOffsetValue");
+    o(this, "geometryConfig", {
       radius: 1.5 / 100,
       tubularSegments: 20,
       radialSegments: 8
     });
-    n(this, "customID");
-    n(this, "path");
-    n(this, "pathLength", 0);
-    n(this, "pathPoints");
-    n(this, "texture");
-    n(this, "opacityAnime");
+    o(this, "customID");
+    o(this, "path");
+    o(this, "pathLength", 0);
+    o(this, "pathPoints");
+    o(this, "texture");
+    o(this, "opacityAnime");
     /** u / m: 每米水管对应到贴图上，应该对应的 u 的长度 */
-    n(this, "uPreMeter", 1);
-    t.geometryConfig && (this.geometryConfig = y(y({}, this.geometryConfig), t.geometryConfig)), this.customID = t.id || this.uuid, this.pathPoints = t.path, this.path = h.calculatePath(t.path.map((s) => new u.Vector3().fromArray(s))), this.pathLength = this.path.getLength(), this.texture = h.formatTexture(t.texture);
-    const { radius: m, tubularSegments: o, radialSegments: r } = this.geometryConfig, a = h.formatTexture(t.texture);
-    this.geometry = h.formatGeometryUV(
-      new u.TubeBufferGeometry(this.path, o, m, r),
+    o(this, "uPreMeter", 1);
+    t.geometryConfig && (this.geometryConfig = y(y({}, this.geometryConfig), t.geometryConfig)), this.customID = t.id || this.uuid, this.pathPoints = t.path, this.path = d.calculatePath(t.path.map((h) => new c.Vector3().fromArray(h))), this.pathLength = this.path.getLength(), this.texture = d.formatTexture(t.texture);
+    const { radius: a, tubularSegments: s, radialSegments: r } = this.geometryConfig, m = d.formatTexture(t.texture);
+    this.geometry = d.formatGeometryUV(
+      new c.TubeGeometry(this.path, s, a, r),
       this.pathLength,
       this.uPreMeter
-    ), this.material = new u.ShaderMaterial({
-      uniforms: {
-        opacity: { value: 1 },
-        uOffset: { value: 0 },
-        vOffset: { value: 0 },
-        envMap: {
-          value: a
-        }
-      },
-      transparent: !0,
-      vertexShader: C,
-      fragmentShader: e
-    });
+    );
+    const u = O(1), n = O(0), f = O(0);
+    this.setOpacityValue = (h) => {
+      u.value = h;
+    }, this.readOpacityValue = () => u.value, this.setUOffsetValue = (h) => {
+      n.value = h;
+    }, this.setVOffsetValue = (h) => {
+      f.value = h;
+    }, this.readVOffsetValue = () => f.value;
+    const U = i != null && i.clampU ? V().x.add(n).min(0) : V().x.add(n), w = L(m, M(U, V().y.add(f)));
+    this.material = new b({ transparent: !0 }), this.material.colorNode = w.rgb, this.material.opacityNode = w.a.mul(u);
   }
   /** 根据控制点数量计算管道路径
    *
    * @description 两个控制点使用直线路径，多个控制点使用贝塞尔路径
    */
   static calculatePath(t) {
-    return t.length === 2 ? new u.LineCurve3(t[0], t[1]) : new x(t);
+    return t.length === 2 ? new c.LineCurve3(t[0], t[1]) : new P(t);
   }
-  static formatGeometryUV(t, e, m) {
-    const o = t.getAttribute("uv");
-    for (let r = 0; r < o.count; r++) {
-      const a = o.getX(r) * e * m;
-      o.setX(r, a);
+  static formatGeometryUV(t, i, a) {
+    const s = t.getAttribute("uv");
+    for (let r = 0; r < s.count; r++) {
+      const m = s.getX(r) * i * a;
+      s.setX(r, m);
     }
     return t;
   }
@@ -177,40 +161,40 @@ class h extends u.Mesh {
    * 管道的 Texture 需要满足一定的要求，需要使用 formatTexture 先 format
    */
   static formatTexture(t) {
-    return t.wrapS = u.RepeatWrapping, t.wrapT = u.RepeatWrapping, t;
+    return t.wrapS = c.RepeatWrapping, t.wrapT = c.RepeatWrapping, t;
   }
   hide(t) {
-    return l(this, null, function* () {
-      var o;
-      (o = this.opacityAnime) == null || o.dispose();
-      const e = 0;
+    return g(this, null, function* () {
+      var s;
+      (s = this.opacityAnime) == null || s.dispose();
+      const i = 0;
       if (typeof (t == null ? void 0 : t.duration) != "number")
-        return this.setOpacity(e);
-      const m = this.material.uniforms.opacity.value;
-      return m === e ? !0 : new Promise((r) => {
-        this.opacityAnime = new g({ progress: m }).to({ progress: e }).onUpdate(({ progress: a }) => this.setOpacity(a)).onComplete(() => r(!0)).onDispose(() => {
-          this.setOpacity(e), r(!1);
+        return this.setOpacity(i);
+      const a = this.readOpacityValue();
+      return a === i ? !0 : new Promise((r) => {
+        this.opacityAnime = new A({ progress: a }).to({ progress: i }).onUpdate(({ progress: m }) => this.setOpacity(m)).onComplete(() => r(!0)).onDispose(() => {
+          this.setOpacity(i), r(!1);
         }).play();
       });
     });
   }
   show(t) {
-    return l(this, null, function* () {
-      var o;
-      (o = this.opacityAnime) == null || o.dispose();
-      const e = 1;
+    return g(this, null, function* () {
+      var s;
+      (s = this.opacityAnime) == null || s.dispose();
+      const i = 1;
       if (typeof (t == null ? void 0 : t.duration) != "number")
-        return this.setOpacity(e);
-      const m = this.material.uniforms.opacity.value;
+        return this.setOpacity(i);
+      const a = this.readOpacityValue();
       return new Promise((r) => {
-        this.opacityAnime = new g({ progress: m }).to({ progress: e }).onUpdate(({ progress: a }) => this.setOpacity(a)).onComplete(() => r(!0)).onDispose(() => {
-          this.setOpacity(e), r(!1);
+        this.opacityAnime = new A({ progress: a }).to({ progress: i }).onUpdate(({ progress: m }) => this.setOpacity(m)).onComplete(() => r(!0)).onDispose(() => {
+          this.setOpacity(i), r(!1);
         }).play();
       });
     });
   }
   setOpacity(t) {
-    return this.material.uniforms.opacity.value = t, this.material.needsUpdate = !0, this.needsRender = !0, !0;
+    return this.setOpacityValue(t), this.material.needsUpdate = !0, this.needsRender = !0, !0;
   }
   disposeAnime() {
     var t;
@@ -221,5 +205,5 @@ class h extends u.Mesh {
   }
 }
 export {
-  h as ObjectPipe
+  d as ObjectPipe
 };

package/libs/Sculpt/Meshes/Circle.js

@@ -8,15 +8,15 @@ import { anyPositionToVector3 as h } from "../../shared-utils/positionToVector3.
 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 f } 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 "../../shared-utils/five/FivePuppet.js";
 class N extends u {
   constructor(t) {