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.