# React 三纤维后处理 ## 快速入门从“@react-三/纤维”导入{画布} 从 '@react-two/postprocessing' 导入 { EffectComposer, Bloom, Vignette } 函数场景（）{ 返回（ <画布> <环境光/> <网格> <盒子几何/> <效果作曲家> <晕影偏移={0.5} 黑暗={0.5} /> ） } ## 安装 npm install @react-two/postprocessing 后处理 ## 效果作曲家所有后处理效果的容器。从 '@react-two/postprocessing' 导入 { EffectComposer } 函数场景（）{ 返回（ <画布> {/* 场景内容 */} <网格>... {/* 后处理 - 必须在 Canvas 内部，在场景内容之后 */} <效果器 enabled={true} // 切换所有效果 heightBuffer={true} // 启用深度缓冲区 stencilBuffer={false} // 启用模板缓冲区 autoClear={true} // 渲染前自动清除 multisampling={8} // MSAA 样本（0 表示禁用） > {/* 效果放在这里 */} ） } ## 常见效果 ### 绽放（发光）从 '@react-two/postprocessing' 导入 { EffectComposer, Bloom } 从“后处理”导入 { BlendFunction } <效果作曲家> <布卢姆强度={1.0} // 绽放强度 luminousThreshold={0.9} // 亮度阈值 luminousSmoothing={0.025} // 阈值的平滑度 mipmapBlur={true} // 启用 mipmap 模糊 radius={0.8} // 光晕半径 level={8} // Mipmap 级别 BlendFunction={BlendFunction.ADD} /> // 要使物体发光，请使用发射材料 <网格> <盒子几何/> 1 很重要 /> ### 选择性绽放从 '@react- Three/postprocessing' 导入 { EffectComposer、Bloom、Selection、Select } 函数场景（）{ 返回（ <画布> <选择> <效果作曲家> <布卢姆亮度阈值={0} 强度={2} mip贴图模糊 /> {/* 该网格将会绽放 */} <选择启用> <网格> <球体几何/> {/* 该网格不会开花 */} <网格位置={[2,0,0]}> <盒子几何/> ） } ### 景深从 '@react-two/postprocessing' 导入 { EffectComposer, DepthOfField } <效果作曲家> <景深 focusDistance={0} // 焦点距离（0 = 自动） focusLength={0.02} // 相机焦距 bokehScale={2} // 散景大小 height={480} // 分辨率高度 /> // 带有目标对象从 'react' 导入 { useRef } 函数场景（）{ 常量 targetRef = useRef() 返回（ <> <网格参考={targetRef} 位置={[0, 0, -5]}> <盒子几何/> <效果作曲家> <景深目标={targetRef} 焦距={0.02} 散景比例={2} /> ） } ### 小插图从 '@react-two/postprocessing' 导入 { EffectComposer, Vignette } <效果作曲家> <小插图 offset={0.5} // 晕影大小 dark={0.5} // 晕影强度 eskil={false} // 使用 Eskil 的晕影技术 /> ### 噪音从 '@react-two/postprocessing' 导入 { EffectComposer, Noise } 从“后处理”导入 { BlendFunction } <效果作曲家> <噪音 premultiply // 将噪声与输入相乘 BlendFunction={BlendFunction.ADD} 不透明度={0.5} /> ### 色差从 '@react-two/postprocessing' 导入 { EffectComposer, ChromaticAberration } 从“后处理”导入 { BlendFunction } <效果作曲家> <色差 offset={[0.002, 0.002]} // 颜色偏移 RadialModulation={true} // 径向应用调制偏移={0.5} BlendFunction={BlendFunction.NORMAL} /> ### SSAO（屏幕空间环境光遮挡）从 '@react-two/postprocessing' 导入 { EffectComposer, SSAO } 从“后处理”导入 { BlendFunction } <效果作曲家> ### 大纲从 '@react- Three/postprocessing' 导入 { EffectComposer、Outline、Selection、Select } 函数场景（）{ 返回（ <画布> <选择> <概要 visibleEdgeColor={0xffffff} // 可见边缘颜色 hiddenEdgeColor={0x22090a} // 隐藏边缘颜色 edgeStrength={2.5} // 边缘强度 pulseSpeed={0} // 脉冲动画速度模糊 // 启用模糊 xRay // 显示物体后面 /> {/* 轮廓对象 */} <选择启用> <网格> <盒子几何/> {/* 非轮廓对象 */} <网格位置={[2,0,0]}> <球体几何/> ） } ### 颜色分级从 '@react- Three/postprocessing' 导入 { EffectComposer、BrightnessContrast、HueSaturation } <效果作曲家> <亮度对比度亮度={0} // -1 到 1 对比度={0} // -1 到 1 /> <色相饱和度 Hue={0} // 色调旋转（以弧度为单位）饱和度={0} // -1 到 1 /> ### 色调映射从 '@react-two/postprocessing' 导入 { EffectComposer, ToneMapping } 从“后处理”导入 { ToneMappingMode } <效果作曲家> <色调映射模式={ToneMappingMode.ACES_FILMIC} // 模式：LINEAR、REINHARD、REINHARD2、OPTIMIZED_CINEON、CINEON、ACES_FILMIC、AGX、NEUTRAL 分辨率={256} 白点={4.0} 中灰色={0.6} 最小亮度={0.01} 平均亮度={1.0} 适应率={1.0} /> ### 故障从 '@react-two/postprocessing' 导入 { EffectComposer, Glitch } 从“后处理”导入 {GlitchMode} <效果作曲家> <故障 delay={[1.5, 3.5]} // 毛刺之间的最小/最大延迟持续时间={[0.6, 1.0]} // 最小/最大持续时间 Strength={[0.3, 1.0]} // 最小/最大强度 mode={GlitchMode.SPORADIC} // 禁用、SPORADIC、CONSTANT_MILD、CONSTANT_WILD active // 启用/禁用 ratio={0.85} // 毛刺比率（0 = 无，1 = 始终） /> ### 像素化从 '@react-two/postprocessing' 导入 { EffectComposer, Pixelation } <效果作曲家> <像素化粒度={5} // 像素大小 /> ### 扫描线从 '@react-two/postprocessing' 导入 { EffectComposer, Scanline } 从“后处理”导入 { BlendFunction } <效果作曲家> <扫描线 BlendFunction={BlendFunction.OVERLAY} Density={1.25} // 线密度 opacity={0.5} // 效果不透明度 /> ### 网格从 '@react-two/postprocessing' 导入 { EffectComposer, Grid } 从“后处理”导入 { BlendFunction } <效果作曲家> <网格 BlendFunction={BlendFunction.OVERLAY} scale={1.0} // 网格比例 lineWidth={0.0} // 线宽 /> ### 点屏从 '@react-two/postprocessing' 导入 { EffectComposer, DotScreen } 从“后处理”导入 { BlendFunction } <效果作曲家> <点屏 BlendFunction={BlendFunction.NORMAL} angle={Math.PI * 0.5} // 图案角度 scale={1.0} // 图案比例 /> ### SMAA（抗锯齿）从 '@react-two/postprocessing' 导入 { EffectComposer, SMAA } {/* 使用 SMAA 时禁用 MSAA */} ### FXAA（抗锯齿）从 '@react-two/postprocessing' 导入 { EffectComposer, FXAA } ## 组合多种效果从 '@react- Three/postprocessing' 导入 { EffectComposer、Bloom、Vignette、ChromaticAberration、Noise、SMAA } 从“后处理”导入 { BlendFunction } 函数后处理() { 返回（ {/* 发光效果 */} <布卢姆强度={1.5} 亮度阈值={0.9} 亮度平滑={0.025} mip贴图模糊 /> {/* 色差 */} <色差偏移量={[0.001, 0.001]} 径向调制调制偏移={0.5} /> {/* 胶片颗粒 */} <噪音预乘 BlendFunction={BlendFunction.ADD} 不透明度={0.2} /> {/* 小插图 */} <小插图偏移量={0.3} 黑暗={0.5} /> {/* 抗锯齿（应该放在最后）*/} ） } ## 自定义效果 ### 使用后处理效果类从'react'导入{forwardRef，useMemo} 从“后处理”导入 { Effect, BlendFunction } 从“三”导入{Uniform} // 片段着色器常量片段着色器 = ` 均匀的浮动时间；浮动强度均匀； void mainImage(vec4 inputColor 中的常量，vec2 uv 中的常量，out vec4 输出颜色) { vec2 扭曲Uv = uv; 扭曲Uv.x += sin(uv.y * 10.0 + 时间) * 0.01 * 强度; vec4 颜色=texture2D(inputBuffer, DistortedUv); 输出颜色=颜色； } ` // 效果类类 WaveDistortionEffect 扩展了效果 { 构造函数({ 强度 = 1.0, BlendFunction = BlendFunction.NORMAL } = {}) { 超级（'WaveDistortionEffect'，fragmentShader，{ 混合函数，制服：新地图([ ['时间'，新制服（0）]， ['强度'，新制服（强度）]， ]), }) } 更新（渲染器，inputBuffer，deltaTime）{ this.uniforms.get('time').value += deltaTime } } // React 组件包装器导出 const WaveDistortion =forwardRef(({ 强度 = 1.0, BlendFunction }, ref) => { const 效果 = useMemo(() => new WaveDistortionEffect({ 强度, BlendFunction }), [强度, BlendFunction]) 返回 }) // 用法 <效果作曲家> <波畸变强度={0.5} /> ### 带wrapEffect 的着色器从'@react-三/后处理'导入{wrapEffect} 从“后处理”导入 { Effect, BlendFunction } 从“三”导入{Uniform} 类 InvertEffect 扩展了效果 { 构造函数({ BlendFunction = BlendFunction.NORMAL } = {}) { 超级（'反转效果'，` void mainImage(vec4 inputColor 中的常量，vec2 uv 中的常量，out vec4 输出颜色) { 输出颜色 = vec4(1.0 - 输入颜色.rgb, 输入颜色.a); } `，{ 混合函数， }) } } 导出常量反转=wrapEffect(InvertEffect) // 用法 <效果作曲家> <反转/> ## 条件效果从 'react' 导入 { useState } 从 '@react-two/postprocessing' 导入 { EffectComposer, Bloom, Vignette, Glitch } 函数条件后处理（）{ const [效果，setEffects] = useState({ 绽放：真实，小插图：真实，故障：假， }) 返回（ <> <效果作曲家> {effects.bloom && ( <绽放强度={1.5}亮度阈值={0.9}/> )} {effects.vignette && ( <晕影偏移={0.5} 黑暗={0.5} /> )} {效果.glitch && ( <故障延迟={[1, 3]} 持续时间={[0.5, 1]} 强度={[0.3, 1]} /> )} {/* 用于切换效果的 UI */}

