three-base 2.0.130 → 2.0.137

package/pass/cover_pass.js

@@ -1,55 +1,55 @@
-/*
- * @Author: xiaosihan
- * @Date: 2024-09-23 21:07:06
- * @Last Modified by: xiaosihan
- * @Last Modified time: 2025-01-28 04:01:58
- */
-/*
- * @Author: xiaosihan
- * @Date: 2023-05-09 00:35:17
- * @Last Modified by: xiaosihan
- * @Last Modified time: 2023-05-09 02:33:28
- */
-import { Color, DepthFormat, DepthTexture, LinearFilter, RGBAFormat, Scene, ShaderChunk, ShaderMaterial, UnsignedShortType, Vector2, WebGLRenderTarget, } from "three";
-import fsQuad from "./fsQuad";
-// 选中对象的深度纹理
-const selectDepthTexture = (() => {
-    const baseDepthTexture = new DepthTexture(1024, 1024);
-    baseDepthTexture.format = DepthFormat;
-    baseDepthTexture.type = UnsignedShortType;
-    baseDepthTexture.anisotropy = 16;
-    return baseDepthTexture;
-})();
-// 选中对象的纹理
-const selectTextureTarget = new WebGLRenderTarget(512, 512, {
-    minFilter: LinearFilter,
-    magFilter: LinearFilter,
-    format: RGBAFormat,
-    depthTexture: selectDepthTexture,
-    anisotropy: 16,
-});
-// 深度测试后的选中纹理
-const selectDethpTestTextureTarget = new WebGLRenderTarget(512, 512, {
-    minFilter: LinearFilter,
-    magFilter: LinearFilter,
-    format: RGBAFormat,
-    anisotropy: 16,
-});
-const blur1TextureTarget = new WebGLRenderTarget(512, 512, {
-    minFilter: LinearFilter,
-    magFilter: LinearFilter,
-    format: RGBAFormat,
-});
-const size = new Vector2();
-//深度比对纹理
-const depthTestShader = new ShaderMaterial({
-    uniforms: {
-        color: { value: new Color("#440000") },
-        opacity: { value: 1 },
-        depthTest: { value: true },
-        baseDepth: { value: null },
-        selectDepth: { value: null }, // 选中的对象深度纹理
-    },
+/*
+ * @Author: xiaosihan
+ * @Date: 2024-09-23 21:07:06
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2025-01-28 04:01:58
+ */
+/*
+ * @Author: xiaosihan
+ * @Date: 2023-05-09 00:35:17
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-05-09 02:33:28
+ */
+import { Color, DepthFormat, DepthTexture, LinearFilter, RGBAFormat, Scene, ShaderChunk, ShaderMaterial, UnsignedShortType, Vector2, WebGLRenderTarget } from "three";
+import fsQuad from "./fsQuad";
+// 选中对象的深度纹理
+const selectDepthTexture = (() => {
+    const baseDepthTexture = new DepthTexture(1024, 1024);
+    baseDepthTexture.format = DepthFormat;
+    baseDepthTexture.type = UnsignedShortType;
+    baseDepthTexture.anisotropy = 16;
+    return baseDepthTexture;
+})();
+// 选中对象的纹理
+const selectTextureTarget = new WebGLRenderTarget(512, 512, {
+    minFilter: LinearFilter,
+    magFilter: LinearFilter,
+    format: RGBAFormat,
+    depthTexture: selectDepthTexture,
+    anisotropy: 16,
+});
+// 深度测试后的选中纹理
+const selectDethpTestTextureTarget = new WebGLRenderTarget(512, 512, {
+    minFilter: LinearFilter,
+    magFilter: LinearFilter,
+    format: RGBAFormat,
+    anisotropy: 16,
+});
+const blur1TextureTarget = new WebGLRenderTarget(512, 512, {
+    minFilter: LinearFilter,
+    magFilter: LinearFilter,
+    format: RGBAFormat,
+});
+const size = new Vector2();
+//深度比对纹理
+const depthTestShader = new ShaderMaterial({
+    uniforms: {
+        color: { value: new Color("#440000") }, //颜色
+        opacity: { value: 1 }, // 透明度
+        depthTest: { value: true }, // 开启深度测试
+        baseDepth: { value: null }, // 整个场景的深度纹理
+        selectDepth: { value: null }, // 选中的对象深度纹理
+    },
     vertexShader: `
         ${ShaderChunk.common}
         ${ShaderChunk.logdepthbuf_pars_vertex}
@@ -61,7 +61,7 @@ const depthTestShader = new ShaderMaterial({
             gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
             ${ShaderChunk.logdepthbuf_vertex}
         }
-    `,
+    `,
     fragmentShader: `
         ${ShaderChunk.logdepthbuf_pars_fragment}
         uniform vec3 color;
@@ -89,45 +89,45 @@ const depthTestShader = new ShaderMaterial({
 
             ${ShaderChunk.logdepthbuf_fragment}
         }
-    `,
-    depthTest: true,
-    depthWrite: true,
-    transparent: true,
-});
-// 场景对象
-const scene = new Scene();
-// 给模型覆盖一层颜色 后处理通道
-export default function cover_pass(renderer, camera, object3d, baseDepthTexture, devicePixelRatio) {
-    const { cover_enable = false, cover_color = "#04fa12", cover_opacity = 1, cover_depth_test = true, // 颜色叠加是否开启深度测试
-     } = object3d.userData;
-    if (!cover_enable || cover_opacity === 0) {
-        return;
-    }
-    // 保存原帧缓冲区
-    const originRenderTarget = renderer.getRenderTarget();
-    // 设置选中目标的帧缓冲区
-    renderer.getSize(size);
-    size.multiplyScalar(devicePixelRatio);
-    selectTextureTarget.setSize(size.x, size.y);
-    selectDethpTestTextureTarget.setSize(size.x, size.y);
-    blur1TextureTarget.setSize(size.x, size.y);
-    renderer.setRenderTarget(selectTextureTarget);
-    scene.children = [object3d];
-    renderer.clear();
-    renderer.render(scene, camera);
-    //更具深度测试绘制叠加颜色
-    renderer.setRenderTarget(originRenderTarget);
-    renderer.clearDepth();
-    depthTestShader.uniforms.color.value.set(cover_color);
-    depthTestShader.uniforms.opacity.value = cover_opacity;
-    depthTestShader.uniforms.depthTest.value = cover_depth_test;
-    depthTestShader.uniforms.baseDepth.value = baseDepthTexture;
-    depthTestShader.uniforms.selectDepth.value = selectDepthTexture;
-    fsQuad.render(renderer, depthTestShader);
-    // 调试代码
-    // renderer.setRenderTarget(null);
-    // renderer.clearDepth();
-    // copyShader.uniforms.map.value = blur2TextureTarget.texture;
-    // fsQuad.render(renderer, copyShader);
-    // return;
-}
+    `,
+    depthTest: true,
+    depthWrite: true,
+    transparent: true,
+});
+// 场景对象
+const scene = new Scene();
+// 给模型覆盖一层颜色 后处理通道
+export default function cover_pass(renderer, camera, object3d, baseDepthTexture, devicePixelRatio) {
+    const { cover_enable = false, cover_color = "#04fa12", cover_opacity = 1, cover_depth_test = true, // 颜色叠加是否开启深度测试
+     } = object3d.userData;
+    if (!cover_enable || cover_opacity === 0) {
+        return;
+    }
+    // 保存原帧缓冲区
+    const originRenderTarget = renderer.getRenderTarget();
+    // 设置选中目标的帧缓冲区
+    renderer.getSize(size);
+    size.multiplyScalar(devicePixelRatio);
+    selectTextureTarget.setSize(size.x, size.y);
+    selectDethpTestTextureTarget.setSize(size.x, size.y);
+    blur1TextureTarget.setSize(size.x, size.y);
+    renderer.setRenderTarget(selectTextureTarget);
+    scene.children = [object3d];
+    renderer.clear();
+    renderer.render(scene, camera);
+    //更具深度测试绘制叠加颜色
+    renderer.setRenderTarget(originRenderTarget);
+    renderer.clearDepth();
+    depthTestShader.uniforms.color.value.set(cover_color);
+    depthTestShader.uniforms.opacity.value = cover_opacity;
+    depthTestShader.uniforms.depthTest.value = cover_depth_test;
+    depthTestShader.uniforms.baseDepth.value = baseDepthTexture;
+    depthTestShader.uniforms.selectDepth.value = selectDepthTexture;
+    fsQuad.render(renderer, depthTestShader);
+    // 调试代码
+    // renderer.setRenderTarget(null);
+    // renderer.clearDepth();
+    // copyShader.uniforms.map.value = blur2TextureTarget.texture;
+    // fsQuad.render(renderer, copyShader);
+    // return;
+}

package/pass/emissive_ao_pass.d.ts

@@ -0,0 +1,13 @@
+import { Camera, DepthTexture, WebGLRenderer } from "three";
+export default function emissive_ao_pass(renderer: WebGLRenderer, camera: Camera, depthTexture: DepthTexture, emissiveTexture: any, devicePixelRatio: number, options: {
+    enable: boolean;
+    debug?: boolean;
+    radius?: number;
+    falloff?: number;
+    bias?: number;
+    intensity?: number;
+    sampleCount?: number;
+    blurRadius?: number;
+    strength?: number;
+    cameraFar?: number;
+}): void;

package/pass/emissive_ao_pass.js

@@ -0,0 +1,370 @@
+import { LinearFilter, NoBlending, RGBAFormat, RawShaderMaterial, Vector2, WebGLRenderTarget, Matrix4, AdditiveBlending, } from "three";
+import fsQuad from "./fsQuad";
+const emissiveTextureTarget = new WebGLRenderTarget(512, 512, {
+    minFilter: LinearFilter,
+    magFilter: LinearFilter,
+    format: RGBAFormat,
+});
+const blurTextureTarget = new WebGLRenderTarget(512, 512, {
+    minFilter: LinearFilter,
+    magFilter: LinearFilter,
+    format: RGBAFormat,
+});
+const size = new Vector2();
+const projectionMatrix = new Matrix4();
+const inverseProjectionMatrix = new Matrix4();
+const emissiveShader = new RawShaderMaterial({
+    uniforms: {
+        depthTexture: { value: null },
+        emissiveTexture: { value: null },
+        resolution: { value: new Vector2(1 / 512, 1 / 512) },
+        projectionMatrix: { value: new Matrix4() },
+        inverseProjectionMatrix: { value: new Matrix4() },
+        radius: { value: 3.0 },
+        falloff: { value: 8.0 },
+        bias: { value: 0.2 },
+        intensity: { value: 1.0 },
+        sampleCount: { value: 16 },
+        cameraFar: { value: 20000 },
+    },
+    vertexShader: `
+    attribute vec3 position;
+    attribute vec2 uv;
+    varying vec2 vUv;
+    void main() {
+      vUv = uv;
+      gl_Position = vec4(position, 1.0);
+    }`,
+    fragmentShader: `
+    #ifdef GL_ES
+      precision highp float;
+    #endif
+
+    uniform sampler2D depthTexture;
+    uniform sampler2D emissiveTexture;
+    uniform vec2 resolution;
+    uniform mat4 projectionMatrix;
+    uniform mat4 inverseProjectionMatrix;
+    uniform float radius;
+    uniform float falloff;
+    uniform float bias;
+    uniform float intensity;
+    uniform int sampleCount;
+    uniform float cameraFar;
+
+    varying vec2 vUv;
+
+    float linearizeLogDepth(float logDepth) {
+      return pow(cameraFar + 1.0, logDepth) - 1.0;
+    }
+
+    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;
+      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(0.0);
+        return;
+      }
+
+      float viewZ = linearizeLogDepth(logDepth);
+      vec3 position = reconstructPosition(vUv, viewZ);
+      vec3 normal = reconstructNormal(vUv, resolution);
+
+      float projScale = 1.0 / (2.0 * abs(viewZ) * resolution.x);
+      float pixelRadius = max(radius * projScale, 1.0);
+
+      vec3 accumulatedColor = vec3(0.0);
+      float totalWeight = 0.0;
+
+      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)) * (pixelRadius / sqrt(float(sampleCount)));
+
+        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;
+        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 = position - samplePosition;
+        float dist = length(diff);
+
+        float tangentDist = dot(diff, normal);
+        if (tangentDist < bias) continue;
+
+        vec3 emissiveColor = texture2D(emissiveTexture, sampleUv).rgb;
+        float emissiveIntensity = length(emissiveColor);
+
+        if (emissiveIntensity > 0.01 && dist < falloff) {
+          float rangeCheck = smoothstep(0.0, falloff, dist);
+          float weight = (1.0 - rangeCheck) * (1.0 - tangentDist / falloff);
+          accumulatedColor += emissiveColor * weight;
+          totalWeight += weight;
+        }
+      }
+
+      if (totalWeight > 0.0) {
+        accumulatedColor /= totalWeight;
+      }
+
+      accumulatedColor *= intensity;
+      accumulatedColor = clamp(accumulatedColor, 0.0, 1.0);
+
+      gl_FragColor = vec4(accumulatedColor, 1.0);
+    }`,
+    blending: NoBlending,
+    depthTest: false,
+    depthWrite: false,
+    transparent: true,
+});
+const blurHShader = new RawShaderMaterial({
+    uniforms: {
+        tDiffuse: { value: null },
+        resolution: { value: new Vector2(1 / 512, 1 / 512) },
+        blurRadius: { value: 2.0 },
+        depthTexture: { value: null },
+    },
+    vertexShader: `
+    attribute vec3 position;
+    attribute vec2 uv;
+    varying vec2 vUv;
+    void main() {
+      vUv = uv;
+      gl_Position = vec4(position, 1.0);
+    }`,
+    fragmentShader: `
+    #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);
+        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,
+    depthTest: false,
+    depthWrite: false,
+    transparent: true,
+});
+const blurVShader = new RawShaderMaterial({
+    uniforms: {
+        tDiffuse: { value: null },
+        resolution: { value: new Vector2(1 / 512, 1 / 512) },
+        blurRadius: { value: 2.0 },
+        depthTexture: { value: null },
+    },
+    vertexShader: `
+    attribute vec3 position;
+    attribute vec2 uv;
+    varying vec2 vUv;
+    void main() {
+      vUv = uv;
+      gl_Position = vec4(position, 1.0);
+    }`,
+    fragmentShader: `
+    #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);
+        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,
+    depthTest: false,
+    depthWrite: false,
+    transparent: true,
+});
+const outputShader = new RawShaderMaterial({
+    uniforms: {
+        emissiveTexture: { value: null },
+        strength: { value: 1.0 },
+        debug: { value: 0.0 },
+    },
+    vertexShader: `
+    attribute vec3 position;
+    attribute vec2 uv;
+    varying vec2 vUv;
+    void main() {
+      vUv = uv;
+      gl_Position = vec4(position, 1.0);
+    }`,
+    fragmentShader: `
+    #ifdef GL_ES
+      precision highp float;
+    #endif
+
+    uniform sampler2D emissiveTexture;
+    uniform float strength;
+    uniform float debug;
+
+    varying vec2 vUv;
+
+    void main() {
+      vec3 emissive = texture2D(emissiveTexture, vUv).rgb;
+      vec3 finalEmissive = emissive * strength;
+
+      if (debug > 0.5) {
+        gl_FragColor = vec4(finalEmissive, 1.0);
+      } else {
+        gl_FragColor = vec4(finalEmissive, length(finalEmissive));
+      }
+    }`,
+    blending: AdditiveBlending,
+    depthTest: false,
+    depthWrite: false,
+    transparent: true,
+});
+export default function emissive_ao_pass(renderer, camera, depthTexture, emissiveTexture, devicePixelRatio, options) {
+    if (!options.enable || !options.strength) {
+        return;
+    }
+    renderer.getSize(size);
+    size.multiplyScalar(devicePixelRatio);
+    emissiveTextureTarget.setSize(size.x, size.y);
+    blurTextureTarget.setSize(size.x, size.y);
+    projectionMatrix.copy(camera.projectionMatrix);
+    inverseProjectionMatrix.copy(projectionMatrix).invert();
+    emissiveShader.uniforms.depthTexture.value = depthTexture;
+    emissiveShader.uniforms.emissiveTexture.value = emissiveTexture;
+    emissiveShader.uniforms.resolution.value.set(1 / size.x, 1 / size.y);
+    emissiveShader.uniforms.projectionMatrix.value = projectionMatrix;
+    emissiveShader.uniforms.inverseProjectionMatrix.value = inverseProjectionMatrix;
+    emissiveShader.uniforms.radius.value = options.radius || 3.0;
+    emissiveShader.uniforms.falloff.value = options.falloff || 8.0;
+    emissiveShader.uniforms.bias.value = options.bias || 0.2;
+    emissiveShader.uniforms.intensity.value = options.intensity || 1.0;
+    emissiveShader.uniforms.sampleCount.value = options.sampleCount || 16;
+    emissiveShader.uniforms.cameraFar.value = options.cameraFar || camera.far || 20000;
+    renderer.setRenderTarget(emissiveTextureTarget);
+    renderer.clear();
+    fsQuad.render(renderer, emissiveShader);
+    const blurRes = new Vector2(1 / size.x, 1 / size.y);
+    const blurR = options.blurRadius || 2.0;
+    blurHShader.uniforms.tDiffuse.value = emissiveTextureTarget.texture;
+    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.copy(blurRes);
+    blurVShader.uniforms.blurRadius.value = blurR;
+    blurVShader.uniforms.depthTexture.value = depthTexture;
+    renderer.setRenderTarget(emissiveTextureTarget);
+    renderer.clear();
+    fsQuad.render(renderer, blurVShader);
+    renderer.setRenderTarget(null);
+    outputShader.uniforms.emissiveTexture.value = emissiveTextureTarget.texture;
+    outputShader.uniforms.strength.value = options.strength || 1.0;
+    outputShader.uniforms.debug.value = options.debug ? 1.0 : 0.0;
+    fsQuad.render(renderer, outputShader);
+}

package/pass/frosted_glass_pass.d.ts

@@ -0,0 +1,2 @@
+import { Camera, DepthTexture, Scene, WebGLRenderTarget, WebGLRenderer } from "three";
+export default function frosted_glass_pass(renderer: WebGLRenderer, camera: Camera, scene: Scene, baseRenderTarget: WebGLRenderTarget, baseDepthTexture: DepthTexture, devicePixelRatio: number): void;