maecky

Render Glitch when using alpha on StandardMaterial

Recommended Posts

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!

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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

 
 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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:

5a8293df9490d_2018-02-13(2).thumb.png.ec7d42351d4c1608f87e0a0668883dd9.png

 

Thanks for reading and helping!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.