When I try to make the LensflareElement transparent, it always has a small white dot regardless of the transparency
If my recollection is correct, I was told that the three.js lensflare textures use additive blending to create transparency.
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.
The additive mechanism is a webGL state setting, not a feature of the shader. It is set here:
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.
2 Likes
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.)
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?
In fact, it’s Lensflare, but it’s just an online demo I gave, and it doesn’t complete the lesflare case