How to get the orientation of a mesh (without applying a material to the mesh)?

#1

Hi,

I’m experimenting in the following sandbox to understand facet face orientations.

https://www.babylonjs-playground.com/#N5H0JM#1

If I understand correctly what I am seeing, then when creating a custom mesh, by default, Babylon sets the front face of each facet as the side where the vertices of the facet (in the order specified) are positioned counterclockwise about the facet.

We can change the side orientation to clockwise by setting customMesh.overrideMaterialSideOrientation = BABYLON.Material.ClockWiseSideOrientation or by calling customMesh.flipFaces(...).

Is the appropriate way to determine the side orientation of a mesh (without setting a material) the following?

let orientation = (customMesh.overrideMaterialSideOrientation == null) ? 
    BABYLON.Material.CounterClockWiseSideOrientation : 
    customMesh.overrideMaterialSideOrientation;

Thanks,
Eric

#2

pinging @jerome who is the father of our facet mechanism

#3

Actually there’s no real notion of front face of a facet. The facets hold normals and these normals are the same orientation than the vertex normals. So, to answer you correctly, the facet normals are computed the same way than the vertex normals (actually it’s the same method that does both computations).
Changing the material face orientation doesn’t change the mesh geometry. I guess that flipFaces() should invert all the indices, so the normals.

#4

Thanks @jerome!

I must be using the word face incorrectly. I was going off the HOW TO Create Custom Meshes tutorial which reads

There are two faces to each facet; the face that the normal is pointing away from is the front face, the other is the backface. By default BabylonJS does not render the back face.

Can you tell me how this should read?

Also, to rephrase my previous question, is there another way to get the side orientation for a mesh (assuming it doesn’t have a material assigned) aside from checking the mesh’s overrideMaterialSideOrientation property?

#5

Let’s call “external” or “front” face the one reflecting the light by default.
Assuming the mesh you just built by your own is either planar, either has a permanent “external” face along its surface (what would be the interior and the exterior of a Moebius ribbon ? ), I suppose the best way would be to compute the dot product between the vector light.position-facet.position and the facet normal.
If positive, then this face will reflect the light. If using the camera position instead of the light one, this will tell you whether the camera is the side the light would be reflected or not.

The material property you just talked about does probably also the job. But as it’s a material property and not mesh property (about a mesh that you just built yourself), I wouldn’t bet it’s ever correctly set as you expect, by default. I would only rely only on the geometry.

#6

A facet is one of the triangles forming a mesh, defined by three vertex points. Imagine cutting out a triangle of paper and coloring one side of the triangle red and the other green. Your triangle now has one red face and one green face. Words and their meaning can always be difficult. Take the word side as an example, which I just used. If you see a triangle drawn on a piece of paper and you refer to the sides of a triangle it is pretty clear you mean the edges of the triangle. In the 3D world (like a triangle cut out from a piece of paper) the triangle can have 2 sides or 3 sides depending on what you mean by side. So generally in 3D the 3 sides of a triangle are called edges. Since the method in Babylon.js is called ‘backFaceCulling’ this is reflected in using the term ‘face’ for each of the 2 sides of the triangle.

Each triangular facet has two sides (faces) one we will call the front face and the other the back face. The three (non collinear) points of the facet form a plane. A normal vector to the plane is any vector perpendicular to the plane. Choose one of these and call that one the normal of the facet. Lie down on one face ( or one side of the plane the facet defines) of the facet and look up, if you are looking in the same direction as the normal you are on the front face, the other face is the back face.

The way the normal is chosen for a facet is by constructing the cross product of two vectors lying along two edges of the facet. Since the cross product of vectors is non- commutative the order and direction of the vectors will affect the direction of the normal. The edge vectors can be formed by going from vertex to the next vertex in a clockwise or counterclockwise direction. One way reverses the edge vector directions compared to the other and so also reverses the direction of the normal. Since in Babylon.js what you see rendered depends on the light source and the normal direction of the facet it is important to write the index order for each facet correctly so that the normal is calculated in a direction such that you can see the face you want to be seen.

3 Likes