I’m trying to make the mesh show and hide based on the dot product result, when the camera move around, if the angle is more than 90 degree, mesh hide, if the angle is less than 90 degree, the mesh should show. According to the ray I see, why the camera direction is so low? Is this the right way to do it? Any suggestion to improve?
What is the effect you’re trying to achieve?
Based on some of the questions you were asking yesterday about rays I think I’m understanding what you are trying to achieve! Let me ask some clarifying questions while I work up some examples for dot product and fixes for your demo. 
Right now you have the ray coming out from the sphere.Do we want it to come from the camera? Also if the camera angle is more than 90 degrees relative to what? Relative to the center? Relative to the sphere? Is the box just for reference point?
A lot of this by the way is on the 3D math side, so I’d also suggest reading up on some related material. I’m also a big video watcher 
1 Like
The effect I want to achieve is more like the example here, Annotations (modelviewer.dev)
when the camera angle change, the spot on the model show and hide.
The camera angle is more than 90 degree relative every single mesh it need hide and show.
The box is just for reference, so it’s look clearer when you turn around.
For the ray, what I hope is it come from camera to each mesh.
1 Like
some of the positions in your pg are sharing instances creating weird artifacts, you could do it this way: https://playground.babylonjs.com/#6XIT28#1338
1 Like
You can not visualize the ray from the camera as it will be in the exact direction of the camera
I also notice something called normal in this example, not really sure how to get this normal, this looks like the direction this dot should be facing, should I calculate dot product between camera and this normal vector instead? Annotations (modelviewer.dev)
Yup you should use this and you can access it through the forward property
can you explain more how I can get this normal, if I use forward, all the vector would be facing (0,0,1), right? But I need some to face back, face left or right
not sure to understand. forward is the direction the mesh face in world space so for a hotspot it is the basically the direction the front face is looking at in world space
For some hotspot, we need to see it from, for example, is facing back direction, we should not see it from front until camera move to the back
The normal vector is a concept in maths that specifies the “direction” of a surface. When you define a plane, you also define the normal of that plane. As meshes are formed of triangles, and triangles can be thought of as a limited plane, each triangle of the mesh also has a normal as well:
I recommend taking some time to read and watch a little more material on normals, since they’re an essential concept for 3D programming:
https://www.gamedeveloper.com/disciplines/vector-maths-for-game-dev-beginners
What model-viewer calls the normal is the “direction” the mesh is facing. You can imagine this more easily with a more complex mesh, such as a character. This mesh will have many different normals for each triangle in that mesh, but we need to choose a single vector to represent what direction the character is facing. With this direction chosen, then the mesh angle to the camera can be calculated.
Another technique that can be done with normals is the “toon shader” illumination effect. It also uses the dot product to calculate between two directions, in this case, vertex normals, and the light direction: Create Your Own Toon Shader with Babylon.js! Part 1 - YouTube
3 Likes
I also threw together a simple demo with this idea: Babylon.js Playground
In this, the normal direction I chose to represent the front of the mesh is the one on the face with grass.
1 Like
Thank you, the explanation and the video attached is really helpful. Finally get the idea of this direction. And the article for Vector math helps me a lot.
I see in your playground, you choose the normal of that box to be (0,0,1).
I did some reading online, most of it is talk about normal as a plane, but how about if I just know the position of the mesh as a dot and need to get the normal of that mesh? How can I get the perpendicular vector I need to do the calculation? Does babylon has some existing method we can use?
To get the normal of a single vertex in a mesh, you take the average of the faces’ normals that vertex is a member of. This may already be calculated and stored as a property on the vertex if your mesh is using index buffers.
3 Likes
Thank you everyone for the help, learned a lot, I think I get something I need now
Box Examples | Babylon.js Playground (babylonjs.com)
3 Likes
Morning @pigga did a small follow-up on your demo by adding a label to match the sample demo! 
It’s actually really easy to do with Babylon GUI and linkWithMesh (line 46). Then I just added the visibilities to match with your dot product code.
1 Like
That is really cool, thank you for showing me how to make the gui to achieve the same effect. One more follow up question is do you know how to have a ray come out from the camera to the mesh? The effect I want to achieve is to detect if there any other mesh on the way from camera to the mesh, if there is, I just make the mesh hidden, all the playground I had before I think is from mesh to camera, not camera to mesh
1 Like
You can just flip the coordinates. Though not sure why it matters since it should achieve the same effect. What we will want to do is use the multipick and anything hit on the ray just hide.
I can try to get an example up for you shortly.
1 Like
One thing I’m not really understand is I see the ray point to the bottom, is that because camera is in the bottom? I think I need the ray come from where I’m looking at to the mesh, not from bottom Box Examples | Babylon.js Playground (babylonjs.com)
