高斯模糊

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
});
技术亮点
- 分离高斯模糊:横向和纵向分开处理,减少采样次数
- 高斯权重:使用经典高斯权重分布确保模糊质量
- 屏幕尺寸自适应:根据屏幕分辨率计算采样间隔
- 纹理通道输入:支持任意纹理输入实现模糊
- 实时可调:fScale参数实时调节模糊程度
调试技巧
- 模糊强度:fScale为0时完全清晰,10时高度模糊
- 性能权衡:可减少采样点数量提升性能
- 纹理大小:大纹理模糊需要更大的fScale值
- 权重调整:可根据需要调整高斯权重曲线
- 双 Pass 优化:实际应用中建议分离为两个 Pass
扩展方向
- 双 Pass 优化:分离为H-Blur和V-Blur两个Pass
- 景深效果:结合深度图实现焦外模糊
- 动态模糊:添加物体运动方向的模糊
- 光晕模糊:实现镜头光晕的模糊效果
- 多级模糊:添加多级模糊层次创造更自然的模糊
本文档由 ThreeLab 编辑整理,专注 Three.js 着色器、Web 3D、GIS 可视化技术分享。如需转载,请注明出处。







京公网安备 11010502038735号
💬 评论区
评论功能即将上线,敬请期待!