Have only certain meshes visibile through transparency?

Questions
1

Hi there!

This is a bit of a hard problem to articulate, but bear with me.

At startup I generate a bunch of cloud meshes, all basically square slices from a heightmap (I chopped them up for efficiency reasons so I can load in/out segments as they enter/leave the players viewable area).

Anyway, I wanted these clouds to be transparent, so I set the .alpha on the shared standard material to ~0.95. All well and good, translucent enough but still pretty solid. The thing is, I can see through cloud faces into other cloud faces, which makes it look like there’s a rendering order problem and clouds are overlapping (they’re not). The problem is twofold.

  • For a given cloud mesh, I don’t want to be able to see any other faces contained within this mesh through the transparency of another face within the mesh.

  • Also… from a given cloud mesh, I don’t want to see through to the faces of other clouds meshes through transparency.

Is this sort of thing possible? Basically, to render the clouds so that the transparent areas see through to what it would be like if no clouds were present?

CLOUDS_01
CLOUDS_011919×1079 527 KB

Clouds from the ground, problem not too noticeable

CLOUDS_02
CLOUDS_02673×536 8.37 KB

Clouds up close, we can see a cloud face behind another, looks dodgy. Without transparency, this issue doesn’t occur

2

That’s the classic problem with alpha blended meshes, because they don’t write to the zbuffer. See Transparency and How Meshes Are Rendered - Babylon.js Documentation for more detail.

Alpha blended meshes are sorted before being rendererd, but the faces inside a mesh are rendered in the order of their creation, except if you use the facet depth sort (see previous link).

In your case, as there is nothing behind a cloud, using material.needDepthPrePass = true should work.

3 Likes
3

Very enlightening, thank-you! Works perfectly. Now I can watch my clouds float by without issue :slight_smile:

2 Likes