solved Transparencies question

[MattB]

I'm building a scene with vehicles at an intersection.  I also have a bunch of tree instances that have Alpha in their leaf texture.  I've noticed some weird things with how the trees are being rendered, but more importantly I noticed that you can see the vehicle's transparent windows behind the trees (below), any advice on how to fix this?

 

[Nodragem]

that does look like a bug... can you post a screenshot to demonstrate that the car's windows are transparent otherwise?

Do you think you can reproduce the bug by placing two planes with a transparent texture one on top of the other in the playground? https://playground.babylonjs.com

If you can reproduce the bug in the playground, people may be able to help telling you if that is a bug or a misuse of the engine. Then if it is clear that this is a bug, you would file an issue on Github.

[Sebavan]

this is probably linked to the depth sorting of your scene (the window for some reason would be drawn before the leaves) https://doc.babylonjs.com/resources/transparency_and_how_meshes_are_rendered#alpha-blended-

if in your game you are sure the car is always behind the tree you could try forcing the alphaIndex of both the car and the trees to render them in the desired order?

[MattB]

Below are the two files (is there anyway to get non-https files into a playground?) - 

I should specify that the windows have a standard material with an Alpha set (in this case 75%), while the trees have a leaf texture with an Alpha channel.  The trees were exported as .glb files from blender, the vehicle is also a glb file converted using an fbx to glb converter, and then a new material is created and set with Alpha for the windows at runtime.  

http://www.forensic-visuals.com/appExamples/treetest.glb

http://www.forensic-visuals.com/appExamples/AcuraSedan1_body.glb

