threejs-postprocessing

用途

本技能面向 Three.js 的后期处理（Post-Processing），用于在渲染完成后叠加视觉特效，例如发光、模糊、颜色分级、屏幕扭曲以及自定义着色器效果。

主要能力

技能文档覆盖以下内容：

• EffectComposer 基础搭建：使用 EffectComposer 与 RenderPass 构建后处理管线，通过 composer.render() 替代 renderer.render()，并处理 renderToScreen、窗口缩放等。
• 常见特效 Pass：
  • Bloom（泛光/发光）：UnrealBloomPass，可调 strength、radius、threshold。
  • Selective Bloom（选择性泛光）：通过 Layer 与深色材质，仅让指定对象产生泛光。
  • 抗锯齿：FXAAShader、SMAAPass。
  • SSAO（环境光遮蔽）：SSAOPass，可设置 kernelRadius、minDistance、maxDistance 与多种输出模式。
  • 景深（DOF）：BokehPass，可配置 focus、aperture、maxblur 并动态更新焦点。
  • 胶片颗粒：FilmPass。
  • 暗角：VignetteShader。
  • 颜色校正：ColorCorrectionShader。
  • Gamma 校正：GammaCorrectionShader。
  • 像素化：RenderPixelatedPass。
  • 故障效果：GlitchPass。
  • 半调：HalftonePass。
  • 描边：OutlinePass，可配置边缘强度、粗细、颜色与选中对象。
• 自定义 ShaderPass：给出完整的 uniforms、vertexShader、fragmentShader 模板，并包含反色（Invert）与色差（Chromatic Aberration）两个示例。
• 多效果组合：按顺序叠加 RenderPass、Bloom、Vignette、Gamma 校正、抗锯齿（抗锯齿置于输出前最后一步）。
• 渲染到纹理与多通道渲染：使用 WebGLRenderTarget 渲染到纹理；使用多个 composer 分别渲染背景与前景并叠加。
• WebGPU 后处理（Three.js r150+）：基于节点系统（pass、bloom、dof）与 THREE.PostProcessing 的写法。
• 性能建议：限制 Pass 数量、降低模糊等 Pass 的分辨率、按需禁用特效、优先使用 FXAA 而非 MSAA、通过 DevTools 检查 GPU 占用，以及按设备（如移动端）条件启用高开销特效。
• 窗口缩放处理：同步更新 camera、renderer、composer 以及各 Pass 自身的分辨率参数。

使用方式

文档以代码片段形式给出导入与调用方法，例如：

import * as THREE from "three";
import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
import { UnrealBloomPass } from "three/addons/postprocessing/UnrealBloomPass.js";

const composer = new EffectComposer(renderer);
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);

const bloomPass = new UnrealBloomPass(
  new THREE.Vector2(window.innerWidth, window.innerHeight),
  1.5, // strength
  0.4, // radius
  0.85, // threshold
);
composer.addPass(bloomPass);

function animate() {
  requestAnimationFrame(animate);
  composer.render();
}

自定义效果通过 ShaderPass 传入包含 uniforms、vertexShader、fragmentShader 的对象实现，其中 tDiffuse 为必需输入纹理。

适用场景

• 需要为 Three.js 场景添加发光、模糊、景深等视觉效果的交互或展示类项目。
• 需要颜色分级、暗角、颗粒、故障、半调等屏幕风格化处理。
• 需要通过自定义着色器实现特定画面扭曲或色彩效果。
• 需要在背景与前景之间做多通道后处理组合。

限制

资料未提供关于收费、价格、平台支持范围、效果保证或具体性能指标的信息；性能表现取决于设备与 Pass 数量，文档仅给出通用优化建议。WebGPU 路径标注为 Three.js r150+。文档亦提及可参考 threejs-shaders、threejs-textures、threejs-fundamentals 等相关主题。