postfx-composer_skill

Overview

This skill provides a clear, practical architecture for EffectComposer-based post-processing pipelines in Three.js and React-Three-Fiber. It covers multi-pass rendering, render target management, effect ordering, conditional presets, performance patterns, and how to author custom shader effects. Use it as the foundation for building reusable, composable effect stacks.

How this skill works

It wires a render flow where the scene is rendered to intermediate render targets and processed through ordered effects inside an EffectComposer. Effects are applied as separate passes that read from and write to render targets, allowing chaining, blending, and temporal techniques. The skill shows how to configure the composer (depth/stencil, multisampling, frame buffer type), manage manual FBOs, and create custom GLSL-based Effect classes with uniforms and time updates.

When to use it

• Setting up multi-pass post-processing pipelines for a Three.js scene
• Combining standard effects (bloom, vignette, chromatic aberration) in a controlled order
• Creating custom shader passes that require uniforms, time, or manual render targets
• Optimizing quality and performance via resolution scaling and adaptive settings
• Building reusable presets or runtime-toggleable effect stacks for different visual modes

Best practices

• Order effects by intent: scene-dependent passes, lighting/color, grading, screen-space, then noise/grain last
• Use lower-resolution buffers or fewer bloom levels for expensive effects to reduce cost
• Choose appropriate frame buffer type (HalfFloat) and multisampling based on GPU tier
• Keep time-driven uniforms updated in the effect’s update method and avoid recreating effects each frame
• Group effects into presets or components so toggling and conditional rendering is cheap and declarative

Example use cases

• A cinematic post-processing stack: tone mapping, bloom, vignette, and subtle grain
• A realtime sci-fi HUD look: strong bloom, chromatic aberration, and radial modulation
• Adaptive mobile/desktop rendering: detect GPU tier and adjust multisampling and effect levels
• Custom artistic effect: author a color-shift or pulse effect with custom GLSL and time uniform
• Manual render pipeline: render specific objects to an offscreen FBO for selective compositing