# How to make GridMaterial transparent

**URL:** <https://forum.babylonjs.com/t/how-to-make-gridmaterial-transparent/21733>\
**Category:** Questions\
**Created:** [June 16, 2021, 11:23pm UTC](https://forum.babylonjs.com/t/how-to-make-gridmaterial-transparent/21733 "2021-06-16T23:23:53Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![lguminski](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lguminski/32/8156_2.png) [@lguminski](https://forum.babylonjs.com/u/lguminski)\
**Post date:** [June 16, 2021, 11:23pm UTC](https://forum.babylonjs.com/t/how-to-make-gridmaterial-transparent/21733/1 "2021-06-16T23:23:53Z")

</div>

Hi,

I have a mesh with GridMaterial, and I am trying to animate fading in/out with various methods

- mesh.visibility
- material.alpha
- material.opacity

but nothing seems to work. See

[https://playground.babylonjs.com/#LY8G86#3](https://playground.babylonjs.com/#LY8G86#3)

The material.opacity seems to successfully make grid lines transparent, but it does not work properly with the area inbetween. I am looking for some advice.

---

<div class="post-metadata">

**Author:** ![MarianG](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mariang/32/138_2.png) [@MarianG](https://forum.babylonjs.com/u/MarianG)\
**Post date:** [June 17, 2021, 5:09am UTC](https://forum.babylonjs.com/t/how-to-make-gridmaterial-transparent/21733/2 "2021-06-17T05:09:15Z")

</div>

Hey,  
Opacity is the property  
[https://playground.babylonjs.com/#LY8G86#5](https://playground.babylonjs.com/#LY8G86#5)  
line 17

> **[Grid Material | Babylon.js Documentation](https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/gridMat)**
>
> The Babylon.js materials library displays a grid across the mesh.

---

<div class="post-metadata">

**Author:** ![lguminski](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lguminski/32/8156_2.png) [@lguminski](https://forum.babylonjs.com/u/lguminski)\
**Post date:** [June 17, 2021, 8:40am UTC](https://forum.babylonjs.com/t/how-to-make-gridmaterial-transparent/21733/3 "2021-06-17T08:40:01Z")

</div>

@MarianG it is not. It only affects the opacity of lines. The area inbetween is always either at 100% or 8%. Here is what the documentation says

> - `opacity` : the opacity helps changing the lines opacity. In transparent mode (opacity \< 1.0), the empty area will always be at an opacity level of `0.08`

Note that despite you set opacity to 0.98, the black color is not at 0.98. And for a smooth transition I need to be able to change the transparency smoothly in range between 0 and 1.

Please look more carefully at the playground example I provided to see that `opacity` does not animate smoothly all values.

> **[Babylon.js Playground](https://playground.babylonjs.com/#LY8G86%236)**
>
> 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:** [June 18, 2021, 12:04am UTC](https://forum.babylonjs.com/t/how-to-make-gridmaterial-transparent/21733/4 "2021-06-18T00:04:21Z")

</div>

I don’t think there is control that works here in the current state. Looking at the shader, the closest thing is opacity, but it doesn’t do a visibility fade like other materials.

---

<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:** [June 18, 2021, 12:25am UTC](https://forum.babylonjs.com/t/how-to-make-gridmaterial-transparent/21733/5 "2021-06-18T00:25:41Z")

</div>

I made some local changes to the code to make `mesh.visibility` work, but I’m not sure if it should be added. @Deltakosh/@sebavan/@Evgeni_Popov What do you think?

[Comparing BabylonJS:master…bghgary:gridMaterial-visibility · BabylonJS/Babylon.js (github.com)](https://github.com/BabylonJS/Babylon.js/compare/master...bghgary:gridMaterial-visibility?expand=1)

---

<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 18, 2021, 12:46am UTC](https://forum.babylonjs.com/t/how-to-make-gridmaterial-transparent/21733/6 "2021-06-18T00:46:09Z")

</div>

LGTM 🙂

---

<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:** [June 18, 2021, 12:58am UTC](https://forum.babylonjs.com/t/how-to-make-gridmaterial-transparent/21733/7 "2021-06-18T00:58:29Z")

</div>

Awesome. PR created: [Add mesh.visibility support to grid material by bghgary · Pull Request #10519 · BabylonJS/Babylon.js (github.com)](https://github.com/BabylonJS/Babylon.js/pull/10519) 🙂

---

<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:** [June 18, 2021, 7:45am UTC](https://forum.babylonjs.com/t/how-to-make-gridmaterial-transparent/21733/8 "2021-06-18T07:45:41Z")

</div>

Note that you can also use the NME version of this material, if you want more control:

> [@Node Materials Examples](https://forum.babylonjs.com/t/node-materials-examples/6048/45):
>
> GridMaterial recreated in the NME: [https://playground.babylonjs.com/#1QIWRQ](https://playground.babylonjs.com/#1QIWRQ) The standard GridMaterial class does not handle lights nor textures, now you can use the NME version to do whatever you please slight_smile

---

<div class="post-metadata">

**Author:** ![lguminski](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lguminski/32/8156_2.png) [@lguminski](https://forum.babylonjs.com/u/lguminski)\
**Post date:** [June 18, 2021, 4:57pm UTC](https://forum.babylonjs.com/t/how-to-make-gridmaterial-transparent/21733/9 "2021-06-18T16:57:17Z")

</div>

@bghgary @Evgeni_Popov @sebavan thank you so much!

I think for now I will stick to the modified GridMaterial, but once I need to texture it, I will consider the NME version.