Three.js 高斯模糊效果 | 三维可视化 / AI 提示词

📋 AI 提示词

prompt
1
创建一个高斯模糊着色器效果,使用双通道(横向和纵向)分离模糊,结合纹理采样实现高质量后处理模糊效果。

🖼️ 效果预览

高斯模糊效果

🎮 案例演示

立即体验


效果描述

这是一个基础但实用的高斯模糊着色器实现,通过分离横向和纵向的模糊通道,结合预加载纹理实现实时模糊效果。

效果特性

  • 双通道模糊:横向和纵向分开处理
  • 9采样点高斯权重:高质量模糊效果
  • 可调节模糊强度:fScale参数控制模糊程度
  • 纹理过滤:支持边缘抗锯齿
  • 实时预览:GUI实时调节参数

参数调节

参数 默认值 范围 说明
fScale 10 0-10 模糊强度和范围

核心代码解析

着色器Uniforms

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
const cubeShader = {
    uniforms: {
        tDiffuse: {
            type: 't',
            value: new THREE.TextureLoader().load(FILE_HOST + 'threeExamples/shader/dlam.jpg')
        },
        vScreenSize: {
            type: "v2",
            value: new THREE.Vector2(window.innerWidth, window.innerHeight)
        },
        fScale: {
            type: "float",
            value: 10
        },
    },
    vertexShader: `
        varying vec2 vUv;
        void main(){
            vUv = uv;
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
    `,
    fragmentShader: `
        varying vec2 vUv;
        uniform sampler2D tDiffuse;
        uniform vec2 vScreenSize;
        uniform float fScale;
        // ... 模糊逻辑
    `
}

高斯模糊片段着色器

glsl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
varying vec2 vUv;
uniform sampler2D tDiffuse;
uniform vec2 vScreenSize;
uniform float fScale;

void main() {
    vec4 sum = vec4(0.0);
    float h = fScale/vScreenSize.x;
    float v = fScale/vScreenSize.y;

    // 纵向高斯模糊
    sum += texture2D(tDiffuse, vec2(vUv.x, vUv.y - 4.0 * v)) * (0.051/2.0);
    sum += texture2D(tDiffuse, vec2(vUv.x, vUv.y - 3.0 * v)) * (0.0918/2.0);
    sum += texture2D(tDiffuse, vec2(vUv.x, vUv.y - 2.0 * v)) * (0.12245/2.0);
    sum += texture2D(tDiffuse, vec2(vUv.x, vUv.y - 1.0 * v)) * (0.1531/2.0);
    sum += texture2D(tDiffuse, vec2(vUv.x, vUv.y)) * (0.1633/2.0);
    sum += texture2D(tDiffuse, vec2(vUv.x, vUv.y + 1.0 * v)) * (0.1531/2.0);
    sum += texture2D(tDiffuse, vec2(vUv.x, vUv.y + 2.0 * v)) * (0.12245/2.0);
    sum += texture2D(tDiffuse, vec2(vUv.x, vUv.y + 3.0 * v)) * (0.0918/2.0);
    sum += texture2D(tDiffuse, vec2(vUv.x, vUv.y + 4.0 * v)) * (0.051/2.0);

    // 横向高斯模糊
    sum += texture2D(tDiffuse, vec2(vUv.x - 4.0 * h, vUv.y)) * (0.051/2.0);
    sum += texture2D(tDiffuse, vec2(vUv.x - 3.0 * h, vUv.y)) * (0.0918/2.0);
    sum += texture2D(tDiffuse, vec2(vUv.x - 2.0 * h, vUv.y)) * (0.12245/2.0);
    sum += texture2D(tDiffuse, vec2(vUv.x - 1.0 * h, vUv.y)) * (0.1531/2.0);
    sum += texture2D(tDiffuse, vec2(vUv.x, vUv.y)) * (0.1633/2.0);
    sum += texture2D(tDiffuse, vec2(vUv.x + 1.0 * h, vUv.y)) * (0.1531/2.0);
    sum += texture2D(tDiffuse, vec2(vUv.x + 2.0 * h, vUv.y)) * (0.12245/2.0);
    sum += texture2D(tDiffuse, vec2(vUv.x + 3.0 * h, vUv.y)) * (0.0918/2.0);
    sum += texture2D(tDiffuse, vec2(vUv.x + 4.0 * h, vUv.y)) * (0.051/2.0);

    gl_FragColor = sum;
}

高斯权重分布

plaintext
1
2
3
4
5
6
7
权重分布(9采样点):
中心点: 0.1633
±1点:   0.1531
±2点:   0.12245
±3点:   0.0918
±4点:   0.051

总和: 0.051 + 0.0918 + 0.12245 + 0.1531 + 0.1633 + 0.1531 + 0.12245 + 0.0918 + 0.051 = 1.0

ShaderMaterial配置

javascript
1
2
3
4
5
6
cubeMaterial = new THREE.ShaderMaterial({
    uniforms: cubeShader.uniforms,
    vertexShader: cubeShader.vertexShader,
    fragmentShader: cubeShader.fragmentShader,
    side: THREE.DoubleSide
});

技术亮点

  1. 分离高斯模糊:横向和纵向分开处理,减少采样次数
  2. 高斯权重:使用经典高斯权重分布确保模糊质量
  3. 屏幕尺寸自适应:根据屏幕分辨率计算采样间隔
  4. 纹理通道输入:支持任意纹理输入实现模糊
  5. 实时可调:fScale参数实时调节模糊程度

调试技巧

  1. 模糊强度:fScale为0时完全清晰,10时高度模糊
  2. 性能权衡:可减少采样点数量提升性能
  3. 纹理大小:大纹理模糊需要更大的fScale值
  4. 权重调整:可根据需要调整高斯权重曲线
  5. 双 Pass 优化:实际应用中建议分离为两个 Pass

扩展方向

  1. 双 Pass 优化:分离为H-Blur和V-Blur两个Pass
  2. 景深效果:结合深度图实现焦外模糊
  3. 动态模糊:添加物体运动方向的模糊
  4. 光晕模糊:实现镜头光晕的模糊效果
  5. 多级模糊:添加多级模糊层次创造更自然的模糊

本文档由 ThreeLab 编辑整理,专注 Three.js 着色器、Web 3D、GIS 可视化技术分享。如需转载,请注明出处。