How do I do transparency via color in shaders?

Questions
1

https://www.babylonjs-playground.com/#4ETD1M#1

I know I’m missing something. Can’t figure out what.

Best regards,

Chris

2

Hi and welcome @Butterwell!

I’m a shader newbie myself but have been playing a bit with them lately.

How about this: https://www.babylonjs-playground.com/#4ETD1M#2

i.e. use vec3 colors and blend with alpha before returning. I guess it depends what effect you’re going for though.

EDIT: I see now this isn’t working :slight_smile: . Most of what I’ve been doing lately is procedural texture shaders and this technique works. Not sure what else needs to happen to use alpha with ShaderMaterial so am curious to hear from the shader experts here.

3

@inteja Thank you for that. Glad you could figure out my question. For everyone else, and to be a bit more explicit: how do you make the “default” white color of the octagon mesh be transparent instead?

4

The following makes transparent colors work:
shaderMaterial.alpha = 0.99999;

https://www.babylonjs-playground.com/#4ETD1M#3

2 Likes
5

You need to add needAlphaBlending
https://www.babylonjs-playground.com/#4ETD1M#4

1 Like
6

@MarianG Thank you!