threejs-postprocessing_skill
958
GitHub Stars
1
Bundled Files
2 months ago
Catalog Refreshed
4 months ago
First Indexed
Readme & install
Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.
Installation
Preview and clipboard use veilstrat where the catalogue uses aiagentskills.
npx veilstrat add skill cloudai-x/threejs-skills --skill threejs-postprocessing- SKILL.md14.1 KB
Overview
This skill bundles practical patterns and ready-to-use snippets for Three.js post-processing using EffectComposer and common passes (bloom, DOF, FXAA, SMAA, SSAO, film, vignette, outline, and custom ShaderPasses). It focuses on adding glow, blur, color grading, screen-space shaders, and multi-pass pipelines while balancing visual quality and performance. Use it to prototype, tune, and ship polished screen effects in WebGL scenes.
How this skill works
The skill shows how to create an EffectComposer, add a RenderPass and a sequence of effect passes, and render the composer instead of the renderer. It covers configuring built-in passes (UnrealBloomPass, BokehPass, SSAOPass, FXAAShader, etc.), making selective bloom via layers, writing custom ShaderPasses, combining multiple composers, and using render-to-texture workflows. It also includes resize handling, WebGPU node-based examples, and performance tips.
When to use it
- Add glow, bloom, or selective bloom to highlight objects.
- Create cinematic looks with DOF, film grain, vignette, and color correction.
- Improve edge quality with FXAA or SMAA when MSAA is too costly.
- Prototype custom screen-space effects using ShaderPass (invert, chromatic aberration, distortion).
- Render layered scenes or UI by combining multiple composers or render targets.
Best practices
- Keep the pass chain minimal: every pass costs a full-screen render.
- Use lower-resolution render targets for expensive blur or bloom passes.
- Apply anti-aliasing as the last pass before output (FXAA/SMAA).
- Toggle expensive effects off on low-end devices and update sizes on resize.
- Use selective bloom (layers + dark material) to avoid unwanted glow.
Example use cases
- Make a sci-fi HUD with chromatic aberration, bloom, and film grain.
- Create a photographic look with BokehPass DOF, color correction, and vignette.
- Highlight interactable objects using selective bloom and an OutlinePass.
- Optimize mobile by rendering bloom at half resolution and disabling SSAO.
- Render a background scene separately and composite a foreground with bloom using multiple composers.
FAQ
Use composer.render() when you have an EffectComposer. Use renderer.render() only when you render directly to screen or a render target.
How do I update passes on window resize?
Update camera aspect, call renderer.setSize and composer.setSize, and update pass-specific uniforms or resolutions (e.g., FXAA resolution and bloom resolution).
