I’m trying to render two planes that intersect each other at 90° that have semi-transparent PNGs as their source material. I’m trying to get it to reflect what I would expect to see in the real world, where the planes semi-occlude each other at various points, but I know I haven’t set up the meshes correctly. Here’s what I’m expecting (just a fake Photoshop mockup) versus what I’ve actually got so far:
In the mockup version, note the gradient in both of the planes where the blue portions are fully opaque and the fade to red fades to fully transparent, revealing the plane and other contents behind it.
In the actual result, the blue arrow points to an area where I feel like it is rendering as I want it to, where the red portion which becomes transparent is giving way to the plane behind it while still retaining it’s partial opacity. The red arrows point to where I feel like things are weird, where the farther away portion of the right plane is getting rendered on top of the front portion of the left plane. Anything that is white or blue should be fully opaque, and should be hiding any portions of the planes behind it.
The code I’m using to render each plane is pretty much like follows (apologies, I can work on a sandbox but haven’t had the chance yet to extract it from its complete application):
image.diffuseTexture = new BABYLON.Texture(mySemiTransparentPng, scene);
image.diffuseTexture.hasAlpha = true;
image.diffuseTexture.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE;
image.diffuseTexture.wrapV = BABYLON.Texture.CLAMP_ADDRESSMODE;
image.opacityTexture = new BABYLON.TEXTURE(myTransparencyMaskPng, scene);
image.backFaceCulling = false;
I’m assuming I’m doing something wrong with how I’m using the textures and materials, and would appreciate any pointers in the right direction!
Thanks so much.