threejs-postprocessing

Build Three.js post-processing pipelines with EffectComposer pass chaining.

Updated Apr 3, 2026
One-click install
npx skills add https://github.com/norrbacka/threejs_codex_base --skill threejs-postprocessing-norrbacka
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: threejs-postprocessing
Source: https://github.com/norrbacka/threejs_codex_base/tree/main/.codex/skills/threejs-postprocessing
Command: npx skills add https://github.com/norrbacka/threejs_codex_base --skill threejs-postprocessing-norrbacka

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you add full-screen visual effects to Three.js scenes without rebuilding your renderer from scratch, making advanced compositing easier to implement and debug.

Core Features & Use Cases

  • Pass-Based Rendering: Chain EffectComposer passes for bloom, vignette, gamma correction, FXAA, SSAO, and more.
  • Custom Effects: Build your own ShaderPass effects for tasks like color inversion, chromatic aberration, and screen-space distortion.
  • Production Rendering Workflows: Use it when a project needs selective bloom, depth of field, outline highlighting, or multi-pass scene composition with proper resize handling.

Quick Start

Use this skill to add an EffectComposer render pipeline to a Three.js project, then chain the desired passes and wire resize handling so the effect stays stable.

Frequently Asked Questions about threejs-postprocessing

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add bloom and depth of field effects to a Three.js scene?

To add bloom and depth of field to a Three.js scene, chain EffectComposer passes within your render pipeline. This composites full-screen visual effects beyond a basic scene draw by sequentially applying addon-based post-processing passes.

What is the best way to structure a Three.js EffectComposer pipeline for multiple post-processing passes?

Structuring an EffectComposer pipeline involves chaining multiple passes like FXAA, SSAO, and vignette sequentially. You must wire resize-aware buffer management to keep the post-processing effects stable when the viewport changes.

Does this Three.js post-processing workflow handle resize events for full-screen visual effects?

Yes, resize handling is required for full-screen visual effects. The post-processing pipeline needs resize-aware buffer management to ensure that chained EffectComposer passes remain stable and correctly sized during viewport changes.

Can I write a custom ShaderPass for chromatic aberration and screen-space distortion in Three.js?

Yes, you can build custom ShaderPass effects for chromatic aberration and screen-space distortion. The post-processing pipeline supports custom shader pass workflows to create specialized compositing effects beyond the built-in passes.

Why are my Three.js post-processing effects not working after updating to a new version?

Post-processing effects may break due to misaligned addon-based import paths or incompatible API changes. You must ensure that your EffectComposer pass chaining aligns with your project's installed three.js version to function correctly.

Do I need to use addon-based import paths for Three.js post-processing passes?

Yes, addon-based import paths are required for Three.js post-processing. Pass chaining with EffectComposer relies on these specific import structures to properly integrate bloom, FXAA, and other full-screen visual effects into your renderer.