Why do the custom mesh's normals not look like Box's normals?

[zhangyahan]

Babylon.js Playground

I calculate normals using ComputeNormals method, but the calculated normals are not like box mesh，Should I calculate the normals for the top face and side face of the custom mesh separately

[Heaust-ops]

heh???

I can’t play this PG, is this cuz it was for webgpu?

[zhangyahan]

This is weird, the same thing happened to me，before is work

open a default pg, not work too

[Heaust-ops]

oh yeah, default don’t work either, maybe a broken deploy? lol : O

+ it’s only broken for typescript

[alexchuber]

Looks like the TypeScript playgrounds have been fixed!

Anywho, this is expected behavior. The length of the normal lines from “Render vertex normals” is proportional to the mesh’s bounding box size. We do this to help users better see the normals

I added the relevant code to your PG so you can see how it’s calculated:

Babylon.js Playground

[zhangyahan]

Thank you, I may not have expressed it clearly, I want the normals on the corners of the custom mesh to be like the corners of the box, generating 3 normals. There is only one normal line at the corner of the custom mesh, and its angle is public. Should I calculate normals separately for planes and side?

[Evgeni_Popov]

You will have to convert the mesh to flat shaded if you want each triangle to have its own vertices, that are not shared with other triangles:

Babylon.js Playground

[zhangyahan]

Big thanks to you and @alexchuber and the folks in the community, this solved my problem