GLOBAL EDITION Interactive Computer Graphics A Top-Down Approach with WebGL SEVENTH EDITION Edward Angel Dave Shreiner
This page is intentionall left blank.
4.10 Concatenation of Transformations 219 in the same direction simplifies the subsequent steps. We sa that v is the result of normaliing u. We have alread seen that moving the fied point to the origin is a helpful technique. Thus, our first transformation is the translation T( p 0 ), and the final one is T(p 0 ). After the initial translation, the required rotation problem is as shown in Figure 4.53. Our previous eample (see Section 4.10.2) showed that we could get an arbitrar rotation from three rotations about the individual aes. This problem is more difficult because we do not know what angles to use for the individual rotations. Our strateg is to carr out two rotations to align the ais of rotation, v, with the -ais. Then we can rotate b θ about the -ais, after which we can undo the two rotations that did the aligning. Our final rotation matri will be of the form R = R ( θ )R ( θ )R (θ)r (θ )R (θ ). This sequence of rotations is shown in Figure 4.54. The difficult part of the process is determining θ and θ. We proceed b looking at the components of v. Because v is a unit-length vector, α 2 + α2 + α2 = 1. p 2 p 1 v FIGURE 4.53 Movement of the fied point to the origin. FIGURE 4.54 Sequence of rotations.
220 Chapter 4 Geometric Objects and Transformations (,, ) We draw a line segment from the origin to the point (α, α, α ). This line segment has unit length and the orientation of v. Net, we draw the perpendiculars from the point (α, α, α ) to the coordinate aes, as shown in Figure 4.55. The three direction angles φ, φ, φ are the angles between the line segment (or v) and the aes. The direction cosines are given b cos φ = α, cos φ = α, FIGURE 4.55 Direction angles. cos φ = α. Onl two of the direction angles are independent, because d 1 (,, ) FIGURE 4.56 Computation of the rotation. d FIGURE 4.57 Computation of the rotation. 1 cos 2 φ + cos 2 φ + cos 2 φ = 1. We can now compute θ and θ using these angles. Consider Figure 4.56. It shows that the effect of the desired rotation on the point (α, α, α ) is to rotate the line segment into the plane = 0. If we look at the projection of the line segment (before the rotation) on the plane = 0, we see a line segment of length d on this plane. Another wa to envision this figure is to think of the plane = 0 as a wall and consider a distant light source located far down the positive -ais. The line that we see on the wall is the shadow of the line segment from the origin to (α, α, α ). Note that the length of the shadow is less than the length of the line segment. We can sa the line segment has been foreshortened to d = α 2 + α2. The desired angle of rotation is determined b the angle that this shadow makes with the -ais. However, the rotation matri is determined b the sine and cosine of θ. Thus, we never need to compute θ ; rather, we need onl compute 1 0 0 0 0 α R (θ ) = /d α /d 0 0 α /d α /d 0. 0 0 0 1 We compute R in a similar manner. Figure 4.57 shows the rotation. This angle is clockwise about the -ais; therefore, we have to be careful about the sign of the sine terms in the matri, which is d 0 α 0 0 1 0 0 R (θ ) = α 0 d 0. 0 0 0 1 Finall, we concatenate all the matrices to find M = T(p 0 )R ( θ )R ( θ )R (θ)r (θ )R (θ )T( p 0 ).
4.11 Transformation Matrices in WebGL 221 Let s look at a specific eample. Suppose that we wish to rotate an object b 45 degrees about the line passing through the origin and the point (1, 2, 3). We leave the fied point at the origin. The first step is to find the point along the line that is a unit distance from the origin. We obtain it b normaliing (1, 2, 3) to (1/, 2/, 3/ ), or(1/, 2/, 3/, 1) in homogeneous coordinates. The first part of the rotation takes this point to (0, 0, 1, 1). We first rotate about the -ais b the angle cos 1 3. This matri carries (1/, 2/, 3/, 1) to (1/, 0, 13/, 1), which is in the plane = 0. The rotation must be b the angle cos 1 ( 13/). This rotation aligns the object with the -ais, and now we can rotate about the -ais b the desired 45 degrees. Finall, we undo the first two rotations. If we concatenate these five transformations into a single rotation matri R, we find that ( ) ( R = R cos 1 3 R cos 1 13 13 ( ) R cos 1 3 13 = 2+13 2 2 2+3 7 6 3 2 4 7 2 2 3 7 4+5 2 6 3 2+ 7 ) R (45) R ( 6 3 2+4 7 0 6 3 2 7 0 18+5 2 0 0 0 0 1. ) cos 1 13 This matri does not change an point on the line passing through the origin and the point (1, 2, 3). If we want a fied point other than the origin, we form the matri M = T(p f )RT( p f ). This eample is not trivial. It illustrates the powerful technique of appling man simple transformations to get a comple one. The problem of rotation about an arbitrar point or ais arises in man applications. The major variations lie in the manner in which the ais of rotation is specified. However, we can usuall emplo techniques similar to the ones that we have used here to determine direction angles or direction cosines. 4.11 TRANSFORMATION MATRICES IN WEBGL We can now focus on the implementation of a homogeneous-coordinate transformation package and that package s interface to the user. We have introduced a set of frames, including the world frame and the camera frame, that should be important for developing applications. In a shader-based implementation of OpenGL, the eistence or noneistence of these frames is entirel dependent on what the application
222 Chapter 4 Geometric Objects and Transformations Vertices CTM Vertices FIGURE 4.58 Current transformation matri (CTM). programmer decides to do. 9 In a modern implementation of OpenGL, the application programmer can choose not onl which frames to use but also where to carr out the transformations between frames. Some will best be carried out in the application, others in a shader. As we develop a method for specifing and carring out transformations, we should emphasie the importance of state. Although ver few state variables are predefined in WebGL, once we specif various attributes and matrices, the effectivel define the state of the sstem. Thus, when a verte is processed, how it is processed is determined b the values of these state variables. The two transformations that we will use most often are the model-view transformation and the projection transformation. The model-view transformation brings representations of geometric objects from the application or object frame to the camera frame. The projection matri will both carr out the desired projection and change the representation to clip coordinates. We will use onl the model-view matri in this chapter. The model-view matri normall is an affine transformation matri and has onl 12 degrees of freedom, as discussed in Section 4.7. The projection matri, as we will see in Chapter 5, is also a 4 4 matri but is not affine. 4.11.1 Current Transformation Matrices The generaliation common to most graphics sstems is of a current transformation matri (CTM). The CTM is part of the pipeline (Figure 4.58); thus, if p isaverte specified in the application, then the pipeline produces Cp. Note that Figure 4.58 does not indicate where in the pipeline the current transformation matri is applied. If we use a CTM, we can regard it as part of the state of the sstem. First, we will introduce a simple set of functions that we can use to form and manipulate 4 4 affine transformation matrices. Let C denote the CTM (or an other 4 4 affine matri). Initiall, we will set it to the 4 4 identit matri; it can be reinitialied as needed.if we use the smbol to denote replacement, we can write this initialiation operation as C I. The functions that alter C are of three forms: those that load it with some matri and those that modif it b premultiplication or postmultiplication b a matri. The three transformations supported in most sstems are translation, scaling with a fied point of the origin, and rotation with a fied point of the origin. Smbolicall, we can write 9. In earlier versions of OpenGL that relied on the fied-function pipeline, the model-view and projection matrices were part of the specification and their state was part of the environment.
4.11 Transformation Matrices in WebGL 223 these operations in postmultiplication form as C CT C CS C CR and in load form as C T C S C R. Most sstems allow us to load the CTM with an arbitrar matri M, C M, or to postmultipl b an arbitrar matri M, C CM. Although we will occasionall use functions that set a matri, most of the time we will alter an eisting matri; that is, the operation C CR, is more common than the operation C R. 4.11.2 Basic Matri Functions Using our matri tpes, we can create and manipulate three- and four-dimensional matrices. Because we will work mostl in three dimensions using four-dimensional homogeneous coordinates, we will illustrate onl that case. We can create an identit matri b var a = mat4(); or fill it with components b var a = mat4(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13,, 15); or b vectors as in var a = mat4( vec4(0, 1, 2, 3), vec4(4, 5, 6, 7), vec4(8, 9, 10, 11), vec4(12, 13,, 15) );