How can I correctly compute vertex normals from a glTF positions buffer using JavaScript?

Below is an explanation with a couple of issues that usually come up when generating normals from an indexed positions buffer.

---

1. Wrong Index Increments (and Indexing Into the Normals Array)

Your position buffer is a flat array of numbers (x, y, z, x, y, z, …) and likewise your normals array is organized the same way. In glTF the indices array is made of vertex indices (each triangle uses 3 indices), so the loop should increment by 3, not 9. In your code you’re assuming that each triangle will use 9 consecutive indices:

JSCopied
for (let i = 0; i < indices.length; i += 9) {
  // ... process one triangle
}

That index stride is too high. Instead you should loop like this:

JSCopied
for (let i = 0; i < indices.length; i += 3) { 
  // ... process one triangle
}

Also, when you add a computed normal to a vertex in the normals array, remember that your vertices array is flat. If an index value is "a", then the position for that vertex is at indices
a*3, a*3+1, a*3+2. Therefore, when accumulating normals you should do:

JSCopied
normals[a*3]     += normal[0];
normals[a*3 + 1] += normal[1];
normals[a*3 + 2] += normal[2];

Find and replace every place where you index the normals array with the raw index from the indices buffer.

---

2. Using gl-matrix: vec3.create vs. vec3.fromValues

If you’re using gl-matrix, note that vec3.create() returns a zero vector. To create a vector from values you should use vec3.fromValues(x, y, z). For example, change:

JSCopied
const vert0 = vec3.create(
    vertices[indices[i]],
    vertices[indices[i + 1]],
    vertices[indices[i + 2]]
);

to

JSCopied
const vert0 = vec3.fromValues(
    vertices[indices[i] * 3],
    vertices[indices[i] * 3 + 1],
    vertices[indices[i] * 3 + 2]
);

Make sure that you multiply the index by 3 since the positions are stored as x, y, z in a flat array.

---

Revised Code Example

Below is an adjusted version of your loop that takes the above points into account. (Note: this example assumes you’re using gl-matrix for vector operations.)

JSCopied
// Create arrays from buffers (positions and indices assumed to be provided)
const vertices = new Float32Array(
  positionsBuffer,
  meshData.positions.byteOffset,
  meshData.positions.byteLength / 4
);

const indices = new Uint16Array(
  indexBuffer,
  meshData.indices.byteOffset,
  meshData.indices.byteLength / 2
);

// The normals array must align: three floats per vertex.
const normals = new Float32Array(vertices.length);

// Loop over each triangle (3 indices per triangle)
for (let i = 0; i < indices.length; i += 3) {
  // Get the three vertex indices for a triangle
  const i0 = indices[i];
  const i1 = indices[i + 1];
  const i2 = indices[i + 2];

  // Retrieve vertex positions from the flat array
  const vert0 = vec3.fromValues(
    vertices[i0 * 3],
    vertices[i0 * 3 + 1],
    vertices[i0 * 3 + 2]
  );
  const vert1 = vec3.fromValues(
    vertices[i1 * 3],
    vertices[i1 * 3 + 1],
    vertices[i1 * 3 + 2]
  );
  const vert2 = vec3.fromValues(
    vertices[i2 * 3],
    vertices[i2 * 3 + 1],
    vertices[i2 * 3 + 2]
  );

  // Compute the normal of the face: p = cross(B-A, C-A)
  // It's important to subtract correctly: out = (vert1 - vert0) x (vert2 - vert0)
  const edge1 = vec3.create();
  const edge2 = vec3.create();
  vec3.subtract(edge1, vert1, vert0);
  vec3.subtract(edge2, vert2, vert0);
  const faceNormal = vec3.create();
  vec3.cross(faceNormal, edge1, edge2);
  vec3.normalize(faceNormal, faceNormal);

  // Accumulate the computed face normal to the vertices of the triangle
  normals[i0 * 3]     += faceNormal[0];
  normals[i0 * 3 + 1] += faceNormal[1];
  normals[i0 * 3 + 2] += faceNormal[2];

  normals[i1 * 3]     += faceNormal[0];
  normals[i1 * 3 + 1] += faceNormal[1];
  normals[i1 * 3 + 2] += faceNormal[2];

  normals[i2 * 3]     += faceNormal[0];
  normals[i2 * 3 + 1] += faceNormal[1];
  normals[i2 * 3 + 2] += faceNormal[2];
}

// Normalize the accumulated normals for each vertex
for (let vi = 0; vi < vertices.length / 3; vi++) {
  const normal = vec3.fromValues(
    normals[vi * 3],
    normals[vi * 3 + 1],
    normals[vi * 3 + 2]
  );
  vec3.normalize(normal, normal);

  normals[vi * 3]     = normal[0];
  normals[vi * 3 + 1] = normal[1];
  normals[vi * 3 + 2] = normal[2];
}

---

Summary

• Use correct index strides: Process 3 indices per triangle and adjust the normals array indices by multiplying the vertex index by 3.
• Create vectors correctly: Use vec3.fromValues() to initialize vectors with positions (multiply indices by 3 when reading from the flat buffer).
• Ensure proper accumulation: Normalize the resulting normals after adding all the face normals.

With these corrections, you should see the expected vertex normals rather than mostly (0, 0, 0) values.