Unable to render faces with the correct normal direction correctly

Questions
,
1

I needed to render a car model in Babylon. js, but this model was not a common data type. So, I extracted the vertex data and normal data from the car skin and imported it into Babylon. js to render with a custom mesh type. However, the normal direction is not rendering correctly in Babylon. js. Due to the need for images to illustrate my issue, and I am a new user and cannot upload attachments, I have uploaded a PDF file to my cloud drive.
Here is the link to the file.
Here is my source code

Thank you for your thorough analysis and response!

2

Hello @tryzang !

Welcome!

Sort your indices in the other direction. The normals will point outwards :wink:

image
image982×546 30.5 KB

3

Thank you very much. I have resolved this issue according to your instructions
That is to say, when performing visual rendering for observers, it is done according to the clockwise or counterclockwise direction of points, and is independent of the normal vector in the normals variable. Visual rendering normals and ray rendering normals are independent of each other, right?

4

You’re welcome!

Here is the documentation on normals:
https://doc.babylonjs.com/features/featuresDeepDive/mesh/creation/custom/vertexNormals

There is a helper function in babylon.js which computes the normals:
BABYLON.VertexData.ComputeNormals()

I’m not sure I understand what are you asking here :slight_smile: Normal is the direction which the face is oriented to. Ray rendering normals?

5

If material.backFaceCulling is not enabled for backside culling, its backside will not be rendered. The backside determination here is based on the index order of triangle vertices, not vertex normalsvertexData.normals. Vertex normals only affect the rendering result of light and shadow, right.

6

Yes and No :slight_smile:

So the vertex order is the one influencing culling and help determining which side of a triangle is considered the back one. Then you can chose to also disable backfaceCulling if need be.

The normals attribute on the other hand are values passed by the user within an attribute and so they do not need to match a triangle normals fortunately or we could never display smooth sphere with a reasonable amount of vertices.

That said it is then normally really hard to create double sided meshes without doubling the vertices count to have normals in both direction depending whether you look the back or the front of a face.

In Babylon, if you rely on PBRMaterial, you can set doubleSided to true so that the shader will “flip” the normal for you when on the backface to be sure the lighting is still accurate.