three-base 2.0.137 → 2.0.145

package/pass/frosted_glass_pass.ts

@@ -0,0 +1,288 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2026-04-21 00:00:00
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2026-04-21 00:00:00
+ */
+import { DepthFormat, DepthTexture, LinearFilter, RGBAFormat, Scene, ShaderChunk, ShaderMaterial, UnsignedIntType, Vector2, WebGLRenderTarget, WebGLRenderer, Camera, PerspectiveCamera, Mesh, Object3D } from "three";
+import fsQuad from "./fsQuad";
+import { debugDepthState } from "./debugDepthState";
+
+const maskTextureTarget: WebGLRenderTarget = new WebGLRenderTarget(1024, 1024, {
+    minFilter: LinearFilter,
+    magFilter: LinearFilter,
+    format: RGBAFormat,
+    anisotropy: 16,
+});
+
+const blurTextureTarget: WebGLRenderTarget = new WebGLRenderTarget(1024, 1024, {
+    minFilter: LinearFilter,
+    magFilter: LinearFilter,
+    format: RGBAFormat,
+    anisotropy: 16,
+});
+
+const tempBlurTextureTarget: WebGLRenderTarget = new WebGLRenderTarget(1024, 1024, {
+    minFilter: LinearFilter,
+    magFilter: LinearFilter,
+    format: RGBAFormat,
+    anisotropy: 16,
+});
+
+// 选中对象的遮罩渲染目标 + 配套深度纹理 + 临时场景：模块级复用，避免每帧 new/dispose 造成 GC 抖动与
+// GPU 资源反复创建销毁（原先在函数内每帧 new 一个 WebGLRenderTarget + DepthTexture + Scene，开销大且不稳）。
+const selectDepthTexture: DepthTexture = new DepthTexture(1024, 1024);
+selectDepthTexture.format = DepthFormat;
+selectDepthTexture.type = UnsignedIntType;
+
+const selectTextureTarget: WebGLRenderTarget = new WebGLRenderTarget(1024, 1024, {
+    minFilter: LinearFilter,
+    magFilter: LinearFilter,
+    format: RGBAFormat,
+    depthTexture: selectDepthTexture,
+});
+
+// 临时场景：仅用于把「毛玻璃对象」单独渲进 selectTextureTarget 做遮罩，常驻复用（不每帧 new）。
+const tempScene: Scene = new Scene();
+
+const size: Vector2 = new Vector2();
+
+const horizontalBlurShader: ShaderMaterial = new ShaderMaterial({
+    uniforms: {
+        tDiffuse: { value: null },
+        h: { value: 1.0 / 512.0 },
+    },
+    vertexShader: `
+        varying vec2 vUv;
+        void main() {
+            vUv = uv;
+            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+        }
+    `,
+    fragmentShader: `
+        uniform sampler2D tDiffuse;
+        uniform float h;
+        varying vec2 vUv;
+        void main() {
+            vec4 sum = vec4( 0.0 );
+            sum += texture2D( tDiffuse, vec2( vUv.x - 4.0 * h, vUv.y ) ) * 0.051;
+            sum += texture2D( tDiffuse, vec2( vUv.x - 3.0 * h, vUv.y ) ) * 0.0918;
+            sum += texture2D( tDiffuse, vec2( vUv.x - 2.0 * h, vUv.y ) ) * 0.12245;
+            sum += texture2D( tDiffuse, vec2( vUv.x - 1.0 * h, vUv.y ) ) * 0.1531;
+            sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y ) ) * 0.1633;
+            sum += texture2D( tDiffuse, vec2( vUv.x + 1.0 * h, vUv.y ) ) * 0.1531;
+            sum += texture2D( tDiffuse, vec2( vUv.x + 2.0 * h, vUv.y ) ) * 0.12245;
+            sum += texture2D( tDiffuse, vec2( vUv.x + 3.0 * h, vUv.y ) ) * 0.0918;
+            sum += texture2D( tDiffuse, vec2( vUv.x + 4.0 * h, vUv.y ) ) * 0.051;
+            gl_FragColor = sum;
+        }
+    `,
+    depthTest: false,
+    depthWrite: false,
+    transparent: true,
+});
+
+const verticalBlurShader: ShaderMaterial = new ShaderMaterial({
+    uniforms: {
+        tDiffuse: { value: null },
+        v: { value: 1.0 / 512.0 },
+    },
+    vertexShader: `
+        varying vec2 vUv;
+        void main() {
+            vUv = uv;
+            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+        }
+    `,
+    fragmentShader: `
+        uniform sampler2D tDiffuse;
+        uniform float v;
+        varying vec2 vUv;
+        void main() {
+            vec4 sum = vec4( 0.0 );
+            sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y - 4.0 * v ) ) * 0.051;
+            sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y - 3.0 * v ) ) * 0.0918;
+            sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y - 2.0 * v ) ) * 0.12245;
+            sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y - 1.0 * v ) ) * 0.1531;
+            sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y ) ) * 0.1633;
+            sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y + 1.0 * v ) ) * 0.1531;
+            sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y + 2.0 * v ) ) * 0.12245;
+            sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y + 3.0 * v ) ) * 0.0918;
+            sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y + 4.0 * v ) ) * 0.051;
+            gl_FragColor = sum;
+        }
+    `,
+    depthTest: false,
+    depthWrite: false,
+    transparent: true,
+});
+
+const depthTestShader: ShaderMaterial = new ShaderMaterial({
+    uniforms: {
+        baseDepth: { value: null },
+        selectDepth: { value: null },
+        cameraFar: { value: 1000.0 },
+    },
+    vertexShader: `
+        ${ShaderChunk.common}
+        ${ShaderChunk.logdepthbuf_pars_vertex}
+        varying vec2 vUv;
+        void main() {
+            vUv = uv;
+            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+            ${ShaderChunk.logdepthbuf_vertex}
+        }
+    `,
+    fragmentShader: `
+        ${ShaderChunk.logdepthbuf_pars_fragment}
+        uniform sampler2D baseDepth;
+        uniform sampler2D selectDepth;
+        uniform float cameraFar;
+        varying vec2 vUv;
+        void main() {
+            float selectDepthValue = texture2D(selectDepth, vUv).r;
+            float baseDepthValue = texture2D(baseDepth, vUv).r;
+            // 对数深度反解为线性视图深度。
+            float zSel = pow(cameraFar + 1.0, selectDepthValue) - 1.0;
+            float zBase = pow(cameraFar + 1.0, baseDepthValue) - 1.0;
+            float bias = max(zSel, 1.0) * 0.0015;
+            // 该像素没有毛玻璃对象（selectDepth 仍是清屏值 1.0 → zSel == cameraFar）→ 不参与合成。
+            // ⚠️ 旧实现让背景像素「直接保留毛玻璃」，导致没有对象的像素同样写白 mask；
+            // 而 frostedGlassShader 是全屏 fsQuad，只要 mask.a>=0.01 就输出 blurTexture
+            // → 整个场景被糊一层（表现为"开启毛玻璃后全场景变模糊"）。
+            if (zSel >= cameraFar) {
+                discard;
+            }
+            // 毛玻璃为实体：丢弃被更近场景几何遮挡的部分
+            if (zSel > zBase + bias) {
+                discard;
+            }
+            gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+            ${ShaderChunk.logdepthbuf_fragment}
+        }
+    `,
+    depthTest: true,
+    depthWrite: true,
+    transparent: true,
+});
+
+const frostedGlassShader: ShaderMaterial = new ShaderMaterial({
+    uniforms: {
+        blurTexture: { value: null },
+        maskTexture: { value: null },
+    },
+    vertexShader: `
+        varying vec2 vUv;
+        void main() {
+            vUv = uv;
+            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+        }
+    `,
+    fragmentShader: `
+        uniform sampler2D blurTexture;
+        uniform sampler2D maskTexture;
+        varying vec2 vUv;
+
+        void main() {
+            vec4 mask = texture2D(maskTexture, vUv);
+
+            if(mask.a < 0.01){
+                discard;
+            }
+
+            // 后处理全程在线性空间处理：blurTexture 来自 baseRenderTarget（线性格式，RawShaderMaterial
+            // 采样即为原始线性值，three 不会自动解码/编码），模糊混合后直接输出线性值写入线性目标，
+            // 由终处理 baseTextureToRenderShader 统一做唯一的 sRGB 编码。切勿在此手动 sRGBTransferOETF，
+            // 否则线性值被编码两次 sRGB，毛玻璃区域整体发白，与 screenCopy 的无损拷贝颜色空间不一致。
+            gl_FragColor = texture2D(blurTexture, vUv);
+        }
+    `,
+    depthTest: true,
+    depthWrite: true,
+    transparent: false,
+});
+
+export default function frosted_glass_pass(
+    renderer: WebGLRenderer,
+    camera: Camera,
+    scene: Scene,
+    baseRenderTarget: WebGLRenderTarget,
+    baseDepthTexture: DepthTexture,
+    devicePixelRatio: number
+): void {
+    const enabledObjects: Mesh[] = [];
+    scene.traverseVisible((obj: Object3D) => {
+        if ((obj.userData as { frosted_glass_enable?: boolean }).frosted_glass_enable && (obj as Mesh).isMesh) {
+            enabledObjects.push(obj as Mesh);
+        }
+    });
+
+    if (enabledObjects.length === 0) {
+        return;
+    }
+
+    const originRenderTarget = renderer.getRenderTarget();
+
+    // 灰度图渲染目标跟随主画面尺寸（= width × effectiveRatio），与 baseRenderTarget 完全一致，
+    // 消除灰度图与主画面尺寸不一致导致的放大重采样摩尔纹
+    renderer.getSize(size);
+    size.multiplyScalar(devicePixelRatio);
+    maskTextureTarget.setSize(size.x, size.y);
+    blurTextureTarget.setSize(size.x, size.y);
+    tempBlurTextureTarget.setSize(size.x, size.y);
+    selectTextureTarget.setSize(size.x, size.y);
+
+    renderer.setRenderTarget(tempBlurTextureTarget);
+    renderer.clear();
+    horizontalBlurShader.uniforms.tDiffuse.value = baseRenderTarget.texture;
+    horizontalBlurShader.uniforms.h.value = 2.5 / size.x;
+    fsQuad.render(renderer, horizontalBlurShader);
+
+    renderer.setRenderTarget(blurTextureTarget);
+    renderer.clear();
+    verticalBlurShader.uniforms.tDiffuse.value = tempBlurTextureTarget.texture;
+    verticalBlurShader.uniforms.v.value = 2.5 / size.y;
+    fsQuad.render(renderer, verticalBlurShader);
+
+    renderer.setRenderTarget(tempBlurTextureTarget);
+    renderer.clear();
+    horizontalBlurShader.uniforms.tDiffuse.value = blurTextureTarget.texture;
+    horizontalBlurShader.uniforms.h.value = 2.0 / size.x;
+    fsQuad.render(renderer, horizontalBlurShader);
+
+    renderer.setRenderTarget(blurTextureTarget);
+    renderer.clear();
+    verticalBlurShader.uniforms.tDiffuse.value = tempBlurTextureTarget.texture;
+    verticalBlurShader.uniforms.v.value = 2.0 / size.y;
+    fsQuad.render(renderer, verticalBlurShader);
+
+    const parents: (Object3D | null)[] = enabledObjects.map(obj => obj.parent);
+
+    // selectTextureTarget / selectDepthTexture / tempScene 已在模块级复用，仅跟随主画面尺寸 resize，不每帧 new。
+    enabledObjects.forEach(obj => tempScene.add(obj));
+
+    renderer.setRenderTarget(selectTextureTarget);
+    renderer.clear();
+    renderer.render(tempScene, camera);
+    // 调试：记录选区深度，供面板「深度判定图 / 辉光深度比对」排查 frosted 的遮挡判定
+    debugDepthState.lastSelectDepth = selectDepthTexture;
+
+    renderer.setRenderTarget(maskTextureTarget);
+    renderer.clear();
+    depthTestShader.uniforms.baseDepth.value = baseDepthTexture;
+    depthTestShader.uniforms.selectDepth.value = selectTextureTarget.depthTexture;
+    depthTestShader.uniforms.cameraFar.value = (camera as PerspectiveCamera).far;
+    fsQuad.render(renderer, depthTestShader);
+
+    enabledObjects.forEach((obj, i: number) => {
+        if (parents[i]) {
+            parents[i]!.add(obj);
+        }
+    });
+
+    renderer.setRenderTarget(originRenderTarget);
+    renderer.clearDepth();
+    frostedGlassShader.uniforms.blurTexture.value = blurTextureTarget.texture;
+    frostedGlassShader.uniforms.maskTexture.value = maskTextureTarget.texture;
+    fsQuad.render(renderer, frostedGlassShader);
+}

