threejs-postprocessing

Create post-processing effect pipelines for Three.js scenes with EffectComposer.

Updated May 18, 2026
One-click install
npx skills add https://github.com/yogaprasetya22/mmorpg --skill threejs-postprocessing-yogaprasetya22
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: threejs-postprocessing
Source: https://github.com/yogaprasetya22/mmorpg/tree/main/frontend/.agents/skills/threejs-postprocessing
Command: npx skills add https://github.com/yogaprasetya22/mmorpg --skill threejs-postprocessing-yogaprasetya22

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the problem of making a Three.js scene look more polished by adding cinematic, screen-space visual effects without rewriting your renderer.

Core Features & Use Cases

  • EffectComposer-based pipelines: Chain passes like RenderPass, bloom, and custom ShaderPass to create a consistent post-processing workflow.
  • Common visual effects: Apply bloom glow, FXAA/SMAA anti-aliasing, SSAO ambient occlusion, and depth of field for more depth and realism.
  • Selective and custom rendering: Bloom specific objects via layers and author custom ShaderPass effects for color grading and stylistic distortions.

Quick Start

Use the threejs-postprocessing skill to add bloom and other post-processing passes to your Three.js EffectComposer so your client renders a more cinematic image.

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 post-processing effects to a Three.js scene?

Bloom is a screen-space effect that makes bright areas of a Three.js scene glow. You apply it by adding a bloom pass to EffectComposer after the base RenderPass to enhance light sources and emissive materials.

Can I apply bloom to specific objects in Three.js instead of the whole scene?

Yes, you can apply selective bloom to specific objects by assigning them to unique layers. EffectComposer renders those layers separately to isolate the glow effect without affecting the entire scene.

What is the correct pass order for Three.js EffectComposer pipelines?

The correct EffectComposer pass order starts with RenderPass, followed by effect passes like bloom, SSAO, and depth of field, then anti-aliasing passes like FXAA or SMAA, and finally an OutputPass.

How do I handle resize events for Three.js post-processing passes?

You handle resize events for post-processing by calling the setSize method on both the renderer and EffectComposer. This ensures chained passes like bloom and ShaderPass adjust their internal render targets.

Does Three.js EffectComposer support custom screen-space shaders?

Yes, EffectComposer supports custom screen-space shaders through ShaderPass. You can author custom GLSL shaders for color grading, stylistic distortions, and film grain within the post-processing pipeline.

What anti-aliasing options work with Three.js post-processing?

FXAA and SMAA anti-aliasing work with Three.js post-processing by adding them as passes in EffectComposer. They smooth jagged edges in the final rendered image after other screen-space effects.