three.js中使用shaderPass实现自定义合成效果

最新推荐文章于 2025-05-15 13:39:57 发布

原创最新推荐文章于 2025-05-15 13:39:57 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #着色器 #材质

在three.js中，当内置的合成效果如ClearPass、CubeTexturePass等无法满足需求时，可以使用shaderPass结合自定义的顶点着色器和片段着色器来创建新的视觉效果。通过设置uniforms，采样纹理并修改gl_FragColor，可以在原有画面基础上添加各种创意效果。

three.js中使用shaderPass实现自定义合成效果

在three.js中提供了许多的合成效果，例如ClearPass，CubeTexturePass，BloomPass…等待
在这里插入图片描述
但是有时候，有些效果没有现成的，这个时候可能需要我们去编写shader来实现这个效果，而在合成效果中编写shader是通过shaderPass来实现

let shaderPass = new ShaderPass({
				uniforms: {
					tDiffuse: {
						value: null
					}
				},
				vertexShader: `
					varying vec2 vUv;
					void main() {
						gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
						vUv = uv;
					}
				`,
				fragmentShader: `
					varying vec2 vUv;
					uniform sampler2D tDiffuse;
					void main() {
						vec4 color = texture2D(tDiffuse, vUv);
						// gl_FragColor = vec4(vUv, 0.0, 1.0);
						gl_FragColor = color;
					}
				`
			})

纹理采样，他是将原本渲染的画面进行纹理采样vec4 color = texture2D(tDiffuse, vUv);来还原当前默认的画面是怎么样的；

vec4 color = texture2D(tDiffuse, vUv);

然后我们将这个color赋值给gl_FragColor的内置变量即可还原

vec4 color = texture2D(tDiffuse, vUv);
gl_FragColor = color;

此时如果我们想再往上添加什么效果，都是在color上添加，例如

vec4 color = texture2D(tDiffuse, vUv);
color.r += 0.2;
gl_FragColor = color;