skills.rest
zamansepeti43
zamansepeti43COMMUNITY
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 Sep 1, 2026
Search Tags:#glsl#shaders#webgl#three.js#post-processing#bloom#effectcomposer
One-click install
npx skills add https://github.com/zamansepeti43/c-rak-agent --skill threejs-postprocessing-zamansepeti43
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-postprocessing
Source: https://github.com/zamansepeti43/c-rak-agent/tree/main/video-engine/.agents/skills/threejs-postprocessing
Command: npx skills add https://github.com/zamansepeti43/c-rak-agent --skill threejs-postprocessing-zamansepeti43

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? Adding visual effects like bloom, depth of field, anti-aliasing, and color grading to a Three.js scene requires coordinating multiple render passes, handling resize events, and writing custom GLSL shaders, which is error-prone without a reference. ## Core Features & Use Cases - EffectComposer Setup: Configure render pass chains with RenderPass, UnrealBloomPass, SSAOPass, BokehPass, and output passes like FXAA or SMAA. - Built-in Effects: Apply bloom, selective bloom, vignette, film grain, glitch, halftone, outline, pixelation, and color correction with ready-to-use code patterns. - Custom ShaderPass: Write custom screen-space GLSL shaders such as chromatic aberration, wave distortion, or color inversion. - Use Case: You are building a 3D product viewer and want glowing highlights on emissive materials plus a subtle vignette; use this Skill to set up selective bloom and a vignette pass with correct resize handling. ## Quick Start Add a bloom effect and FXAA anti-aliasing to my Three.js scene using EffectComposer with proper window 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 with UnrealBloomPass inside an EffectComposer after a RenderPass. Configure strength, radius, and threshold parameters, then call 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 objects to a dedicated layer, darkening all non-bloomed meshes with a black material during the bloom pass, then restoring materials and rendering the final 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 edges but costs more; use SMAAPass when visual quality matters more than performance.

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 last pass renders to screen 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 fix post-processing breaking on window resize in Three.js?▼

Call composer.setSize(width, height) alongside renderer.setSize() in the resize handler. Also update pass-specific uniforms such as the FXAA resolution and bloom pass resolution to match the new dimensions.

Related Skills

Explore More Software Engineering Skills→
shelbeelyshelbeely

threejs-fundamentals

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

Community
Intermediate
GrowthFlowEngineeringGrowthFlowEngineering

optimization-performance

Profile CPU, GPU, and memory usage to identify game performance bottlenecks.

Community
Advanced
Aadi-110iAadi-110i

threejs-postprocessing

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

Community
Intermediate
alexzhang1030alexzhang1030

threejs-postprocessing

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

Community
Intermediate