Unintentionally Translucent Object

Questions
, , , , ,
1

I’ve been following this selective bloom example on GitHub to create a glow effect around the sun. However, I was not able to actually see the sun object (it only gave off sunlight) so I used object.layers.set(1) instead of object.layers.enable(1) and managed to get it working.

Weirdly, (at least, to me) I noticed that the other objects in the scene were visible through the sun as if it was translucent. This can be seen on codepen.

Here’s a screenshot:

image
image1318×1166 171 KB

If you look closely you can see the Earth (through the Sun). I’m not sure why this is the case.

I’ve scaled up the Earth so the problem is more noticeable:

image

For the sun, setting sphere.layers.enable(1) as opposed to sphere.layers.set(1) fixes this issue but the sun ends up looking like this:

image
image666×632 25.8 KB

I guess using enable is the way to go so I suppose my question is really about lighting then …

2

You get that absolutely wicked and awesome Dark Souls sun effect, because lights work the same way as objects when it comes to layers.

Sun is rendered black because lights are added (by default) only to layer 0 - there’s no actual light on the scene when you are rendering layer 1.

3

I’m sure I added a light to Layer 1, see lines 109-111:

const sunInnerLight = new THREE.AmbientLight(AMBIENT_LIGHT_COLOUR, 5);
sunInnerLight.layers.set(1);
scene.add(sunInnerLight);

Again, I am using layers.set but I fear it might be a requirement, I don’t want the rest of the scene to be lit up by this light - this is just so I can see the sun so layers.enable doesn’t seem to be a solution. Maybe I’m using the wrong type of light? I’ll have a go at just creating a PointLight or something and directing at the sun in layer 1.

4

Alright, after further research I found the only way to achieve the selective lighting I was looking for is to add the objects to different scenes. I’ve moved the sun into a different scene and rendered the bloom in that scene as well and I can still see everything fine.

Just a little update, I render both scenes in the render function but I’m not getting the same lighting effect on the sun:

image
image904×844 68.3 KB

5

Another update, I removed any layer manipulation, just apply the bloom to every object in one scene (the one with the sun) and leave the other untouched - this seemed to fix the lighting issue. However, despite being in a completely different scene, the sun is now translucent again? I’m really starting to believe this is a characteristic of bloom even though I don’t see the same effect in the bloom examples. Perhaps it’s something to do with the shaders?

Interestingly, the bloom doesn’t show up unless I render the bloomComposer after the finalComposer - the opposite of the examples.

Here’s a link to the code for reference.