threejs-postprocessing

Implements Three.js post-processing effects using EffectComposer, bloom, DOF, and custom screen-space shaders.

Updated Jul 28, 2026

Search Tags:#shaders #webgl #three.js #visual effects #post-processing #bloom #effectcomposer

Ready to run

npx skills add https://github.com/Aadi-110i/PEP-PROJECT --skill threejs-postprocessing-aadi-110i

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: threejs-postprocessing
Source: https://github.com/Aadi-110i/PEP-PROJECT/tree/main/skills/threejs-postprocessing
Command: npx skills add https://github.com/Aadi-110i/PEP-PROJECT --skill threejs-postprocessing-aadi-110i

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? Adding visual effects like bloom, depth of field, anti-aliasing, and color grading to a Three.js scene requires correctly wiring EffectComposer passes, managing render order, and handling resize events, which is error-prone without reference patterns. ## Core Features & Use Cases - EffectComposer Setup: Configure render passes, chain multiple effects, and handle window resize correctly. - Built-in Effects: Ready-to-use snippets for bloom, selective bloom, FXAA/SMAA, SSAO, depth of field, film grain, vignette, glitch, halftone, outline, and pixelation. - Custom ShaderPass: Templates for writing custom screen-space shaders such as wave distortion, color inversion, and chromatic aberration. - Use Case: You are building a 3D product viewer and want glowing highlights on emissive materials plus a subtle vignette; use the combined bloom, vignette, gamma correction, and FXAA pipeline pattern. ## Quick Start Add a bloom effect to my Three.js scene using EffectComposer and UnrealBloomPass with proper resize handling.

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 effect in Three.js?▼

Add bloom by creating an EffectComposer, adding a RenderPass for your scene, then appending an UnrealBloomPass with strength, radius, and threshold parameters. Render with composer.render() instead of renderer.render() in your animation loop.

How to apply bloom only to specific objects in Three.js?▼

Use selective bloom by assigning glowing objects to a dedicated layer, then darken non-blooming meshes with a black material during the bloom pass and restore materials afterward. Render the final scene over the bloom output.

FXAA vs SMAA in Three.js post-processing, which should I use?▼

FXAA is cheaper and works as a single ShaderPass with a resolution uniform, making it suitable for performance-constrained scenes. SMAA produces higher-quality edge smoothing via SMAAPass but costs more GPU time.

Why is my Three.js post-processing not rendering after adding EffectComposer?▼

The most common cause is still calling renderer.render() instead of composer.render() in the animation loop. Also verify the last pass renders to screen and that composer.setSize() is called on window resize.

How do I write a custom shader pass in Three.js?▼

Define a shader object with a tDiffuse uniform, vertex shader, and fragment shader, then wrap it in a ShaderPass and add it to the composer. Update custom uniforms like time each frame in the animation loop.

How do I fix post-processing effects breaking on window resize?▼

Call composer.setSize(width, height) alongside renderer.setSize() in your resize handler. Also update pass-specific uniforms such as the FXAA resolution uniform and the bloom pass resolution.