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
Decision gist · record as of 2026-07-27
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.
Use it when
- postfx-composer emphasizes proper effect ordering and composition strategies.
- Yes, postfx-composer covers creating custom post-processing effects using GLSL shaders.
Verify before relying
Read SKILL.md below before installing (2 files). Open directory: indexed for reading, not audited.
Install
Bbeierle12/Skill-MCP-Claude/postfx-composer · repository language: JavaScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 2 files
skills/postfx-composer/SKILL.md
skills/postfx-composer/_meta.json
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Set up and configure EffectComposer for multi-pass post-processing”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill lets you layer visual effects onto React Three Fiber scenes after rendering. Apply color grading, bloom, depth-of-field, and other post-processing techniques to elevate your 3D graphics. Perfect for developers building immersive web experiences with enhanced cinematography.
postfx-router intelligently directs Claude's post-processing requests to specialized skills based on the effect type being applied. This routing layer simplifies effect management by matching incoming requests with the appropriate handler, reducing manual configuration and improving workflow efficiency in MCP-based systems.
postfx-effects delivers a collection of post-processing filters designed to enhance 3D scene rendering with cinematic quality. Apply bloom, color grading, depth-of-field, and other visual effects to transform raw renders into polished final output. Integrate seamlessly into game engines and real-time graphics pipelines.
postfx-bloom delivers post-processing bloom effects for 3D rendering pipelines. Configure bloom intensity, threshold, and blur radius to create glowing highlights and atmospheric lighting. Ideal for games and interactive visualizations seeking polished visual enhancement.
This skill equips you with post-processing capabilities for Three.js projects, letting you layer effects like bloom, depth of field, and color grading onto your 3D scenes. Whether you're building interactive visualizations or game-like environments, you'll learn to apply sophisticated visual enhancements that transform raw renders into production-ready graphics. Perfect for developers who want to elevate their WebGL output without rewriting core rendering logic.
audio-reactive lets you create dynamic visual experiences synchronized to sound. Tap into music frequencies and beat detection to drive animations, lighting, and effects that pulse with your audio. Perfect for live performances, interactive installations, and immersive media projects.
More skills audio-playback (MIT) · shader-effects (MIT)