How to make the material of an imported mesh transparent?

Questions
1

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:

    mesh.material.alpha = 0.5;
    mesh.material.transparencyMode = 2;
    mesh.material.separateCullingPass = true;
2 Likes
2

Right. It’s always easier when people get the answer to their own question :grin:
Means you can know tick your post as a ‘solution’ :joy: 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 :smile:

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.

3

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.

4

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…

… 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;