Custom Shader Material is never opaque

Questions
,
1

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

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?

2

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

3

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?

4

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.

5

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#7

6

Thanks, it works like a charm