# How do I do transparency via color in shaders?

**URL:** <https://forum.babylonjs.com/t/how-do-i-do-transparency-via-color-in-shaders/12495>\
**Category:** Questions\
**Created:** [July 14, 2020, 11:08pm UTC](https://forum.babylonjs.com/t/how-do-i-do-transparency-via-color-in-shaders/12495 "2020-07-14T23:08:09Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Butterwell](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/butterwell/32/9738_2.png) [@Butterwell](https://forum.babylonjs.com/u/Butterwell)\
**Post date:** [July 14, 2020, 11:08pm UTC](https://forum.babylonjs.com/t/how-do-i-do-transparency-via-color-in-shaders/12495/1 "2020-07-14T23:08:09Z")

</div>

[https://www.babylonjs-playground.com/#4ETD1M#1](https://www.babylonjs-playground.com/#4ETD1M#1)

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

Best regards,

Chris

---

<div class="post-metadata">

**Author:** ![inteja](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/inteja/32/22553_2.png) [@inteja](https://forum.babylonjs.com/u/inteja)\
**Post date:** [July 15, 2020, 12:03am UTC](https://forum.babylonjs.com/t/how-do-i-do-transparency-via-color-in-shaders/12495/2 "2020-07-15T00:03:41Z")

</div>

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](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 🙂 . 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.

---

<div class="post-metadata">

**Author:** ![Butterwell](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/butterwell/32/9738_2.png) [@Butterwell](https://forum.babylonjs.com/u/Butterwell)\
**Post date:** [July 15, 2020, 12:21am UTC](https://forum.babylonjs.com/t/how-do-i-do-transparency-via-color-in-shaders/12495/3 "2020-07-15T00:21:00Z")

</div>

@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?

---

<div class="post-metadata">

**Author:** ![Butterwell](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/butterwell/32/9738_2.png) [@Butterwell](https://forum.babylonjs.com/u/Butterwell)\
**Post date:** [July 15, 2020, 1:40am UTC](https://forum.babylonjs.com/t/how-do-i-do-transparency-via-color-in-shaders/12495/4 "2020-07-15T01:40:31Z")

</div>

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

[https://www.babylonjs-playground.com/#4ETD1M#3](https://www.babylonjs-playground.com/#4ETD1M#3)

---

<div class="post-metadata">

**Author:** ![MarianG](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mariang/32/138_2.png) [@MarianG](https://forum.babylonjs.com/u/MarianG)\
**Post date:** [July 15, 2020, 6:14am UTC](https://forum.babylonjs.com/t/how-do-i-do-transparency-via-color-in-shaders/12495/5 "2020-07-15T06:14:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Butterwell](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/butterwell/32/9738_2.png) [@Butterwell](https://forum.babylonjs.com/u/Butterwell)\
**Post date:** [July 15, 2020, 8:31am UTC](https://forum.babylonjs.com/t/how-do-i-do-transparency-via-color-in-shaders/12495/6 "2020-07-15T08:31:10Z")

</div>

@MarianG Thank you!