# Custom Shader Material is never opaque

**URL:** <https://forum.babylonjs.com/t/custom-shader-material-is-never-opaque/3168>\
**Category:** Questions\
**Tags:** material, shader\
**Created:** [May 13, 2019, 10:35am UTC](https://forum.babylonjs.com/t/custom-shader-material-is-never-opaque/3168 "2019-05-13T10:35:01Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![David\_Diaz](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/david_diaz/32/2269_2.png) [@David\_Diaz](https://forum.babylonjs.com/u/David_Diaz)\
**Post date:** [May 13, 2019, 10:35am UTC](https://forum.babylonjs.com/t/custom-shader-material-is-never-opaque/3168/1 "2019-05-13T10:35:01Z")

</div>

Good morning everybody.

I’m trying to port my shaders to Babylon but I found out the alpha is not working as expected: [https://www.babylonjs-playground.com/#7LKL1J#4](https://www.babylonjs-playground.com/#7LKL1J#4)

It should show a red circle, whatever is outside the circle takes alpha = 0 and should be transparent.

Unfortunately the circle is not opaque even having alpha = 1.0;

The circle becomes opaque if I don’t use needAlphaBlending, but then the full mesh is visible.

I’ve been trying the different alphaMode values but those didn’t work either.

Am I missing an option for the shader Material?

---

<div class="post-metadata">

**Author:** ![Sonja](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sonja/32/5077_2.png) [@Sonja](https://forum.babylonjs.com/u/Sonja)\
**Post date:** [May 13, 2019, 1:11pm UTC](https://forum.babylonjs.com/t/custom-shader-material-is-never-opaque/3168/2 "2019-05-13T13:11:45Z")

</div>

perhaps you can calculate the alpha in shader?  
[https://www.babylonjs-playground.com/#7LKL1J#5](https://www.babylonjs-playground.com/#7LKL1J#5)

---

<div class="post-metadata">

**Author:** ![David\_Diaz](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/david_diaz/32/2269_2.png) [@David\_Diaz](https://forum.babylonjs.com/u/David_Diaz)\
**Post date:** [May 13, 2019, 1:42pm UTC](https://forum.babylonjs.com/t/custom-shader-material-is-never-opaque/3168/3 "2019-05-13T13:42:39Z")

</div>

It works, but I’m confused.

is\_circle is already 1.0 , what you do is to pass uniform alpha which is 1.0 too, and then is\_circle \* alpha, which is still 1.0

You didn’t even add alpha to the list of uniforms.

Why does this work?

---

<div class="post-metadata">

**Author:** ![Sonja](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sonja/32/5077_2.png) [@Sonja](https://forum.babylonjs.com/u/Sonja)\
**Post date:** [May 13, 2019, 1:56pm UTC](https://forum.babylonjs.com/t/custom-shader-material-is-never-opaque/3168/4 "2019-05-13T13:56:12Z")

</div>

emmm… I’m also new here, and also playing with the alpha-blending

- BABYLON.Engine.ALPHA\_COMBINE, is the default blend mode for alpha-blended meshes. Blending is modulated by the alpha value of the pixel being drawn. In your code you use `needAlphaBlending: true,` to give the above mesh a alpha-blending

- which you also can do is use the alpha from glsl for the material. `gl_FragColor` is a vec4(r, g, b, a)…a is alpha. you can also try to set the alpha like the follow line, `shaderMaterial.setFloat("alpha", 0.5);`, then you can get a blending from this material. The alpha here controll the shaderMerial

in my example just shows, that you can also give your shader material a “alpha” attribute.

---

<div class="post-metadata">

**Author:** ![Sonja](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sonja/32/5077_2.png) [@Sonja](https://forum.babylonjs.com/u/Sonja)\
**Post date:** [May 13, 2019, 2:01pm UTC](https://forum.babylonjs.com/t/custom-shader-material-is-never-opaque/3168/5 "2019-05-13T14:01:52Z")

</div>

actually, in your case, it works when you just use BABYLON.Engine.ALPHA\_COMBINE, when you write nothing, the default BABYLON.Engine.ALPHA\_COMBINE will be used…  
[https://www.babylonjs-playground.com/#7LKL1J#6](https://www.babylonjs-playground.com/#7LKL1J#6)  
[https://www.babylonjs-playground.com/#7LKL1J#7](https://www.babylonjs-playground.com/#7LKL1J#7)

---

<div class="post-metadata">

**Author:** ![David\_Diaz](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/david_diaz/32/2269_2.png) [@David\_Diaz](https://forum.babylonjs.com/u/David_Diaz)\
**Post date:** [May 13, 2019, 4:07pm UTC](https://forum.babylonjs.com/t/custom-shader-material-is-never-opaque/3168/6 "2019-05-13T16:07:22Z")

</div>

Thanks, it works like a charm