package/pass/fsQuad.d.ts

@@ -1,7 +1,7 @@
-import { BufferGeometry, Material, Mesh, OrthographicCamera, Scene, WebGLRenderer } from "three";
+import { BufferGeometry, Material, Mesh, NormalBufferAttributes, Object3DEventMap, OrthographicCamera, Scene, WebGLRenderer } from "three";
 declare class FullScreenQuad extends Scene {
     constructor();
-    mesh: Mesh<BufferGeometry<import("three").NormalBufferAttributes>, Material, import("three").Object3DEventMap>;
+    mesh: Mesh<BufferGeometry<NormalBufferAttributes>, Material, Object3DEventMap>;
     orthographicCamera: OrthographicCamera;
     render(renderer: WebGLRenderer, material: Material): void;
 }

package/pass/fsQuad.ts

@@ -0,0 +1,34 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2023-05-09 01:36:35
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2025-01-28 04:04:33
+ */
+import { BufferGeometry, Float32BufferAttribute, Material, Mesh, MeshBasicMaterial, NormalBufferAttributes, Object3DEventMap, OrthographicCamera, Scene, WebGLRenderer } from "three";
+
+class FullScreenQuad extends Scene {
+    constructor() {
+        super();
+    }
+
+    mesh: Mesh<BufferGeometry<NormalBufferAttributes>, Material, Object3DEventMap> = (() => {
+        const geometry = new BufferGeometry();
+        geometry.setAttribute("position", new Float32BufferAttribute([-1, 3, 0, -1, -1, 0, 3, -1, 0], 3));
+        geometry.setAttribute("uv", new Float32BufferAttribute([0, 2, 0, 0, 2, 0], 2));
+        const mesh = new Mesh(geometry, new MeshBasicMaterial());
+        this.add(mesh);
+        return mesh;
+    })();
+
+    orthographicCamera: OrthographicCamera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);
+
+    render(renderer: WebGLRenderer, material: Material): void {
+        this.mesh.material = material;
+        renderer.render(this, this.orthographicCamera);
+    }
+}
+
+// 创建一个渲染工具 用于处理纹理
+const fsQuad: FullScreenQuad = new FullScreenQuad(); // 渲染辅助器
+
+export default fsQuad;

package/pass/glow_pass.d.ts

@@ -1,2 +1,2 @@
-import { Camera, DepthTexture, Object3D, WebGLRenderer } from "three";
+import { DepthTexture, WebGLRenderer, Camera, Object3D } from "three";
 export default function glow_pass(renderer: WebGLRenderer, camera: Camera, object3d: Object3D, baseDepthTexture: DepthTexture, devicePixelRatio: number): void;