It worked fine in Babylon 7.54, until I upgrade it to Babylon 8.0
My problem is that the alpha channel for my PNG now fills with scene.clearColor color but it’s not transparent anymore. When I change scene.clearColor then alpha color also changes to that color even if that object is over another object, alpha color in anyway copies from scene.clearColor.
All my objects are plane mesh instances (my sprite implementation)
My project is 2D, top-down ortho camera view
1 source plane mesh, 1 mat, 1 texture (png with alpha) for all the meshes
I use my own shader which is passes alpha channel from a texture as it is without any changes
I use needDepthPrePass = true
Texture has: texture.hasAlpha = true and my ShaderMaterial has: needAlphaBlending: true
My objects naturally sorted by Y-axis by design. But the order of my sprites don’t render well without needDepthPrePass = true so I need to turn it on to have a correct render order. I don’t know another way to sort regular instances
When I set needDepthPrePass = false then alpha starts to work fine but I have a problem with ordering my objects as my project is 2D and they are regular instances so I need to sort it as my objects has parents and children hierarchy.
So the problem is that needDepthPrePasschanges my alpha to scene.clearColor. So if I set:
scene.clearColor = new Color4( 0.3, 0.3, 0.3, 1.0 )
// -> needDepthPrePass changes my alpha to gray
scene.clearColor = new Color4( 0.3, 0.3, 0.3, 0.0 )
// -> needDepthPrePass changes my alpha to pure white.
// I was hoping that it would change the alpha to fully transparent but no :)
Thanks! I moved in that direction! I am very ashamed and I apologize very much for disinform you about the version. That was not 7.54, that was 7.42. Til that version there was some “alpha fix” as it states from your link.
Here I created a Playground that shows my problem:
There are two the same plane instances one over another
Top plane has a wrong alpha channel
Look at the line: shader.needDepthPrePass = true; - if you comment this out, then alpha starts to work.
But in my project I can’t go without this option because I have a sorting problem.
Is that correct behaviour?
Maybe I missed something?
Your PG doesn’t do what you want in 7.42.0 either:
(note that you can pass a version number through the version url parameter for easy testing with past Babylon.js versions)
This is expected behavior, because M.material.needDepthPrePass=true renders mesh M first to the zbuffer, meaning it will occlude meshes that are behind, even if M is transparent (normally, transparent meshes don’t render to the zbuffer so that they can properly blend with the existing background and other transparent meshes).
I don’t know why you see a different behavior in your project, but there must be something else that explains it.
If you can provide a live link of your project running with 7.42, we could have a look with Spector and understand why there’s a different behavior. Best would be to provide two links, one for 7.42 and the other for 8.0+. In this case, we could simply compare the two Spector outputs and easily find what is different.
Hm, maybe I missed something. I will dive into it deeper why I faced another behaviour in my project.
Is there any way to sort instances manually? Now it sorts objects by its creation time, AFAIU. I can’t recreate all the world objects just to resort the order
For example, in this Playground we have 3 objects. Without needDepthPrePass = true, my instance0 renders above instance1 while it actually lies behind. So I can’t control the render order without needDepthPrePass.
You can sort transparent instances by setting BABYLON.Mesh.INSTANCEDMESH_SORT_TRANSPARENT = true;.
However, it sorts instances for each mesh (which has instances) separately, not instances for all meshes that have instances. In your example, plane1 is processed first, so its two instances are sorted, then plane2 is processed, which renders its single instance. To make it work as expected, the 3 instances would have to be sorted together, which is not possible, because the rendering is done at the mesh level, and the sorting is done inside the Mesh.render() method. It would not work even if we could sort the 3 instances together, because instance rendering means we use a single draw call to render all instances of a mesh (that’s the main selling point of instances!): we would not be able to insert the draw call of mesh Y inside the draw call of mesh X in case some instances of X are behind some instances of Y and others are in front of them.
Transparent rendering is difficult, see this documentation page in case you don’t already know it:
