Surface Normals

Surface Normals
Fields: Geometry and Calculus
Image Created By: Nordhr

Surface Normals

This picture is of plane segments in different rotations in space. They each have an arrow coming out of their front face at exactly $90^{^{\circ}}$ (orthogonal) to the surface.

Basic Description

Several kinds of computation in computer graphics depend on knowing the normal to a surface at a point. Often the point is a vertex of a graphics primitive, though it may be more general. In this section we will describe two ways to compute a normal, one geometric and one analytic. While both of these techniques will create a normal to the surface, what is really important is the direction of the normal. The direction is a unit vector, so the results below must be normalized to give us the actual normal direction.

Geometric Normal

All the graphics primitives lie in a plane, so all the normals at any point in the primitive are the same. We can get the normal by taking any two vectors in the plane and computing their cross product, with the order chosen by taking the second vector as one lying in the positive angle direction from the first with angle less than π. The easiest choice of vectors comes from taking two adjacent edges, as shown. While this is shown for a triangle (and we’ve shown that all graphics primitives are basically made up of triangles) it also works for planar quads and polygons.

Taking the cross product of any two vectors tangent to the surface, not just polygon edge vectors, will give the same result.

A More Mathematical Explanation

[Click to view A More Mathematical Explanation]

Analytic Normal

If you are working on a surface that is defined analytically, there are technique [...]

[Click to hide A More Mathematical Explanation]

Analytic Normal

If you are working on a surface that is defined analytically, there are techniques from calculus you can use to get a normal. Some of these work on vertices of primitives that define the surface; some of these can work on every point in the surface.
Let’s consider surfaces where the surface is defined by a single analytic function

$F(u,v) = (f_x (u,v), f_y (u,v), f_z (u,v))$

We then have the two directional derivatives (which give tangents)

$F_u (u,v) = \frac{\partial F(u,v)}{\partial u} = (\frac{\partial f_x }{\partial u}, \frac{\partial f_y }{\partial u}, \frac{\partial f_z }{\partial u})$

and

$F_v (u,v) = \frac{\partial F(u,v)}{\partial v} = (\frac{\partial f_x }{\partial v}, \frac{\partial f_y }{\partial v}, \frac{\partial f_z }{\partial v})$

Then both $F_u (u,v)$ and $F_v (u,v)$ are vector-valued, and the cross product $F_u (u,v) \times F_v (u,v)$ of these two directional derivatives, when normalized, gives us a normal to the surface.

If you have something like Bézier patches, the parametric equation in two variables looks like

$f(u,v) = \sum_{i=0}^{3} \sum_{i=0}^{3} f_i (u)f_j (v)P_{ij}$

with the points control points $P_{ij}$ and the functions $f_i$ mapping $R^1$ to $R^3$. The partial derivatives of this function are

$\frac{\partial f(u,v)}{\partial u} = \sum_{i=0}^{3} \sum_{i=0}^{3} \frac{\partial f_i (u)}{\partial u} \times f_j(v) \times P_{ij}$ and

$\frac{\partial f(u,v)}{\partial v} = \sum_{i=0}^{3} \sum_{i=0}^{3} f_i (u) \times \frac{\partial f_j (v)}{\partial v} \times P_{ij}$

The separation of the variables in each parametric direction may make this a little simpler, or at least give you a pattern you can implement to cover a wide number of examples.

In both cases, the vertices of your graphics primitives are given by subdividing the parameter space. You can apply the cross-product technique to only the vertices to get the normals at each vertex. From there you can use different shading techniques that interpolate for each pixel to draw each primitive.

It’s worth noting, however, that you could do your interpolation in the parameter domain instead of pixel space when you draw each primitive. If you do this, then you can evaluate the directional derivatives and calculate the normal exactly for each parameter point, and this can give you an image that is superior to any pixel interpolation technique.

Why It's Interesting

Surface normals are often used in graphics for lighting and shading. The amount of highlight created by a light source is dependent on the angle between the surface normal and the light. They can also be used to detect silhouette edges.

Teaching Materials

There are currently no teaching materials for this page. Add teaching materials.

References

Page written by Steve Cunningham.

---

If you are able, please consider adding to or editing this page!

Have questions about the image or the explanations on this page?
Leave a message on the discussion page by clicking the 'discussion' tab at the top of this image page.