35. 各种后期处理效果

上节我们学了后期效果，用了下描边效果 OutlinePass、发光效果 UnrealBloomPass 两个 Pass（通道）。

用效果合成器 EffectComposer 组合起来。

每个 Pass 都相对独立，类似这样的后期效果还有很多。

这节我们就来过一下各种通道（Pass）：

npx create-vite all-pass

进入项目，安装依赖：

npm install
npm install --save three
npm install --save-dev @types/three

改下 src/main.js

import './style.css';
import * as THREE from 'three';
import {
    OrbitControls
} from 'three/addons/controls/OrbitControls.js';

const scene = new THREE.Scene();

const geometry = new THREE.BoxGeometry(300, 300, 300);
const material = new THREE.MeshLambertMaterial({
  color: 'orange'
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

const directionLight = new THREE.DirectionalLight(0xffffff, 2);
directionLight.position.set(500, 400, 300);
scene.add(directionLight);

const ambientLight = new THREE.AmbientLight();
scene.add(ambientLight);

const width = window.innerWidth;
const height = window.innerHeight;

const helper = new THREE.AxesHelper(500);
// scene.add(helper);

const camera = new THREE.PerspectiveCamera(60, width / height, 0.1, 10000);
camera.position.set(400, 500, 600);
camera.lookAt(0, 0, 0);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height)

function render() {
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}

render();

document.body.append(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);

创建 Scene、Light、Camera、Renderer。

我们创建了一个立方体

改下 style.css

body {
  margin: 0;
}

跑一下：

npm run dev

RenderPass

我们先引入 EffectComposer 和 RenderPass：

import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';

const composer = new EffectComposer(renderer);
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);

function render() {
    composer.render();
    // renderer.render(scene, camera);
    requestAnimationFrame(render);
}

RenderPass 就是之前的 renderer.render，效果和之前没区别

GlitchPass 故障闪屏

它是一种出故障的闪屏效果。

用一下：

const glitchPass = new GlitchPass();
composer.addPass(glitchPass);

每过几秒一次。

AfterimagePass 残影

const afterimagePass = new AfterimagePass();
composer.addPass(afterimagePass);

这个通道会在物体运动的时候产生残影效果：

FilmPass 电影雪花效果

这个后期通道可以产生电影雪花的效果：

const filmPass = new FilmPass(0.5, true);
composer.addPass(filmPass);

第一参数是强度，第二个参数设置 true 就是黑白电视的效果：

UnrealBloomPass 发光效果

这个通道可以产生发光效果：

const v = new THREE.Vector2(window.innerWidth, window.innerWidth);
const bloomPass = new UnrealBloomPass(v);
composer.addPass(bloomPass);

可以调下强度和发光半径：

bloomPass.strength = 0.8;
bloomPass.radius = 10;

HalftonePass 三色圆点效果

这个通道可以给场景添加三色圆点效果：

const halftonePass = new HalftonePass({});
composer.addPass(halftonePass);

可以调节圆点的半径：

OutlinePass 描边效果

描边效果，可以给选中的物体添加描边。

const v = new THREE.Vector2(window.innerWidth, window.innerWidth);
const outlinePass = new OutlinePass(v, scene, camera);
outlinePass.selectedObjects = [mesh];
composer.addPass(outlinePass);

这个是最常用的后期通道了，可以给选中的物体加上描边。

可以调整描边的颜色、厚度以及描边闪烁周期

outlinePass.visibleEdgeColor.set('blue');
outlinePass.edgeStrength = 20;
outlinePass.edgeThickness = 10;
outlinePass.pulsePeriod = 1;

edgeStrength 强度，影响描边是否明显

edgeThickness 边缘厚度

pulsePeriod 闪烁周期，单位是秒

visibleEdgeColor 描边颜色

SMAAPass 抗锯齿

默认渲染的物体是有一些锯齿的：

我们可以在 renderer 里开启抗锯齿选项

你也可以关掉 renderer 的抗锯齿，用 SMAAPass 的后期通道来处理。

const pixelRatio = renderer.getPixelRatio();
const smaaPass = new SMAAPass(width * pixelRatio, height * pixelRatio);
composer.addPass(smaaPass);

伽马校正

之前用完很多后处理通道后，颜色都不对了

比如刚才的抗锯齿后处理：

这时候做一下伽马校正就好了：

const gammaPass= new ShaderPass(GammaCorrectionShader);
composer.addPass(gammaPass);

案例代码上传了小册仓库。

总结

这节我们用了一下常用的各种后处理通道（不是全部，后面用到再讲别的）。

• RenderPass： 和 renderer.render 一样
• GlitchPass： 故障闪屏效果
• AfterimagePass：运动残影效果
• FilmPass：电影雪花效果，可设置灰度
• UnrealBloomPass：发光效果
• HalftonePass：三色圆点效果
• OutlinePass：描边效果
• SMAAPass：抗锯齿
• 伽马校正：用了后期通道后颜色异常的修复

这些是常用的后期通道 Pass，在特定场景下，使用后期通道可以达到更好的效果。