13.后处理EffectComposer

后处理(发光描边OutlinePass)

查看threejs文件包目录examples/jsm/postprocessing/，你可以看到Three.js提供了一个扩展库EffectComposer.js,通过EffectComposer可以实现一些后期处理效果。

所谓threejs后期处理，就像ps一样，对threejs的渲染结果进行后期处理，比如添加发光效果。

不同功能后处理通道

查看threejs文件包目录examples/jsm/postprocessing/，你可以看到threejs提供了很多后处理通道，想实现什么样的后期处理效果，需要调用threejs对应的后处理通道扩展库。

• OutlinePass.js：高亮发光描边
• UnrealBloomPass.js：Bloom发光
• GlitchPass.js：画面抖动效果

下面示范使用OutlinePass给模型添加发光描边

// 引入后处理对象EffectComposer
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
// 引入渲染器通道RenderPass
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
// 引入OutlinePass通道
import { OutlinePass } from 'three/addons/postprocessing/OutlinePass.js';

// 创建后处理对象EffectComposer，WebGL渲染器作为参数
const composer = new EffectComposer(renderer);

// 创建一个渲染器通道，场景和相机作为参数
const renderPass = new RenderPass(scene, camera);
// 设置renderPass通道
composer.addPass(renderPass);

// OutlinePass第一个参数v2的尺寸和canvas画布保持一致
const v2 = new THREE.Vector2(window.innerWidth, window.innerWidth);
// 创建outlinePass发光描边通道
const outlinePass = new OutlinePass(v2, scene, camera);

// 配置需要发光描边的模型
// 一个模型对象
OutlinePass.selectedObjects = [mesh];
// 多个模型对象
OutlinePass.selectedObjects = [mesh1,mesh2,group];

// 渲染循环
function render() {
    composer.render();
    // renderer.render(scene, camera);
    requestAnimationFrame(render);
}
render();

OutlinePass描边样式

OutlinePass有很多控制高亮外边框样式的属性，下面介绍几个比较常用的属性。

//模型描边颜色，默认白色         
outlinePass.visibleEdgeColor.set(0xffff00); 
//高亮发光描边厚度
outlinePass.edgeThickness = 4; 
//高亮描边发光强度
outlinePass.edgeStrength = 6; 
 //模型闪烁频率控制，默认0不闪烁
outlinePass.pulsePeriod = 2;

Bloom发光通道

前面用OutlinePass给大家演示过后处理的整个流程，本节课给大演示一个Bloom发光通道案例。

// 引入UnrealBloomPass通道
import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';

// canvas画布宽高度window.innerWidth, window.innerHeight
new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight));

//bloom发光强度
bloomPass.strength = 2.0;

多通道组合(OutlinePass+GlitchPass)

threejs可以多个后处理效果组合使用，比如模型先通过OutlinePass设置描边，再设置其它的后处理通道。

GlitchPass通道会产生闪屏效果。

// 引入后处理扩展库EffectComposer.js
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
// 引入渲染器通道RenderPass
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
// 引入OutlinePass通道
import { OutlinePass } from 'three/addons/postprocessing/OutlinePass.js';
// 引入GlitchPass通道
import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js';
// 引入GlitchPass通道
import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js';

// 创建后处理对象EffectComposer，WebGL渲染器作为参数
const composer = new EffectComposer(renderer);
// 1. 创建一个渲染器通道，场景和相机作为参数
const renderPass = new RenderPass(scene, camera);
// 设置renderPass通道
composer.addPass(renderPass);

// 2. 创建OutlinePass通道
const v2 = new THREE.Vector2(window.innerWidth, window.innerWidth);
const outlinePass = new OutlinePass(v2, scene, camera);
outlinePass.selectedObjects = [mesh];
outlinePass.edgeThickness = 4;  // 描边厚度
outlinePass.edgeStrength = 6;  // 发光强度
outlinePass.visibleEdgeColor.set(0xffff00);   // 发光颜色
outlinePass.pulsePeriod = 2;   // 闪烁强度
composer.addPass(outlinePass);

// 3. 设置glitchPass通道
const glitchPass = new GlitchPass();
composer.addPass(glitchPass);

gltf后处理颜色异常(伽马校正)

加载gltf模型，如果使用EffectComposer添加后处理功能，模型颜色可能会出现异常，对于这种情况，首先要先分析产生颜色偏差原因

引入GammaCorrectionShader.js

examples/jsm/shaders/目录下有很多不同功能的shader文件,GammaCorrectionShader.js的功能就是进行伽马校正，具体点说就是可以用来解决gltf模型后处理时候，颜色偏差的问题。

// 伽马校正后处理Shader
import {GammaCorrectionShader} from 'three/addons/shaders/GammaCorrectionShader.js';

 引入ShaderPass.js

// ShaderPass功能：使用后处理Shader创建后处理通道
import {ShaderPass} from 'three/addons/postprocessing/ShaderPass.js';

创建伽马校正后处理通道 

threejs并没有直接提供伽马校正的后处理通道，提供了一个伽马校正的Shader对象GammaCorrectionShader，这时候可以把Shader对象作为ShaderPass的参数创建一个通道。

// 创建伽马校正通道
const gammaPass= new ShaderPass(GammaCorrectionShader);
composer.addPass(gammaPass);

抗锯齿处理

three.js提供了多种抗锯齿的后处理，下面给大家演示下FXAAShader和SMAAPass两种抗锯齿的后处理。

FXAA抗锯齿通道

FXAA减弱了锯齿，但是并不完美。

// ShaderPass功能：使用后处理Shader创建后处理通道
import {ShaderPass} from 'three/addons/postprocessing/ShaderPass.js';
// FXAA抗锯齿Shader
import { FXAAShader } from 'three/addons/shaders/FXAAShader.js';

const FXAAPass = new ShaderPass( FXAAShader );
// `.getPixelRatio()`获取`renderer.setPixelRatio()`设置的值
const pixelRatio = renderer.getPixelRatio();//获取设备像素比 
// width、height是canva画布的宽高度
FXAAPass.uniforms.resolution.value.x = 1 /(width*pixelRatio);
FXAAPass.uniforms.resolution.value.y = 1 /(height*pixelRatio);
composer.addPass( FXAAPass );

SMAA抗锯齿通道

SMAA相比较FXAA抗锯齿效果更好一些。

// SMAA抗锯齿通道
import {SMAAPass} from 'three/addons/postprocessing/SMAAPass.js';

//获取.setPixelRatio()设置的设备像素比
const pixelRatio = renderer.getPixelRatio();
// width、height是canva画布的宽高度
const smaaPass = new SMAAPass(width * pixelRatio, height * pixelRatio);
composer.addPass(smaaPass);