# How does Lensflare set up transparency?

**URL:** <https://discourse.threejs.org/t/how-does-lensflare-set-up-transparency/73607>\
**Category:** Questions\
**Tags:** materials\
**Created:** [November 4, 2024, 3:53am UTC](https://discourse.threejs.org/t/how-does-lensflare-set-up-transparency/73607 "2024-11-04T03:53:14Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![wenrenqiang](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/wenrenqiang/32/54020_2.png) [@wenrenqiang](https://discourse.threejs.org/u/wenrenqiang)\
**Post date:** [November 4, 2024, 3:53am UTC](https://discourse.threejs.org/t/how-does-lensflare-set-up-transparency/73607/1 "2024-11-04T03:53:14Z")

</div>

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/1/b16969cfad5249577ab17cdd2c28ea4827630690.jpeg)  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/c/8c3ce7115e002f2f610d6accdc3586a3547aa3ff.png)  
When I try to make the LensflareElement transparent, it always has a small white dot regardless of the transparency

---

<div class="post-metadata">

**Author:** ![phil\_crowther](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/phil_crowther/32/64202_2.png) [@phil\_crowther](https://discourse.threejs.org/u/phil_crowther)\
**Post date:** [November 4, 2024, 5:09am UTC](https://discourse.threejs.org/t/how-does-lensflare-set-up-transparency/73607/2 "2024-11-04T05:09:47Z")

</div>

If my recollection is correct, I was told that the three.js lensflare textures use additive blending to create transparency.

---

<div class="post-metadata">

**Author:** ![wenrenqiang](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/wenrenqiang/32/54020_2.png) [@wenrenqiang](https://discourse.threejs.org/u/wenrenqiang)\
**Post date:** [November 4, 2024, 5:44am UTC](https://discourse.threejs.org/t/how-does-lensflare-set-up-transparency/73607/3 "2024-11-04T05:44:38Z")

</div>

I see is multiplication,?

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/1/813cfdc81230b0e2f1909b52d0b6932247007879.png)

---

<div class="post-metadata">

**Author:** ![phil\_crowther](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/phil_crowther/32/64202_2.png) [@phil\_crowther](https://discourse.threejs.org/u/phil_crowther)\
**Post date:** [November 4, 2024, 5:53am UTC](https://discourse.threejs.org/t/how-does-lensflare-set-up-transparency/73607/4 "2024-11-04T05:53:07Z")

</div>

Is that the fragment shader from the LensFlare module? You are right - that does not look additive. My recollection may be incorrect. Or they may have changed things with r170. For example, they changed the names of some of the textures, so the hex.png texture is now lensflare3.png.

---

<div class="post-metadata">

**Author:** ![aardgoose](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aardgoose/32/32355_2.png) [@aardgoose](https://discourse.threejs.org/u/aardgoose)\
**Post date:** [November 4, 2024, 1:02pm UTC](https://discourse.threejs.org/t/how-does-lensflare-set-up-transparency/73607/5 "2024-11-04T13:02:54Z")

</div>

The additive mechanism is a webGL state setting, not a feature of the shader. It is set here:

> <https://github.com/mrdoob/three.js/blob/9e5528d2890de5432c6472bde6702abecc8e1cf7/examples/jsm/objects/LensflareMesh.js#L92>

The shader code you have highlighted is modulating the flare image with the occlusion map which calculates how visible the light source is from the camera. That result is then blended additively with the scene.

---

<div class="post-metadata">

**Author:** ![wenrenqiang](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/wenrenqiang/32/54020_2.png) [@wenrenqiang](https://discourse.threejs.org/u/wenrenqiang)\
**Post date:** [November 5, 2024, 1:17am UTC](https://discourse.threejs.org/t/how-does-lensflare-set-up-transparency/73607/6 "2024-11-05T01:17:52Z")

</div>

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/a/8a61ded7188346b64846c8e2638c02e1d105162a.jpeg)  
I still don’t understand how to make this white square disappear

---

<div class="post-metadata">

**Author:** ![phil\_crowther](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/phil_crowther/32/64202_2.png) [@phil\_crowther](https://discourse.threejs.org/u/phil_crowther)\
**Post date:** [November 5, 2024, 5:07am UTC](https://discourse.threejs.org/t/how-does-lensflare-set-up-transparency/73607/7 "2024-11-05T05:07:43Z")

</div>

Are you using WebGL or WebGPU? What revision? Can you show your setup code? Are you getting any error messages - e.g. texture not loading. It is supposed to be a pretty straightforward and painless process. (But do I remember that when I first started using three.js several years ago, it took me awhile to figure out what all I needed to do.)

---

<div class="post-metadata">

**Author:** ![wenrenqiang](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/wenrenqiang/32/54020_2.png) [@wenrenqiang](https://discourse.threejs.org/u/wenrenqiang)\
**Post date:** [November 13, 2024, 10:26am UTC](https://discourse.threejs.org/t/how-does-lensflare-set-up-transparency/73607/8 "2024-11-13T10:26:39Z")

</div>

[three.js dev template - module - JSFiddle - Code Playground](https://jsfiddle.net/6bgp1j3s/2/)

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [November 13, 2024, 2:37pm UTC](https://discourse.threejs.org/t/how-does-lensflare-set-up-transparency/73607/9 "2024-11-13T14:37:26Z")

</div>

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/9/3987172e98a6bd911e36576fd3cc8350dc6ffa49.png)

If you want to remove the white sport, it might be not part of the lens flare, but of the sky. The sky object also draws the solar disc, so it looks like this is what you want to remove. Or not?

---

<div class="post-metadata">

**Author:** ![wenrenqiang](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/wenrenqiang/32/54020_2.png) [@wenrenqiang](https://discourse.threejs.org/u/wenrenqiang)\
**Post date:** [November 15, 2024, 7:26am UTC](https://discourse.threejs.org/t/how-does-lensflare-set-up-transparency/73607/10 "2024-11-15T07:26:05Z")

</div>

In fact, it’s Lensflare, but it’s just an online demo I gave, and it doesn’t complete the lesflare case