10.1 - Introduction to Surface Properties¶

Overview of Lessons¶

In the previous lessons you learned how to model light and its reflection off of surfaces. Wasn’t it amazing how much better the renderings looked when the color of the pixels was based on reflected light! However, we used a single color to represent a model’s appearance which made the rendering of the models too uniform and “pure.” Real-world objects have more variation over their surfaces. Modeling the surface properties of a model’s triangles is where we can approach photo-realism in WebGL computer generated images. (To get exact “photo-realism” you must use ray tracing, which is a totally different way to render 3D computer graphics images.)

Surface properties are complex and we will not be able to cover every possible property that graphics programs might use. But we will cover the basics, which are:

• Color: The color of a surface is actually not a single color, but a set of colors because a surface actually reacts differently to ambient, diffuse and specular light reflection.
• Orientation: WebGL only renders triangles, but we can modify the normal vectors at a triangle’s vertices to simulate curved surfaces.
• Texture: A surface can have multiple colors. A good example is a piece of clothing.
• Smooth vs. Bumpy: A surface may not be smooth, but rather bumpy across its surface.
• Shiny vs. Dull: A surface might be irregular at a microscope level and appear “dull” because it reflects light in all directions, even for specular reflection. Or it might be very smooth at a microscope level and specular reflection has minimal scattering.

Overview of Code¶

Your JavaScript code will set up the surface properties of a model and your GPU fragment shader program will use those properties to calculate a color for each fragment of a triangle.

There are many scenarios for structuring your surface property descriptions. The major question is whether all of the surfaces of a model have the same properties, or do individual surfaces have different properties. You need to consider these issues as you design your models and as you implement your shader programs. Remember, there are always trade-offs between memory usage and rendering speeds. The following table summarizes these issues.

Surface Property Transformations¶

As in the previous lessons, we will perform fragment shader calculations in “camera space” because:

• The GPU shader program knows the camera’s location and orientation without updating any uniform variables. (The camera is at the global origin and aligned with the global axes.)
• Having the camera at the origin simplifies some of the lighting calculations.

This means that any surface properties that are related to the location or orientation of a model must be transformed into “camera space.” This is straightforward in most cases, but problematic if your transformation includes non-uniform scaling. Note that a camera transformation never includes scaling – only rotation and translation. So the problem arises if your model transformation includes non-uniform scaling.

Non-uniform scaling¶

Non-uniform scaling.

Consider the diagram to the right. If you transform a model that includes non-uniform scaling, the normal vectors become skewed and do not point in the correct direction. This simple example shows that the model-view transformation used on the vertices of a model does not work for the normal vectors of the model – if the transformation includes non-uniform scaling.

Non-uniform scaling.

Let’s calculate a transformation that will transform the normal vectors correctly. Assume we have a vector, p, that lies in the plane of the top face. The angle between p and n must be 90 degrees. That means the dot product of p and n, which is equal to the cosine of the angle between them, must be zero. Therefore,

dot(p,n) === 0

Let M be the transformation that contained the non-uniform scaling of the model. Therefore p' = M * p. We need to solve for a different transformation, S, that will transform n into n’ such that dot(p',n') === 0. Therefore,

dot(M * p, S * n) === 0

You can reorder the multiplication of a matrix times a vector by taking the transpose of each one like this:

a
e
i
m
b
f
j
n
c
g
k
o
d
h
l
p
*x
y
z
0
=x
y
z
0
*a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
Eq2

Therefore, dot(p^T * M^T, S * n) === 0.

Since dot(p,n) === 0, M^T * S must be equal to the identity matrix. We can solve for S using this fact:

M^T * S === I

(M^T) ^-1 * M^T * S === (M^T) ^-1 * I

S === (M^T) ^-1

S === (M^-1) ^T (See the matrix identities below.)

Glossary¶

surface properties

Characteristics of a triangle that determines how light is reflected off of its surface.

Basic Matrix Identities¶

The following properties of matrix operations are true (1), where A and B are square matrices, A^T is the transpose of A, and A^-1 is the inverse of A.

• (A*B)^T = B^T * A^T
• (A^T)^T = A
• (A+B)^T = A^T + B^T
• (A*B)^-1 = B^-1 * A^-1
• (A^T)^-1 = (A^-1)^T