Gui element or image put behind the mesh

Questions
1

Hi @all, In my scene i loaded a mesh and i added a image using gui for title purpose.
but when i used the image usin gui it works perfectly as i want.
But there is an issue like that, the image comes in front of mesh which is not looks good,
I want to try it put behind the back of mesh.

as you see this playground the same case here the button comes in front of mesh what if i want to put behind the mesh???

I tried put zIndex but not worked

function loadTitleTextUI() {
  // adding the titel ui
  const advancedTexture =
    new BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("myUI");

  let image = new BABYLON.GUI.Image(
    "layer",
    "assets/Tvs_iQube/textures/layerText.png",
    true
  );
  image.width = 0.35;
  image.height = 0.28;
  image.stretch = BABYLON.GUI.Image.STRETCH_UNIFORM;
  image.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
  // image.top = '-20%'
  image.paddingTop = 50
  image.zIndex = 1 // -1

  advancedTexture.addControl(image);
}
2

Hi,
I suppose you can do it with a 2 camera and layerMask approach. Something like that:

But then, I believe it depends what you have in your scene. It might become hard to decide which element the button should be behind or in front of. Actually not sure what you are trying to achieve using the fullscreen GUI. May be GUI for mesh would be more appropriate?

3 Likes