Understanding Bloom Effect in Post-Processing

The issue you're experiencing with overly pronounced sparkles is directly related to how the Bloom post-processing effect works in Three.js with EffectComposer.

Why Sparkles Are More Pronounced

The Bloom effect is designed to create a glow around bright areas in your scene. When you enable post-processing with Bloom:

1. The effect identifies bright pixels in your scene (based on the luminanceThreshold value)
2. It then applies a blur to those bright areas and adds them back to the original image
3. The intensity parameter controls how strong this glow effect appears

In your case, the sparkles are becoming overly visible because:

• Your luminanceThreshold is set to 0, which means ALL pixels (including your sparkles) are being considered for the bloom effect
• With no threshold, even slightly bright elements get the bloom treatment

How to Adjust Parameters

To achieve a more natural look, try these adjustments:

1. Increase the luminanceThreshold:

   • This is the most important parameter to adjust
   • Try values between 0.2-0.5 to only make truly bright elements glow
   • This will prevent the bloom effect from being applied to moderately bright elements

2. Add some luminanceSmoothing:

   • Try values around 0.3-0.5
   • This creates a smoother transition between bloomed and non-bloomed areas

3. Reduce the intensity:

   • Lower this value (try 0.2-0.3) for a more subtle glow effect

Example Adjusted Code

JAVASCRIPTCopied
export function Effects() {
    const { enabled, luminanceThreshold, luminanceSmoothing, intensity } = useControls({
        enabled: true,
        luminanceThreshold: { value: 0.3, min: 0, max: 1 },  // Increased from 0
        luminanceSmoothing: { value: 0.4, min: 0, max: 1 },  // Increased from 0.0
        intensity: { value: 0.3, min: 0, max: 5 }            // Reduced from 0.5
    })

    return (
        enabled && (
            //@ts-ignore
            <EffectComposer disableNormalPass>
                <Bloom
                    luminanceThreshold={luminanceThreshold}
                    luminanceSmoothing={luminanceSmoothing}
                    intensity={intensity}
                    mipmapBlur
                />
            </EffectComposer>
        )
    )
}

Experiment with these values to find the right balance for your specific scene. The key is finding a threshold that isolates just the elements you want to glow while keeping the rest of your scene unaffected by the bloom effect.