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

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;