Three.js 后期处理用 EffectComposer 给画面加特效原文出处Three.js Manual – How to use Post Processing本文基于官方手册「How to use Post Processing」章节整理用通俗方式带你看懂怎么用EffectComposer把场景渲染改成「渲染到缓冲 → 多层滤镜 → 上屏」的管线以及RenderPass/OutputPass各自该站哪个位置。写在前面普通 Three.js 应用都是「场景直接画到屏幕」。但你想加景深DOF、泛光Bloom、胶片颗粒、抗锯齿这类电影感效果时直接画就不行了——得先把场景渲染到一张离屏缓冲里再一层层滤镜处理最后才上屏。这条「先渲染、后加工」的链路叫后期处理Post-processing。这正好接上我们前面「颜色管理」那一篇的结论那篇说过用了后期处理就必须加OutputPass否则会双重 sRGB 转换、整屏过曝。这一篇就把这条管线完整讲一遍。一、后期处理到底在干什么流程分两步先把场景渲染到一个render target显存里的一块缓冲区而不是直接上屏再用一个或多个**后期处理通道pass**对这个图像缓冲做滤镜/特效处理完才最终画到屏幕。Three.js 用EffectComposer把这整套工作流封装好了。二、基础工作流四步搭起管线第 1 步引入需要的文件假设用官方 npm 包按本篇示例需要这几个import{EffectComposer}fromthree/addons/postprocessing/EffectComposer.js;import{RenderPass}fromthree/addons/postprocessing/RenderPass.js;import{GlitchPass}fromthree/addons/postprocessing/GlitchPass.js;import{OutputPass}fromthree/addons/postprocessing/OutputPass.js;注意路径都在three/addons/postprocessing/下npm 里对应three/examples/jsm/postprocessing/。第 2 步创建 composer把你的WebGLRenderer实例传进去constcomposernewEffectComposer(renderer);第 3 步把动画循环改成 composer 渲染用了 composer 之后动画循环里不能再调renderer.render()要换成composer.render()functionanimate(){requestAnimationFrame(animate);composer.render();}划重点这一行是后期处理和普通渲染最大的区别。如果忘了换、两个都调画面会乱。第 4 步配置 pass 链pass 按「添加顺序」依次执行。本例里顺序是RenderPass→GlitchPass→OutputPass链里最后一个启用的 pass 会自动输出到屏幕constrenderPassnewRenderPass(scene,camera);composer.addPass(renderPass);constglitchPassnewGlitchPass();composer.addPass(glitchPass);constoutputPassnewOutputPass();composer.addPass(outputPass);三、三个 pass 各自站哪、干什么RenderPass通常放在链的最开头负责把场景渲染出来作为下一阶段的输入图像。GlitchPass本例的中间 pass用上游的图像数据施加「故障glitch」特效。你可以把它换成 Bloom、DOF 等任意效果 pass。OutputPass通常放在链的最末尾负责做sRGB 颜色空间转换和色调映射tone mapping——也就是把你之前在「颜色管理」篇里学到的、线性工作空间的结果正确转回 sRGB 给屏幕看。这就是「颜色管理」篇那个坑的答案普通渲染时renderer.outputColorSpace会自动处理输出转换但一旦走EffectComposer这个自动转换没了必须由OutputPass来补上。漏掉它画面会整体偏亮/过曝双重 sRGB。所以 OutputPass 几乎永远应该是最后一道。四、内置 pass 与自定义 pass用内置 pass引擎自带一大票预定义 pass都在examples/jsm/postprocessing/目录里按需 import 即可Bloom、DOF、胶片等都是现成的。写自定义 pass想自己写个后期着色器挂进链里用ShaderPassimport{ShaderPass}fromthree/addons/postprocessing/ShaderPass.js;import{LuminosityShader}fromthree/addons/shaders/LuminosityShader.js;// 在初始化流程里constluminosityPassnewShaderPass(LuminosityShader);composer.addPass(luminosityPass);想从零写自己的效果仓库里有个CopyShader是绝佳起点——它只是把EffectComposer的读缓冲原样拷到写缓冲不加任何效果你照着它改就能做出第一个自定义 pass。五、常见坑速记忘了把renderer.render()换成composer.render()后期完全不生效。OutputPass位置不对 / 漏加整屏偏亮或颜色怪——这是和「颜色管理」篇联动的经典坑务必放最后。pass 顺序写反比如把RenderPass放到特效后面上游就没有场景图像可用了。链顺序 执行顺序。总结后期处理四步清单步骤关键代码作用引入import { EffectComposer, RenderPass, OutputPass } from three/addons/postprocessing/...拉起管线所需类建 composernew EffectComposer( renderer )管理整条 pass 链换循环composer.render()替代renderer.render()由 composer 驱动渲染加 passRenderPass→ 特效 pass →OutputPass顺序即执行顺序OutputPass 殿后一句话带走后期处理 渲染到缓冲 一串 pass 滤镜 上屏RenderPass打头、OutputPass收尾做 sRGB/色调映射中间随便叠效果动画循环记得换成composer.render()。延伸阅读three.js docs – EffectComposerthree.js docs – RenderPassthree.js docs – ShaderPassthree.js docs – OutputPassthree.js example – webgl_postprocessing_glitch本章 live 示例 【three.js教程】Three.js 后期处理：用 EffectComposer 给画面加特效
Three.js 后期处理用 EffectComposer 给画面加特效原文出处Three.js Manual – How to use Post Processing本文基于官方手册「How to use Post Processing」章节整理用通俗方式带你看懂怎么用EffectComposer把场景渲染改成「渲染到缓冲 → 多层滤镜 → 上屏」的管线以及RenderPass/OutputPass各自该站哪个位置。写在前面普通 Three.js 应用都是「场景直接画到屏幕」。但你想加景深DOF、泛光Bloom、胶片颗粒、抗锯齿这类电影感效果时直接画就不行了——得先把场景渲染到一张离屏缓冲里再一层层滤镜处理最后才上屏。这条「先渲染、后加工」的链路叫后期处理Post-processing。这正好接上我们前面「颜色管理」那一篇的结论那篇说过用了后期处理就必须加OutputPass否则会双重 sRGB 转换、整屏过曝。这一篇就把这条管线完整讲一遍。一、后期处理到底在干什么流程分两步先把场景渲染到一个render target显存里的一块缓冲区而不是直接上屏再用一个或多个**后期处理通道pass**对这个图像缓冲做滤镜/特效处理完才最终画到屏幕。Three.js 用EffectComposer把这整套工作流封装好了。二、基础工作流四步搭起管线第 1 步引入需要的文件假设用官方 npm 包按本篇示例需要这几个import{EffectComposer}fromthree/addons/postprocessing/EffectComposer.js;import{RenderPass}fromthree/addons/postprocessing/RenderPass.js;import{GlitchPass}fromthree/addons/postprocessing/GlitchPass.js;import{OutputPass}fromthree/addons/postprocessing/OutputPass.js;注意路径都在three/addons/postprocessing/下npm 里对应three/examples/jsm/postprocessing/。第 2 步创建 composer把你的WebGLRenderer实例传进去constcomposernewEffectComposer(renderer);第 3 步把动画循环改成 composer 渲染用了 composer 之后动画循环里不能再调renderer.render()要换成composer.render()functionanimate(){requestAnimationFrame(animate);composer.render();}划重点这一行是后期处理和普通渲染最大的区别。如果忘了换、两个都调画面会乱。第 4 步配置 pass 链pass 按「添加顺序」依次执行。本例里顺序是RenderPass→GlitchPass→OutputPass链里最后一个启用的 pass 会自动输出到屏幕constrenderPassnewRenderPass(scene,camera);composer.addPass(renderPass);constglitchPassnewGlitchPass();composer.addPass(glitchPass);constoutputPassnewOutputPass();composer.addPass(outputPass);三、三个 pass 各自站哪、干什么RenderPass通常放在链的最开头负责把场景渲染出来作为下一阶段的输入图像。GlitchPass本例的中间 pass用上游的图像数据施加「故障glitch」特效。你可以把它换成 Bloom、DOF 等任意效果 pass。OutputPass通常放在链的最末尾负责做sRGB 颜色空间转换和色调映射tone mapping——也就是把你之前在「颜色管理」篇里学到的、线性工作空间的结果正确转回 sRGB 给屏幕看。这就是「颜色管理」篇那个坑的答案普通渲染时renderer.outputColorSpace会自动处理输出转换但一旦走EffectComposer这个自动转换没了必须由OutputPass来补上。漏掉它画面会整体偏亮/过曝双重 sRGB。所以 OutputPass 几乎永远应该是最后一道。四、内置 pass 与自定义 pass用内置 pass引擎自带一大票预定义 pass都在examples/jsm/postprocessing/目录里按需 import 即可Bloom、DOF、胶片等都是现成的。写自定义 pass想自己写个后期着色器挂进链里用ShaderPassimport{ShaderPass}fromthree/addons/postprocessing/ShaderPass.js;import{LuminosityShader}fromthree/addons/shaders/LuminosityShader.js;// 在初始化流程里constluminosityPassnewShaderPass(LuminosityShader);composer.addPass(luminosityPass);想从零写自己的效果仓库里有个CopyShader是绝佳起点——它只是把EffectComposer的读缓冲原样拷到写缓冲不加任何效果你照着它改就能做出第一个自定义 pass。五、常见坑速记忘了把renderer.render()换成composer.render()后期完全不生效。OutputPass位置不对 / 漏加整屏偏亮或颜色怪——这是和「颜色管理」篇联动的经典坑务必放最后。pass 顺序写反比如把RenderPass放到特效后面上游就没有场景图像可用了。链顺序 执行顺序。总结后期处理四步清单步骤关键代码作用引入import { EffectComposer, RenderPass, OutputPass } from three/addons/postprocessing/...拉起管线所需类建 composernew EffectComposer( renderer )管理整条 pass 链换循环composer.render()替代renderer.render()由 composer 驱动渲染加 passRenderPass→ 特效 pass →OutputPass顺序即执行顺序OutputPass 殿后一句话带走后期处理 渲染到缓冲 一串 pass 滤镜 上屏RenderPass打头、OutputPass收尾做 sRGB/色调映射中间随便叠效果动画循环记得换成composer.render()。延伸阅读three.js docs – EffectComposerthree.js docs – RenderPassthree.js docs – ShaderPassthree.js docs – OutputPassthree.js example – webgl_postprocessing_glitch本章 live 示例