6.1 - Introduction to Transformations

Previous lessons have described virtual objects, both their geometry and their appearance (i.e., their surface properties). Fundamental to all computer graphics is the ability to manipulate the shape of these objects and to create motion in a scene over time. The lessons in this chapter explain how to transform an object’s shape, location and orientation. This is where computer graphics really gets fun!

Basic Transformations

There are three basic transformations used in computer graphics:

  • translate (move)
  • scale (shrink, enlarge or mirror)
  • rotate (about an axis)

We will discuss the details of each transformation in the following lessons, but first let’s discuss how these transformations are similar. These three transformations retain the basic properties of a model. After applying any of these transformations, or any combination of these transformations, the following will be true:

  • Parallel lines will still be parallel.
  • Points that formed a line before a transformation still form a line after the transformation.
  • The ratio of distances is maintained. The midpoint of a line before transformation remains the midpoint of the line after transformation.

Mathematicians call a transformation with these properties an affine transformation. What is really important about such transformations is this: we don’t have to apply the transformation to every location in a model. If we apply the transformation to the three vertices of a triangle, all of the surface points on the interior of the triangle are transformed correctly. This is huge! It makes 3D, real-time computer graphics possible.

So let’s summarize. We can transform a model by manipulating only its vertices! This fact drives the overall structure of a WebGL shader program. A WebGL shader program contains two parts, a vertex shader that manipulates the vertices of a model definition, and a fragment shader that assigns a color to every pixel that defines a point, a line, or a triangle.

Glossary

transformation
A manipulation of a model to change its shape, location, or orientation.
translate
Change the location of a model.
scale
Change the size of a model. (And its location if it is not centered at the origin.)
rotate
Change the orientation of a model. (And its location if it is not centerd at the origin.)
affine transformation
A transformation of a model that can be performed by only manipulating the model’s vertices.

Self Assessment

    Q-118: Which of these transformations will change the location of an object if it is not centered at the origin? (Select all that apply.)
  • translate
  • Correct. Changing location is fundamentally what translate does.
  • scale
  • Correct. Changing location is a side-effect of scaling if the object is not centered at the origin.
  • rotate
  • Correct. Changing location is a side-effect of rotation if the object is not centered at the origin.
    Q-119: What is the most important aspect of affine transformations?
  • They can be applied to only the vertices of a model and the entire model is transformed as expected.
  • Correct. We can transform an entire triangle by the transformation of just its three vertices.
  • They allow a models' size to be manipulated.
  • Incorrect. This is true, but it is not the most important aspect.
  • There is only three basic transformations which makes transformations less complex.
  • Incorrect. There are actually other transformations in addition to the three listed, but beyond that, the three transformations can be combined in interesting ways to produce complex motion.
  • They are simple to understand.
  • Incorrect. This is true, but it is not the most important aspect.
    Q-120: Which of these are properties of affine transformations? (Select all that apply.)
  • Parallel lines will still be parallel.
  • Correct.
  • Straight lines remain straight lines.
  • Correct.
  • The ratio of distances is maintained.
  • Correct.
  • The size and orientation of a model are unchanged.
  • Incorrect. One of the purposes of affine transformations is to change the size and orientation of a model.
Next Section - 6.2 - Scaling