# Fading meshes using visibility when inside a mesh with material alpha

**URL:** <https://forum.babylonjs.com/t/fading-meshes-using-visibility-when-inside-a-mesh-with-material-alpha/45398>\
**Category:** Questions\
**Created:** [November 2, 2023, 1:28pm UTC](https://forum.babylonjs.com/t/fading-meshes-using-visibility-when-inside-a-mesh-with-material-alpha/45398 "2023-11-02T13:28:43Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![link2twenty](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/link2twenty/32/19199_2.png) [@link2twenty](https://forum.babylonjs.com/u/link2twenty)\
**Post date:** [November 2, 2023, 1:28pm UTC](https://forum.babylonjs.com/t/fading-meshes-using-visibility-when-inside-a-mesh-with-material-alpha/45398/1 "2023-11-02T13:28:43Z")

</div>

Hi, I’m having an issue when using mesh visibility, material alpha and material needDepthPrePass together.

In order to avoid the XY problem I’ll explain what I’m trying to achieve. I have a mesh that has a translucent material and contains other fully opaque meshes. I want the outer material to look like a silhouette but I still want to see the items inside clearly.

When I transition between views I show and hide inner meshes by changing their visibility but when they are obscured by the outer mesh they pop in or out of existence rather than nicely fading.

Here is an example of what’s happening

> **[Babylon.js Playground](https://playground.babylonjs.com/#K5QMRY)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

Here is why I’m using needDepthPrePass to stop the outer mesh looking messy

> **[Babylon.js Playground](https://playground.babylonjs.com/#H6ZS0H)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![bghgary](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bghgary/32/48532_2.png) [@bghgary](https://forum.babylonjs.com/u/bghgary)\
**Post date:** [November 3, 2023, 12:27am UTC](https://forum.babylonjs.com/t/fading-meshes-using-visibility-when-inside-a-mesh-with-material-alpha/45398/2 "2023-11-03T00:27:28Z")

</div>

Maybe @sebavan or @Evgeni_Popov will have some ideas.

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [November 3, 2023, 12:31am UTC](https://forum.babylonjs.com/t/fading-meshes-using-visibility-when-inside-a-mesh-with-material-alpha/45398/3 "2023-11-03T00:31:22Z")

</div>

You could use smthg like this to ensure your “container” mesh is always rendered after everything else:

```auto
sphere.renderingGroupId = 2;
scene.setRenderingAutoClearDepthStencil(2, false, false, false)

```

> **[Babylon.js Playground](https://playground.babylonjs.com/#K5QMRY%232)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![link2twenty](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/link2twenty/32/19199_2.png) [@link2twenty](https://forum.babylonjs.com/u/link2twenty)\
**Post date:** [November 3, 2023, 9:07am UTC](https://forum.babylonjs.com/t/fading-meshes-using-visibility-when-inside-a-mesh-with-material-alpha/45398/5 "2023-11-03T09:07:36Z")

</div>

> [@sebavan](#):
>
> `setRenderingAutoClearDepthStencil`

Amazing thank you!