three-base 2.0.134 → 2.0.142

package/pass/frosted_glass_pass.js

@@ -1,46 +1,56 @@
-/*
- * @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, UnsignedShortType, Vector2, WebGLRenderTarget } from "three";
-import fsQuad from "./fsQuad";
-// 深度测试后的毛玻璃遮罩纹理
-const maskTextureTarget = new WebGLRenderTarget(512, 512, {
-    minFilter: LinearFilter,
-    magFilter: LinearFilter,
-    format: RGBAFormat,
-    anisotropy: 16,
-});
-// 模糊后的纹理
-const blurTextureTarget = new WebGLRenderTarget(1024, 1024, {
-    minFilter: LinearFilter,
-    magFilter: LinearFilter,
-    format: RGBAFormat,
-    anisotropy: 16,
-});
-// 临时模糊纹理（用于两阶段模糊）
-const tempBlurTextureTarget = new WebGLRenderTarget(1024, 1024, {
-    minFilter: LinearFilter,
-    magFilter: LinearFilter,
-    format: RGBAFormat,
-    anisotropy: 16,
-});
-const size = new Vector2();
-// 水平模糊着色器（使用 three.js 风格的高斯模糊）
-const horizontalBlurShader = new ShaderMaterial({
-    uniforms: {
-        tDiffuse: { value: null },
-        h: { value: 1.0 / 512.0 },
-    },
+/*
+ * @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 } from "three";
+import fsQuad from "./fsQuad";
+import { debugDepthState } from "./debugDepthState";
+const maskTextureTarget = new WebGLRenderTarget(1024, 1024, {
+    minFilter: LinearFilter,
+    magFilter: LinearFilter,
+    format: RGBAFormat,
+    anisotropy: 16,
+});
+const blurTextureTarget = new WebGLRenderTarget(1024, 1024, {
+    minFilter: LinearFilter,
+    magFilter: LinearFilter,
+    format: RGBAFormat,
+    anisotropy: 16,
+});
+const tempBlurTextureTarget = new WebGLRenderTarget(1024, 1024, {
+    minFilter: LinearFilter,
+    magFilter: LinearFilter,
+    format: RGBAFormat,
+    anisotropy: 16,
+});
+// 选中对象的遮罩渲染目标 + 配套深度纹理 + 临时场景：模块级复用，避免每帧 new/dispose 造成 GC 抖动与
+// GPU 资源反复创建销毁（原先在函数内每帧 new 一个 WebGLRenderTarget + DepthTexture + Scene，开销大且不稳）。
+const selectDepthTexture = new DepthTexture(1024, 1024);
+selectDepthTexture.format = DepthFormat;
+selectDepthTexture.type = UnsignedIntType;
+const selectTextureTarget = new WebGLRenderTarget(1024, 1024, {
+    minFilter: LinearFilter,
+    magFilter: LinearFilter,
+    format: RGBAFormat,
+    depthTexture: selectDepthTexture,
+});
+// 临时场景：仅用于把「毛玻璃对象」单独渲进 selectTextureTarget 做遮罩，常驻复用（不每帧 new）。
+const tempScene = new Scene();
+const size = new Vector2();
+const horizontalBlurShader = 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;
@@ -58,24 +68,23 @@ const horizontalBlurShader = new ShaderMaterial({
             sum += texture2D( tDiffuse, vec2( vUv.x + 4.0 * h, vUv.y ) ) * 0.051;
             gl_FragColor = sum;
         }
-    `,
-    depthTest: false,
-    depthWrite: false,
-    transparent: true,
-});
-// 垂直模糊着色器（使用 three.js 风格的高斯模糊）
-const verticalBlurShader = new ShaderMaterial({
-    uniforms: {
-        tDiffuse: { value: null },
-        v: { value: 1.0 / 512.0 },
-    },
+    `,
+    depthTest: false,
+    depthWrite: false,
+    transparent: true,
+});
+const verticalBlurShader = 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;
@@ -93,17 +102,17 @@ const verticalBlurShader = new ShaderMaterial({
             sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y + 4.0 * v ) ) * 0.051;
             gl_FragColor = sum;
         }
-    `,
-    depthTest: false,
-    depthWrite: false,
-    transparent: true,
-});
-// 深度测试着色器（渲染毛玻璃对象，通过深度对比生成遮罩）
-const depthTestShader = new ShaderMaterial({
-    uniforms: {
-        baseDepth: { value: null }, // 整个场景的深度纹理
-        selectDepth: { value: null }, // 毛玻璃对象的深度纹理
-    },
+    `,
+    depthTest: false,
+    depthWrite: false,
+    transparent: true,
+});
+const depthTestShader = new ShaderMaterial({
+    uniforms: {
+        baseDepth: { value: null },
+        selectDepth: { value: null },
+        cameraFar: { value: 1000.0 },
+    },
     vertexShader: `
         ${ShaderChunk.common}
         ${ShaderChunk.logdepthbuf_pars_vertex}
@@ -113,163 +122,135 @@ const depthTestShader = new ShaderMaterial({
             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;
-
-            // 背景是空的时候丢弃（没有场景物体可模糊）
-            if(baseDepthValue >= 1.0){
+            // 对数深度反解为线性视图深度。
+            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(selectDepthValue > baseDepthValue){
+            // 毛玻璃为实体：丢弃被更近场景几何遮挡的部分
+            if (zSel > zBase + bias) {
                 discard;
             }
-            // 输出白色遮罩，alpha=1
             gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
             ${ShaderChunk.logdepthbuf_fragment}
         }
-    `,
-    depthTest: true,
-    depthWrite: true,
-    transparent: true,
-});
-// 毛玻璃合成着色器（用遮罩纹理裁剪模糊区域）
-const frostedGlassShader = new ShaderMaterial({
-    uniforms: {
-        blurTexture: { value: null }, // 高斯模糊后的全场景纹理
-        maskTexture: { value: null }, // 深度遮罩纹理
-    },
+    `,
+    depthTest: true,
+    depthWrite: true,
+    transparent: true,
+});
+const frostedGlassShader = 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;
             }
 
-            // 在遮罩区域使用模糊后的纹理
-            gl_FragColor = sRGBTransferOETF(texture2D(blurTexture, vUv));
+            // 后处理全程在线性空间处理：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, camera, scene, baseRenderTarget, baseDepthTexture, devicePixelRatio) {
+    const enabledObjects = [];
+    scene.traverseVisible((obj) => {
+        if (obj.userData.frosted_glass_enable && obj.isMesh) {
+            enabledObjects.push(obj);
+        }
+    });
+    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 = 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.far;
+    fsQuad.render(renderer, depthTestShader);
+    enabledObjects.forEach((obj, i) => {
+        if (parents[i]) {
+            parents[i].add(obj);
         }
-    `,
-    depthTest: true,
-    depthWrite: true,
-    transparent: false,
-});
-// 毛玻璃后处理通道
-export default function frosted_glass_pass(renderer, camera, scene, baseRenderTarget, baseDepthTexture, devicePixelRatio) {
-    // 收集所有启用了毛玻璃特效的 Mesh 对象
-    const enabledObjects = [];
-    scene.traverseVisible((obj) => {
-        if (obj.userData.frosted_glass_enable && obj.isMesh) {
-            enabledObjects.push(obj);
-        }
-    });
-    if (enabledObjects.length === 0) {
-        return;
-    }
-    // 保存原帧缓冲区
-    const originRenderTarget = renderer.getRenderTarget();
-    // 按实际渲染尺寸调整所有 RenderTarget
-    renderer.getSize(size);
-    size.multiplyScalar(devicePixelRatio);
-    maskTextureTarget.setSize(size.x, size.y);
-    blurTextureTarget.setSize(size.x, size.y);
-    tempBlurTextureTarget.setSize(size.x, size.y);
-    // ========== 第一步：对全场景纹理做高斯模糊（两遍，增强模糊效果） ==========
-    // 1. 第一阶段水平模糊
-    renderer.setRenderTarget(tempBlurTextureTarget);
-    renderer.clear();
-    horizontalBlurShader.uniforms.tDiffuse.value = baseRenderTarget.texture;
-    horizontalBlurShader.uniforms.h.value = 2.5 / size.x;
-    fsQuad.render(renderer, horizontalBlurShader);
-    // 2. 第一阶段垂直模糊
-    renderer.setRenderTarget(blurTextureTarget);
-    renderer.clear();
-    verticalBlurShader.uniforms.tDiffuse.value = tempBlurTextureTarget.texture;
-    verticalBlurShader.uniforms.v.value = 2.5 / size.y;
-    fsQuad.render(renderer, verticalBlurShader);
-    // 3. 第二阶段水平模糊
-    renderer.setRenderTarget(tempBlurTextureTarget);
-    renderer.clear();
-    horizontalBlurShader.uniforms.tDiffuse.value = blurTextureTarget.texture;
-    horizontalBlurShader.uniforms.h.value = 2.0 / size.x;
-    fsQuad.render(renderer, horizontalBlurShader);
-    // 4. 第二阶段垂直模糊
-    renderer.setRenderTarget(blurTextureTarget);
-    renderer.clear();
-    verticalBlurShader.uniforms.tDiffuse.value = tempBlurTextureTarget.texture;
-    verticalBlurShader.uniforms.v.value = 2.0 / size.y;
-    fsQuad.render(renderer, verticalBlurShader);
-    // ========== 第二步：渲染毛玻璃对象，提取深度遮罩 ==========
-    // 记录原始 parent，渲染完恢复
-    const parents = enabledObjects.map(obj => obj.parent);
-    // 临时 RenderTarget 用于渲染毛玻璃对象（需要深度纹理）
-    const selectDepthTexture = new DepthTexture(Math.round(size.x), Math.round(size.y));
-    selectDepthTexture.format = DepthFormat;
-    selectDepthTexture.type = UnsignedShortType;
-    const selectTextureTarget = new WebGLRenderTarget(Math.round(size.x), Math.round(size.y), {
-        minFilter: LinearFilter,
-        magFilter: LinearFilter,
-        format: RGBAFormat,
-        depthTexture: selectDepthTexture,
-    });
-    const tempScene = new Scene();
-    enabledObjects.forEach(obj => tempScene.add(obj));
-    renderer.setRenderTarget(selectTextureTarget);
-    renderer.clear();
-    renderer.render(tempScene, camera);
-    // 用深度测试 shader 生成遮罩
-    renderer.setRenderTarget(maskTextureTarget);
-    renderer.clear();
-    depthTestShader.uniforms.baseDepth.value = baseDepthTexture;
-    depthTestShader.uniforms.selectDepth.value = selectTextureTarget.depthTexture;
-    fsQuad.render(renderer, depthTestShader);
-    // 恢复所有对象的 parent
-    enabledObjects.forEach((obj, i) => {
-        if (parents[i]) {
-            parents[i].add(obj);
-        }
-    });
-    // 释放临时的 RenderTarget
-    selectTextureTarget.dispose();
-    // ========== 第三步：合成毛玻璃效果 ==========
-    renderer.setRenderTarget(originRenderTarget);
-    renderer.clearDepth();
-    frostedGlassShader.uniforms.blurTexture.value = blurTextureTarget.texture;
-    frostedGlassShader.uniforms.maskTexture.value = maskTextureTarget.texture;
-    fsQuad.render(renderer, frostedGlassShader);
-    // 调试代码：直接输出模糊纹理
-    // renderer.setRenderTarget(originRenderTarget);
-    // renderer.clear();
-    // baseTextureToRenderShader.uniforms.tDiffuse.value = blurTextureTarget.texture;
-    // fsQuad.render(renderer, baseTextureToRenderShader);
-    // return;
-    // 调试代码：直接输出遮罩纹理
-    // renderer.setRenderTarget(originRenderTarget);
-    // renderer.clear();
-    // baseTextureToRenderShader.uniforms.tDiffuse.value = maskTextureTarget.texture;
-    // fsQuad.render(renderer, baseTextureToRenderShader);
-    // return;
-}
+    });
+    renderer.setRenderTarget(originRenderTarget);
+    renderer.clearDepth();
+    frostedGlassShader.uniforms.blurTexture.value = blurTextureTarget.texture;
+    frostedGlassShader.uniforms.maskTexture.value = maskTextureTarget.texture;
+    fsQuad.render(renderer, frostedGlassShader);
+}