three-base 2.0.134 → 2.0.137

package/pass/ssao_pass.js

@@ -1,4 +1,4 @@
-import { AddEquation, CustomBlending, LinearFilter, NoBlending, NormalBlending, OneFactor, RGBAFormat, RawShaderMaterial, SrcColorFactor, Vector2, WebGLRenderTarget, Matrix4, } from "three";
+import { LinearFilter, NoBlending, RGBAFormat, RawShaderMaterial, Vector2, WebGLRenderTarget, Matrix4, MultiplyBlending, } from "three";
 import fsQuad from "./fsQuad";
 const ssaoTextureTarget = new WebGLRenderTarget(512, 512, {
     minFilter: LinearFilter,
@@ -13,17 +13,18 @@ const blurTextureTarget = new WebGLRenderTarget(512, 512, {
 const size = new Vector2();
 const projectionMatrix = new Matrix4();
 const inverseProjectionMatrix = new Matrix4();
+// SSAO 着色器 — 随机采样 + 法线半球判断 + 深度连续性 + 视距自适应半径
 const ssaoShader = new RawShaderMaterial({
     uniforms: {
         depthTexture: { value: null },
         resolution: { value: new Vector2(1 / 512, 1 / 512) },
         projectionMatrix: { value: new Matrix4() },
         inverseProjectionMatrix: { value: new Matrix4() },
-        ssaoRadius: { value: 0.5 },
-        ssaoBias: { value: 0.025 },
-        ssaoIntensity: { value: 1.5 },
+        ssaoRadius: { value: 2.0 },
+        ssaoFalloff: { value: 5.0 },
+        ssaoBias: { value: 0.3 },
+        ssaoIntensity: { value: 1.0 },
         sampleCount: { value: 16 },
-        // 对数深度缓冲区的 far 参数，用于反算线性视距
         cameraFar: { value: 20000 },
     },
     vertexShader: `
@@ -38,88 +39,144 @@ const ssaoShader = new RawShaderMaterial({
     #ifdef GL_ES
       precision highp float;
     #endif
-    
+
     uniform sampler2D depthTexture;
     uniform vec2 resolution;
     uniform mat4 projectionMatrix;
     uniform mat4 inverseProjectionMatrix;
     uniform float ssaoRadius;
+    uniform float ssaoFalloff;
     uniform float ssaoBias;
     uniform float ssaoIntensity;
     uniform int sampleCount;
     uniform float cameraFar;
-    
+
     varying vec2 vUv;
-    
-    // 将对数深度值反算回线性视距（正数，单位与世界坐标一致）
-    // Three.js 对数深度编码: logDepth = log2(viewZ + 1.0) / log2(cameraFar + 1.0)
+
     float linearizeLogDepth(float logDepth) {
       return pow(cameraFar + 1.0, logDepth) - 1.0;
     }
-    
-    // 从屏幕 UV 和视距重建视空间坐标
-    // viewDistance: 相机到该像素的视距（正数）
-    vec3 reconstructPosition(vec2 uv, float viewDistance) {
-      // 用 inverseProjectionMatrix 求出该像素的视空间射线方向
+
+    vec3 reconstructPosition(vec2 uv, float viewZ) {
       vec4 ndc = vec4(uv * 2.0 - 1.0, 0.0, 1.0);
       vec4 viewDir4 = inverseProjectionMatrix * ndc;
       vec3 viewDir = viewDir4.xyz / viewDir4.w;
-      // viewDir.z 为负数（相机看向 -Z），viewDistance 为正数
-      return viewDir * (viewDistance / (-viewDir.z));
+      return viewDir * (viewZ / (-viewDir.z));
     }
-    
+
+    // 从深度图重建视空间法线（有限差分法）
+    vec3 reconstructNormal(vec2 uv, vec2 res) {
+      vec2 step = res * 2.0;
+
+      float dC = texture2D(depthTexture, uv).r;
+      float dL = texture2D(depthTexture, uv - vec2(step.x, 0.0)).r;
+      float dR = texture2D(depthTexture, uv + vec2(step.x, 0.0)).r;
+      float dD = texture2D(depthTexture, uv - vec2(0.0, step.y)).r;
+      float dU = texture2D(depthTexture, uv + vec2(0.0, step.y)).r;
+
+      if (dL >= 1.0 || dR >= 1.0 || dD >= 1.0 || dU >= 1.0 || dC >= 1.0) {
+        return vec3(0.0, 0.0, 1.0);
+      }
+
+      // 深度不连续时回退为中心深度
+      float edgeThreshold = 0.003;
+      float dL2 = abs(dL - dC) < edgeThreshold ? dL : dC;
+      float dR2 = abs(dR - dC) < edgeThreshold ? dR : dC;
+      float dD2 = abs(dD - dC) < edgeThreshold ? dD : dC;
+      float dU2 = abs(dU - dC) < edgeThreshold ? dU : dC;
+
+      float vC = linearizeLogDepth(dC);
+      float vL = linearizeLogDepth(dL2);
+      float vR = linearizeLogDepth(dR2);
+      float vD = linearizeLogDepth(dD2);
+      float vU = linearizeLogDepth(dU2);
+
+      vec3 pC = reconstructPosition(uv, vC);
+      vec3 pL = reconstructPosition(uv - vec2(step.x, 0.0), vL);
+      vec3 pR = reconstructPosition(uv + vec2(step.x, 0.0), vR);
+      vec3 pD = reconstructPosition(uv - vec2(0.0, step.y), vD);
+      vec3 pU = reconstructPosition(uv + vec2(0.0, step.y), vU);
+
+      vec3 tangentX = pR - pL;
+      vec3 tangentY = pU - pD;
+
+      if (length(tangentX) < 0.001 || length(tangentY) < 0.001) {
+        return vec3(0.0, 0.0, 1.0);
+      }
+
+      vec3 normal = cross(normalize(tangentX), normalize(tangentY));
+      return normalize(normal);
+    }
+
     float random(vec2 seed) {
       return fract(sin(dot(seed, vec2(12.9898, 78.233))) * 43758.5453);
     }
-    
+
     void main() {
       float logDepth = texture2D(depthTexture, vUv).r;
-      
+
       // 背景 / 无穷远 → 无遮挡
       if (logDepth >= 1.0) {
         gl_FragColor = vec4(1.0);
         return;
       }
-      
-      // 对数深度 → 线性视距
-      float viewDistance = linearizeLogDepth(logDepth);
-      vec3 position = reconstructPosition(vUv, viewDistance);
-      
+
+      float viewZ = linearizeLogDepth(logDepth);
+      vec3 position = reconstructPosition(vUv, viewZ);
+      vec3 normal = reconstructNormal(vUv, resolution);
+
+      // 视距自适应：ssaoRadius 是世界空间遮蔽半径，换算为像素半径
+      // 近处像素多 → 像素半径大；远处像素少 → 像素半径小
+      float projScale = 1.0 / (2.0 * abs(viewZ) * resolution.x);
+      float pixelRadius = max(ssaoRadius * projScale, 1.0);
+
       float occlusion = 0.0;
-      float radius = ssaoRadius;
-      
       float angle = random(vUv) * 6.2831853;
       float stepAngle = 6.2831853 / float(sampleCount);
-      
+
       for (int i = 0; i < 64; i++) {
         if (i >= sampleCount) break;
-        
+
         float theta = angle + float(i) * stepAngle;
-        float r = sqrt(float(i + 1)) * (radius / sqrt(float(sampleCount)));
-        
-        vec2 offset = vec2(cos(theta), sin(theta)) * r;
-        vec2 sampleUv = vUv + offset * resolution;
-        
+        float r = sqrt(float(i + 1)) * (pixelRadius / sqrt(float(sampleCount)));
+
+        // 屏幕空间偏移（像素 → UV）
+        vec2 sampleUv = vUv + vec2(cos(theta), sin(theta)) * r * resolution;
+
         if (sampleUv.x < 0.0 || sampleUv.x > 1.0 || sampleUv.y < 0.0 || sampleUv.y > 1.0) {
           continue;
         }
-        
+
         float sampleLogDepth = texture2D(depthTexture, sampleUv).r;
-        float sampleDistance = linearizeLogDepth(sampleLogDepth);
-        vec3 samplePosition = reconstructPosition(sampleUv, sampleDistance);
-        
+        // 背景像素跳过
+        if (sampleLogDepth >= 1.0) continue;
+
+        // 深度连续性：不同表面跳过（真正夹角深度值接近，假夹角深度差大）
+        float depthDiff = abs(sampleLogDepth - logDepth);
+        if (depthDiff > 0.002) continue;
+
+        float sampleViewZ = linearizeLogDepth(sampleLogDepth);
+        vec3 samplePosition = reconstructPosition(sampleUv, sampleViewZ);
+
         vec3 diff = samplePosition - position;
         float dist = length(diff);
-        
-        if (dist < radius && diff.z > ssaoBias) {
-          float rangeCheck = smoothstep(0.0, radius, dist);
-          occlusion += (1.0 - rangeCheck) * (1.0 - diff.z / radius);
+
+        // 半球判断：采样方向必须在法线半球侧
+        // tangentDist = dot(diff, normal) 是到切面平面的有符号距离
+        // 平坦面 ≈ 0（不会超过 bias）；夹角处显著 > 0
+        float tangentDist = dot(diff, normal);
+        if (tangentDist < ssaoBias) continue;
+
+        // 在衰减范围内
+        if (dist < ssaoFalloff) {
+          float rangeCheck = smoothstep(0.0, ssaoFalloff, dist);
+          occlusion += (1.0 - rangeCheck) * (1.0 - tangentDist / ssaoFalloff);
         }
       }
-      
+
       occlusion = 1.0 - (occlusion * ssaoIntensity / float(sampleCount));
       occlusion = clamp(occlusion, 0.0, 1.0);
-      
+
       gl_FragColor = vec4(vec3(occlusion), 1.0);
     }`,
     blending: NoBlending,
@@ -132,6 +189,7 @@ const blurHShader = new RawShaderMaterial({
         tDiffuse: { value: null },
         resolution: { value: new Vector2(1 / 512, 1 / 512) },
         blurRadius: { value: 2.0 },
+        depthTexture: { value: null },
     },
     vertexShader: `
     attribute vec3 position;
@@ -145,24 +203,29 @@ const blurHShader = new RawShaderMaterial({
     #ifdef GL_ES
       precision highp float;
     #endif
-    
+
     uniform sampler2D tDiffuse;
     uniform vec2 resolution;
     uniform float blurRadius;
-    
+    uniform sampler2D depthTexture;
+
     varying vec2 vUv;
-    
+
     void main() {
+      float centerDepth = texture2D(depthTexture, vUv).r;
       vec4 color = vec4(0.0);
       float totalWeight = 0.0;
-      
+
       for (int i = -4; i <= 4; i++) {
         float weight = exp(-float(i * i) / 8.0);
         vec2 offset = vec2(float(i) * blurRadius * resolution.x, 0.0);
-        color += texture2D(tDiffuse, vUv + offset) * weight;
-        totalWeight += weight;
+        vec2 sampleUv = vUv + offset;
+        float sampleDepth = texture2D(depthTexture, sampleUv).r;
+        float depthWeight = abs(sampleDepth - centerDepth) < 0.001 ? 1.0 : 0.1;
+        color += texture2D(tDiffuse, sampleUv) * weight * depthWeight;
+        totalWeight += weight * depthWeight;
       }
-      
+
       gl_FragColor = color / totalWeight;
     }`,
     blending: NoBlending,
@@ -175,6 +238,7 @@ const blurVShader = new RawShaderMaterial({
         tDiffuse: { value: null },
         resolution: { value: new Vector2(1 / 512, 1 / 512) },
         blurRadius: { value: 2.0 },
+        depthTexture: { value: null },
     },
     vertexShader: `
     attribute vec3 position;
@@ -188,24 +252,29 @@ const blurVShader = new RawShaderMaterial({
     #ifdef GL_ES
       precision highp float;
     #endif
-    
+
     uniform sampler2D tDiffuse;
     uniform vec2 resolution;
     uniform float blurRadius;
-    
+    uniform sampler2D depthTexture;
+
     varying vec2 vUv;
-    
+
     void main() {
+      float centerDepth = texture2D(depthTexture, vUv).r;
       vec4 color = vec4(0.0);
       float totalWeight = 0.0;
-      
+
       for (int i = -4; i <= 4; i++) {
         float weight = exp(-float(i * i) / 8.0);
         vec2 offset = vec2(0.0, float(i) * blurRadius * resolution.y);
-        color += texture2D(tDiffuse, vUv + offset) * weight;
-        totalWeight += weight;
+        vec2 sampleUv = vUv + offset;
+        float sampleDepth = texture2D(depthTexture, sampleUv).r;
+        float depthWeight = abs(sampleDepth - centerDepth) < 0.001 ? 1.0 : 0.1;
+        color += texture2D(tDiffuse, sampleUv) * weight * depthWeight;
+        totalWeight += weight * depthWeight;
       }
-      
+
       gl_FragColor = color / totalWeight;
     }`,
     blending: NoBlending,
@@ -213,10 +282,11 @@ const blurVShader = new RawShaderMaterial({
     depthWrite: false,
     transparent: true,
 });
-const compositeShader = new RawShaderMaterial({
+const outputShader = new RawShaderMaterial({
     uniforms: {
         ssaoTexture: { value: null },
         ssaoStrength: { value: 1.0 },
+        debug: { value: 0.0 },
     },
     vertexShader: `
     attribute vec3 position;
@@ -230,65 +300,73 @@ const compositeShader = new RawShaderMaterial({
     #ifdef GL_ES
       precision highp float;
     #endif
-    
+
     uniform sampler2D ssaoTexture;
     uniform float ssaoStrength;
-    
+    uniform float debug;
+
     varying vec2 vUv;
-    
+
     void main() {
       float ssao = texture2D(ssaoTexture, vUv).r;
       float finalOcclusion = mix(1.0, ssao, ssaoStrength);
-      
-      gl_FragColor = vec4(finalOcclusion, finalOcclusion, finalOcclusion, 1.0);
+
+      if (debug > 0.5) {
+        gl_FragColor = vec4(vec3(ssao), 1.0);
+      } else {
+        gl_FragColor = vec4(vec3(finalOcclusion), 1.0);
+      }
     }`,
-    blending: CustomBlending,
-    blendSrc: SrcColorFactor,
-    blendDst: OneFactor,
-    blendEquation: AddEquation,
+    blending: MultiplyBlending,
     depthTest: false,
     depthWrite: false,
-    transparent: false,
+    transparent: true,
 });
 export default function ssao_pass(renderer, camera, depthTexture, devicePixelRatio, options) {
-    if (!options.enable) {
+    if (!options.enable || !options.strength) {
         return;
     }
-    const originRenderTarget = renderer.getRenderTarget();
     renderer.getSize(size);
     size.multiplyScalar(devicePixelRatio);
     ssaoTextureTarget.setSize(size.x, size.y);
     blurTextureTarget.setSize(size.x, size.y);
     projectionMatrix.copy(camera.projectionMatrix);
     inverseProjectionMatrix.copy(projectionMatrix).invert();
+    // === 1. SSAO 遮蔽计算 ===
     ssaoShader.uniforms.depthTexture.value = depthTexture;
     ssaoShader.uniforms.resolution.value.set(1 / size.x, 1 / size.y);
     ssaoShader.uniforms.projectionMatrix.value = projectionMatrix;
     ssaoShader.uniforms.inverseProjectionMatrix.value = inverseProjectionMatrix;
-    ssaoShader.uniforms.ssaoRadius.value = options.radius || 0.5;
-    ssaoShader.uniforms.ssaoBias.value = options.bias || 0.025;
-    ssaoShader.uniforms.ssaoIntensity.value = options.intensity || 1.5;
+    ssaoShader.uniforms.ssaoRadius.value = options.radius || 2.0;
+    ssaoShader.uniforms.ssaoFalloff.value = options.falloff || 5.0;
+    ssaoShader.uniforms.ssaoBias.value = options.bias || 0.3;
+    ssaoShader.uniforms.ssaoIntensity.value = options.intensity || 1.0;
     ssaoShader.uniforms.sampleCount.value = options.sampleCount || 16;
     ssaoShader.uniforms.cameraFar.value = options.cameraFar || camera.far || 20000;
     renderer.setRenderTarget(ssaoTextureTarget);
     renderer.clear();
     fsQuad.render(renderer, ssaoShader);
+    // === 2. 双向模糊 ===
+    const blurRes = new Vector2(1 / size.x, 1 / size.y);
+    const blurR = options.blurRadius || 2.0;
     blurHShader.uniforms.tDiffuse.value = ssaoTextureTarget.texture;
-    blurHShader.uniforms.resolution.value.set(1 / size.x, 1 / size.y);
-    blurHShader.uniforms.blurRadius.value = options.blurRadius || 2.0;
+    blurHShader.uniforms.resolution.value.copy(blurRes);
+    blurHShader.uniforms.blurRadius.value = blurR;
+    blurHShader.uniforms.depthTexture.value = depthTexture;
     renderer.setRenderTarget(blurTextureTarget);
     renderer.clear();
     fsQuad.render(renderer, blurHShader);
     blurVShader.uniforms.tDiffuse.value = blurTextureTarget.texture;
-    blurVShader.uniforms.resolution.value.set(1 / size.x, 1 / size.y);
-    blurVShader.uniforms.blurRadius.value = options.blurRadius || 2.0;
+    blurVShader.uniforms.resolution.value.copy(blurRes);
+    blurVShader.uniforms.blurRadius.value = blurR;
+    blurVShader.uniforms.depthTexture.value = depthTexture;
     renderer.setRenderTarget(ssaoTextureTarget);
     renderer.clear();
     fsQuad.render(renderer, blurVShader);
-    compositeShader.uniforms.ssaoTexture.value = ssaoTextureTarget.texture;
-    compositeShader.uniforms.ssaoStrength.value = options.strength || 1.0;
-    renderer.setRenderTarget(originRenderTarget);
-    compositeShader.blending = NormalBlending;
-    compositeShader.transparent = false;
-    fsQuad.render(renderer, compositeShader);
+    // === 3. 乘法混合到屏幕 ===
+    renderer.setRenderTarget(null);
+    outputShader.uniforms.ssaoTexture.value = ssaoTextureTarget.texture;
+    outputShader.uniforms.ssaoStrength.value = options.strength || 1.0;
+    outputShader.uniforms.debug.value = options.debug ? 1.0 : 0.0;
+    fsQuad.render(renderer, outputShader);
 }