skills.rest
X-manist
X-manistCOMMUNITY
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 Jul 16, 2026
Search Tags:#shaders#webgl#three.js#visual effects#post-processing#bloom#effectcomposer
One-click install
npx skills add https://github.com/X-manist/Cohmira --skill threejs-postprocessing-x-manist
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-postprocessing
Source: https://github.com/X-manist/Cohmira/tree/main/src/builtin-plugins/openmontage/.agents/skills/threejs-postprocessing
Command: npx skills add https://github.com/X-manist/Cohmira --skill threejs-postprocessing-x-manist

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? Adding visual effects like glow, depth of field, color grading, and anti-aliasing to Three.js scenes 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 patterns 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 shaders such as wave distortion, color inversion, and chromatic aberration. - Use Case: When building a 3D product viewer that needs glowing highlights on emissive materials plus cinematic depth of field, apply the selective bloom and BokehPass patterns to achieve the effect without trial-and-error. ## Quick Start Add bloom and vignette post-processing effects to my existing Three.js scene using EffectComposer.

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 with EffectComposer. Create the composer, add a RenderPass first, then add UnrealBloomPass with strength, radius, and threshold parameters, and call composer.render() in the animation loop instead of renderer.render().

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

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

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 most cases. SMAA produces higher-quality edge smoothing but costs more; use it when visual quality matters more than frame rate.

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 in the animation loop for animated effects.

How do I improve performance with multiple post-processing passes?▼

Limit the number of passes since each adds a full-screen render, use lower-resolution render targets for blur-heavy passes like bloom, disable unused passes via pass.enabled, and prefer FXAA over MSAA for anti-aliasing.

Related Skills

Explore More Software Engineering Skills→
yonetim258852yonetim258852

threejs-webgl

Build interactive 3D web experiences with Three.js scenes and animations.

Community
Advanced
gyalamanch001agyalamanch001a

video_toolkit

Create narrated videos from text briefs with Remotion-based rendering.

Community
Advanced
calesthiocalesthio
55.1k

threejs-shaders

Write custom GLSL shaders and ShaderMaterials for Three.js visual effects.

Community
Intermediate
dedekpodedekpo
88

webgpu-threejs-tsl

Develops WebGPU-enabled Three.js apps with Three.js Shading Language (TSL).

Community
Advanced