skills.rest
mooch10
mooch10COMMUNITY
Explore all skills by this author →
GitHub

threejs-postprocessing

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

1|Updated Aug 28, 2026
Search Tags:#shaders#webgl#three.js#visual effects#post-processing#bloom#effectcomposer
One-click install
npx skills add https://github.com/mooch10/mochiptos --skill threejs-postprocessing-mooch10
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-postprocessing
Source: https://github.com/mooch10/mochiptos/tree/main/frontend/.agents/threejs-postprocessing
Command: npx skills add https://github.com/mooch10/mochiptos --skill threejs-postprocessing-mooch10

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? Adding visual effects like glow, depth of field, anti-aliasing, and color grading to a Three.js scene requires correctly wiring EffectComposer passes, which is error-prone and poorly documented for common combinations. ## Core Features & Use Cases - EffectComposer Setup: Configure render passes, handle resize events, and replace direct renderer calls with composer rendering. - Built-in Effects: Apply bloom, selective bloom, FXAA/SMAA anti-aliasing, SSAO, depth of field, film grain, vignette, glitch, halftone, outline, and pixelation passes. - Custom ShaderPass: Write custom screen-space GLSL shaders such as wave distortion, color inversion, and chromatic aberration. - Use Case: When building a 3D product showcase that needs glowing highlights on specific meshes plus cinematic depth of field, use this Skill to set up selective bloom with a BokehPass and proper resize handling. ## Quick Start Add a bloom effect and FXAA anti-aliasing to my Three.js scene using EffectComposer with correct 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 meshes to a dedicated layer, then darken non-blooming objects with a black material before the bloom pass and restore materials afterward. This requires a custom render loop traversing the scene.

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

FXAA is cheaper and applied as a ShaderPass with resolution uniforms, making it suitable for most cases. SMAA via SMAAPass produces higher-quality edges at greater cost and takes pixel-ratio-scaled dimensions.

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 RenderPass is added first 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 improve Three.js post-processing performance?▼

Limit the number of passes since each adds a full-screen render, use lower-resolution render targets for bloom, disable unused passes via the enabled flag, and prefer FXAA over MSAA. Skip expensive passes on mobile devices.

Related Skills

Explore More Software Engineering Skills→
hanzoaihanzoai

threejs-fundamentals

Create a minimal Three.js scene with rotating cube, lighting, and animation loop for web browsers.

Official
Intermediate
dz07dz07

3d-web-experience

Create interactive 3D web scenes with Three.js and React Three Fiber.

Community
Advanced
CarlosDoersCarlosDoers

threejs-shaders

Integrate custom GLSL shaders into Three.js scenes via ShaderMaterial or RawShaderMaterial.

Community
Intermediate
alexzhang1030alexzhang1030

threejs-postprocessing

Create and configure Three.js post-processing pipelines with EffectComposer passes.

Community
Intermediate