目录
4.2 景深(BokehPass / Depth of Field)
4.4 边缘检测(OutlinePass / SobelPass)
4.5 色彩调整(ColorCorrectionPass / LUTPass)
前言
在使用 Three.js 创建 3D 场景时,后期处理(Post-Processing)是一个不可忽视的环节。它通过对渲染结果进行额外的处理,可以极大地提升场景的视觉效果,使画面更具吸引力和表现力。
一、什么是后期处理?
后期处理(Post-Processing)是指在场景渲染完成后,对渲染的图像进行进一步的处理和调整。这些处理通常包括:
在 Three.js 中,后期处理是通过将渲染结果存储到帧缓冲区(Framebuffer),然后对其应用一系列着色器效果实现的。
二、Three.js 后期处理的工作流程
Three.js 提供了一个 EffectComposer
类,用于管理后期处理的整个流程。以下是后期处理的基本步骤:
2.1 创建 EffectComposer
EffectComposer
是后期处理的核心。它会接管场景的渲染,将渲染结果存储到帧缓冲区中。
2.2 添加渲染通道(Render Pass)
后期处理由一系列渲染通道(Pass)组成,每个通道都对帧缓冲区中的图像进行特定的处理。
- RenderPass:渲染场景到帧缓冲区