\( \def\sc#1{\dosc#1\csod} \def\dosc#1#2\csod{{\rm #1{\small #2}}} \newcommand{\dee}{\mathrm{d}} \newcommand{\Dee}{\mathrm{D}} \newcommand{\In}{\mathrm{in}} \newcommand{\Out}{\mathrm{out}} \newcommand{\pdf}{\mathrm{pdf}} \newcommand{\Cov}{\mathrm{Cov}} \newcommand{\Var}{\mathrm{Var}} \newcommand{\ve}[1]{\mathbf{#1}} \newcommand{\mrm}[1]{\mathrm{#1}} \newcommand{\ves}[1]{\boldsymbol{#1}} \newcommand{\etal}{{et~al.}} \newcommand{\sphere}{\mathbb{S}^2} \newcommand{\modeint}{\mathcal{M}} \newcommand{\azimint}{\mathcal{N}} \newcommand{\ra}{\rightarrow} \newcommand{\mcal}[1]{\mathcal{#1}} \newcommand{\X}{\mathcal{X}} \newcommand{\Y}{\mathcal{Y}} \newcommand{\Z}{\mathcal{Z}} \newcommand{\x}{\mathbf{x}} \newcommand{\y}{\mathbf{y}} \newcommand{\z}{\mathbf{z}} \newcommand{\tr}{\mathrm{tr}} \newcommand{\sgn}{\mathrm{sgn}} \newcommand{\diag}{\mathrm{diag}} \newcommand{\Real}{\mathbb{R}} \newcommand{\sseq}{\subseteq} \newcommand{\ov}[1]{\overline{#1}} \DeclareMathOperator*{\argmax}{arg\,max} \DeclareMathOperator*{\argmin}{arg\,min} \)

6   Normal vectors


We learned in the last chapter that we model shapes of objects by modeling their external surfaces. Normal vectors are common properties of surfaces that must be taken to account when creating any surface models.

We have seen the term "normal vector" before in Section 3.7.5. A normal vector to a plane is a vector that is perpendicular to it. A normal vector to a surface is a vector that is "perpendicular" to that surface in some sense. However, we have to be careful about its definition because a general surface is not completely flat like a plane, and so we cannot conveniently measure the angle between a vector and a surface to decide whether they are perpedicular to each other or not. (There is a way to extend the definition, of course!)

We care about normal vectors because they tell us about the "directions" of the surface. These directions can be used to perform (1) hidden surface removal (Chapter XXX) and (2) shading (Chapter XXX). Shading is largely about calculating how light interacts with a surface, and this interaction depends on the surface's geometry. The surface's directions, conveyed by normal vectors, are geometric information that plays a central role in lighting calculation.

Now, the confusing thing about normal vectors, at least in the field of computer graphics, is that there are multiple kinds of them. The normal vector we just talked about is called the surface normal vector. When we model shapes with triangle meshes, we deal with two more types: face normal vector and vertex normal vector. Let us now discuss them in turn.

6.1   Surface normal vectors

6.1.1   Normal vectors to a flat surface

A flat surface is a surface such that there is a 2D plane that contains it. Recall from Section 3.7.5 that a 2D plane in 3D space can be defined by (1) a point on the plane and (2) a vector called the "normal vector." The normal vector has the property that it is perpendicular to the plane, meaning that it is perpendicular to any vectors that is in that plane. Now, if a vector is perpendicalar to a plane, it is also perpendicular to any flat surface contained in that plane. So, we say that a normal vector to the plane is also a normal vector to the flat surface as well.

Let $\ve{n}$ be a normal vector to a flat surface. We know that it is not the only normal vector because because $2\ve{n}$, $3.14\ve{n}$, $-\ve{n}$, or any $c\ve{n}$ where $c \neq 0$ is also perpendicular to the flat surface.


Figure 6.1 A flat surface (represented by the blue rectangle) inside a plane (represented by gray dashed lines) has many normal vectors. Each vector points either upward or downward, but there is no restriction on its length.

To avoid ambiguity about the length of normal vectors, we often require that normal vectors be unit vectors. In other words, we prefer only to talk about $\ve{n}$ such that $\ve{n} = 1$. With this restriction, we have that a flat surface has two distinct (unit) normal vectors, and they point in the exact opposite direction.


Figure 6.2 By restrict ourselves to only consider normals vectors that have unit length, we have that a flat surface has two distinct normal vectors. They point in the exact opposite directions.

6.1.2   Orientation of a flat surface and "the" normal vector

The fact that there are two distinct normal vectors to a flat surface corresponds to the fact that surface has two sides. Now, we may choose to call one side the "front" side and the other the "back" side. This choice is arbitrary. After we have picked the side to call "front," we have decided the flat surface's orientation. In effect, we have chosen the way the flat surface is "facing." Picking the side to call "front" is equivalent to pick one of the two normal vectors to serve as "the" (one and only one) normal vector of the surface over the other. In this book, the normal vector is on the front side. In other words, the front side is the side we see when we look in the opposite direction of the normal vector. As a result, the choise of the normal vector reflects the orientation of a flat surface.

 
(a)   (b)

Figure 6.3 (a) We take a side view of the flat surface in Figure 5.9. We see that the surface has two sides, agreeing with the face that it has two distinct (unit) normal vectors. (b) We can pick a side we call the "front" side. This is equivalent to picking one of the two normal vectors to serve as "the" normal vector of the surface. In this book, the normal vector always points away from the front side.

So, from now on, the normal vector of a flat surface is the unit vetor that:

  1. is perpendicular to the surface, and
  2. points away from the side we consider to be the front side.

Let us stress that the normal vector to a flat surface is perpendicular to that surface as a whole. This means that we can place the normal vector anywhere on the surface, and the normal would be perpendicular to the surface at that point.

6.1.3   Regular surfaces

Curved surfaces such as spheres, ellepsoids, torii are used by artists approximate shapes of 3D objects. These surfaces belong to a class of surfaces called regular surface where the notion of normal vectors are well defined.


Figure 6.4 A sphere, an ellipsoid, and a torus are examples of regular surfaces.

Intuitively, regular surfaces are surfaces that are "locally flat." This means that, when you pick a point on the surface and zoom in on it close enough, the surface in your vision should look flat. Another way to think about this is to imagine the surface to be very big and yourself to be a small creature standing on it. If the surface is a manifold, then it looks like you are standing on a flat plane. In fact, we all have this experience. The earth is round (i.e., its shape can be approximated quite well by a sphere or an ellipsoid), but we can hardly observe its curvature while standing at sea level. It took a long time for humanity to realize that the earth is not flat! (Sadly, some people believe it is even now.)

We will not, however, define the regular surface mathematically because doing so requires much mathematical machinery that we will not use again in the rest of the book.1

6.1.4   Tangent planes and surface normal vectors

A regular surface has a property that allows it to have normal vectors. Each point $P$ of the surface has a plane called the "tangent plane" that "touches" the surface at $P$. For other types of surfaces, the existence of tangent planes are not gauranteed.

Formally, a secant plane to a surface is a plane that passes through three points of the surface. Let $P$ be a point on a surface $S$. We can force the three points to be closer and closer to $P$. Taking the limit of this process, the secant plane may approach a unique plane that contains $P$. This plane, if it exists, is called the tangent plane at $P$. It is the plane that best approximates the surface around $P$ among all the other planes. For a regular surface, a tangent plane exists for every point. As a result, a regular surface appears locally flat because the surface can be approximated locally by tangent planes.

 
(a) (b)
Figure 6.5 (a) A secant plane is a plane that passes through three points on a surface. (A plane is infinitely wide, but we show only a part of it for clarity.) (b) A tangent plane is the limit of the secant plane when the three points are forced to approach a single point. In this case, the point is the north pole of the sphere. The tangent plane "touches" the sphere at that point.

We say that a vector $\ve{v}$ is tangent to a surface $S$ at point $P$ if $\ve{v}$ lies in the tangent plane at $P$. We call such a vector $\ve{v}$ a tangent vector.

We say that a vector $\ve{n}$ is normal to a surface $S$ at point $P$ if the vector is perpendicular to the tangent plane at $P$. Such a vector is called a normal vector or a surface normal vector of $S$.

 
(a) (b)
Figure 6.6 Tangent vectors and normal vectors are defined in terms of the tangent plane. Here, we consider the tangent plane at the north pole of the pink sphere. Examples of tangent vectors are shown in (a), and examples of normal vectors are shown in (b).

If $S$ is a regular surface, then every point on it has a tangent plane and, consequentially, (infinitely many) normal vectors. Following the discussion in Section 6.1.1, we typically require that normal vectors be unit vectors. As a result, each point on $S$ has two normal vectors. One points away from the "front" side of the tangent plane, and the other from the "back" side.

6.1.6   Examples

Let us consider three simple regular surfaces and learn what their normal vectors and tangent planes are.

6.1.6.1   Plane

It is important to recognize that a plane is a regular surface. The plane is locally flat because it is globally flat. The tangent plane of the plane is the plane itself. The two unit normal vectors at all points are the same ones.

6.1.6.2   Infinite Cylinder

Let us consider an infinitely long cylinder or radius $r$ whose axis is the $z$-axis. The set of points that constitute the cylinder is given by $$ \{ (x,y,z) : x^2 + y^2 = r^2 \}.$$ Now, let $P = (p_x, p_y, p_z)$ be a point on the cylinder. It turns out that the vector $\ve{n} = (p_x,p_y,0)$ is a normal vector to the cylinder at $P$. So, the tangent plane at $P$ is given by: \begin{align*} &\{ (x,y,z) : ((x,y,z) - P) \cdot \ve{n} = 0 \} \\ &= \{ (x,y,z) : (x-p_x, y-p_y, z-p_x) \cdot (p_x, p_y, 0) = 0 \} \\ &= \{ (x,y,z) : (x - p_x)p_x + (y - p_y)p_y = 0 \} \\ &= \{ (x,y,z) : p_x x + p_y y - p_x^2 - p_y^2 = 0 \} \\ &= \{ (x,y,z) : p_x x + p_y y - r^2 = 0 \}. \end{align*} The last line follows from the fact that $(p_x,p_y,p_z)$ is a point on the cylinder, so it must be the case that $p_x^2 + p_y^2 = r^2$.

We can see a reason why the normal is $(p_x,p_y,0)$ by considering the cylinder's cross section. If we look at the intersection of the cylinder with the plane $z = p_z$, then we would see the cylinder's cross section as a circle of radius 1 whose center is the point $O = (0,0,p_z)$. The vector $(p_x, p_y, 0) = P - O$ is parallel to the line segment $\overline{OP}.$ Moreover, we know from Euclidean geometry that $\overline{OP}$ is perpendicular to the tangent line to the circle at $P$. So, $(p_x, p_y, 0)$ is perpendicular to the tangent line, which is a part of the tangent plane.

 
(a) (b)
 
(c) (d)
Figure 6.7 (a) The infinite cylinder under discussion. (b) Some normal vectors of the infinite cylinder. Each vector is placed at the point where it is perpendicular to. (c) Some tangent planes of the infinite cylinder. (d) An examplation for why $\ve{n} = (p_x, p_y, 0)$ is a normal vector at $P = (p_x, p_y, p_z)$. We can see that, when looking at the cross section of the cylinder with the plane $z = p_z$, the segment $\overline{OP}$, which is parallel to $\ve{n}$, is perpendicular to the tangent line to the cirlce at $P$.

Remember that $(p_x, p_y, 0)$ is but one of the infinitely many normal vectors at $P$. If $r \neq 1$, it is not a unit vector. If we restrict ourselves to talk only about unit normal vectors, then they are \begin{align*} \frac{\ve{n}}{\| \ve{n} \|} &= \frac{(p_x, p_y, 0)}{\sqrt{ p_x^2 + p_y^2 }} = \bigg( \frac{p_x}{r}, \frac{p_y}{r}, 0 \bigg), \\ -\frac{\ve{n}}{\| \ve{n} \|} &= \bigg( \frac{-p_x}{r}, \frac{-p_y}{r}, 0 \bigg). \end{align*}

6.1.6.3   Sphere

Consider the sphere whose radius is $r$ and whose center is the origin is the point $O = (o_x, o_y, o_z)$. The sphere is the set \begin{align*} \{ (x,y,y) : (x - o_x)^2 + (y - o_y)^2 + (z - o_z)^2 = r^2 \}. \end{align*} Let $P = (p_x, p_y, p_z)$ be a point on the sphere. The vector $$\ve{n} = P - O = (p_x - o_x, p_y - o_y, p_z - o_z)$$ is a normal vector to the sphere at $P$. As a result, the tangent plane at $P$ is given by \begin{align*} &\{ (x,y,z) : ((x,y,z) - P) \cdot \ve{n} = 0 \} \\ &= \{ (x,y,z) : (x-p_x, y-p_y, z-p_z) \cdot (p_x, p_y, p_z) = 0 \} \\ &= \{ (x,y,z) : p_x x + p_y y + p_z z - p_x^2 - p_y^2 - p_z^2= 0 \} \\ &= \{ (x,y,z) : p_x x + p_y y + p_z z - r^2 = 0 \}. \end{align*}

A reason why $\ve{n} = P-O$ is a normal vector at $P$ is quite similar to that of the cylinder's normals. There are infinitely many planes that pass through $O$ and $P$. Picking one, the intersection of the plane and the sphere yields a great circle. Euclidean geometry again tells us that $\overline{OP}$ (and also $\ve{n}$) is perpendicular to the tangent line at $P$, which is a part of the tangent plane.

 
(a) (b)
 
(c) (d)
Figure 6.8 (a) Normal vectors of a sphere at various points on it. (b) The normal vector at each point (black) is parallel to the vector from the center of the sphere to the point (red). (c) Examples of tangent planes to the sphere. (d) An explanation why any normal vector at $P$ must be parallel to the vector from the center of the sphere $O$ to $P$. Here, we see the plane of a great circle containing $P$. We can see that the line tangent to the circle at $P$ is perpendicular to the radius $\overline{OP}$, which is parallel to the vector $P-O$.

6.1.7   Orientation of regular surfaces

In Section 6.1.2, we learned that the two unit normal vectors to a plane correspond to the plane's two sides. Moreover, we often pick one unit normal vectors to serve as "the" normal vector of the plane and thereby pick which side of the plane is the front side.

We can do the same to a regular surface. However, instead of picking only one unit normal vector, we need to pick a unit normal vector at each point on the surface because the tangent planes of different points can be different.

Because a regular surface contains infinitely many points, there are infinitely many decisions to make and therefore infinitely many ways to assign a unit normal vector to each point on the surface (Figure 6.9a). Nevertheless, the assignments are not equally good. We generally prefer assignments such that the normal vectors vary continuously across the surface. Such assignments are much easier to understand, and they avoid the problem of normal vectors dramatically switch direction as one move continuously from one point to another on the surface (Figure 6.9b). A consistent way to assign a unit normal vector at each point on the surface such that the normals vary continously is called an orientation of that surface (Figure 6.9c and 6.9d). If such as an assignment exist for a surface, we say that the surface is orientable.

 
(a)   (b)
 
(c)   (d)
Figure 6.9 (a) Unlike a flat surface, the directions of normal vectors of a curve surface change as we move from one point to another. At each point, there are two candidate unit normal vectors that we can pick as "the" normal vector at each point. (b) Here we show a random way to pick the normal vector at each point. It is not so good because the normals can suddenly flip directions. A way to pick unit normal vectors so that they vary continuously across the surface is called an orientation. An orientation where the normals point outward from the surface is shown in (c), and another where the normals point inward is shown in (d).

Regular surfaces that we have discussed so far—planes, infinite cylinders, spheres, and tori—are all orientable. A property of orientable surfaces is that they have two sides (Figure 6.10). The sides the normal vectors are on is the front, and the other side is the back.

Figure 6.10 Regular surfaces in Figure 6.4 are all orientable. Each surface has two sides, and we show them by cutting open the surface and coloring the sides differently.

An interesting fact is that not all surfaces are orientable. The Möbius strip is such a surface. If we pick a normal vector, say $\ve{n}$, for a point $P$, we find a loop on the surface that starts at $P$ and goes back $P$ that also forces us to pick $-\ve{n}$ as the normal vector at $P$ as well. In a sense, the Möbius strip is not orientable because it has only one side. In this book, we will not deal with unorientable surfaces.

Figure 6.11 A Möbius strip can be created by taking a flat strip of paper, twist an end by a half full turn, and then glue the ends together. In this way, the front side and the back side of the strip becomes the "same" side, making it impossible to orient the surface.

Now, consider an orienable surface that is also closed, like a sphere. The surface splits space into two regions: the inside and the outside. The surface also has two sides: the front and the back. In computer graphics, it is common to require that the front side lies on the outside, or, in other words, the the normal vectors of a closed, orientable surface should point outward. In other words, we prefer the orientation in Figure 6.9c over the one in Figure 6.9d. As a result, for the infinite cylinder in Section 6.1.6.2, we prefer $(p_x/r, p_x/r, 0)$ over $(-p_x/r, -p_x/r, 0)$ as the normal vector because $(p_x/r, p_x/r, 0)$ points outside. For the sphere in Section 6.1.6.3, we prepare $(p_x/r, p_y/r, p_z/r)$ over $(-p_x/r, -p_y/r, -p_z/r)$ for the same reason.

Before going to the next section, let us take stock. We care about surface normal vectors because they inform us about the surface's geometry: the normal vector at a point on the surface immediately tells us what the tangent plane at that point is, and the tangent plane can be used to approximate the surface near the point. The normal vector also allows us to distinguish between the front and back sides of the surface. The knowledge is used for hidden surface removal (Chapter XXX), and it also allows us to shade the front side and the back side differently (Chapter XXX). Moreover, when the surface is closed, it also tells us which part of space is the inside and which is the outside. This is important for lighting calculation that involves the use of Snell's law (Chapter XXX).

It is also important to note that surface normal, as we have discussed so far, is a mathematical concept. On the other hand, the two other types of normals that we will discuss momentarily can be thought of as being both a mathematical concepts and concrete pieces of data stored in computers.

6.2   Face normal vectors

Face normal vectors are surface normal vectors when the surface is a mesh. While the graphics pipeline can only deal with triangle meshes, other 3DCG software (especiallying modeling software such as Blender, 3ds Max, or Maya) allows meshes where the primitives are general polygons: quadriliterals, pentagons, heptagons, and so on. Each polygon in a mesh is called a face. We will follow this nomenclature and call a triangle in a mesh a face too. A face normal vector is just a normal vector to a face.

6.2.1   The normal vector to a triangle

When we specify a triangle, say $ABC$, we need to list its corner points in some order. Here, $A$ denotes the first corner, $B$ the second, and $C$ the third.

Example 6.1 For example, in the triangle mesh of Section 5.4.1, the $ABC$s of the two triangles are as follows:

We know from Section 3.7.5 that the vector \begin{align*} \widetilde{\ve{n}} = (B - A) \times (C - A) \end{align*} is a vector that is perpendicalar to the triangle. Dividing the vector by its length, we have that \begin{align*} \widehat{\ve{n}} = \frac{\widetilde{\ve{n}}}{\| \widetilde{\ve{n}} \|} = \frac{(B - A) \times (C - A)}{ \| (B-A) \times (C-A) \|} \end{align*} is a unit vector that is perpendicular to the triangle. However, we also know that \begin{align*} -\widehat{\ve{n}} = -\frac{(B - A) \times (C - A)}{ \| (B-A) \times (C-A) \|} = \frac{(C - A) \times (B - A)}{ \| (C-A) \times (B-A) \|} \end{align*} is another unit vector that is perpedicular to the triangle. Between $\widehat{\ve{n}}$ and $-\widehat{\ve{n}}$, which one we should pick as the normal vector of the triangle then?

In this book, we shall follow the convention is that the normal vector of triangle $ABC$, denoted by $\ve{n}$, is given by \begin{align*} \ve{n} = \widehat{\ve{n}} = \frac{\widetilde{\ve{n}}}{\| \widetilde{\ve{n}} \|} = \frac{(B - A) \times (C - A)}{ \| (B-A) \times (C-A) \|}. \end{align*}

Example 6.2 The normal vectors of the triangles of the mesh in Section 5.4.1 are as follows. \begin{align*} \mbox{Normal of Triangle #1} &= \frac{ \left( \begin{bmatrix}1 \\ 0 \\ 0\end{bmatrix} - \begin{bmatrix}0 \\ 0 \\ 0\end{bmatrix} \right) \times \left( \begin{bmatrix}1 \\ 1 \\ 0\end{bmatrix} - \begin{bmatrix}0 \\ 0 \\ 0\end{bmatrix} \right) }{\left\| \left( \begin{bmatrix}1 \\ 0 \\ 0\end{bmatrix} - \begin{bmatrix}0 \\ 0 \\ 0\end{bmatrix} \right) \times \left( \begin{bmatrix}1 \\ 1 \\ 0\end{bmatrix} - \begin{bmatrix}0 \\ 0 \\ 0\end{bmatrix} \right) \right\|} \\ &= \frac{ \begin{bmatrix}1 \\ 0 \\ 0\end{bmatrix} \times \begin{bmatrix}1 \\ 1 \\ 0\end{bmatrix} }{\left\| \begin{bmatrix}1 \\ 0 \\ 0\end{bmatrix} \times \begin{bmatrix}1 \\ 1 \\ 0\end{bmatrix} \right\|} = \frac{ \begin{bmatrix}0 \\ 0 \\ 1\end{bmatrix} }{\left\| \begin{bmatrix}0 \\ 0 \\ 1\end{bmatrix} \right\|} = \begin{bmatrix}0 \\ 0 \\ 1\end{bmatrix}. \\ \mbox{Normal of Triangle #2} &= \frac{ \left( \begin{bmatrix}1 \\ 1 \\ 0\end{bmatrix} - \begin{bmatrix}0 \\ 0 \\ 0\end{bmatrix} \right) \times \left( \begin{bmatrix}0 \\ 1 \\ 0\end{bmatrix} - \begin{bmatrix}0 \\ 0 \\ 0\end{bmatrix} \right) } { \left\| \left( \begin{bmatrix}1 \\ 1 \\ 0\end{bmatrix} - \begin{bmatrix}0 \\ 0 \\ 0\end{bmatrix} \right) \times \left( \begin{bmatrix}0 \\ 1 \\ 0\end{bmatrix} - \begin{bmatrix}0 \\ 0 \\ 0\end{bmatrix} \right) \right\| } \\ &= \frac{ \begin{bmatrix}1 \\ 1 \\ 0\end{bmatrix} \times \begin{bmatrix}0 \\ 1 \\ 0\end{bmatrix} } { \left\| \begin{bmatrix}1 \\ 1 \\ 0\end{bmatrix} \times \begin{bmatrix}0 \\ 1 \\ 0\end{bmatrix} \right\| } = \frac{ \begin{bmatrix}0 \\ 0 \\ 1\end{bmatrix} }{ \left\| \begin{bmatrix}0 \\ 0 \\ 1\end{bmatrix} \right\| } = \begin{bmatrix}0 \\ 0 \\ 1\end{bmatrix}. \end{align*} The normal vectors are the same. This is good because these two triangles are used to form a square, another flat surface. The square should have one normal vector rather than two.

A consequence of basing the normal vector $\ve{n}$ on $(B-A) \times (C-A)$ rather than other calculation is that one can determine the direction of the normal vector by looking at how the triangle's corners "swirl."

This is the because the direction of $(B - A) \times (C - A)$ is determined by the right-hand rule. Recall from Figure 3.19 that the direction of $(B - A) \times (C - A)$ depends on the rotation to get from $B-A$ to $C-A$. If the rotation is counterclockwise when we look at it, the cross production points towards us. If the rotation is clockwise, then the cross product points away from us.

Equivalently, we can trace the corners of the triangles in the specified order: from $A$ to $B$ to $C$ and then back to $A$ again. If the we see that the motion is a counterclockwise "swirling," then the triangle's normal vector would point towards us, and we are seeing the front side of the triangle. On the other hand, if the swirling is clockwise, the normal vector points away from us, and we are seeing the back side of the triangle.

(a) (b) (c)
(d) (e) (f)
Figure 6.12 When specifying a triangle, the order of the vertices determines the direction of the normal vector. In (a), the triangle $ABC$ lies in the $xy$-plane. We see that the vertices swirl in the counterclockwise direction as shown in (b). As a result, the normal vector points towards us, the viewer, along the $z$-axis as shown in (c). In (d), we have the same triangle, but the vertex $B$ swaps place with vertex $C$. Now, the vertices sway in the clockwise direction as shown in (e). Now, the normal vector points away from us in the $-z$ direction as shown in (f).

6.2.2   Consistency of face normals in a mesh

When a triangle is a part of a mesh, the order of corners is determined by the order of the vertex indices in the index buffer. So, the order of vertex indices in the index buffer determines the direction of the normal vectors and the orientation of the faces.

There are as many normal vectors to a triangle mesh as there are faces. We want the face normals to be consistent to one another. The notion of consistency in question is inpired by the consitency of normal vectors in an orientation of a regular surface. It should be that, as we travel along the surface the normal vectors should not change abrubtly. To put it in another way, if we are a small creature standing on the front side of a mesh's face, we should not suddenly be on the back side if we walk to an adjacent face.

The above notion of consistency requires that the orders of vertex indices of the triangles be consistent with one another. More specifically, the vertices should be listed so that nearby triangles swirl in the same way. It should not be the case that, when we go from a triangle to another that is adjacent to it, one triangle swirl counterclockwisely, and the other swirl clockwisely.

For example, in Figure 6.13 below, we have two triangles that togehter form quadriliteral. The two triangles are formed by 4 vertices: $(-1,-1,0)$, $(1, -1, 0)$, $(0, 1, 0)$, and $(2, 1, 0)$. These vertices are numbered with integers from 0 to 3, respectively. The first triangle is formed from Vertices 0, 1, and 2, and the second triangle is formed Vertices 1, 2, and 3. Consider the following two ways of listing the vertex numbers in the index buffer.

The index buffers differ only at only the last two numbers. The two triangles have the same shape. However, Index Buffer #1 is to be preferred over Index Buffer #2. The reason is that the triangles in Index Buffer #1 swirl the same way, and so the normals are pointing in the same direction. On the other hand, in Index Buffer #2, one triangle swirls counterclockwisely, and the other swirls clockwisely. As a result, the normals point in different directions.

 
(a)  
(b) (c)
(d) (e)
Figure 6.13 (a) A mesh with two triangles, numbered 0 to 4. (b) In Index Buffer #1, the vertices are listed so that both triangles swirl counterclockwisely. (c) Because both triangles swirl the same way, the normals have the same directions, which is desirable. (d) In Index Buffer #2, one triangle swirl counterclockwisely while the other swirls clockwisely. (e) Because of the different swirling, the normals are of opposite directions. This is not desirable because normals should not change abruptly when we more from one triangle to another, especially when they lie on the same plane.

Another consistency issue to watch out for is when a mesh models a closed surface. In this case, we want the face normals to all point outward from the surface according to the convention in Section 6.1.7. To achieve this, we want to make sure that the vertex indices are ordered so that the vertices swirl counterclockwisely when you look at each triangle straight on from the outside of the mesh.

(a) (b)
Figure 6.14 Here, we see a pyramidal mesh. The vertex in the center is the pyramid's apex. In (a), the vertices of the triangles are arranged so that they swirl in the counterclockwise direction when we look at them from the outside. As a result, the normals all point outward. In (b), the vertices of the top triangle swirl clockwisely, and the triangle's normal point into the mesh.

6.3   Vertex normals

Remember from the last chapter that the normal vector can be a vertex attribute. This attribute is what we mean by the vertex normal. This means that the vertex normals are data that the 3D modeler specifies as a part of the mesh they create.

Let us compare the vertex normal with the other two normals we previously introduce. The surface normal is a mathematical concept, and so it applies to abstract surfaces like the planes and the regular surfaces. The face normal is also another mathematical concept: it is the surface normal of a face in a mesh. Surface normals and face normals are not data. We never specify them directly inside a vertex buffer. In particular, face normals are defined implicitly by vertex positions and the order in which the vertices are listed in the index buffer.

6.3.1   Interpolation of Vertex Normals

Recall from the last chapter that, when WebGL draws a primitive, it must fill in points between the vertices of that primitive. The in-between points will inherit the vertex attributes. Points have positions because vertices have positions. We also saw in the last chapter (Figure 5.4 and Figure 5.5, in particular) that, when vertices have colors, points will also have colors. Similarly, when vertices have normals, points will also have normals. WebGL computes a point normal by interpolating vertex normals in the same way that it interpolates colors in the last chapter. (We will discuss how this interpolation is performed in the next chapter.) Figure 6.15 shows a triangle whose vertices have normals and the normals of some points on the triangle.

(a) (b)
Figure 6.15 (a) A triangle whose vertices have vertex normals. (b) Visualization of normals of some points the graphics pipeline fill in when drawing the triangle.

The above figure, however, does not offer us the complete picture of what the interpolated normals are like as it only contains a sparse sample of points whose normals we visualize as arrows. It is hard to visualize all normals because arrows have volume. If we show too many arrows at once, they would end up intersecting and occluding each other, leading to a picture that is not at all understandable.

Fortunately, compute graphic practitioners have come up with a way to avoid this problem: representing normal vectors with colors. Because we require that normal vectors be unit vectors, it follows that each component of a normal vector must have value between $-1$ and $1$. Mathematically, if $\mathbf{n} = (n_x, n_y, n_z)$ is a normal vector, then it must be the case that $\| n \| = 1$ or \begin{align*} n_x^2 + n_y^2 + n_z^2 = 1, \end{align*} which implies \begin{align*} -1 &\leq n_x, \leq 1,\\ -1 &\leq n_y, \leq 1,\\ -1 &\leq n_z, \leq 1. \end{align*} This means that \begin{equation} \label{eq:normal-as-color} \bigg( \frac{n_x + 1}{2}, \frac{n_y + 1}{2}, \frac{n_z + 1}{2} \bigg) \end{equation} is a valid RGB color. Figure 6.16 shows the interpolated normals in Figure 6.15 visualized with the color scheme above. Notice that the color changes smoothly across the triangle, showing that the point normals vary continuously.

Figure 6.16 Visualization of interpolated normals with colors defined according to Equation \eqref{eq:normal-as-color}. The colors of the vertex normals are shown next to the normal vectors.

Note that we can also visualize the face normal of the triangle like in Figure 6.17. This time, all points have the same color because a triangle has only one face normal.

Figure 6.17 Visualization of the face normal of the triangle in Figure 6.15 with colors defined according to Equation \eqref{eq:normal-as-color}.

Notice the difference between Figure 6.16 and Figure 6.17. Looking at Figure 6.17, we understand immediately that the surface is flat because all points have the same surface normals. On the other hand, while the surface in Figure 6.16 is geometrically flat (because it is a triangle), the normal vectors vary across the surface like the way normal vectors of curved surface do. Furthermore, when we use these normals to compute the colors on the surface like in Figure 5.6 of the last chapter, the colors can convincingly fool the viewer that the surface is curved. Hence, vertex normals are a tool to make flat surfaces look curved. It is a key to model real-world objects with organic shapes with flat and straight mathematical objects.

6.3.2   Vertex Normals as Samples of Surface Normals

Vertex normals are data, which means that the modeler can specify them any way they want. Arbitrary assignments, however, are almost always not useful, so we want more principled ways to specify the data. In computer graphics, there are at least two approaches.

  1. Treating vertex normals as samples of surface normals.
  2. Computing vertex normals from face normals.

This subsection discusses the former, and the subsection discusses the latter.

Treating vertex normals as samples of surface normals comes from a particular way we may think of a mesh: as an approximation of a curved regular surface. A curved regular surface has infinitely many points, all of which cannot be stored as computer data. We therefore sample a finite number of points from it, call these points "vertices," and connect the vertices to form primitives, thereby approximating the regular surface with many pieces of flat geometry. Because a vertice is originally a point on the regular surface, its position and its normal vector should agree with those of the corresponding regular surface point.

Let us look at a concrete example. Say, we want to create a mesh that approximates the sphere in Section 6.1.6.3. If we make a vertex out of a point $P$ on the surface of the sphere, then the vertex's normal vector should be $(P-O)/ \| P - O\|$ where $O$ is the origin of the sphere. We can see the consequence of specifying vertex normals in this way in Figure 6.18. Notice that, even with a few number of faces, the surface alreay looks curved. As we increase the number of faces, the faces become smaller, and the interpolate normals become more and more closer to the normals vectors of the sphere.

Figure 6.18 The effect of using surface normals of the underlying regular surface as vertex normals. Here, we would like to approximate a sphere with meshes that get progressively finer as we go to the right. On the top row, the meshes are colored with the colors of the face normals, and we can see the flat faces of the meshes very clearly. On the bottom row, we color the meshes with the colors of the interpolated normals. It becomes harder to notice the flat faces, and the interior of the meshes does look like that of a curved surface.

The drawback of this approach is that it only works when we know the normal vector of any point we want to make a vertex. This is only possible when we have mathematical formulas for everything. When this is the case, then the approach should be prefered because the normals would always have correct values.

6.3.3   Calculating Vertex Normals from Face Normals

Unlike the previous approach, this approach allows us to deal with arbitrary meshes that we have position data. What we do is very simple: make the normal at each vertex point in the same direction as the average of the face normals of all the faces that contain that vertex. The idea is that a vertex can be a part of multiple triangles. As a result, the vertex's normal vector can be any of the triangles' face normals. To reconcile between different options, we take the average of the normal vectors.

For example, let us say that we have a mesh with 3 triangles: $ABC$, $ACD$, and $ADB$ as shown in Figure 6.19. Let $\ve{n}_A$, $\ve{n}_B$, $\ve{n}_C$, and $\ve{n}_D$ denote the vertex normals, and let $\ve{n}_{ABC}$, $\ve{n}_{ACD}$, $\ve{n}_{ADB}$ denote the face normals. Then, \begin{align*} \ve{n}_A = \frac{\frac{1}{3}(\ve{n}_{ABC} + \ve{n}_{ACD} + \ve{n}_{ADB}) }{\| \frac{1}{3}(\ve{n}_{ABC} + \ve{n}_{ACD} + \ve{n}_{ADB}) \|} = \frac{\ve{n}_{ABC} + \ve{n}_{ACD} + \ve{n}_{ADB} }{\| \ve{n}_{ABC} + \ve{n}_{ACD} + \ve{n}_{ADB} \|}. \end{align*} because $A$ is a part of all three triangles. Similarly, we have that \begin{align*} \ve{n}_B &= \frac{\ve{n}_{ABC} + \ve{n}_{ADB} }{\| \ve{n}_{ABC} + \ve{n}_{ADB} \|}, \\ \ve{n}_C &= \frac{\ve{n}_{ABC} + \ve{n}_{ACD} }{\| \ve{n}_{ABC} + \ve{n}_{ACD} \|}, \\ \ve{n}_D &= \frac{\ve{n}_{ACD} + \ve{n}_{ADB} }{\| \ve{n}_{ACD} + \ve{n}_{ADB} \|}.\\ \end{align*}

(a) (b) (c)
Figure 6.19 (a) A mesh with 4 vertices and 3 triangles. (b) From the positions of the vertices, we can compute the normals of triangular faces. (c) Then, from the face normals, we can compute the vertex normals by averaging the face normals together.

When we apply the approach to a mesh that approximates a regular surface that is finely triangulated enough, the vertex normals would yield interpolated normals that approximate the real surface normals well.

Figure 6.20 The effect of computing vertex normals from face normals. Like in Figure 6.18, we want to approximate a sphere with meshes that become finer as we go to the right. The face normals are visualized on the top row, and the interpolated normals from computed face normals are visualized on the bottom row. To the naked eyes, the results are very similar to Figure 6.18, but there are some noticable differences, especially on the coarsest mesh.

However, the result can be counter intuitive for coarse meshes. For example, the approach would try to make the box in Figure 6.21 look round while the silhouette is telling the viewer otherwise.

Figure 6.21 A cube mesh whose vertex normals are computed from face normals. As can be seen from the colors, the interpolated normals vary continuously across the surface, giving the impression that the surface is curved instead of being straight.

6.3.4   Dealing with Flat Faces and Sharp Edges

Real world objects do not always have smooth, curved surfaces. Man-made objects such as buildings, machines, and various types of food items can have flat faces and sharp corners or edges. When dealing with such objects, the two approaches for assigning vertex normals we have discussed about so far prove inadequate. Surfaces with sharp edges are not regular surfaces, so we cannot hope to find an underlying regular surface to take surface normal vectors from. Moreover, as can be seen in Figure 6.20, computing vertex normals from face normals will make the whole surface look round while we want each face individually to look flat.

The problem we face stems from the fact that vertices that are on sharp corners or edges must exhibit multiple normal vectors at once. For example, a corner of the cube in Figure 6.20 are a part of three flat faces with three different face normals. Unfortuately, a vertex has only one vertex normal attribute, so it cannot accommodate three normals at once.2

The solution, however, is incredibly simple. Whenever we have a vertex that needs to exhibit multiple normal vectors (or multiple values of any other attributes for that matter), split it into a number of distinct vertices that have the same positions but different normals. Now, when constructing triangles that meet at sharp corners or edges, we can use the appropriate vertex for that triangle. For example, instead of creating a cube in Figure 6.20 with only 8 corner vertices, we can instead model the cube as a collection of 6 flat faces where each face has its own 4 corner vertices (Figure 6.21).

(a) (b)
Figure 6.22 (a) A cube mesh whose faces are flat, unlike the one in Figure 6.20. (b) The mesh is constructed by putting together 6 flat rectangles. Each rectangle has 4 vertices, resulting in 24 distinct vertices. However, there are only 8 distinct positions and 6 different normal vectors.

6.4   Summary


  1. A mathematically inclined reader can consult standard textbooks on differential geometry such Manfredo P. do Carmo's Differential Geometry of Curves and Surfaces for a rigorous definition of regular surfaces.

  2. Actually, it is possible to add more attributes to score the 2nd normal, 3rd normal, 4th normal and so on, but there are even more problems with this approach. First, we do not know in advance how many faces a vertex would be a part of, so we cannot know for sure how many attributes to allocated. Second, it becomes unclear which normal to use at which time.


<< Contents >>