11.3 - Simulated Curved Surfaces¶

Surface Normal Vectors¶

The normal vector of a triangle / flat shading

A triangle defines a surface that lies in a plane. There are two vectors that are perpendicular to the triangle’s plane. By convention, one of these vectors defines the “front side” of the triangle, and the other vector defines the “back side” of the triangle. These are referred to as the “front face” and “back face” of the triangle. If the vector, n, defines the “front face”, then -n defines the “back face”.

Given a specific triangle, it has exactly one “front face” normal vector. Using the same normal vector for the diffuse color calculations of all triangle fragments will produce the same diffuse color for the entire surface. This is called “flat shading”. The rendering of the bunny to the right is an example of “flat shading”.

Intermediate normal vectors

To simulate a curved surface, instead of storing a normal vector for each triangle, each vertex of a triangle stores a vector that is perpendicular to the original curved surface of the real world object being modeled. The diagram to the right illustrates the three vectors of a triangle. These vectors are interpolated across the surface of the triangle and used in the lighting calculations. Therefore, each fragment of a triangle is potentially assigned a different color, which simulates a curved surface.

The term “normal vector” might be confusing because a vector’s direction may not be perpendicular to its associated triangle’s plane. However, it is perpendicular to the original object’s surface at the location of the vertex. Therefore, a “normal vector” is defined as a vector that produces the desired lighting calculations for a location on a surface, regardless of whether it is perpendicular to its associated triangle.

Interpolation was explained in chapter 8 and can easily be performed using a simple parametric equations Given two normal vectors, n1 and n2*, intermediate vectors, n, can be calculated by varying a parametric parameter, t, between 0.0 and 1.0:

n = (1-t)*n1 + t*n2  // 0.0 <= t <= 1.0

Interpolated normal vectors

Since vectors have 3 components, <dx,dy,dz>, this equation actually represents three equations:

• n_dx = (1-t)*n1_dx + t*n2_dx
• n_dy = (1-t)*n1_dy + t*n2_dy
• n_dz = (1-t)*n1_dz + t*n2_dz

You don’t have to implement these equations; the WebGL graphics pipeline automatically interpolates vectors that are stored in varying variables. But it is important that you understand how the interpolation works because the intermediate vectors will typically not have the same length as the original two vectors. If an interpolated vector need to be unit length then it must be normalized for each fragment calculation.

Calculating Smooth Normal Vectors¶

Average normal vector

Smooth shading across adjacent triangles of a model is accomplished by setting the normal vector of a vertex to an average of the triangle normal vectors that use that vertex. For example, in the diagram to the right a vertex is used by five triangles, so the vertex’s normal vector is set to an average of the five triangle normal vectors. The average normal vector is calculated by adding the vectors and dividing by the number of vectors. This averaged vector may not be exactly perpendicular to the original object’s surface at the vertex’s location, but it is typically close enough. (Note: Even if the original five vectors were normalized, the averaged vector probably does not have unit length and needs to be normalized.)

Duplicate normal vectors

Calculating smooth normal vectors becomes more complex if a model contains triangles that share a vertex and lie in the same plane. Consider a simple cube like the one shown in wireframe mode to the right. It is composed of 6 sides that are defined by 12 triangles (two triangles per side). In the diagram you can see that the vertex at the red dot is part of 4 triangles, but just 3 cube faces. If you take the average of the normal vectors of the 4 triangles that share the vertex, the normal vector will be skewed towards the right side that has 2 triangles that use the vertex. Therefore, when you gather the face normal vectors to calculate an average, you must test the face normal vectors to make sure they are unique. If you find multiple normal vectors that are identical, then you assume that they all define the same surface plane and you only include one of them in your average calculation.

Mixing Smooth and Flat Shading

To create an accurate rendering of some models, flat shading must be used on some triangles while smooth shading must be used on other triangles. Consider a simple cube with round edges. If smooth normal vectors are used for every vertex in the model, the flat sides of the cube will have a curved appearance. If triangle normal vectors are used for every vertex, the rounded corners will not appear rounded, but rather faceted. The diagram to the right illustrates this problem. Notice that for vertex 1, a triangle normal vector should be used for rendering the triangle to its right to create a flat cube face, while a smooth normal vector should be used for rendering the triangle on its left to create a rounded surface for the cube’s edge.

1
2
3
4
5
6
7
8

s on
f 9//1 8//1 23//1 24//1
f 2//2 1//2 16//2 17//2
s off
f 6//1 3//1 2//1
f 5//1 3//1 6//1
f 5//1 4//1 3//1
...

An Example WebGL Program¶

The following WebGL program allows you to render a 3 different versions of a cube that has rounded edges. One version uses all triangle normal vectors and produces a “faceted” rendering. One version uses all smooth normal vectors which produces a slight curved appearance for the flat sides. The last version uses a combination of triangle and smooth normal vectors.

Please note the following about the above WebGL program:

• The smooth shaded triangles facing the camera look great, but you can see their triangle mesh nature when the triangles are in silhouette with the camera.
• When smooth normal vectors are used for all model faces there is no visual “seam” between the sides of the cube and the rounded edges. However, the sides of the cubes have a slight curved appearance to them.
• When the cube’s sides are rendered using “triangle normals” there is a visible “seam” between the cube sides and the rounded edge. This is because the cube side is using a different normal vector than the rounded edge. To remove the visible “seam” the triangles that have a common edge between the cube side and the rounded edge need the vertices on the common edge to use flat shading normal vectors but the other vertices should use a smooth normal vector.

Glossary¶

Phong shading

Create a unique normal vector for each fragment that composes a triangle by interpolating the normal vectors defined at the triangle’s vertices.

triangle normal vector

A vector that is perpendicular to the triangle’s plane.

smooth normal vector

A vector that is perpendicular to the surface of an original, real-world object at a specific location.

Self Assessment¶