postfx-composer
postfx-composer streamlines the setup and configuration of EffectComposer for sophisticated multi-pass post-processing workflows. This skill guides you through building layered visual effects pipelines, managing render targets, and compositing complex graphics transformations. Perfect for developers working with advanced rendering techniques and real-time graphics optimization.
postfx-composer teaches you to set up EffectComposer for multi-pass post-processing in three.js. The skill covers initializing the composer, adding render passes, and chaining effects together. You'll learn to configure passes in the correct order, manage render targets between passes, and integrate the composer into your render loop for sophisticated visual effects pipelines.
AI-generated summary based on this skill's SKILL.md
Install
Bbeierle12/Skill-MCP-Claude/postfx-composer · repository language: JavaScript
git clone https://github.com/Bbeierle12/Skill-MCP-Claude
cp -r Skill-MCP-Claude/skills/postfx-composer ~/.claude/skills/postfx-composerFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I use effect composer in three.js?
postfx-composer teaches you to set up EffectComposer for multi-pass post-processing in three.js. The skill covers initializing the composer, adding render passes, and chaining effects together. You'll learn to configure passes in the correct order, manage render targets between passes, and integrate the composer into your render loop for sophisticated visual effects pipelines.
What's the best way to combine post processing effects?
postfx-composer emphasizes proper effect ordering and composition strategies. The skill explains how to layer multiple effects—like bloom, vignette, and chromatic aberration—without visual artifacts. You'll discover how pass sequencing affects final output, when to use intermediate render targets, and techniques for combining effects that depend on each other's results.
Can I create custom post-processing effects with GLSL shaders?
Yes, postfx-composer covers creating custom post-processing effects using GLSL shaders. The skill guides you through writing fragment shaders for custom passes, integrating them into the EffectComposer pipeline, and managing uniforms and textures. You'll learn to build specialized effects tailored to your project's visual requirements.
How do I optimize post-processing performance?
postfx-composer addresses performance optimization through adaptive quality techniques. The skill teaches you to scale effect complexity based on frame rate, reduce render target resolution when needed, and profile your post-processing pipeline. You'll learn which effects are most expensive and strategies for maintaining smooth performance without sacrificing visual quality.
How does multi-pass rendering work in three.js?
postfx-composer explains multi-pass rendering architecture and render target management. Each pass reads from one render target and writes to another, allowing effects to build on previous results. The skill covers frame buffer setup, pass chaining, and how to structure your pipeline so effects compose correctly without performance bottlenecks or visual glitches.
How do I set up EffectComposer in React Three Fiber?
postfx-composer includes guidance for integrating EffectComposer within React Three Fiber projects. The skill covers component-based effect composition, managing composer lifecycle with hooks, and organizing passes as reusable effect components. You'll learn patterns for declarative effect pipelines that fit React's component model while maintaining rendering efficiency.
SKILL.md
rendered from the published skill — quoted content, verbatim
Post-Processing Composer
EffectComposer architecture, render pipelines, and custom pass creation.
Quick Start
npm install @react-three/postprocessing postprocessing three
import { Canvas } from '@react-three/fiber';
import { EffectComposer, Bloom, Vignette } from '@react-three/postprocessing';
function App() {
return (
<Canvas>
<Scene />
<EffectComposer>
<Bloom intensity={1} />
<Vignette darkness={0.5} />
</EffectComposer>
</Canvas>
);
}
Core Concepts
Render Pipeline Flow
Scene Render → EffectComposer → Effect 1 → Effect 2 → ... → Screen
↓
[Render Target A] → [Render Target B] → [Screen]
EffectComposer Configuration
```tsx import { EffectComposer } from '@react-three/postprocessing'; import { HalfFloatType } from 'three';
function
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 2 files
skills/postfx-composer/SKILL.md
skills/postfx-composer/_meta.json