# Have only certain meshes visibile through transparency?

**URL:** <https://forum.babylonjs.com/t/have-only-certain-meshes-visibile-through-transparency/8551>\
**Category:** Questions\
**Tags:** material\
**Created:** [February 13, 2020, 5:03am UTC](https://forum.babylonjs.com/t/have-only-certain-meshes-visibile-through-transparency/8551 "2020-02-13T05:03:55Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![kjg](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kjg/32/6635_2.png) [@kjg](https://forum.babylonjs.com/u/kjg)\
**Post date:** [February 13, 2020, 5:03am UTC](https://forum.babylonjs.com/t/have-only-certain-meshes-visibile-through-transparency/8551/1 "2020-02-13T05:03:55Z")

</div>

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](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/a/a9b12b2f29dec653f67317d770645d0006d58c0e.png)  
_Clouds from the ground, problem not too noticeable_

 ![CLOUDS_02](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/6/60b0a1bb24de1f64ad12c9917ba44b9eb6a7b6c6.png)  
_Clouds up close, we can see a cloud face behind another, looks dodgy. Without transparency, this issue doesn’t occur_

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [February 13, 2020, 2:19pm UTC](https://forum.babylonjs.com/t/have-only-certain-meshes-visibile-through-transparency/8551/2 "2020-02-13T14:19:32Z")

</div>

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](https://doc.babylonjs.com/resources/transparency_and_how_meshes_are_rendered) 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.

---

<div class="post-metadata">

**Author:** ![kjg](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kjg/32/6635_2.png) [@kjg](https://forum.babylonjs.com/u/kjg)\
**Post date:** [February 13, 2020, 11:37pm UTC](https://forum.babylonjs.com/t/have-only-certain-meshes-visibile-through-transparency/8551/3 "2020-02-13T23:37:04Z")

</div>

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