threejs-postprocessing

Add post-processing effects to Three.js scenes with EffectComposer pipelines.

Updated Apr 9, 2026
One-click install
npx skills add https://github.com/CarlosQ96/robot-crawler --skill threejs-postprocessing-carlosq96
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: threejs-postprocessing
Source: https://github.com/CarlosQ96/robot-crawler/tree/main/.agents/skills/threejs-postprocessing
Command: npx skills add https://github.com/CarlosQ96/robot-crawler --skill threejs-postprocessing-carlosq96

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It provides developers with a comprehensive guide to adding post‑processing effects, such as bloom, depth of field, and anti‑aliasing, to Three.js scenes that otherwise lack built‑in visual enhancements.

Core Features & Use Cases

  • EffectComposer integration: Set up a rendering pipeline to combine multiple passes.
  • Ready‑to‑use effects: Includes bloom, selective bloom, FXAA, SMAA, SSAO, DOF, film grain, vignette, color correction, and more.
  • Use Case: A game developer can quickly enrich a dungeon crawler’s atmosphere by applying bloom and vignette to create a moody lighting effect.

Quick Start

Ask the skill to apply bloom and anti‑aliasing to my Three.js scene.

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 anti-aliasing to a Three.js scene?

To add bloom and anti-aliasing to a Three.js scene, you use an EffectComposer to build a rendering pipeline that combines multiple post-processing passes like UnrealBloomPass and FXAA.

What is post-processing in Three.js?

Post-processing in Three.js is a rendering technique that applies visual effects such as depth of field, vignette, and color correction to a rendered scene before it is displayed to the screen.

Does Three.js post-processing require a specific version or WebGL context?

Three.js post-processing requires Three.js r174 modules and a compatible WebGL context to execute real-time shader passes for interactive 3D applications.

What's the best way to apply depth of field and film grain effects in Three.js?

The best way to apply depth of field and film grain is integrating an EffectComposer pipeline, chaining ready-to-use passes to achieve cinematic visual enhancements in your 3D rendering.

Can I use selective bloom on specific objects in a Three.js rendering?

You can use selective bloom on specific objects by configuring the EffectComposer pipeline to isolate and apply the bloom effect only to designated parts of your Three.js scene.