maecky Posted February 8, 2018 Share Posted February 8, 2018 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! Quote Link to comment Share on other sites More sharing options...
Amarth2Estel Posted February 8, 2018 Share Posted February 8, 2018 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 ziguri and maecky 2 Quote Link to comment Share on other sites More sharing options...
maecky Posted February 8, 2018 Author Share Posted February 8, 2018 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! Quote Link to comment Share on other sites More sharing options...
maecky Posted February 8, 2018 Author Share Posted February 8, 2018 @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. Quote Link to comment Share on other sites More sharing options...
Guest Posted February 8, 2018 Share Posted February 8, 2018 Can you repro the new issue in the PG as well? Quote Link to comment Share on other sites More sharing options...
maecky Posted February 8, 2018 Author Share Posted February 8, 2018 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. Quote Link to comment Share on other sites More sharing options...
Guest Posted February 9, 2018 Share Posted February 9, 2018 can you post a non minified version? Also did you return true in the needAlphaBlending function of your material? Quote Link to comment Share on other sites More sharing options...
maecky Posted February 13, 2018 Author Share Posted February 13, 2018 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! Quote Link to comment Share on other sites More sharing options...
Guest Posted February 13, 2018 Share Posted February 13, 2018 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.