The windows are set to transparent based on the mesh name using this:

    for (var a=0; a<scene.meshes.length; a++) {
        if (name.indexOf('_MCT') !== -1){
            var new_material = new BABYLON.StandardMaterial('new_material', scene);
            index = name.indexOf('_MCT');
            alpha = name.substring(index+4,index+6);
            new_material.alpha = alpha/100;
            scene.meshes[a].material = new_material

 

[MattB]

Here is a screenshot of one of the windows close up:

[Sebavan]

Ok so it sounds both trees and car glasses are transparent  creating the issue (due to alpha order).

About the trees, could you try exporting as alpha test and not alpha blend from Blender. This would be more performant and prevent the sorting issue ?

[MattB]

Is that an option for exporting?  I'm not exactly sure what you are suggesting - I'm using the official glb2.0 exporter from blender.  I'm also really struggling with how materials get translated from various programs

[Sebavan]

Adding @kcoley and @PatrickRyan who could definitely help shine lights on the setup. (I am more than n00b with art tools)

[PatrickRyan]

@MattB, to export with alpha clip from blender using the Blender shader, set your AlphaMode in the shader to 1 (0 is alpha blend and 1 is alpha clip). The AlphaCutoff value above that will tell you what the cutoff is for transparency. For example, if you enter 0.5 into AlphaCutoff, any value in your alpha that is 0.5 or less will be transparent and any value above 0.5 will be opaque. Find more about alpha modes at https://github.com/KhronosGroup/glTF-Blender-Exporter/blob/master/docs/user.md#pbr-materials

The image below shows a blue cube (no alpha), a green cube (alpha blend with AlphaMode set to 0) and a red cube (with alpha clip and AlphaMode set to 1). In the glTF you should see the blue cube, 50% transparency on the green cube and no red cube since the AlphaCutoff is set to 0.5 and so is the alpha. However, I just updated the exporter to the latest build before writing this post to make sure the information was still accurate and I am not getting any material parameters exporting when using the Principled glTF shader. I am about to post an issue on that so if yours is working currently, I would hold off updating. I did validate the shader wasn't working on a second machine so I think something broke recently.

Using alpha clip will mean that you don't get soft edges on your transparent objects, but when you are talking about vegetation, you want to avoid alpha blend on the individual leaves and go with alpha clip. The reason is that all the stacked leaves will cause a lot of overdraw where you need to calculate the alpha value of the edge of one leaf through others and can compound the calculations if your tree takes up a majority of the screen like in your example. Alpha clip is much cheaper because you don't need to calculate the draw based on a portion of one leaf combined with what is below it, it's either full base color or whatever is below the object.

[MattB]

First off, this forum is just the absolute best, thanks so much for such quick responses and great information!  I'm actually working in Blender Render and not cycles so I"m not using the GLTF PBR shader (hopefully I said that right)...The alphaMode for the trees was "2" so I changed it in runtime to "1" and they turned white (below).  I'll play around with the materials some more.  Thanks again for your help!

 

[PatrickRyan]

Ok, circling back to this because I reached out to Khronos on their GitHub about this and there are a couple of issues that can be misleading with their shader for export. I did notice that the standard Blender Renderer material will generate a glTF, but the issue with that is glTF expects physically based rendering (PBR) metallic roughness materials and textures unless you are using an extension that allows for the specular glossiness model. Technically the glTF would not be valid without PBR properties so I don't know if you will run into problems. If you are new to authoring for PBR, there are a lot of resources out there like:

• https://www.allegorithmic.com/pbr-guide This is a great guide to the theories behind PBR and how to author for it. Most of the industry references this guide.
• https://www.khronos.org/blog/art-pipeline-for-gltf This is an article I wrote about a year ago for how to get assets from DCC tools into glTF including Blender. I need to write an update for it, but the basics are the same.
• https://doc.babylonjs.com/how_to/physically_based_rendering Starting with PBR in Babylon.
• https://doc.babylonjs.com/how_to/physically_based_rendering_master Advanced PBR in Babylon

Now, back to what I was doing wrong in the last post. The Blender shader is a little misleading in that if you enter color values in the BaseColor input, they are ignored. This input is only for textures even though you can manually set a color value. BaseColorFactor is where you can set your color and alpha in the RGBA channels if you aren't attaching a texture. When you assign a texture, you connect the color channels to the BaseColor input in the shader and alpha to the Alpha input. The BaseColorFactor will still be multiplied by BaseColor so you can add additional color or alpha information there for combination. 

However, if you want to have an alpha texture, but assign RGB values through the BaseColorFactor, you can't just attach a texture to the Alpha input. The glTF format assumes alpha comes from the alpha channel of the base color texture so texture alpha won't work in a glTF unless you have a base color texture. To remedy this, you need to pass a white texture (RGB of 1, 1, 1) with the alpha you want to the BaseColor input and the Alpha input and can then assign the BaseColorFactor to the color you want. See the sample below which is the same as before, blue is opaque, green is alpha blend, and red is alpha mask.

The green cube here has the same texture applied to it that the red does (white RGB and checker alpha) but the difference is that AlphaMode is set to 0 (blend) and the BaseColorFactor is RGBA: 0, 1, 0, 0.5. The factor is multiplied by the texture and you have a semi-transparent checker pattern. The red cube can't have the 50% translucency that the green cube does, but it is MUCH cheaper to render this way. Especially when you have overlapping geometry all with alpha on it. 

And this is the shader setup showing the additional factor. Hope this helps in the long run.

[Sebavan]

Thanks Patrick ?

@MattB if you want to turn alpha test on by code, put transparencyMode = 1 alphaMode is not about Opaque/Mask/Blend but about the blending technique you want to use.

[MattB]

PBR stuff is what I have been putting off, I guess I need to get use to using it.  Your post is very helpful in explaining how all this stuff works.  Thank you all for the fantastic information!

[MattB]

Sebavan - YES!  setting transparencyMode =1 for all the trees fixed all the problems.  Thanks so much!

[PatrickRyan]

Remember that setting the transparencyMode in your javascript code will always work for your scene but is a local fix, but if you send that glTF to another project, view it in a glTF viewer, or share it in a 3D model repository the glTF itself will render incorrectly. If you don't have the time to go through and convert your materials and textures to PBR, you can simply edit the glTF to set the blending mode manually.

If you exported a glb, and are on windows, you can download this tool from github which is a shell extension written by one of our team's engineers that will add an option to the right-click context menu to convert between glTF and glb. Once you have a glTF file (the json file) available open it in VSCode or similar editor and search for "alphaMode" and your three options are OPAQUE, BLEND, and MASK. If you change the material that your trees use to "alphaMode": MASK and save the file, your glTF will render correctly in any glTF viewer. Since glTF is a transmission format and tooled to render the same no matter what renderer displays it, I always err on the side of generating a valid and complete glTF without the need for local fixes as I never know when I will need to use that file again elsewhere.

Now you have plenty of approaches and I hope this all helps you in planning out your pipeline and getting the most out of the power of glTF and Babylon! Let us know if you have more questions.