Face Normals

To compute a normal for an individual triangle, we first need two vectors that run through the triangle in different directions. The triangle's edges are good sources for these vectors. Take any two of the edge vectors and cross them to get a vector perpendicular to both. The resulting vector points away from the triangle; it's the triangle's normal.

This renderer shows a triangle with the two edge vectors that are crossed to generate the normal:

Normals for all the triangles are computed using this pseudocode:

content_copyfor each triangle
  # Look up vertex positions.
  positionA = triangle's first position
  positionB = triangle's second position
  positionC = triangle's third position

  # Find two edge vectors.
  vectorAB = positionB - positionA
  vectorAC = positionC - positionA

  faceNormal = cross vectorAB and vectorAC
  normalize faceNormal

for each triangle
  # Look up vertex positions.
  positionA = triangle's first position
  positionB = triangle's second position
  positionC = triangle's third position

  # Find two edge vectors.
  vectorAB = positionB - positionA
  vectorAC = positionC - positionA

  faceNormal = cross vectorAB and vectorAC
  normalize faceNormal

Having a face's normal is nice, but we can only associate data with the vertices in a WebGL renderer. Let's use these face normals to define normals at the vertices.