Alpha Woes, and Weird backFace Glitching

Questions
1

So I have been doing a lot of work with texture stuff lately, and I got to a problem that I am kinda confused by.

So normally when you set up a “Tree” model you do some planes that represent branches and are placeholders for geometry, it’s pretty standard, but for some reason the struggle is real in trying to get this setup.

Also there seems to be an odd glitch with the polygons where they are “jumping” randomly for no real reason.

On the left is how it should more or less look, on the right is how its rendering in browser. I have tried every alpha mode but none seem to allow the pass through of other alpha mats behind it through the area of the polygons that are hidden by the alpha texture.

Around 30 seconds in I am able to demonstrate the weird jumping as well.

here is the current material setup

var cherryTreeBranchMatA = new BABYLON.StandardMaterial('cherryTreeBranchMatA', scene)
cherryTreeBranchMatA.backFaceCulling = false
 //cherryTreeBranchMatA.twoSidedLighting = true
cherryTreeBranchMatA.useAlphaFromDiffuseTexture = false
cherryTreeBranchMatA.diffuseTexture = new BABYLON.Texture('./assets/textures/cbba_albedo.png')
cherryTreeBranchMatA.opacityTexture = new BABYLON.Texture('./assets/textures/cbba_alpha.png')
                cherryTreeBranchMatA.opacityTexture.getAlphaFromRGB = true
cherryTreeBranchMatA.needDepthPrePass = true
cherryTreeBranchMatA.alphaMode = 8

any insight?

2

Is this my answer: Wrong rendering order (z-axis/index) - Questions & Answers - HTML5 Game Devs Forum
?

3

So your leaves are considered transparent hence they are not writing to depth buffer and thus they need to be sorted :slight_smile:

I would ultimately recommend not using opacity and just flagging the diffuseTexture with .hasAlpha = true

But if you need opacity then facet ordering is what you want:
https://doc.babylonjs.com/how_to/how_to_use_facetdata#facet-depth-sort

1 Like
4

In the inspector I set the depth function to Always on the material, and that fixed it instantly.

but now when I am changing it in my code as material. depthFunction = anything it does not show the updates in the scene?

What is the correct way to set the depth function to always on a material?

5

material.depthFunction = BABYLON.Engine.ALWAYS should work but it’s likely not what you want to do: if you put something in front of the tree, it will overwrite it as the depth testing is disabled by this function.

However, I think in your case alpha testing is the way to go and @Deltakosh said what to do to enable that.

Note also that you need to have the alpha channel of your diffuse texture filled with the right values for this to work. And you won’t need needDepthPrePass = true.

Enabling transparency should be avoided if there is some other way to achieve the same effect.

1 Like