Transformations in Computer Graphics: Matrices & Functions

The world of transformations in computer graphics through the manipulation of matrices and functions. Learn how to scale, rotate, and translate objects efficiently using concatenated transformations. Dive into the intricacies of creating and applying transformation matrices in WebGL with the help of MV.js functions. Master the order of operations to achieve desired transformations flawlessly. Delve into example codes to understand the practical implementation of these concepts.

• Graphics
• Computer Graphics
• Transformations
• Matrices
• WebGL

hjod Follow

Uploaded on Feb 26, 2025 | 0 Views

Download Presentation

Please find below an Image/Link to download the presentation.

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.

You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.

Presentation Transcript

1. Graphics CSCI 343, Fall 2023 Lecture 8 Translations and Rotations 1

2. Concatenation of Transformations Suppose you want to: 1. Scale an object 2. Rotate the object 3. Translate the object For each vertex, we apply a series of transformations: P1 = SP P2 = RP1 = RSP P3 = TP2 = TRSP For efficiency, we create a new matrix, M = TRS. Each new point can be computed directly as P3 = MP Note: Matrix multiplication is not commutative. Order Matters! 2

3. Transformations in WebGL Ways to perform transformations: A. Create your own current transformation matrix (ctm): 1. Compute transformation in advance. 2. Enter matrix into an array (in column major order). OR B. Use the transformation functions provided in MV.js 1. Multiply the ctm by each transformation matrix in reverse order. C. In both cases A and B, next: 1. Pass the ctm to the vertex shader. 2. Draw object. 3. In the vertex shader, multiply each vertex by the ctm. 3

4. Using MV.js functions for transformation matrices Create a matrix to translate by vector (dx, dy, dz): translate(dx, dy, dz); Create a matrix to rotate by angle about axis given by (vx, vy, vz): rotate(angle, vx, vy, vz); Create a matrix to scale by factors given by (sx, sy, sz): scalem(sx, sy, sz); Here's the tricky part: You should call the functions and multiply them with the ctm in the reverse order from the order in which you want to perform the transformations! 4

5. Order of transformations Suppose you want to perform transformations in the following order: 1. Scale 2. Rotate Recall concatenation of matrix multiplications: P' = TRSP As we create each new transformation matrix and multiply with the ctm we need to do so in the correct order to create the final matrix, M = TRS For example, start with the identity matrix (I): 3. Translate 1. Multiply by translate() 2. Multiply by rotate() 3. Multiply by scale() 4. Draw P M = I*T M = I*T*R M = I*T*R*S P' = MP = TRSP 5

6. Example Code var mvMatrix = [ ]; mvMatrix = translate(0.0, 0.2, 0.0); mvMatrix = mult(mvMatrix, scalem(2.0, 2.0, 1.0)); gl.uniformMatrix4fv(modelView, false, flatten(mvMatrix) ); gl.drawArrays(gl.LINE_LOOP, 0, 3); mvMatrix = scalem(2.0, 2.0, 1.0); mvMatrix = mult(mvMatrix, translate(-0.1*Math.sqrt(3.0), 0.0, 0.0)); //third mvMatrix = mult(mvMatrix, rotate(-90.0, 0.0, 0.0, 1.0)); //second mvMatrix = mult(mvMatrix, scalem(1.0, 2.0, 1.0)); gl.uniformMatrix4fv(modelView, false, flatten(mvMatrix) ); gl.drawArrays(gl.LINE_LOOP, 0, 3); //second //first //last //first 6

7. The vertex shader attribute vec4 vPosition; uniform vec4 vColor; uniform mat4 modelView; varying vec4 fColor; void main() { gl_Position = modelView*vPosition; fColor = vColor; } 7

8. Trigonometry review r = sin q ( ) =y 2+ y 2 x r y y r= x 2+ y x x 2 x cos q ( ) =x r= 2+ y 2 tan q ( )=sin q ( ) 1 tan q ( )=x cos q ( )=y cot q ( )= y x -1 y y x q = tan =sin =cos -1 -1 2+ y2 2+ y2 x x x 8

9. Rotation about a fixed point Suppose you want to rotate an object about a fixed point, pf = (xf, yf, zf), about an axis parallel to the Z axis. y pf x z 1. Translate object so that pf is at the origin. 2. Rotate object about the Z axis 3. Translate object back to pf 9

10. Calculating the Rotation matrix ( )RZq ( )T -pf cosq sinq ( )p p'=T pf -sinq cosq 0 0 -xf -yf -zf 1 0 0 1 0 0 0 0 1 1 0 0 0 0 1 0 0 0 0 1 0 ( )= RZq ( )T -pf 0 0 cosq sinq 0 0 -sinq cosq 0 0 -xfcosq + yfsinq -xfsinq - yfcosq -zf 1 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0 xf yf zf 1 T pf ( )RZq ( )T -pf ( )= 10

11. General Rotation Can generate any rotation with a combination of RxRyRz = R. Calculating the angles can be tricky. Rotation about an arbitrary axis through the origin: 1. Use rotations to align the axis with the Z axis. 2. Rotate about the Z axis 3. Undo the rotations from (1). )Ry-qy ( )Rzq ( )Ryqy ( )Rxqx ( ( )p p'= Rx-qx 11

12. Defining the Rotation Axis 1. Define rotation axis as a vector of length 1 (a unit vector) with x, y and z components: x, y, z ax ay az x z ax 2+ay 2+az 2=1 v = where v y 12

13. Calculating x 1. Project vector v to the y-z plane. (Draw line from tip of v perpendicular to y-z plane). 2. x is the angle of this projection from the z axis. y z d v y x z sinqx=ay d = ay 2+az 2 where d cosqx=az d 13

14. Rotating about X axis 1 0 0 0 0 0 0 0 0 1 cosqx sinqx 0 -sinqx cosqx 0 Rxqx ( )= = 14

15. Calculating y When rotating about the X axis, the x component stays the same, but the y and z components change. y r = 1-ax 2= ay 2+az 2= d x cos y = d sin y = x r x 1 y z Note: The rotation is clockwise, so the angle will be negative. 15

16. The Rotation Matrix for Ry cosqy 0 sinqy 0 0 -sinqy 1 0 cosqy 0 0 0 0 1 0 ( )= Ry -qy = 0 16

17. The full rotation Rotation about an arbitrary axis: ( )Rzq ( )Ry-qy ( )Rxqx ( )Ryqy ( )p p'= Rx-qx Rotation about a fixed point, pf, parallel to an arbitrary axis: ( )Rx-qx ( )Rzq ( )Ry-qy ( )Rxqx ( )p ( )Ryqy ( )T -pf p'=T pf 17

18. Shear y y (x, y) (x', y') x x Equations: x' = x+ycot y' = y z' = z Matrix: cotq 1 0 0 1 0 0 0 0 0 1 0 1 0 0 0 Hx(q)= 18