Three.js Postprocessing Stack

What this builds

A production postprocessing pipeline that manages effect ordering, per-frame cost accounting, device-tier quality scaling, and full disposal on teardown. The finished system lets you declare a set of effects, assign them a frame-time budget in milliseconds, and have the stack automatically downgrade or disable effects when the budget is exceeded.

• Ordered, merged EffectComposer driven by the postprocessing library (Vanruesc), not Three's own example passes
• Per-effect cost measurement via GPU timer queries or fallback JS timing
• Tiered quality presets (high / medium / low / off) with automatic demotion when frame time exceeds threshold
• Full resize handling that propagates to every render target
• Complete disposal of render targets, effects, and the composer itself on unmount or route change
• R3F declarative variant alongside vanilla Three.js

When to use / when not to

• Use when your scene needs two or more full-screen effects chained together with a real performance contract.
• Use when you need dynamic quality scaling: the stack should degrade gracefully on weaker GPUs without manual intervention.
• Do NOT use for a single bloom on one emissive element. That is a one-liner covered by shader-postprocessing.
• Do NOT use for stylized full-screen shaders that have nothing to do with the scene render (color grading overlays, film burns). Those are fragment-shader overlays; see glsl-fragment-backgrounds.
• If you are working in R3F and just need a quick Bloom + Vignette with no budget management, shader-postprocessing covers it faster.