SuperAPI AI 工具集

r3f-postprocessing

前端与建站

查看项目

更新于 10-15 21:38

技能介绍

用途:为 React Three Fiber 项目配置后处理管线,包括 Bloom、选择性 Bloom、轮廓选择、环境光遮蔽(SSAO)与景深(DepthOfField),并处理色调映射与最终输出。

主要能力:说明如何选择管线(React postprocessing composer 面向 WebGL;Three.js WebGPURenderer 在 r183+ 使用 node effects 与 RenderPipeline,需单独验证后端);强调只让一个所有者渲染最终场景,EffectComposer 使用正帧优先级,额外手动 gl.render 可能覆盖或重复输出。普通 Bloom 可通过 HDR 阈值隔离亮面,仅在需要真实对象选择时使用 SelectiveBloom。

使用方式:组件挂载在 Canvas 之下。Selection/Select 为支持选择的特效(如 Outline、SelectiveBloom)提供选择;把普通 Bloom 包进 Selection 不会让它响应选中对象。SelectiveBloom 需提供相关灯光并协调选择层。Bloom 在最终色调映射前基于亮度工作,应使用自发光/HDR 值与有意义的阈值。该 composer 会禁用渲染器色调映射,需用 ToneMapping 特效获得最终外观,并保持 bloom/HDR 在色调映射之前。SSAO 需要 <EffectComposer enableNormalPass>。DepthOfField 的 target 是世界坐标(向量/元组),不是 mesh ref;focusDistance={0} 不是通用自动对焦开关。部分特效属性接受 Three.js Vector2/Vector3 实例而非元组。

适用场景与限制:适合需要屏幕空间特效的 R3F 场景。注意 ref.current 变为非空不会触发 React 渲染,不要仅凭 ref 赋值决定特效初始挂载。性能上从少量特效和适中 DPR/分辨率开始,谨慎选择抗锯齿策略,避免盲目叠加 MSAA、SMAA、FXAA;特效数量不等于 pass 数量,兼容特效可合并,但卷积/深度特效与辅助缓冲仍可能昂贵。自定义 Effect 需遵循 mainImage/mainUv、uniforms、输入缓冲与特效属性契约,UV 变化的特效需要相应卷积声明,并明确清理归属,避免 dispose={null} 无主或从单个消费者释放共享特效。更新后需检查动态属性支持,仅构造期设置可能重建特效,不要每帧重建 composer 来动画 uniform。验证时渲染完整管线,切换特效/选择、调整尺寸,并在 Strict Mode 下卸载/重挂载,确认仅选中对象生效与最终颜色输出。