GUI.AdvancedDynamicTexture.CreateForMesh and mesh alphaIndex error

Questions
1

The alphaIndex rendering of the GUI model and the model with the border enabled is wrong. The border is higher than the cube. How can I solve this problem?
PG: https://playground.babylonjs.com/#00ZP2B#16

2

Hmm :thinking: Interesting. I guess since you are creating the gui for mesh, you cannot set a layerMask for the GUI separate from the mesh. That doesn’t seem to work. Only thing I see here would be to dissociate the gui from the mesh (by creating a clone or a plane on the face of the cube to host the gui).
Else, may be there would be a way to reorder the edge rendering in a depth sorter? Let’s ask cc @carolhmj for a start…

3

I have a solution!
PG:https://playground.babylonjs.com/#00ZP2B#17
line 27

3 Likes
4

Yes, indeed. Though, I didn’t mention this (pseudo-solution) because it sort of depends on what else is in your scene. Working with rendering groups is just not always an ideal fit. But if it works for you, it’s an ez and efficient way.

5

Yep that wouldn’t work, because the GUI for mesh is treated like any other texture. I found two solutions: one to force opaque rendering on the GUI material, by either nulling the opacity texture in the material: AdvancedDynamicTexture.CreateForMesh alphaIndex high box | Babylon.js Playground (babylonjs.com), or setting ground.material.transparencyMode = 0. Another solution could be setting needDepthPrepass to true on the ground’s material: AdvancedDynamicTexture.CreateForMesh alphaIndex high box | Babylon.js Playground (babylonjs.com)

EDIT: Just correcting my understanding as I looked more into the code, the thing is that the edges renderer is the last object rendered for any rendering group, so the order goes:

box (opaque) → ground (alpha blended) → box’s edges

if you set the ground to be opaque or use the depth prepass, it’s going to write into the depth buffer and discard the edges’ lines that go behind it.

6

I can’t get rid of the frame, it’s very important when highlighting the model

var image = new BABYLON. GUI. Image("image");
image.source = 'textures/grass.png';

grass.png is sometimes transparent
Neither option works for me,still thank you!

7

What is it you call ‘the frame’… Do you mean the edgeRendering? The more I think of it, the more I believe you might need another approach to this. I’m just not sure what you are trying to achieve. Here we have only a box and a ground (supposingly representing a plane). I believe there’s more in your scene. Could you give us a bit more information towards the context?

8

I need edge, it’s very important when highlighting the model

var image = new BABYLON. GUI. Image("image");
image.source = 'textures/grass.png';

grass.png is sometimes transparent
Neither option works for me,still thank you!

“I can’t get rid of the frame”
This sentence is my expression error

9

Thanks for the answer. I’m still not sure to fully understand the entire context, like why is there a gui for mesh with just an image and not even parented to a mesh? Anyways, I’ll try answer your two questions, if I got this part right.

I don’t see why. You can still use visibility on the gui mesh or using depthPrePass you can also still set the alpha of the material. If you have another transparent mesh with edges you can use forceDepthWrite as explained in the doc

So, I understand the object is ‘highlighted’ with edgesRendering when picked somehow. And when not picked or something, the edges don’t show anymore. Here again, multiple options: You can disable/enable the edgeRendering or you could also just change the width.

Something like that, is it?: