Hello. I would like to know how to use an alpha texture on a mesh to make Babylon scene transparent. An example use case would be a 2d plane with a spade alpha texture on it. When you look at the texture, you see the webpage behind the Babylon scene.
To explain it another way, I’d like to be able to poke holes in my Babylon scene using alpha textures on meshes.
Thank you.
Hi @jdtokyo - welcome to the forum!!
I think you need to set the scene clearcolor:
It’s a color4 - the first 3 are RGB and the last is for transparency. The texture itself has also using hasAlpha:
Let us know if that solves it for you. Cheers.
Hello. Thank you @brianzinn. I have already set the scene to clearcolor. So the scene is capable of transparency. But how do I make an object cut a whole in the scene based on the objects alpha? For example, if an object has a texture shape of a tree, we can see the div behind the babylon canvas in the shape of a tree.
Hi @jdtokyo this should help Materials - Babylon.js Documentation
Yes. That creates a transparent object, but it doesn’t create a cutout of the scene. For example, if there is PlaneA at x=0, and PlaneB at x=2. If PlaneB has a tree texture, it should punch a tree shaped hole through the hole scene revealing the transparent background. Using the technique in the Materials docs only makes the object with the texture transparent, but you can still see geo behind it. Basically, there should be a technique to make any pixel behind the texture become Alpha 0.
As far as I know there is no direct way to do this in Babylon. You could perhaps use a dynamicTexture (which is just a canvas) and manipulate the pixels, An alternative would be to use you favorite painting app to create a mask.