Hallo everyone,
How to make the GUI button translucent when it is blocked by another mesh? When the button is rotated to the back or bottom of the cylinder, I want it to become translucent.
Hello! The 3D for e-commerce tutorial series: 3D for E-Commerce - Custom Experience | Babylon.js Documentation (babylonjs.com) has some examples of hotspots that change visibility based on being blocked or not 
Thank you for your answer.
But I think my model is a bit more complicated than those examples. I updated my model.There is a lid in my model. The hotspot is inside the model. When I close the lid, I want the hotspot to be translucent. I made the hotspot in Babylon.js not in blender. I have many similar models and need to add hotspots inside. Is there a general way to achieve my purpose other than by figuring out the threshold of camera and the null’s x-axis individually.
If you just need to hide the hotspots when the lid closes there is an even simple way which is doing it when the lid closing animation ends Grouping Animations | Babylon.js Documentation (babylonjs.com)
Just want to make sure I understand this correctly, do you mean the ‘target’ from the GUI or the yellow mesh push button? If it’s your grey button named ‘target’ currently in the FS GUI, I don’t think it will work to your satisfaction. In this case I would rather create a plane and a GUI for mesh that’s placed just behind the door. In which case you can work it through (i.e.) the alpha, alphaIndex and transparencyMode. With a nice transition between the door open, closing and closed.
Yes, i mean the ‘target’. I want this button to become translucent, when I close the door or rotate the camera to the back or side of the model.
Do you mean i can create a plane and a GUI as the ‘target’ button. When the door is closed, i can change the alphaIndex of the part (like door ), which in front of the ‘target’ button?
Yes, that was my first thought and I quickly tried this. But there is still a harsh transition between the two states when you change the alphaIndex. Now that I’m sure of what you want, let me see if I can investigate a little for a better solution. I believe ideally, the door would make for the occlusion on the button (and eventually the line) in real-time. May be by using a procedural dynamicTexture instead of the ADT.
Not entirely sure how to do that yet but if I find out I’ll let you know.
Else, may be @PatrickRyan has an idea of how this can be dealt with?
@Cie and @mawa, I just happen to have an example I did a while ago that does exactly this. I was working with a team who was building a product viewer and wanted to have several features built so I put each one of them into the same demo. Apologies for the sheer amount of code here, but I tried to comment heavily so you can decipher what is going on. This example shows material variants controlled by gui buttons, split screen comparisons, interactivity hinting, and hot spots that appear when the correct angle between camera and feature is present.
For the most part, I am handling the visibility of the hotspots in the node material since each hotspot needs to handle it’s own visibility independently of all other hot spots. You can see as you rotate the camera that the hotspots fade out as the feature they are highlighting moves out of the camera’s view.
This is a per frame operation, so you could handle it in code, but since the shader is already doing per frame calculations, it’s just as easy to handle it there. Basically, what is happening is that the alpha value of the shader is being driven by the dot product of the view direction and a custom vector assigned to the hot spot. In this case, I am setting a custom forward vector for the hotspot because I am rendering the quad looking at the camera so it is always round. This could also be accomplished by setting a parent transform on the hotspot that has the forward vector you want and using that vector for your dot product.
The min angle and max angle are the values of the dot product that set the value of the alpha from 0 to 1 and are determined by the angles you want the hotspots visible.
const hotspots = [
{
name: "hotspot_loop",
position: new BABYLON.Vector3(12.0, 13.25, -0.4),
forward: new BABYLON.Vector3(-1, 0, 0),
angleMin: -0.75,
angleMax: -0.6,
selected: false,
toastVersion: 0,
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
},
{
name: "hotspot_eyelet",
position: new BABYLON.Vector3(-3.8, 7.0, -3.5),
forward: new BABYLON.Vector3(0, 0, 1),
angleMin: 0.3,
angleMax: 0.45,
selected: false,
toastVersion: 1,
description: "Ut hendrerit euismod nisi nec eleifend."
}
]
The reason I went with a quad in the scene and not GUI in this case is because of the animations that are done to the hotspots on hover and click, which are also done in the shader.
However, if you want to do the same technique with GUI elements, you can set up much of the same mechanism with a transform in scene to use the forward vector dotted with the view angle in code. Then you transform this value to a 0-1 range and pass that to the alpha value of the GUI control. In this case you aren’t doing it in the shader, but instead in a function added to an observable such as the onBeforeRenderObservable.
I hope this example helps, but I know it is a very large example so please feel free to ping back with more questions.
2 Likes
Yes, I thought it would in fine take something like this. Even if it’s a bit hard to decipher, it’s awesome that you already did the job 
. I believe it should help A LOT.
2 Likes