Jump to content

Render Glitch when using alpha on StandardMaterial


maecky
 Share

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!

 

Link to comment
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

Link to comment
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.

 
 
Link to comment
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.

Link to comment
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!

Link to comment
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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...