# Flipped normals when activating alpha blend in sandbox

**URL:** <https://forum.babylonjs.com/t/flipped-normals-when-activating-alpha-blend-in-sandbox/12014>\
**Category:** Questions\
**Created:** [June 27, 2020, 12:07am UTC](https://forum.babylonjs.com/t/flipped-normals-when-activating-alpha-blend-in-sandbox/12014 "2020-06-27T00:07:28Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![DeepDeeh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deepdeeh/32/8651_2.png) [@DeepDeeh](https://forum.babylonjs.com/u/DeepDeeh)\
**Post date:** [June 27, 2020, 12:07am UTC](https://forum.babylonjs.com/t/flipped-normals-when-activating-alpha-blend-in-sandbox/12014/1 "2020-06-27T00:07:28Z")

</div>

I tested a model with glasish material and double layer in the sandbox. I was having some issues with my original model, so, for testing and understanding what happens, I created a simple torus, wrapped by an other tours. (made in blender.)

The mesh of the two-torus-model is flipping around some normals, when I activate alpha mode “combine” or “Pre-multiplied”. These are the only modes where I can control the level of alpha, so I wonder how to prevent the normals to flip.  
Thank you for you advice or any hint on how to understand this and maybe what would be a good idea how to create a mesh with two layers of glas-like material. Debug mode set to “normals” gives me following screenshots which demonstrate the flipping. it is not happening when alpha-value is 1 but happens when alpha is lower than 1:

 ![Screenshot_2020-06-27 Babylon js - torus glb(3)](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/0/09252a9cce5fe641229e9460dc728764fe2c1739.jpeg) ![Screenshot_2020-06-27 Babylon js - torus glb(2)](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/9/955370b1fb4b5f2df81b2cc363bb8030b89ccc6d.jpeg) ![Screenshot_2020-06-27 Babylon js - torus glb(1)](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/d/dbbf13db625e3cc690426c56c465d548f179afee.jpeg) ![Screenshot_2020-06-27 Babylon js - torus glb](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/e/ea20c9a225cb5aeb4682124f230da1a90d32fc3a.jpeg)

Find the glb-file here: [https://virtueller-messestand.de/fileadmin/3dcontent/torus.glb](https://virtueller-messestand.de/fileadmin/3dcontent/torus.glb)

---

<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:** [June 27, 2020, 12:29am UTC](https://forum.babylonjs.com/t/flipped-normals-when-activating-alpha-blend-in-sandbox/12014/2 "2020-06-27T00:29:02Z")

</div>

It is not flipping them, it just randomize triangles order due to the blend mode: [Transparency and How Meshes Are Rendered - Babylon.js Documentation](https://doc.babylonjs.com/resources/transparency_and_how_meshes_are_rendered)

Here you will need to either do a depth pre pass but won t see inside or you need to separate the draw calls by creating 2 meshes instead.

---

<div class="post-metadata">

**Author:** ![DeepDeeh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deepdeeh/32/8651_2.png) [@DeepDeeh](https://forum.babylonjs.com/u/DeepDeeh)\
**Post date:** [June 27, 2020, 12:53am UTC](https://forum.babylonjs.com/t/flipped-normals-when-activating-alpha-blend-in-sandbox/12014/3 "2020-06-27T00:53:08Z")

</div>

Thank you four your quick and helpful answer. I will try out the 2-mesh-variant, because the view inside is mandatory for my use-case.  
I was already reading the doc you linked, or lets say, I was too-fast-reading, and did not take the time to understand everything. I read it again. 🙂

---

<div class="post-metadata">

**Author:** ![DeepDeeh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deepdeeh/32/8651_2.png) [@DeepDeeh](https://forum.babylonjs.com/u/DeepDeeh)\
**Post date:** [June 30, 2020, 9:58pm UTC](https://forum.babylonjs.com/t/flipped-normals-when-activating-alpha-blend-in-sandbox/12014/4 "2020-06-30T21:58:25Z")

</div>

I could get the result that I wanted (double-layer glass object). Having the mesh separated into two parts (inside and outside) did not solve the problem. I tried using the mesh visibility to control the alpha, while the material of both meshes is the single glass material. It helps to control the inner and outer of the glas, but the clue was to make sure to activate the “seperate culling pass” on the glass material, because only then the normals don’t get randomized.

 ![Screenshot_2020-07-01 Babylon js - torus glb](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/7/70fd4bf876938700a987bff24cb116213ae9739c.png)  
 ![Screenshot_2020-07-01 Babylon js - torus glb(1)](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/2/279b3c1341673c6c0efd9474c52970815e4ec79c.png)  
I did not find any hint on the normals behavior (randomize?) in the documentation, though.  
Thanks for your help, I keep sailing on line-of-sight.

---

<div class="post-metadata">

**Author:** ![DeepDeeh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deepdeeh/32/8651_2.png) [@DeepDeeh](https://forum.babylonjs.com/u/DeepDeeh)\
**Post date:** [June 30, 2020, 10:14pm UTC](https://forum.babylonjs.com/t/flipped-normals-when-activating-alpha-blend-in-sandbox/12014/5 "2020-06-30T22:14:56Z")

</div>

> [@sebavan](#):
>
> Here you will need to either do a depth pre pass but won t see inside or you need to separate the draw calls by creating 2 meshes instead.

Please correct or extend my answer, in case I got something wrong. (That is the case, almost always 😊 )

---

<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:** [June 30, 2020, 10:18pm UTC](https://forum.babylonjs.com/t/flipped-normals-when-activating-alpha-blend-in-sandbox/12014/6 "2020-06-30T22:18:48Z")

</div>

It is actually not the normal being flipped but you see the opposite side of the torus which has opposite normals 🙂 as triangles sort is not an option without the separate culling pass you randomly render either the bottom inside part or the top outside one providing the reverse normal effect.
