关于后处理的介绍这里不做过多的赘述，本文主要介绍一下THREEJS的后处理流程
EffectComposer
在 THREEJS 中使用后处理，我们先需要创建一个EffectComposer，如下
new EffectComposer( renderer )
它的作用是接管渲染器渲染的结果，同时管理调度各个 pass 执行。在后续的流程中我们不在直接使用 renderer.render，而是调用composer.render，接下来我们来看一看EffectComposer到底做了哪些事情。
打开 THREEJS 源码，找到EffectComposer.js，可以看到在 EffectComposer 初始化阶段给我们创建了两个缓冲区（WebGLRenderTarget），分别是 writeBuffer 和 readBuffer，这两个缓冲区作为载体，承载着渲染结果被各个pass调用
这个过程类似于工厂流水线，而这两个pass就是流水线上的托盘，而托盘里装的就是渲染的结果，每个pass就是流水线上的操作工
EffectComposer提供了一个render方法，该方法内部就是按顺序调用了各个 pass 的render，因此，真正发挥作用的就是各个pass
RenderPass
这个 pass 的作用就是负责将场景渲染到 composer 的 readBuffer 中，供后续的 pass 调用，因此这个pass必须放在所有pass的前面
ShaderPass
这个 pass 可以将特定的 shader 代码应用到渲染结果上，比如
var customShader = {
uniforms: {
'tDiffuse': { value: null }
},
vertexShader: /* glsl */`
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
`,
fragmentShader: /* glsl */`
precision highp float;
uniform sampler2D tDiffuse;
varying vec2 vUv;
vec4 cTextureScreen = texture2D( tDiffuse, vUv );
float lumi = luminance( cTextureScreen.rgb );
gl_FragColor = vec4(lumi, lumi, lumi, cTextureScreen.a);
`
}
var pass = new THREE.ShaderPass()
以上代码实现了一个自定义 shader，它的作用是去除画面颜色，而 tDiffuse 就是上一个 pass 传递过来的纹理。它内部的原理很简单，就是根据传入的 shader 参数，创建一个ShaderMaterial，同时创建一个 mesh（在 FullScreenQuad 中创建），将这个ShaderMaterial赋给这个 mesh。
FullScreenQuad
这个类被定义在Pass.js中，它作为一个载体而存在。因为在WEBGL中，被渲染的物体需要有顶点数据的存在。因此为了给ShaderMaterial提供画布，在FullScreenQuad内部创建了一个片，同时创建了一个正交相机，使它正对着这个片
const _camera = new OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
const _geometry = new BufferGeometry();
_geometry.setAttribute( 'position', new Float32BufferAttribute( [ - 1, 3, 0, - 1, - 1, 0, 3, - 1, 0 ], 3 ) );
_geometry.setAttribute( 'uv', new Float32BufferAttribute( [ 0, 2, 0, 0, 2, 0 ], 2 ) );
官方自带了很多功能pass，例如：OutlinePass、UnrealBloomPass...
自定义 Pass
以下案例实现在后处理中，对局部物体实现单独处理
class DecolorizationPass extends THREE.Pass{
oldClearColor = new THREE.Color()
selectedObjects = []
needsSwap = true
constructor(resolution, scene, camera){
super()
this.resolution = (resolution !== undefined) ? new THREE.Vector2(resolution.x, resolution.y) : new THREE.Vector2( 256, 256 )
this.renderScene = scene;
this.renderCamera = camera;
var pars = {
minFilter: THREE.LinearFilter,
magFilter: THREE.LinearFilter,
format: THREE.RGBAFormat
};
this.renderTargetBuffer = new THREE.WebGLRenderTarget(this.resolution.x, this.resolution.y, pars);
this.renderTargetBuffer.texture.name = "DecolorizationPass";
this.renderTargetBuffer.texture.generateMipmaps = false;
this.material = new THREE.ShaderMaterial({
uniforms: {
'tDiffuse': { value: null }
},
vertexShader: /* glsl */`
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
`,
fragmentShader: /* glsl */`
#include <common>
uniform sampler2D tDiffuse;
varying vec2 vUv;
void main() {
vec4 cTextureScreen = texture2D( tDiffuse, vUv );
float lumi = luminance( cTextureScreen.rgb );
gl_FragColor = vec4(lumi, lumi, lumi, cTextureScreen.a);
}
`
})
this.fsQuad = new THREE.FullScreenQuad(this.material)
this.materialCopy = new THREE.ShaderMaterial( {
uniforms: {
'tDiffuse': {value: null},
'opacity': {value: 0.5}
},
vertexShader: /* glsl */`
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
`,
fragmentShader: /* glsl */`
uniform float opacity;
uniform sampler2D tDiffuse;
varying vec2 vUv;
void main() {
gl_FragColor = texture2D( tDiffuse, vUv );
}
`,
transparent: true
})
}
render(renderer, writeBuffer, readBuffer, deltaTime, maskActive){
renderer.getClearColor(this.oldClearColor)
this.oldClearAlpha = renderer.getClearAlpha()
var oldAutoClear = renderer.autoClear
renderer.autoClear = false
//对色彩部分单独渲染，结果保存在 this.renderTargetBuffer
renderer.setClearColor(this.oldClearColor, 0)
renderer.setRenderTarget(this.renderTargetBuffer)
renderer.clear()
renderer.renderArray(this.selectedObjects, this.renderScene, this.renderCamera)
//对整体进行去色
this.fsQuad.material = this.material
this.fsQuad.material.uniforms[ "tDiffuse" ].value = readBuffer.texture
renderer.setRenderTarget(this.renderToScreen ? null : writeBuffer)
this.fsQuad.render(renderer)
//将色彩部分覆盖到画面上
this.fsQuad.material = this.materialCopy
this.fsQuad.material.uniforms[ "tDiffuse" ].value = this.renderTargetBuffer.texture
renderer.setRenderTarget(this.renderToScreen ? null : writeBuffer)
this.fsQuad.render(renderer)
renderer.setClearColor(this.oldClearColor, this.oldClearAlpha)
renderer.autoClear = oldAutoClear
}
}
- needsSwap 设置为true后，在当前pass执行完毕后，composer会对调
readBuffer和writeBuffer，因为当前 pass 渲染结果保存在writeBuffer中，这样如果下一个pass需要从readBuffer中取结果则需要设置为 true
