Day 46 - ⚡️ Quick - Cross Product and Normals

General / 04 July 2026

The cross product takes two vectors and returns a third perpendicular to both. That is how normals exist, and knowing that makes a surprising number of rendering quirks make sense.

source: wikipedia


What It Returns

Given two vectors a and b, the cross product a × b produces a vector pointing perpendicular to the plane they define. The direction follows the right-hand rule: curl your fingers from a toward b and your thumb points the way the result goes.

The magnitude scales with the area of the parallelogram the two inputs form - useful in some contexts, but for normals you normalize immediately after.


How It Gets Used

The most direct application is computing a face normal from triangle edges. Take two edges, cross them, normalize: face normal done.

Tangent space construction works the same way. To sample a normal map correctly, shaders need a tangent vector and a bitangent to build the local coordinate frame. Those come from the UV edge directions crossed against the surface normal. It's why tangent space normals can go wrong across UV seams or mirrored UVs: the tangent vectors don't line up cleanly on both sides.


The Winding Order Gotcha

Swap the order and the result flips: a × b and b × a point in opposite directions. This is the source of most "why is my normal backwards" problems. In practice it comes down to winding order: whether a triangle's vertices go clockwise or counter-clockwise from the camera. Flip the winding, flip the cross product, flip the normal.

It's also why back-face culling works at all. The engine checks which way the face normal points, and if it's facing away from the camera the triangle gets skipped.


Practical Takeaway

  • Cross product returns a vector perpendicular to both inputs. Normalize after.
  • Swap the input order and the result flips. Winding order determines which direction you get.
  • Tangent space depends on it too: UV seam errors are often a sign the tangent vectors are inconsistent across edges.

© 2026 Stefan Groenewoud. All views are my own, not those of my employer.