Adding transparency to shader toy shader

Against all odds, I’ve managed to port a shader toy shader of a star into three.js. It is a thing of spectacular beauty. You will find the shader toy shader here. I’ve cut it down to make it a bit more light weight, and I’m rendering it to a plane geometry and it all works super fine; using Object3D.lookAt I’m able to get it to always face the camera. There’s just this one issue, though… It’s not transparent, as you can see in the attached image.

I would like the orange glow that covers the plane geometry to be transparent so that you would just see the sphere of the sun and then the corona and the rest would be the background and whatever is in the field of view. It seems so simple but after a lot of wrangling I haven’t been able to get it to work… So help, please :angel:?

P.S. Thanks to the people behind https://threejsfundamentals.org/ for the article on converting shader toy shaders to three.js; couldn’t have done it without you guys!!!

See the command fragColor.a = 1.0; on line 94? You’re going to have to figure out how to fade that alpha value out to 0 once you’re outside the star. You could do a simple distance calculation to the center, but you can probably use some of the flare calculations to your advantage.

Then don’t forget to add material.transparent = true to your ShaderMaterial in JavaScript.

4 Likes

That did it!!!

Thank you very much!

Now I’m going to make the color of the star dependent on a temperature uniform… :sun_with_face: