Render Glitch when using alpha on StandardMaterial

[maecky]

Hi,

 

I am playing around with the StandardMaterial settings and I came across an issue. If I set the alpha value of the StandardMaterial weird rendering glitches appear on my mesh. You can see it in the playground example if you rotate the mesh around.

Setting the alpha to 0.9999 makes no sense, I am aware of that but I am trying to write a shader based on the StandardMaterial and I do want to set parts of the mesh transparent - therefore I think I do need alphaBlending enabled (e.g.: gl_color = vec4(1.0, 0.0, 1.0, 0.5)).

Is there a possibility to fix this?

http://www.babylonjs-playground.com/#AFH1MN#1

Thanks for your help!

 

[Amarth2Estel]

Hi maecky !

I think you will find interesting info here : https://doc.babylonjs.com/resources/transparency_and_how_meshes_are_rendered

To fix your problem, you just need to set mesh.material.needDepthPrePass to true 

PG fixed : http://www.babylonjs-playground.com/#AFH1MN#2

 

Edit : As written in doc linked above, if you have to work with "real" transparency (I mean, not 0.9999) , then setting separateCullingPass to true is better!
PG with alpha 0.2 : http://www.babylonjs-playground.com/#AFH1MN#3

[maecky]

Thanks for your help, really appreciate it!

I did read the documentation of the link you provided but I wasn't aware that it helps to render it to the depth buffer. Thanks for pointing it out!

[maecky]

@Amarth2Estel This did solve the rendering glitch in the StandardMaterial but another issue arose.

I modified the StandardMaterial and added the following code at the end of the fragment shader:

 

	if (vPositionW.z < -1000.0) {
		color.a = 0.1;
		// discard;
	}
	gl_FragColor = color;

This code works if I set seperateCullingPass to false (with the rendering glitches), but stops working if I set it to true.

What I am trying to achieve is, to set part of the mesh transparent (e.g. alpha = 0.5). I assume I have to solve it with a shader but I'm not sure?

Thanks.

 

 

[Guest]

Can you repro the new issue in the PG as well?

[maecky]

What I did was the following:

• I copied the StandardMaterial.ts file and replaced the "StandardMaterial" names with "AlphaMaterial" in the whole file.
• I copied the default.fragment.fx and default.vertex.fx and named it alpha.fragment.fx and alpha.vertex.fx
• I then added the code I posted above at the very end of the alpha.fragment.fx file

Since I've written the files in TypeScript I don't know if it is possible to recreate the issue in the PG? If so please let me know - I would love to.

Anyways, this is the result of the above-described process:

http://mfeu.at/test/

I expected the bluish shaded part to be transparent.

[Guest]

can you post a non minified version?

Also did you return true in the needAlphaBlending function of your material?

[maecky]

If you open the developer tools in chrome you can read the source code. I did not change anything in the babylon library itself.

I used the default.vertex.fx and default.fragment.fx, excepet that I appended the following lines at the end of the fragment shader:

if (vPositionW.z < -1000.0) {
	color.a = 0.1;
	// discard;
}
gl_FragColor = color;

btw. "discard" would work as excepted.

Here a screenshot of the dev tools:

 

Thanks for reading and helping!

[Guest]

Ok so yes it is transparent but because you are using a depth pre pass, there is no self transparency

In you case I would recommend to set seperateCullingPass to false but instead set material.alphaMode = BABYLON.Engine.ALPHA_PREMULTIPLIED