SuperAPI AI 工具集

threejs-postprocessing

前端与建站

查看项目

更新于 10-15 19:50

技能介绍

该技能用于在 Three.js 项目中添加后期处理(post-processing)视觉特效,如泛光、景深、模糊、辉光、色彩分级及自定义屏幕效果。核心是通过 EffectComposer 把 RenderPass 与各类通道串联,并在动画循环中调用 composer.render() 而非 renderer.render()。

主要能力包括:使用 UnrealBloomPass 实现泛光并支持 Layer 选择性泛光;通过 BokehPass 实现景深;使用 FXAAShader 或 SMAAPass 抗锯齿;SSAOPass 环境光遮蔽;FilmPass 胶片颗粒、VignetteShader 暗角、ColorCorrectionShader 与 GammaCorrectionShader 色彩校正;RenderPixelatedPass 像素化、GlitchPass 故障、HalftonePass 半调、OutlinePass 描边。也支持用 ShaderPass 编写自定义着色器(含 tDiffuse 输入纹理与 uniforms),并给出反转颜色、色散等示例。

使用方式:从 three/addons/postprocessing/ 导入各通道并加入 composer,按需设置 uniforms 参数;组合多个效果时建议 FXAA 放在最后;窗口尺寸变化时需更新 renderer、composer 及通道分辨率;支持渲染到纹理与多 composer 分层渲染。WebGPU 路径使用节点系统 pass、bloom 等。

适用场景:需要增强 Web 3D 画面的开发者。限制:每个通道都增加全屏绘制开销,应限制通道数量、降低模糊分辨率、按设备禁用昂贵效果,并用 DevTools 分析 GPU 占用。该资料未提及收费或价格信息。