# Transparent material on mesh breaks when viewed in some angle

**URL:** <https://forum.babylonjs.com/t/transparent-material-on-mesh-breaks-when-viewed-in-some-angle/18866>\
**Category:** Bugs\
**Created:** [March 4, 2021, 9:33am UTC](https://forum.babylonjs.com/t/transparent-material-on-mesh-breaks-when-viewed-in-some-angle/18866 "2021-03-04T09:33:24Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![hidroo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/hidroo/32/10095_2.png) [@hidroo](https://forum.babylonjs.com/u/hidroo)\
**Post date:** [March 4, 2021, 9:33am UTC](https://forum.babylonjs.com/t/transparent-material-on-mesh-breaks-when-viewed-in-some-angle/18866/1 "2021-03-04T09:33:24Z")

</div>

Hello,  
We have this model with transparent materials.  
[map.gltf.zip](https://forum.babylonjs.com/uploads/short-url/wzUHXDNKhXOk1UH1dMGZtHNkVqH.zip) (46.6 KB)

The problem is that in some angles the material breaks:

 ![Screenshot+2021-03-04+11.31.44](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/9/97a03f2dcaa29522ef79921dd048e2d029c92230.jpeg) ![Screenshot+2021-03-04+11.31.48](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/5/5938f41aea418bb18d34fce6ef8525c7e1770e35.png)

Are we doing something wrong with our model or?

---

<div class="post-metadata">

**Author:** ![nogalo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nogalo/32/120_2.png) [@nogalo](https://forum.babylonjs.com/u/nogalo)\
**Post date:** [March 4, 2021, 9:56am UTC](https://forum.babylonjs.com/t/transparent-material-on-mesh-breaks-when-viewed-in-some-angle/18866/2 "2021-03-04T09:56:58Z")

</div>

Hi.

I suggest you check this out if you are interested on how transparent meshes are rendering and what is going on. [Transparent Rendering | Babylon.js Documentation](https://doc.babylonjs.com/divingDeeper/materials/advanced/transparent_rendering)

In a nutshell, you will usually have issues with transparent meshes (especially when they are multiple like in your case), as webgl basically doesn’t know what is in front and what is in back.

One thing you can to is to use alphaIndex, you can somewhat think of this as zIndex, and set the order of rendering transparent meshes;

> **[Transparent Rendering | Babylon.js Documentation](https://doc.babylonjs.com/divingDeeper/materials/advanced/transparent_rendering#alpha-index)**
>
> Learn all about how transparency is handled in Babylon.js.

In some cases you can enable depthPrePass and get good result.

> **[Transparent Rendering | Babylon.js Documentation](https://doc.babylonjs.com/divingDeeper/materials/advanced/transparent_rendering#depth-pre-pass-meshes)**
>
> Learn all about how transparency is handled in Babylon.js.

You can check this playground and see the effects of both, but in any case, one of these options (or both), should help to solve your issue.

[https://www.babylonjs-playground.com/#FAGWBB](https://www.babylonjs-playground.com/#FAGWBB)

EDIT: You can use rendering groups as well, but I usually go with alphaIndex

> **[Transparent Rendering | Babylon.js Documentation](https://doc.babylonjs.com/divingDeeper/materials/advanced/transparent_rendering#rendering-groups)**
>
> Learn all about how transparency is handled in Babylon.js.

---

<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:** [March 4, 2021, 10:13pm UTC](https://forum.babylonjs.com/t/transparent-material-on-mesh-breaks-when-viewed-in-some-angle/18866/3 "2021-03-04T22:13:27Z")

</div>

Hmm, this is a hard one. The glTF loader by default creates mesh instances for glTF nodes that point to the same glTF mesh. Mesh instances are not sorted individually when they need alpha blending. You can turn off instances by setting a [glTF loader option](https://doc.babylonjs.com/typedoc/classes/babylon.gltffileloader#createinstances) which will mostly make it work, but that still won’t solve the problem completely since we sort meshes which can still result in the wrong order in specific views.

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/0/0d398cfaabc84a5a960605a6fff868b73445ee69.jpeg)