Meshes transparency

Hello there!

I do have a ground mesh with transparency (edges fade to background color, black in my case), and I’d like meshes positioned over it to have some transparency as well.


(you can see here that the ground fades to black; the aim is that all trees being in the fade zone have a lower alpha value than the others)

There is two questions:

  1. Do you know if there’s a way to set an alpha value for a given mesh (that has no transparent texture) ?
  2. Is it possible to pick the alpha value of a ground mesh at a given location (just like ground.getHeightAtCoordinates) ?

Thanks!

Hi Remy,

  1. there is a way to set alpha to a material but not to a specific mesh. You could clone a certain material and use it on those specific trees.
  2. I don’t know how you set the transparency to your ground. if it is using a texture, you could use the UV texture coordinates to check for transparency in the opacity texture itself. if you are using some other form of shading, you are better equipped of saying which part is transparent and which not.

Does the transparency move as you move as well? is it fixed?

For 1 I guess you can use mesh.visibility and set a value lower than 1.

1 Like

Hi Raanan,

  1. I will look towards applying alpha to material then, thanks!
  2. I created my ground using an opacity texture with this texture

    (it’s white, but it’s there, I promise)

If I understood well, I should compute the projected coordinates of the ground to the alpha texture to have the alpha value on this location?

@Evgeni_Popov unfortunately mesh.visibility allows only displaying or hiding the mesh (only accepts 0 or 1)

No, you can set any value between 0 and 1:

https://playground.babylonjs.com/#LAUUQP

My bad, you’re right!
However, my tree.babylon mesh texture starts to behave strangely when having a visibility lower than 1:


(default visibility to the left, lower visibility to the right)

That’s strange because it seems alpha testing does not work in the right case, but changing visibility should not impact this…

Are you sure alpha testing is still enabled for the right tree?

If you can provide a PG, it will be easier to find the problem.

I could reproduce the problem in a PG, having a look right now.

When you set visibility < 1, the mesh is flagged to need alpha blending (which is expected).

However, you can’t have both alpha testing AND alpha blending enabled at the same time because of this in the Material class:

protected _shouldTurnAlphaTestOn(mesh: AbstractMesh): boolean {
    return (!this.needAlphaBlendingForMesh(mesh) && this.needAlphaTesting());
}

I don’t know why one could not have both alpha testing and alpha blending enabled, as it seems legitimate to me… @Deltakosh or @sebavan ?

So, as a hack, you can overload _shouldTurnAlphaTestOn on your material by:

mat._shouldTurnAlphaTestOn = (mesh) => mat.needAlphaTesting();

https://playground.babylonjs.com/#68RZKR#1

It was a stupid decision for sure:)

I’m ok with the change if you want to PR (furthermore this is possible with pbr )

Please just add a note about it in the breaking change section of the what’s new

Going to create an issue instead to discuss about this, because there is more than just modifying _shouldTurnAlphaTestOn.

1 Like

Here:

Your solution works as expected, but seems to have a side effect: meshes tend to disappear on the edges of the view.
You can see it there (you need to download the file to display the animation)

Sorry for the bug you found :sweat_smile:

I don’t think overloading _shouldTurnAlphaTestOn as anything to do with what you experience (or more precisely I can’t see how it could).

You will need to provide a PG if you want us to be able what’s going on.

It seems related to the fact I use alpha for the ground; once I remove this part, the problem no longer appears.
https://www.babylonjs-playground.com/#NAMBGL#1

That’s because the opaque objects are rendered first, then the transparent objects are sorted and rendered.

When your ground is opaque, it is drawn first before all trees because those are transparent and everything is ok.

However, when your ground is also transparent, it is sorted with the trees and the transparent objects are rendered from the farthest to the nearest. Depending on the outcome of the sorting, some ground faces can be considered nearer than some trees and so will be drawn after and thus may overlap these trees.

The easiest way to correct this problem in your case is to put the trees in a render group that will make them always displayed after the ground. As the default group is 0, just put them in group 1:

https://www.babylonjs-playground.com/#NAMBGL#2

See line 47 (instances will inherit this value).

Note that if you don’t want to use transparency on the ground, you may be able to achieve the same effect by activating fog:

https://www.babylonjs-playground.com/#NAMBGL#4

2 Likes

Since I need to use transparency on the ground, renderingGroupId is the way to go.
Thanks a lot! :slight_smile:

1 Like