# Compute Normals seems not correct **URL:** \ **Category:** Questions\ **Created:** [December 1, 2021, 11:09am UTC](https://forum.babylonjs.com/t/compute-normals-seems-not-correct/25680 "2021-12-01T11:09:39Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![Freeman](https://avatars.discourse-cdn.com/v4/letter/f/ec9cab/32.png) [@Freeman](https://forum.babylonjs.com/u/Freeman)\ **Post date:** [December 1, 2021, 11:09am UTC](https://forum.babylonjs.com/t/compute-normals-seems-not-correct/25680/1 "2021-12-01T11:09:39Z")
Hi, The mesh using normals from Vertexdata.ComputeNormals looks weird, any wrong with it? [https://playground.babylonjs.com/#WGBIS5](https://playground.babylonjs.com/#WGBIS5) Thanks! ---
**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\ **Post date:** [December 1, 2021, 11:59am UTC](https://forum.babylonjs.com/t/compute-normals-seems-not-correct/25680/2 "2021-12-01T11:59:46Z")
From my point of view it looks nice (probably because I don’t know how it should look like). Could you kindly provide the reference of the desired look? ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/7/d/7d828e5e2b53294becdf2bbcc557e534a570e335.png) ---
**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\ **Post date:** [December 1, 2021, 12:08pm UTC](https://forum.babylonjs.com/t/compute-normals-seems-not-correct/25680/3 "2021-12-01T12:08:08Z")
I think the issue here is with the quality of the triangles. The normal of a vertex is computed from the triangles that contain that vertex, and having triangles that are too “stretched” leads to bad quality normals: ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/1/91c4ed40a80e9a8d6d9d295e6a3b52c4ae4ae2b0.png) The same mesh shape can be achieved in a variety of ways combining vertices, edges and faces, and those different ways are the possible “topologies”. Some topologies are better than others, like this example in Blender: ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/6/2/62049729401e7ec0c5fd9fa621ea03536c66623e.jpeg) [Why Do We Need Topology in 3D Modeling (thilakanathanstudios.com)](https://thilakanathanstudios.com/2016/09/why-do-we-need-topology-in-3d-modeling/) ---
**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\ **Post date:** [December 1, 2021, 12:33pm UTC](https://forum.babylonjs.com/t/compute-normals-seems-not-correct/25680/4 "2021-12-01T12:33:36Z")
When triangular facets share vertices by having the same index the normal for the vertex is the average of facet normals, see [Vertex Normals | Babylon.js Documentation](https://doc.babylonjs.com/divingDeeper/mesh/creation/custom/vertexNormals) Converting to a flat shaded mesh gives a different look to the mesh [https://playground.babylonjs.com/#WGBIS5#1](https://playground.babylonjs.com/#WGBIS5#1) which maybe what you need. ---
**Author:** ![jerome](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jerome/32/22_2.png) [@jerome](https://forum.babylonjs.com/u/jerome)\ **Post date:** [December 1, 2021, 12:42pm UTC](https://forum.babylonjs.com/t/compute-normals-seems-not-correct/25680/5 "2021-12-01T12:42:18Z")
Maybe this old explanation can help to understand : > **[the mystery of computeNormals](https://www.html5gamedevs.com/topic/17040-the-mystery-of-computenormals/)** > > Hi, As some of you (the most curious) asked me why I prefered to implement a dedicated normal computation for the Cylinder, I'll try to explain this with some PG. Note : all I'll show here with a ribbon is the same with any mesh built with the same... ---
**Author:** ![jerome](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jerome/32/22_2.png) [@jerome](https://forum.babylonjs.com/u/jerome)\ **Post date:** [December 1, 2021, 12:47pm UTC](https://forum.babylonjs.com/t/compute-normals-seems-not-correct/25680/6 "2021-12-01T12:47:24Z")
BTW, it’s impressive that 6 yo PG examples from the former forum still work with the current version of BJS Proven really effective backward compatibility ! 🙂 ---
**Author:** ![Freeman](https://avatars.discourse-cdn.com/v4/letter/f/ec9cab/32.png) [@Freeman](https://forum.babylonjs.com/u/Freeman)\ **Post date:** [December 1, 2021, 2:21pm UTC](https://forum.babylonjs.com/t/compute-normals-seems-not-correct/25680/7 "2021-12-01T14:21:40Z")
Hi all, To make it more clearly, I change the light direction to Zero to compare the looks. This is what I need: [https://playground.babylonjs.com/#WGBIS5#4](https://playground.babylonjs.com/#WGBIS5#4) And this looks not good: [https://playground.babylonjs.com/#WGBIS5#5](https://playground.babylonjs.com/#WGBIS5#5) Why I have this issue because I 'd like to merge all my meshes into a SPS, the SPS must provide the normals to build the mesh (If remove line 29 in below PG, errors happend, It is a bug?) [https://playground.babylonjs.com/#WGBIS5#6](https://playground.babylonjs.com/#WGBIS5#6) @jerome@labris Thanks. ---
**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\ **Post date:** [December 1, 2021, 2:44pm UTC](https://forum.babylonjs.com/t/compute-normals-seems-not-correct/25680/8 "2021-12-01T14:44:40Z")
Why SPS? SPS is for repeating one mesh many times not for one mesh. ---
**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\ **Post date:** [December 1, 2021, 2:51pm UTC](https://forum.babylonjs.com/t/compute-normals-seems-not-correct/25680/9 "2021-12-01T14:51:29Z")
> [@Freeman](#): > > the SPS must provide the normals to build the mesh (If remove line 29 in below PG, errors happend, It is a bug?) Not a bug, SPS calculates its normals from the supplied mesh normals. ---
**Author:** ![Freeman](https://avatars.discourse-cdn.com/v4/letter/f/ec9cab/32.png) [@Freeman](https://forum.babylonjs.com/u/Freeman)\ **Post date:** [December 1, 2021, 2:54pm UTC](https://forum.babylonjs.com/t/compute-normals-seems-not-correct/25680/10 "2021-12-01T14:54:07Z")
My scene has huge meshes, I’m trying to use SPS to improve the performance. When I add all the meshes into the SPS, it looks very different from the original, that’s why I think the normals cause this issue. ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [December 1, 2021, 4:17pm UTC](https://forum.babylonjs.com/t/compute-normals-seems-not-correct/25680/11 "2021-12-01T16:17:43Z")
Yes man!! 😃 ---
**Author:** ![Blake](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blake/32/21509_2.png) [@Blake](https://forum.babylonjs.com/u/Blake)\ **Post date:** [December 1, 2021, 6:00pm UTC](https://forum.babylonjs.com/t/compute-normals-seems-not-correct/25680/12 "2021-12-01T18:00:12Z")
> [@Freeman](#): > > My scene has huge meshes, I’m trying to use SPS to improve the performance. When I add all the meshes into the SPS, it looks very different from the original, that’s why I think the normals cause this issue. If the problem is that the meshes are too big, I don’t think adding them all to an SPS will help because that will create an even bigger mesh… It might help thou to go the opposite direction and break each mesh into smaller meshes, that way the parts that are offscreen aren’t rendered as much. ---
**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\ **Post date:** [December 1, 2021, 6:51pm UTC](https://forum.babylonjs.com/t/compute-normals-seems-not-correct/25680/13 "2021-12-01T18:51:35Z")
Check this out for optimizing your scene: [Optimizing Your Scene | Babylon.js Documentation (babylonjs.com)](https://doc.babylonjs.com/divingDeeper/scene/optimize_your_scene) ---
**Author:** ![Blake](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blake/32/21509_2.png) [@Blake](https://forum.babylonjs.com/u/Blake)\ **Post date:** [December 1, 2021, 7:13pm UTC](https://forum.babylonjs.com/t/compute-normals-seems-not-correct/25680/14 "2021-12-01T19:13:11Z")
> [@carolhmj](#): > > Check this out for optimizing your scene: [Optimizing Your Scene | Babylon.js Documentation (babylonjs.com)](https://doc.babylonjs.com/divingDeeper/scene/optimize_your_scene) The documentation on Optimizing Your Scene has a section for how to optimize a “Scene with large number of meshes”, but it would be good to also have a section for how to optimize a “Scene with large meshes”. IDK enough about it to volunteer to add it myself thou… 🙂 ---
**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\ **Post date:** [December 1, 2021, 8:32pm UTC](https://forum.babylonjs.com/t/compute-normals-seems-not-correct/25680/15 "2021-12-01T20:32:28Z")
One needs to define more exactly what a ‘large mesh’ is actually. Is it one inseparable mesh, or it is a group of meshes, or it is just too big for a camera to fit to the view. There could be different approaches in different cases of ‘large meshes’. But in all cases the first question is “What should user to experience at any given moment and how to achieve this with minimal losses” 🙂 ---
**Author:** ![Freeman](https://avatars.discourse-cdn.com/v4/letter/f/ec9cab/32.png) [@Freeman](https://forum.babylonjs.com/u/Freeman)\ **Post date:** [December 2, 2021, 12:33am UTC](https://forum.babylonjs.com/t/compute-normals-seems-not-correct/25680/17 "2021-12-02T00:33:03Z")
Hi all, Sorry not described clearly, actually I has **huge number** of meshes, I’m trying SPS to reduce the drawcall. I’d like to come back to the normals： [https://playground.babylonjs.com/#WGBIS5#4](https://playground.babylonjs.com/#WGBIS5#4) In this PG, I removed the normals of vertexData in line 29, but it looks fine. So I wonder where does BABYLON compute the normals in this case? A mesh without normals should be black, right? @Deltakosh@jerome Thanks. ---
**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\ **Post date:** [December 2, 2021, 12:42am UTC](https://forum.babylonjs.com/t/compute-normals-seems-not-correct/25680/18 "2021-12-02T00:42:14Z")
If no normals data are provided they are computed by default in the shader for you like this: ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/8/88c820ed2f230b76a7fde51eafc8e8d30d68d8e1.png) ---
**Author:** ![Freeman](https://avatars.discourse-cdn.com/v4/letter/f/ec9cab/32.png) [@Freeman](https://forum.babylonjs.com/u/Freeman)\ **Post date:** [December 2, 2021, 12:52am UTC](https://forum.babylonjs.com/t/compute-normals-seems-not-correct/25680/19 "2021-12-02T00:52:21Z")
Hi @sebavan , You hit my original concern: As the normals computed in the shader (PG4) and by VertexData.ComputeNormals (PG5), looks so different That’s why I doubt the normals seems not correct Thanks ---
**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\ **Post date:** [December 2, 2021, 9:21am UTC](https://forum.babylonjs.com/t/compute-normals-seems-not-correct/25680/20 "2021-12-02T09:21:39Z")
@Freeman when you call ```javascript BABYLON.VertexData.ComputeNormals(positions, indices, normals); ``` and set the mesh normals using ```javascript vertexData.normals = normals; ``` the function calculates the normals based on the algorithm as descibed in earlier posts and the shader uses these values to render the mesh. Should you bypass these steps the shader uses its own (different) alogorithm to calculate the normals. The `ComputeNormals` function has access to all facet triangles that share a particular vertex index and so calculates the average of the shared facet normals and applies this to the vertex. A shader can only access one facet triangle at a time so a shared vertex normal will end up being that of the last facet accessed and these normals used by the renderer are not stored by the mesh in the CPU. Now because of the way the SPS is built the algorithm used expects to find the normals stored in the passed mesh, > [@Freeman](#): > > remove line 29 in below PG #6 ```javascript SPS.buildMesh(); ``` finds non existant normals at the step where it needs them and so produces an error long before it gets to calling the shader. One way to solve your problem is, as I said, to use `convertToFlatShadedMesh` However as this increases the number of indices and maybe the number of vertices there is another way which is to correct your mesh data - coming next post. ---
**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\ **Post date:** [December 2, 2021, 9:33am UTC](https://forum.babylonjs.com/t/compute-normals-seems-not-correct/25680/21 "2021-12-02T09:33:15Z")
@Freeman When you look at the data in your positions array some z values are 12.5 and some 12.3 the difference though minor is enough to produce different average normals at different vertices. The difference between these averaged normals is enough to produce the different rendering for different facet triangles. By making all the z values 12.5 your mesh now lies completely in the XY plane and so all normals for all facets are along the Z axis and so are their averages. [https://playground.babylonjs.com/#WGBIS5#7](https://playground.babylonjs.com/#WGBIS5#7) [Next page](https://forum.babylonjs.com/t/compute-normals-seems-not-correct/25680.md?page=2)