# How to make the material of an imported mesh transparent?

**URL:** <https://forum.babylonjs.com/t/how-to-make-the-material-of-an-imported-mesh-transparent/52981>\
**Category:** Questions\
**Created:** [August 24, 2024, 12:30am UTC](https://forum.babylonjs.com/t/how-to-make-the-material-of-an-imported-mesh-transparent/52981 "2024-08-24T00:30:48Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![BobDylan](https://avatars.discourse-cdn.com/v4/letter/b/7c8e57/32.png) [@BobDylan](https://forum.babylonjs.com/u/BobDylan)\
**Post date:** [August 24, 2024, 12:30am UTC](https://forum.babylonjs.com/t/how-to-make-the-material-of-an-imported-mesh-transparent/52981/1 "2024-08-24T00:30:48Z")

</div>

I import a GLB mesh that I made with Blender.  
It has a PBRMaterial with an image-texture. I did not change the default settings for the material.  
Now I would like to make this object half-transparent with BabylonJS.  
I can’t figure out how to do that. I’m able to get what I want with changing the material in the Inspector though:

- Alpha to 0.5
- Transparency Mode to Alpha Blend
- Separate Culling Pass to true

How would I do this in code with BabylonJS ?

UPDATE:  
Found the answer, I just had to do this:

```auto
    mesh.material.alpha = 0.5;
    mesh.material.transparencyMode = 2;
    mesh.material.separateCullingPass = true;

```

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [August 25, 2024, 9:34am UTC](https://forum.babylonjs.com/t/how-to-make-the-material-of-an-imported-mesh-transparent/52981/2 "2024-08-25T09:34:04Z")

</div>

Right. It’s always easier when people get the answer to their own question 😁  
Means you can know tick your post as a ‘solution’ 😂 so, it won’t be left open… because, it is ‘a solution’  
Digging further you’ll find some other properties you can set for the alpha, such as i.e.

> ```
> mat.albedoTexture.hasAlpha = true;
> mat.useAlphaFromAlbedoTexture = true;
> mat.albedoTexture.getAlphaFromRGB = true;
> 
> ```

and probably a few more I do not have in mind right now 😄

> [@BobDylan](#):
>
> changing the material in the Inspector

Yes. It’s a good way to experience materials in BJS. I use it a lot. There are a few things missing and some limited values due to the choice of using sliders in the UI and also ‘per design’, I believe to keep things within an ‘acceptable’ range when playing around from the inspector. There’s quite a number of values you can push a lot further than the min or max you have in the inspector (FYI), but it still is a very useful tool to both understand and experience/set a base for materials.

---

<div class="post-metadata">

**Author:** ![BobDylan](https://avatars.discourse-cdn.com/v4/letter/b/7c8e57/32.png) [@BobDylan](https://forum.babylonjs.com/u/BobDylan)\
**Post date:** [August 25, 2024, 10:48am UTC](https://forum.babylonjs.com/t/how-to-make-the-material-of-an-imported-mesh-transparent/52981/3 "2024-08-25T10:48:00Z")

</div>

I agree, the inspector is a very useful tool. The only ‘problem’ I still have, is that the transparent object is a bit too dark. I want to animate the alpha from 1 to 0, but the first half of the animation, the mesh appears gray before ‘dissolving’. I don’t know if it’s because of my lighting setup or maybe I have to play around with properties like emissiveColor, which I don’t really understand yet.

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [August 25, 2024, 11:28am UTC](https://forum.babylonjs.com/t/how-to-make-the-material-of-an-imported-mesh-transparent/52981/4 "2024-08-25T11:28:54Z")

</div>

Could you set-up a PG? That would be the easiest, since all the rest is a lot depending on your settings (for the scene, the material and the type of material).  
I could add to this that there’s an other way to use alpha (in the sorting order). Through the material is one way, but you can also use:

> mesh.visibility = 0.5;

Edit: Not sure to read this correcty, but for…

> [@BobDylan](#):
>
> the first half of the animation, the mesh appears gray before ‘dissolving’

… if I read that your mesh remains opaque until it reaches the threashold of alpha 0.5, this means the alpha is actually breaking. There’s some conflict in the sorting/blending of your meshes.  
You could try set the meshes that are behind to be also alpha-blended with an alpha of 0.999. The ‘alphaIndex’ can also help and so eventually also does (forcing the order of alpha sorting):

> ```
> mat.needDepthPrePass = true;
> 
> ```