R3f Postprocessing

This wraps the @react-three/postprocessing library for adding screen effects to React Three Fiber scenes. You get bloom for glowing objects, depth of field with bokeh, SSAO for contact shadows, chromatic aberration, vignettes, outlines, and color grading. The selective bloom feature is genuinely useful since you can make specific meshes glow without affecting the whole scene. Effects stack inside an EffectComposer, and most have sensible defaults but expose enough parameters to tweak. Performance can tank with multiple heavy effects, so watch your frame rate. The tone mapping options are solid if you're working with HDR content or emissive materials above 1.0.

skills.sh installs: 2.1K
GitHub stars: 135
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add enzed/r3f-skills --skill r3f-postprocessing --agent claude-code

Installs into .claude/skills of the current project.

Files

React Three Fiber postprocessing

Check the actual renderer and package peer dependencies first. This example targets Fiber 9.7 / React 19 with @react-three/postprocessing 3.1 and postprocessing 6.39 on WebGL. Do not combine arbitrary newest package versions or silently upgrade a project.

Choose the pipeline

The React postprocessing composer here is for WebGL. Three.js WebGPURenderer uses node effects and RenderPipeline on r183+; verify that backend separately.
Let one owner render the final scene. EffectComposer uses a positive frame priority; an additional manual gl.render can overwrite or duplicate its output.
Ordinary Bloom can isolate bright surfaces via an HDR threshold. Use SelectiveBloom only when actual object selection is required; it adds work.