6.1 - Introduction to Transformations¶
You have learned in previous lessons how to describe virtual objects, both their geometry and their appearance (i.e., their surface properties). Fundamental to all computer graphics is the ability to manipulate these objects and to create motion in a scene over time. This chapter’s tutorials will help you understand how to transform an object’s shape, location and orientation. This is where computer graphics gets really 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 point 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.