Individual bloom or tonemapping in same scene

Questions
1

Hello,

Still pretty new to Three.js and such, so I don’t know if it’s even possible. I have a scene with an earth, moon, and sun. The effect I think I want is a bloom effect. What I am finding is each of these bodies look better with different strengths of bloom. Is this possible? Also, with just the bloom applied, my objects are too blown out. I found adding a tonemapper helped with the blown out issue, but I left with the same issue of want different bloom effect strengths for each body.

Thank you in advance for any suggestions.

2

Possible, but likely to be slower and more complicated than you may like.

What are the .color and/or .emissive values of the three bodies’ materials? If you haven’t yet tried using very different values for emissive (e.g. 1000:1), doing that in a single bloom pass might be preferable.

You can see bloom results for emissive intensity ranging 1–256 here:

2 Likes
3

Hi Don,

Thank you for the quick reply.

Here is the code for just the moon:

    // Moon
    
    const moonTexture = new THREE.TextureLoader().load(moonmapImg);
    moonTexture.colorSpace = THREE.SRGBColorSpace; // Added SRGBColorspace
    const bumpTexture = new THREE.TextureLoader().load(moonbumpImg);
    bumpTexture.colorSpace = THREE.SRGBColorSpace; // Added SRGBColorspace
    
    const moon = new THREE.Mesh(
        new THREE.SphereGeometry(1, 32, 32),
        new THREE.MeshStandardMaterial({
            map: moonTexture,
            bumpMap: bumpTexture,
        })
    );
    
    // Tilt the moon by adjusting its rotation
    moon.rotation.z = -6.7 * Math.PI / 180;
    
    scene.add(moon);

I did experiment a little with setting an emissive property, but it seemed to just make the moon, light up a little, which is not what I was looking to do.

The motivation for exploring bloom was a round about way to make the sun glow and brighten, like it had a corona I guess. The solution I was using originally, based on a tutorial, was a shader applied to an slightly larger sphere. It looked a great straight on, but fell apart as the camera angle changed.

I’ll check out the link you shared. Any further ideas would be great. I hope I made sense!

4

What I might suggest would be to reassign moonmapImg as the .emissiveMap rather than .map, and then to increase `.emissiveIntensity by 10–100. Emissive is a product of:

<emissive> = .emissive x .emissiveMap x .emissiveIntensity

I’d recommend tone mapping for any lit scene (including emissive and bloom); without it clipping is expected.