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;