skills.rest
brunoolf
brunoolfCOMMUNITY
Explore all skills by this author →
GitHub

threejs-postprocessing

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? Adding visual polish like glow, depth of field, color grading, and anti-aliasing to a Three.js scene requires correctly wiring EffectComposer passes, which is error-prone and poorly documented across many scattered examples. ## Core Features & Use Cases - EffectComposer Setup: Correct pass ordering, resize handling, and render loop integration using composer.render() instead of renderer.render(). - Built-in Effects: Ready-to-use snippets for UnrealBloomPass, selective bloom, FXAA/SMAA, SSAO, BokehPass depth of field, film grain, vignette, glitch, halftone, outline, and pixelation. - Custom ShaderPass: Templates for writing custom screen-space GLSL effects such as wave distortion, invert colors, and chromatic aberration. - Use Case: You want glowing emissive objects in a 3D product configurator. Use the selective bloom pattern with layers to make only specific meshes glow while keeping the rest of the scene unaffected. ## 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 using UnrealBloomPass inside an EffectComposer. Create the composer, add a RenderPass first, then add UnrealBloomPass with strength, radius, and threshold parameters, and call composer.render() in your animation loop instead of renderer.render().

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

Use selective bloom with THREE.Layers: assign glowing meshes to a dedicated layer, darken non-blooming objects with a black material during the bloom pass, render the composer, then restore original materials and render the full scene on top.

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

FXAA is cheaper and works as a simple ShaderPass with a resolution uniform, making it suitable for most cases. SMAA produces higher-quality edge smoothing via SMAAPass but costs more GPU time, so prefer it on desktop with performance headroom.

Why is my Three.js post-processing not rendering anything?▼

The most common cause is still calling renderer.render() instead of composer.render() in the animation loop. Also verify the RenderPass is added first in the chain and that composer.setSize() is called on window resize.

How do I write a custom shader effect for Three.js post-processing?▼

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 to animate the effect.

How do I improve Three.js post-processing performance on mobile?▼

Reduce the number of passes since each adds a full-screen render, lower bloom pass resolution, prefer FXAA over MSAA, and disable expensive passes on mobile by detecting the user agent and conditionally adding them to the composer.

Related Skills

Explore More Design & Creative Skills→
hanzoaihanzoai

threejs-fundamentals

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

Official
Intermediate
fyunusafyunusa

spline-interactive

Integrate interactive Spline 3D scenes into React and Next.js applications.

Community
Intermediate
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