How do I add bloom to my Three.js scene?

You can use the UnrealBloomPass within an EffectComposer to create high-quality glow effects by configuring the strength, radius, and threshold parameters.

How do I handle window resizing when using post-processing?

When the browser window is resized, you must update both the renderer and the EffectComposer dimensions using the .setSize() method to ensure the effects scale correctly with the viewport.

Can I apply post-processing effects to specific objects only?

Yes, this skill includes patterns for 'Selective Bloom' using Three.js layers and custom render loops to isolate effects to specific meshes while keeping others unaffected.

What is the EffectComposer in Three.js?

The EffectComposer is a class that manages a chain of post-processing passes, allowing you to apply multiple visual effects to a scene after the initial render has occurred.

Does post-processing significantly impact performance?

Every additional pass adds GPU overhead. This skill provides optimized setup patterns and suggests performance-friendly options like FXAA for anti-aliasing to balance quality and speed.

Three.js Post-Processing

Name: Three.js Post-Processing
Author: Microck

byMicrock

•

Desarrollo de Videojuegos

Implements advanced visual effects and cinematic rendering pipelines for Three.js 3D applications using the EffectComposer.

This skill provides comprehensive guidance and boilerplate for implementing post-processing effects in Three.js environments, streamlining the setup of the EffectComposer and various rendering passes. It offers ready-to-use patterns for essential visual enhancements like UnrealBloom, Depth of Field (DOF), and Screen-Space Ambient Occlusion (SSAO), while also covering technical necessities like anti-aliasing and color correction. Whether you are building an immersive game or a data visualization, this skill ensures best practices for performance and visual quality when creating custom screen-space shaders or combining multiple visual filters.

Características Principales

01Advanced anti-aliasing techniques using FXAA and SMAA shaders.

02Standard EffectComposer integration and multi-pass rendering management.

03Custom ShaderPass boilerplate for creating bespoke screen-space effects.

04Stylized visual filters such as Glitch, Film Grain, Pixelation, and Halftone.

052 GitHub stars

06Cinematic lighting effects including Bloom, selective glow, and Depth of Field.

Casos de Uso

01Enhancing 3D web visualizations with realistic lighting, glows, and atmospheric depth.

02Creating stylized or 'retro' aesthetics using specialized glitch and pixelation filters.

03Optimizing render quality for high-end web experiences through professional color grading.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add microck/opendots-microck threejs-postprocessing

For use in Claude.ai and ChatGPT

Download Skill