【08】three进阶——如何使用后期处理（How to use post-processing）

three.js后期处理摘要

three.js应用程序常常需要将三维物体直接渲染到屏幕上，并有时需要应用图形效果如景深、发光等。后期处理是实现这些效果的一种常用方法。它首先将场景渲染到缓冲区，然后在图像最终呈现在屏幕前应用一系列滤镜和效果。

工作流程

使用three.js的EffectComposer可实现后期处理工作流程。首先需要从three.js的examples目录导入EffectComposer、RenderPass和GlitchPass等必要文件。然后，创建EffectComposer实例需要传入WebGLRenderer对象。在动画循环中，应调用EffectComposer的render方法代替WebGLRenderer的render。

配置后期处理过程链

为了设置后期处理过程，RenderPass实例通常位于链的开始，负责将渲染的场景提供给下一个过程。例如，GlitchPass使用RenderPass的输出来应用故障效果。后期处理过程按添加顺序执行，链中最后一个过程自动渲染到屏幕。

内置过程和自定义过程

three.js提供多种预定义的后期处理过程，位于postprocessing目录中。对于自定义后期处理着色器的需求，可使用ShaderPass。设置自定义过程需要导入ShaderPass和自定义着色器，然后将其添加到后期处理链中。

想要了解更多内容？

查看原文：【08】three进阶——如何使用后期处理（How to use post-processing）

文章来源：

小南瓜开发平台

扫码关注公众号

公司最大的内卷，偷偷做单元测试

了解更多