ThreeJS进阶之使用后期处理

什么是后期处理？

很多three.js应用程序是直接将三维物体渲染到屏幕上的。
有时，你或许希望应用一个或多个图形效果，例如景深、发光、胶片微粒或是各种类型的抗锯齿。 后期处理是一种被广泛使用、用于来实现这些效果的方式。
首先，场景被渲染到一个渲染目标上，渲染目标表示的是一块在显存中的缓冲区。
接下来，在图像最终被渲染到屏幕之前，一个或多个后期处理过程将滤镜和效果应用到图像缓冲区。

这里three.js通过EffectComposer（效果合成器），提供了一个完整的后期处理解决方案来实现这样的工作流程。

工作流程

首先，假设你正在使用three.js官方npm包，在如下基础示例中，我们需要下列文件。

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