skills.rest
ElementTech
ElementTechCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

threejs-postprocessing

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

2|Updated Jan 30, 2026
Search Tags:#threejs#shader#bloom#postprocessing#effectcomposer#dof#fxaa
One-click install
npx skills add https://github.com/ElementTech/create-threejs-game --skill threejs-postprocessing-elementtech
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-postprocessing
Source: https://github.com/ElementTech/create-threejs-game/tree/main/template/.claude/skills/threejs-postprocessing
Command: npx skills add https://github.com/ElementTech/create-threejs-game --skill threejs-postprocessing-elementtech

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill reduces the complexity of adding and tuning screen-space post-processing in Three.js projects by guiding composer setup, pass ordering, resize handling, and performance tradeoffs so visual effects like bloom, DOF, and color grading can be applied reliably.

Core Features & Use Cases

  • EffectComposer orchestration: guidance for composing RenderPass, ShaderPass, and third-party passes and ensuring the final pass renders to screen.
  • Common effects: practical examples for bloom, selective bloom via layers, FXAA/SMAA anti-aliasing, SSAO, Bokeh DOF, film grain, vignette, color correction, gamma, glitch, halftone, and outline passes.
  • Custom shaders and render targets: instructions for creating ShaderPasses, rendering to texture, multi-pass workflows, and WebGPU node-based postprocessing.
  • Performance & scaling: strategies for reducing resolution for expensive passes, toggling passes by device, and updating pass-specific uniforms on resize.
  • Use Case: Add selective bloom for collectible items, DOF for cinematic camera focus, and FXAA for smooth edges in a Three.js game scene.

Quick Start

Set up an EffectComposer with a RenderPass, add an UnrealBloomPass and an FXAAShader pass, and call composer.render() in the animation loop to enable bloom and anti-aliasing.

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?▼

You add post-processing to a Three.js scene by setting up an EffectComposer with a RenderPass, adding an UnrealBloomPass and an FXAAShader pass, then calling composer.render() in your animation loop to apply bloom and anti-aliasing.

How does selective bloom work for specific objects in Three.js?▼

Selective bloom in Three.js works by assigning target objects to unique layers and configuring the EffectComposer pipeline to apply the bloom pass only to those layers, isolating the glow effect to designated items.

What is the correct pass ordering for Three.js EffectComposer pipelines?▼

Correct EffectComposer pass ordering places a RenderPass first, followed by intermediate screen-space effects like SSAO or DOF, then bloom, ensuring the final pass like FXAA renders directly to the screen.

How do I handle resize events for Three.js post-processing passes?▼

Handle resize events for post-processing by calling setSize on the EffectComposer and individually updating pass-specific uniforms and resolution parameters to maintain rendering quality across changing viewport dimensions.

How can I optimize Three.js post-processing performance for mobile devices?▼

Optimize Three.js post-processing for mobile by reducing render target resolution for expensive passes, toggling non-essential effects like SSAO by device, and selectively disabling heavy passes to balance frame rate.

Can I use custom ShaderPasses for color correction and film grain in Three.js?▼

Yes, you can use custom ShaderPasses in Three.js to apply color correction, film grain, and vignette effects by writing custom GLSL shaders and inserting them into the EffectComposer multi-pass rendering pipeline.

Related Skills

Explore More Software Engineering Skills→
shelbeelyshelbeely

threejs-fundamentals

Create Three.js scenes with cameras, renderers, meshes, and lighting.

Community
Intermediate
Impertio-StudioImpertio-Studio

webgpu-syntax-textures

Configure WebGPU texture, sampler, and external video resources to prevent validation failures.

Official
Advanced
huangzidahuangzida
2

threejs-postprocessing

Configure an EffectComposer pipeline with post-processing passes for Three.js scenes.

Community
Advanced
mmdonohuemmdonohue
1

threejs-postprocessing

Set up Three.js post-processing pipelines with EffectComposer and render passes.

Community
Advanced