） } ## 动画效果从 'react' 导入 { useRef } 从 '@react- Three/Fiber' 导入 { useFrame } 从 '@react-two/postprocessing' 导入 { EffectComposer, Bloom, ChromaticAberration } 函数动画效果（）{ 常量bloomRef = useRef() const chromaticRef = useRef() useFrame(({ 时钟 }) => { const t = 时钟.elapsedTime // 动画绽放强度如果 (bloomRef.current) { bloomRef.current.intensity = 1 + Math.sin(t) * 0.5 } // 动画色差如果（chromaticRef.current）{ 常量偏移 = Math.sin(t * 2) * 0.002 chromaticRef.current.offset.set（偏移量，偏移量） } }) 返回（ <效果作曲家> <色差 ref={chromaticRef} /> ） } ## N8AO（高品质 AO）从 '@react-two/postprocessing' 导入 { EffectComposer } 从“@react-三/后处理”导入{N8AO} <效果作曲家> ## 神光从 '@react-two/postprocessing' 导入 { EffectComposer, GodRays } 从 'react' 导入 { useRef } 函数场景（）{ 常量 sunRef = useRef() 返回（ <画布> {/* 太阳网格（上帝光线的光源）*/} <网格参考={sunRef} 位置={[0, 5, -10]}> <效果作曲家> {sunRef.当前 && ( <神光太阳={sunRef} BlendFunction={BlendFunction.SCREEN} 样本={60} 密度={0.96} 衰减={0.9} 重量={0.4} 曝光={0.6} 钳位最大值={1} 模糊 /> )} ） } ## LUT（颜色查找表）从 '@react-two/postprocessing' 导入 { EffectComposer, LUT } 从“后处理”导入 { LUTCubeLoader } 从 '@react-two/fibre' 导入 { useLoader } 函数 ColorGradedScene() { const 纹理 = useLoader(LUTCubeLoader, '/luts/cinematic.cube') 返回（ <效果作曲家> ） } ## 混合函数从“后处理”导入 { BlendFunction } // 可用的混合函数： BlendFunction.SKIP // 跳过混合 BlendFunction.ADD // 加法 BlendFunction.ALPHA // 阿尔法 BlendFunction.AVERAGE // 平均 BlendFunction.COLOR // 颜色 BlendFunction.COLOR_BURN // 颜色加深 BlendFunction.COLOR_DODGE // 颜色减淡 BlendFunction.DARKEN // 变暗 BlendFunction.DIFFERENCE // 差异 BlendFunction.DIVIDE // 除法 BlendFunction.DST // 目标 BlendFunction.EXCLUSION // 排除 BlendFunction.HARD_LIGHT // 强光 BlendFunction.HARD_MIX // 硬混合 BlendFunction.HUE // 色调 BlendFunction.INVERT // 反转 BlendFunction.INVERT_RGB // 反转 RGB BlendFunction.LIGHTEN // 变亮 BlendFunction.LINEAR_BURN // 线性加深 BlendFunction.LINEAR_DODGE // 线性减淡 BlendFunction.LINEAR_LIGHT // 线性光 BlendFunction.LUMINOSITY // 亮度 BlendFunction.MULTIPLY // 乘法 BlendFunction.NEGATION // 求反 BlendFunction.NORMAL // 正常 BlendFunction.OVERLAY // 叠加 BlendFunction.PIN_LIGHT // 针灯 BlendFunction.REFLECT // 反射 BlendFunction.SATURATION // 饱和度 BlendFunction.SCREEN // 屏幕 BlendFunction.SET // 设置 BlendFunction.SOFT_LIGHT // 柔光 BlendFunction.SRC // 源 BlendFunction.SUBTRACT // 相减 BlendFunction.VIVID_LIGHT // 鲜艳的光 ## 性能提示 1. **限制效果数量** ：每个效果都会增加渲染开销 2. **明智地使用多重采样**：值越高=性能越慢 3. **不需要时禁用** : 切换 `enabled` 属性 4. **较低分辨率**：某些效果具有分辨率道具 5. **使用 DevTools 进行配置**：监控 GPU 使用情况 // 禁用所有效果 ... // 降低移动设备上的效果质量 const isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent) {!isMobile && } ## 另请参阅 * `r3f-shaders` \- 自定义着色器开发 * `r3f-materials` \- 用于光绽放的发射材料 * `r3f-fundamentals` \- 画布和渲染器设置

R3f 后处理

包含技能