threejs-postprocessing Skill: Bloom and Screen Effects

Teaches Claude how to add bloom, depth of field and other screen effects to a three.js scene, on WebGL or WebGPU.

Installs: 15.4K; on skills.sh
Stars: 3.9K; on GitHub
Updated: Oct 2026; last repo commit

threejs-postprocessing is a reference skill. Claude loads it when you ask for visual effects, color grading, blur, glow or screen-space shaders in three.js, then follows its pass order and examples instead of older patterns from its training data.

It targets three.js r186 and covers the classic EffectComposer chain, the built-in renderer effects and the WebGPU and TSL pipeline. It bundles no scripts. The folder holds one SKILL.md with code samples and a list of common mistakes.

Good for

Three.js developers adding glow, blur, grain or color grading to a scene
Anyone moving a scene from the WebGL composer to WebGPU and TSL
People whose assistant keeps writing outdated three.js import paths

Install threejs-postprocessing

Claude Code

Copy this prompt.

Install the threejs-postprocessing skill in Claude Code. Run this command:

npx skills add https://github.com/cloudai-x/threejs-skills --skill threejs-postprocessing

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Three.js post-processing: composer pass chains, built-in renderer effects, and the WebGPU/TSL node pipeline — bloom, depth of field, ambient occlusion, custom screen effects. Use when adding visual effects, color grading, blur, glow, or screen-space shaders, on WebGL or with WebGPU and TSL.

Sections in SKILL.md

Quick Start
Pass Order
Composer Setup
Selective Bloom
Depth of Field
Ambient Occlusion
Outline
More Passes
Custom Passes
Renderer Built-In Effects (No Composer)
WebGPU and TSL
Common Mistakes
See Also

Key facts

Author: cloudai-x (repo owner)
Repo: cloudai-x/threejs-skills
Installs on skills.sh: 15,444
Repo stars: 3,903
License: MIT
Last repo commit: 2026-10-19
Files in the skill folder: 1 file including SKILL.md

What it includes

A runnable composer with a scene pass, bloom and a final output pass
Shows the minimum chain: render the scene, add UnrealBloomPass, finish with OutputPass, and call composer.render() instead of renderer.render().
Quick Start
The order to chain passes so colors stay correct
Scene pass first, then linear-space effects, then SMAA, then OutputPass. FXAA, if used, goes after OutputPass.
Pass Order
How to set up and size the effect composer
Set the pixel ratio before creating the composer, optionally pass a multisampled buffer, and resize with composer.setSize().
Composer Setup
Make only chosen objects glow
Uses a second composer so the bloom texture is mixed into the final image.
Selective Bloom
Blur by distance from the focus point
Uses BokehPass.
Depth of Field
Darken creases and contact areas
Uses SSAOPass, which darkens the image from the previous pass, so a scene pass must come first.
Ambient Occlusion
Draw outlines around chosen objects
Adds outlines to selected objects.
Outline
Film grain, glitch, halftone, vignette, color correction, pixelated look
Drop-in filters for the middle of the chain, with notes on defaults such as the color correction shader darkening the image until you reset it.
More Passes
Wrap your own shader as a pass
Explains the ShaderPass wrapper and where a custom effect sits relative to OutputPass.
Custom Passes
Run effects without a composer
Covers renderer.setEffects(), which needs a half-float output buffer and gives effects no delta time.
Renderer Built-In Effects
Post-processing as a node graph
Under WebGPURenderer, effects are TSL nodes on a RenderPipeline instead of a pass chain.
WebGPU and TSL
Outdated or wrong code paired with the fix and the reason
Includes import-path changes, renamed classes such as PostProcessing to RenderPipeline, and pass-order errors.
Common Mistakes

From the official docs

Questions

What does the threejs-postprocessing skill do?

It gives Claude a written guide to three.js post-processing. Claude uses it to build effect chains such as bloom, depth of field, ambient occlusion and custom screen shaders, for both WebGL and WebGPU.

Which three.js version does it target?

Three.js r186. The SKILL.md says so at the top, and its examples use WebGLRenderer except in the WebGPU and TSL section. Check the version in your project before you rely on it.

How do I install it?

Use the install box above. The skill is a single SKILL.md file, so copying the folder works as well as the skills CLI.

Does it work with WebGPU?

Yes. It has a WebGPU and TSL section that uses WebGPURenderer, a RenderPipeline and effect nodes. It also says EffectComposer and its passes run only under WebGLRenderer.

Is it safe to install?

It bundles no scripts. The folder holds one SKILL.md of written guidance and code samples, which Claude adapts to your project and writes into your code when you ask.

Are there companion skills?

Its See Also list points to threejs-fundamentals, threejs-shaders and threejs-textures from the same repo. They are optional, and the skill does not call them.

Information

updated Nov 2, 2026

Repository: cloudai-x/threejs-skills
Folder: skills/threejs-postprocessing

cloudai-x/threejs-skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 2

threejs-postprocessing SKILL.md · github.com
threejs-skills README · github.com