# Unintentionally Translucent Object

**URL:** https://discourse.threejs.org/t/unintentionally-translucent-object/23325
**Category:** Questions
**Tags:** textures, materials, post-processing, shaders, transparency, bloom
**Created:** [February 10, 2021, 12:44pm UTC](https://discourse.threejs.org/t/unintentionally-translucent-object/23325 "2021-02-10T12:44:55Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Inkblot](https://avatars.discourse-cdn.com/v4/letter/i/b5e925/32.png) [@Inkblot](https://discourse.threejs.org/u/Inkblot)
#### Post date: [February 10, 2021, 12:44pm UTC](https://discourse.threejs.org/t/unintentionally-translucent-object/23325/1 "2021-02-10T12:44:55Z")

</div>

I’ve been following [this selective bloom example](https://github.com/mrdoob/three.js/blob/464efc85ecfda5c03d786d15d8f8eff20d70f256/examples/webgl_postprocessing_unreal_bloom_selective.html) 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](https://codepen.io/Inkblotter/pen/XWNJVNm).

Here’s a screenshot:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/9/f9b444f84d6880b941fc50c40b44dfd65ece192c.jpeg)

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/c/3cbe039ca1af7ad76467592f605dabad098658e3.jpeg)

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/2/42f25fe7bccf1b9b05ecba58d184c78867ef5704.jpeg)

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

---

<div class="post-metadata">

### Author: ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)
#### Post date: [February 11, 2021, 6:28am UTC](https://discourse.threejs.org/t/unintentionally-translucent-object/23325/2 "2021-02-11T06:28:32Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Inkblot](https://avatars.discourse-cdn.com/v4/letter/i/b5e925/32.png) [@Inkblot](https://discourse.threejs.org/u/Inkblot)
#### Post date: [February 11, 2021, 11:23am UTC](https://discourse.threejs.org/t/unintentionally-translucent-object/23325/3 "2021-02-11T11:23:39Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Inkblot](https://avatars.discourse-cdn.com/v4/letter/i/b5e925/32.png) [@Inkblot](https://discourse.threejs.org/u/Inkblot)
#### Post date: [February 11, 2021, 12:35pm UTC](https://discourse.threejs.org/t/unintentionally-translucent-object/23325/4 "2021-02-11T12:35:49Z")

</div>

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/c/ec13842fbd29ea060c6039bb0542a36747ab6739.jpeg)

---

<div class="post-metadata">

### Author: ![Inkblot](https://avatars.discourse-cdn.com/v4/letter/i/b5e925/32.png) [@Inkblot](https://discourse.threejs.org/u/Inkblot)
#### Post date: [February 13, 2021, 9:40pm UTC](https://discourse.threejs.org/t/unintentionally-translucent-object/23325/5 "2021-02-13T21:40:31Z")

</div>

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](https://codepen.io/Inkblotter/pen/XWNJVNm?editors=1000) to the code for reference.
