CS452/552; EE465/505. Transformations
|
|
- Shon Lambert
- 5 years ago
- Views:
Transcription
1 CS452/552; EE465/55 Transformations
2 Outline! Transformations Read: Angel, Chapter 4 (study cube.html/cube.js example) Helpful links: Linear Algebra: Khan Academy Lab1 is posted on github, due: Friday, 1/3, midnight Lab2: use ASDW to move a 2D shape around
3 Recap: Translation Matrix We can express translation using a 4 x 4 matrix T in homogeneous coordinates p =Tp where T = T(d x, d y, d z ) = & 1 $ $ $ $ % 1 1 This form is better for implementation because all affine transformations can be expressed this way and multiple transformations can be concatenated together d d d x y z 1 #!!!! " Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 215
4 Translation! Move the origin to a new location!!!!!! " # $ $ $ $ $ $ % & = ),, ( z y x z y x t t t t t t T
5 Rotation (2D) Consider rotation about the origin by θ degrees radius stays the same, angle increases by θ x = r cos (φ + θ) y = r sin (φ + θ) x = x cos θ y sin θ y = x sin θ + y cos θ x = r cos φ y = r sin φ Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 215
6 Rotation about the z axis! Rotation about z axis in three dimensions leaves all points with the same z Equivalent to rotation in two dimensions in planes of constant z x = x cos θ y sin θ y = x sin θ + y cos θ z = z or in homogeneous coordinates p =R z (θ)p Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 215
7 R = R z (θ) = Rotation Matrix!!!! " # $ $ $ $ % & θ θ θ θ 1 1 cos sin sin cos Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 215
8 Rotation about x and y axes! Same argument as for rotation about z axis For rotation about x axis, x is unchanged For rotation about y axis, y is unchanged & 1 # $ cos θ - sin θ $ R = R x (θ) = $ sin θ cos θ $!!!! % 1" & cos θ sin θ # $ R = R y (θ) = 1 $ $ - sin θ cos θ $!!!! % 1" Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 215
9 Scaling Expand or contract along each axis (fixed point of origin) x =s x x y =s y y z =s z z p =Sp S = S(s x, s y, s z ) = & sx $ $ $ $ % s y s z #!!!! 1" Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 215
10 Reflection corresponds to negative scale factors s x = -1 s y = 1 original s x = -1 s y = -1 s x = 1 s y = -1 Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 215
11 Inverses! Although we could compute inverse matrices by general formulas, we can use simple geometric observations Translation: T -1 (d x, d y, d z ) = T(-d x, -d y, -d z ) Rotation: R -1 (θ) = R(-θ) Holds for any rotation matrix Note that since cos(-θ) = cos(θ) and sin(-θ)=-sin(θ) R -1 (θ) = R T (θ) Scaling: S -1 (s x, s y, s z ) = S(1/s x, 1/s y, 1/s z ) Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 215
12 Concatenation! We can form arbitrary affine transformation matrices by multiplying together rotation, translation, and scaling matrices! Because the same transformation is applied to many vertices, the cost of forming a matrix M=ABCD is not significant compared to the cost of computing Mp for many vertices p! The difficult part is how to form a desired transformation from the specifications in the application Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 215
13 Order of Transformations! Note that matrix on the right is the first applied! Mathematically, the following are equivalent p = ABCp = A(B(Cp))! Note many references use column matrices to represent points. In terms of column matrices p T = p T C T B T A T Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 215
14 MATRIX ORDER Multiply left to right Results are drastically different (an angry vertex) JEFF CHASTINE
15 MATRIX ORDER Multiply left to right Results are drastically different Order of operations Rotate 45 JEFF CHASTINE
16 MATRIX ORDER Multiply left to right Results are drastically different Order of operations Rotate 45 Translate 1 units JEFF CHASTINE
17 MATRIX ORDER Multiply left to right Results are drastically different Order of operations Rotate 45 Translate 1 units before after JEFF CHASTINE
18 MATRIX ORDER Multiply left to right Results are drastically different Order of operations JEFF CHASTINE
19 MATRIX ORDER Multiply left to right Results are drastically different Order of operations Translate 1 units JEFF CHASTINE
20 MATRIX ORDER Multiply left to right Results are drastically different Order of operations Translate 1 units Rotate 45 JEFF CHASTINE
21 MATRIX ORDER Multiply left to right Results are drastically different Order of operations Translate 1 units Rotate 45 after before JEFF CHASTINE
22 General Rotation About the Origin! A rotation by θ about an arbitrary axis can be decomposed into the concatenation of rotations about the x, y, and z axes R(θ) = R z (θ z ) R y (θ y ) R x (θ x ) y θ v θ x θ y θ z are called the Euler angles x Note that rotations do not commute We can use rotations in another order but with different angles z Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 215
23 Rotation About a Fixed Point other than the Origin Move fixed point to origin Rotate Move fixed point back M = T(p f ) R(θ) T(-p f ) Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 215
24 WebGL Transformations! Learn how to carry out transformations in WebGL Rotation Translation Scaling! Introduce MV.js transformations Model-view Projection Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley
25 The Big Picture! How to we get from space to space?! For every model Have a (M)odel matrix! Transforms from object to world space M? Jeff Chastine
26 The Big Picture! How to we get from space to space?! To put in camera space Have a (V)iew matrix Usually need only one of these M V Jeff Chastine
27 The Big Picture! How to we get from space to space?! The ModelView matrix Sometimes these are combined into one matrix Usually keep them separate for convenience M V MV Jeff Chastine
28 Back to The Big Picture! How might we make the model matrix? M Jeff Chastine
29 Back to The Big Picture! How might we make the model matrix? M Translation matrix T Rotation matrix R 1 Rotation matrix R 2 Scale matrix S Jeff Chastine
30 Back to The Big Picture! How might we make the model matrix? M Translation matrix T Rotation matrix R 1 Rotation matrix R 2 Scale matrix S T * R 1 * R 2 * S = M Jeff Chastine
31 Pre 3.1 OpenGL Matrices! In Pre 3.1 OpenGL matrices were part of the state! Multiple types Model-View (GL_MODELVIEW) Projection (GL_PROJECTION) Texture (GL_TEXTURE) Color(GL_COLOR)! Single set of functions for manipulation! Select which to manipulated by glmatrixmode(gl_modelview); glmatrixmode(gl_projection); Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 215
32 Why Deprecation! Functions were based on carrying out the operations on the CPU as part of the fixed function pipeline! Current model-view and projection matrices were automatically applied to all vertices using CPU! We will use the notion of a current transformation matrix with the understanding that it may be applied in the shaders Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 215
33 Current Transformation Matrix (CTM)! Conceptually there is a 4 x 4 homogeneous coordinate matrix, the current transformation matrix (CTM) that is part of the state and is applied to all vertices that pass down the pipeline! The CTM is defined in the user program and loaded into a transformation unit p C p =Cp vertices CTM vertices Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 215
34 CTM operations! The CTM can be altered either by loading a new CTM or by postmutiplication Load an identity matrix: C I Load an arbitrary matrix: C M Load a translation matrix: C T Load a rotation matrix: C R Load a scaling matrix: C S Postmultiply by an arbitrary matrix: C CM Postmultiply by a translation matrix: C CT Postmultiply by a rotation matrix: C C R Postmultiply by a scaling matrix: C C S Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 215
35 Rotation about a Fixed Point Start with identity matrix: C I Move fixed point to origin: C CT Rotate: C CR Move fixed point back: C CT -1 Result: C = TR T 1 which is backwards. This result is a consequence of doing postmultiplications. Let s try again. Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 215
36 Reversing the Order We want C = T 1 R T so we must do the operations in the following order C I C CT -1 C CR C CT Each operation corresponds to one function call in the program. Note that the last operation specified is the first executed in the program Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 215
37 CTM in WebGL! OpenGL had a model-view and a projection matrix in the pipeline which were concatenated together to form the CTM! We will emulate this process Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 215
38 Using the ModelView Matrix! In WebGL, the model-view matrix is used to Position the camera Can be done by rotations and translations but is often easier to use the lookat function in MV.js Build models of objects! The projection matrix is used to define the view volume and to select a camera lens! Although these matrices are no longer part of the OpenGL state, it is usually a good strategy to create them in our own applications q = P*MV*p Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 215
39 Rotation, Translation, Scaling Create an identity matrix: var m = mat4(); Multiply on right by rotation matrix of theta in degrees where (vx, vy, vz) define axis of rotation var r = rotate(theta, vx, vy, vz) m = mult(m, r); Also have rotatex, rotatey, rotatez Do same with translation and scaling: var s = scale( sx, sy, sz) var t = translate(dx, dy, dz); m = mult(s, t); Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 215
40 Example using MV.js! Rotation about z axis by 3 degrees with a fixed point of (1., 2., 3.) var m = mult(translate(1., 2., 3.), rotate(3.,.,., 1.)); m = mult(m, translate(-1., -2., -3.));! Remember that last matrix specified in the program is the first applied Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 215
41 Arbitrary Matrices! Can load and multiply by matrices defined in the application program! Matrices are stored as one dimensional array of 16 elements by MV.js but can be treated as 4 x 4 matrices in row major order! OpenGL wants column major data! gl.unifrommatrix4f has a parameter for automatic transpose but it must be set to false.! flatten function converts to column major order which is required by WebGL functions Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 215
42 Matrix Stacks! In many situations we want to save transformation matrices for use later Traversing hierarchical data structures (Chapter 9)! Pre 3.1 OpenGL maintained stacks for each type of matrix! Easy to create the same functionality in JS push and pop are part of Array object var stack = [ ] stack.push(modelviewmatrix); modelviewmatrix = stack.pop(); Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 215
43 Examples! TranslatedTriangle! ScaledTriangle_Matrix! RotatedTriangle_Matrix! TranslatedRotatedTriangle! RotatingTranslatedTriangle available on website 43
44 TranslatedTriangle! Vertex Shader attribute vec4 a_position; uniform vec4 u_translation; void main() { } gl_position = a_position + u_translation; 44
45 TranslatedTriangle, cont. var vertices = new Float32Array([,.5, -.5, -.5,.5, -.5]); var vertexbuffer = gl.createbuffer(); // Create a buffer object // Bind the buffer object to target & write data to the buffer gl.bindbuffer(gl.array_buffer, vertexbuffer); gl.bufferdata(gl.array_buffer, vertices, gl.static_draw); // Assign the buffer object to the attribute variable var a_position = gl.getattriblocation(gl.program, 'a_position'); gl.vertexattribpointer(a_position, 2, gl.float, false,, ); // Enable the assignment to a_position variable gl.enablevertexattribarray(a_position);
46 TranslatedTriangle, cont. // The translation distance for x, y, and z direction var Tx =.5, Ty =.5, Tz =.; // Pass the translation distance to the vertex shader var u_translation = gl.getuniformlocation(gl.program, 'u_translation'); gl.uniform4f(u_translation, Tx, Ty, Tz,.);
47 ScaledTriangle_Matrix! Vertex Shader attribute vec4 a_position; uniform mat4 u_xformmatrix; void main() { } gl_position = u_xformmatrix * a_position; 47
48 ScaledTriangle_Matrix, cont. var Sx = 1., Sy = 1.5, Sz = 1.; // Note: WebGL is column major order var xformmatrix = new Float32Array([ Sx,.,.,.,., Sy,.,.,.,., Sz,.,.,.,., 1. ]); // Pass the rotation matrix to the vertex shader var u_xformmatrix = gl.getuniformlocation(gl.program, 'u_xformmatrix'); gl.uniformmatrix4fv(u_xformmatrix, false, xformmatrix);
49 RotatedTriangle_Matrix! Vertex Shader attribute vec4 a_position; uniform mat4 u_xformmatrix; void main() { } gl_position = u_xformmatrix * a_position; 49
50 RotatedTriangle_Matrix, cont. // Create Matrix4 object for the rotation matrix var xformmatrix = new Matrix4(); // Set the rotation matrix var ANGLE = 9.; // The rotation angle xformmatrix.setrotate(angle,,, 1); // Pass the rotation matrix to the vertex shader var u_xformmatrix = gl.getuniformlocation(gl.program, 'u_xformmatrix'); gl.uniformmatrix4fv(u_xformmatrix, false, xformmatrix.elements);
51 RotatedTriangle_Matrix, cont. // xformmatrix.setrotate(angle,,, 1); Matrix4.setRotate = function(angle, x, y, z) { s = Math.sin(angle); c = Math.cos(angle); see code in cuon-matrix.js Alternative: Angel MV.js
52 Example: Rotating Cube! Example: Begin with a cube rotating! Use mouse or button listener to change direction of rotation! Start with a program that draws a cube in a standard way Centered at origin Sides aligned with axes Will discuss modeling in next lecture! Two methods for display: vertices vs. indices Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 215
53 Where do we apply transformation?! Same issue as with rotating square in application to vertices in vertex shader: send MV matrix in vertex shader: send angles! Choice between second and third unclear! Do we do trigonometry once in CPU or for every vertex in shader GPUs have trig functions hardwired in silicon Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 215
54 Rotation Event Listeners document.getelementbyid( "xbutton" ).onclick = function () { axis = xaxis; }; document.getelementbyid( "ybutton" ).onclick = function () { axis = yaxis; }; document.getelementbyid( "zbutton" ).onclick = function () { axis = zaxis; }; function render(){ gl.clear( gl.color_buffer_bit gl.depth_buffer_bit); theta[axis] += 2.; gl.uniform3fv(thetaloc, theta); gl.drawarrays( gl.triangles,, NumVertices ); requestanimframe( render ); } Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 215
55 Rotation Shader attribute vec4 vposition; attribute vec4 vcolor; varying vec4 fcolor; uniform vec3 theta; void main() { vec3 angles = radians( theta ); vec3 c = cos( angles ); vec3 s = sin( angles ); // Remember: these matrices are column-major mat4 rx = mat4( 1.,.,.,.,., c.x, s.x,.,., -s.x, c.x,.,.,.,., 1. ) Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 215
56 Rotation Shader (cont) mat4 ry = mat4( c.y,., -s.y,.,., 1.,.,., s.y,., c.y,.,.,.,., 1. ); mat4 rz = mat4( c.z, -s.z,.,., s.z, c.z,.,.,.,., 1.,.,.,.,., 1. ); fcolor = vcolor; gl_position = rz * ry * rx * vposition; } Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 215
57 Modeling a Cube Define global array for vertices var vertices = [ vec3( -.5, -.5,.5 ), vec3( -.5,.5,.5 ), vec3(.5,.5,.5 ), vec3(.5, -.5,.5 ), vec3( -.5, -.5, -.5 ), vec3( -.5,.5, -.5 ), vec3(.5,.5, -.5 ), vec3(.5, -.5, -.5 ) ]; Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 215
58 Colors Define global array for colors var vertexcolors = [ [.,.,., 1. ], // black [ 1.,.,., 1. ], // red [ 1., 1.,., 1. ], // yellow [., 1.,., 1. ], // green [.,., 1., 1. ], // blue [ 1.,., 1., 1. ], // magenta [., 1., 1., 1. ], // cyan [ 1., 1., 1., 1. ] // white ]; Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 215
59 Draw cube from faces function colorcube( ) { quad(,3,2,1); quad(2,3,7,6); quad(,4,7,3); quad(1,2,6,5); quad(4,5,6,7); quad(,1,5,4); } Note that vertices are ordered so that we obtain correct outward facing normals. Each quad generates two triangles Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 215
Introduction to Computer Graphics with WebGL
1 Introduction to Computer Graphics with WebGL Ed Angel Transformations General Transformations A transformation maps points to other points and/or vectors to other vectors v=t(u) Q=T(P) 2 Affine Transformations
More informationIntroduction to Computer Graphics with WebGL
Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science Laboratory University of New Mexico WebGL Transformations
More informationCS452/552; EE465/505. Models & Viewing
CS452/552; EE465/505 Models & Viewing 2-03 15 Outline! Building Polygonal Models Vertex lists; gl.drawarrays( ) Edge lists: gl.drawelements( )! Viewing Classical Viewing Read: Viewing in Web3D Angel, Section
More informationTransformations. CS 537 Interactive Computer Graphics Prof. David E. Breen Department of Computer Science
Transformations CS 537 Interactive Computer Graphics Prof. David E. Breen Department of Computer Science 1 Objectives Introduce standard transformations - Rotation - Translation - Scaling - Shear Derive
More informationObjectives. transformation. General Transformations. Affine Transformations. Notation. Pipeline Implementation. Introduce standard transformations
Objectives Transformations CS Interactive Computer Graphics Prof. David E. Breen Department of Computer Science Introduce standard transformations - Rotation - Translation - Scaling - Shear Derive homogeneous
More informationComputer Graphics CS 543 Lecture 5 (Part 2) Implementing Transformations
Computer Graphics CS 543 Lecture 5 (Part 2) Implementing Transformations Prof Emmanuel Agu Computer Science Dept. Worcester Polytechnic Institute (WPI) Objectives Learn how to implement transformations
More informationComputer Graphics (CS 4731) Lecture 11: Implementing Transformations. Prof Emmanuel Agu. Computer Science Dept. Worcester Polytechnic Institute (WPI)
Computer Graphics (CS 47) Lecture : Implementing Transformations Prof Emmanuel Agu Computer Science Dept. Worcester Polytechnic Institute (WPI) Objectives Learn how to implement transformations in OpenGL
More informationTransformations. Prof. George Wolberg Dept. of Computer Science City College of New York
Transforations Prof. George Wolberg Dept. of Coputer Science City College of New York Objectives Introduce standard transforations - Rotations - Translation - Scaling - Shear Derive hoogeneous coordinate
More informationTransformations II. Arbitrary 3D Rotation. What is its inverse? What is its transpose? Can we constructively elucidate this relationship?
Utah School of Computing Fall 25 Transformations II CS46 Computer Graphics From Rich Riesenfeld Fall 25 Arbitrar 3D Rotation What is its inverse? What is its transpose? Can we constructivel elucidate this
More informationCS452/552; EE465/505. Review & Examples
CS452/552; EE465/505 Review & Examples 2-05 15 Outline Review and Examples:! Shaders, Buffers & Binding! Example: Draw 3 Triangles Vertex lists; gl.drawarrays( ) Edge lists: gl.drawelements( )! Example:
More informationCS 4204 Computer Graphics
CS 424 Computer Graphics 2D Transformations Yong Cao Virginia Tech References: Introduction to Computer Graphics course notes by Doug Bowman Interactive Computer Graphics, Fourth Edition, Ed Angle Transformations
More informationTransformations. Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts University of New Mexico
Transformations Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts University of New Mexico Angel: Interactive Computer Graphics 4E Addison-Wesley 25 1 Objectives
More informationBuilding Models. Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015
Building Models 1 Objectives Introduce simple data structures for building polygonal models Vertex lists Edge lists 2 Representing a Mesh Consider a mesh v 5 v 6 e e e 3 v 9 8 8 v e 4 1 e 11 e v v 7 7
More informationOrder of Transformations
Order of Transformations Because the same transformation is applied to many vertices, the cost of forming a matrix M=ABCD is not significant compared to the cost of computing Mp for many vertices p Note
More informationComputer Graphics (CS 4731) Lecture 11: Implementing Transformations. Prof Emmanuel Agu. Computer Science Dept. Worcester Polytechnic Institute (WPI)
Computer Graphics (CS 47) Lecture : Implementing Transformations Prof Emmanuel Agu Computer Science Dept. Worcester Polytechnic Institute (WPI) Objectives Learn how to implement transformations in OpenGL
More informationBuilding Models. CS 537 Interactive Computer Graphics Prof. David E. Breen Department of Computer Science
Building Models CS 537 Interactive Computer Graphics Prof. David E. Breen Department of Computer Science 1 Objectives Introduce simple data structures for building polygonal models - Vertex lists - Edge
More informationCSC 470 Computer Graphics
CSC 470 Computer Graphics Transformations of Objects CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 1 Transformations of objects - 2D CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 2 Using
More informationBuilding Models. Objectives Introduce simple data structures for building polygonal models. Vertex lists Edge lists
Building Models Objectives Introduce simple data structures for building polygonal models Vertex lists Edge lists 1 Representing a Mesh Consider a mesh v 5 v 6 e e e 3 v 9 8 8 v e 4 1 e 11 v e v 7 7 1
More informationLecture 4: Transformations and Matrices. CSE Computer Graphics (Fall 2010)
Lecture 4: Transformations and Matrices CSE 40166 Computer Graphics (Fall 2010) Overall Objective Define object in object frame Move object to world/scene frame Bring object into camera/eye frame Instancing!
More informationCS452/552; EE465/505. Image Formation
CS452/552; EE465/505 Image Formation 1-15-15 Outline! Image Formation! Introduction to WebGL, continued Draw a colored triangle using WebGL Read: Angel, Chapters 2 & 3 Homework #1 will be available on
More informationLecture 9: Transformations. CITS3003 Graphics & Animation
Lecture 9: Transformations CITS33 Graphics & Animation E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 212 Objectives Introduce standard transformations Rotation Translation Scaling
More informationIntroduction to Computer Graphics with WebGL
Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science Laboratory University of New Mexico 1 Computer Viewing
More informationComputer Graphics CS 543 Lecture 4 (Part 2) Building 3D Models (Part 2)
Computer Graphics CS 543 Lecture 4 (Part 2) Building 3D Models (Part 2) Prof Emmanuel Agu Computer Science Dept. Worcester Polytechnic Institute (WPI) Modeling a Cube In 3D, declare vertices as (x,y,z)
More informationTransformations. Standard Transformations. David Carr Virtual Environments, Fundamentals Spring 2005 Based on Slides by E. Angel
INSTITUTIONEN FÖR SYSTEMTEKNIK LULEÅ TEKNISKA UNIVERSITET Transformations David Carr Virtual Environments, Fundamentals Spring 25 Based on Slides by E. Angel Jan-27-5 SMM9, Transformations 1 L Overview
More informationCS D Transformation. Junqiao Zhao 赵君峤
CS10101001 3D Transformation Junqiao Zhao 赵君峤 Department of Computer Science and Technology College of Electronics and Information Engineering Tongji University Review Translation Linear transformation
More informationCS452/552; EE465/505. Intro to Lighting
CS452/552; EE465/505 Intro to Lighting 2-10 15 Outline! Projection Normalization! Introduction to Lighting (and Shading) Read: Angel Chapter 5., sections 5.4-5.7 Parallel Projections Chapter 6, sections
More informationTransformations. Overview. Standard Transformations. David Carr Fundamentals of Computer Graphics Spring 2004 Based on Slides by E.
INSTITUTIONEN FÖR SYSTEMTEKNIK LULEÅ TEKNISKA UNIVERSITET Transformations David Carr Fundamentals of Computer Graphics Spring 24 Based on Slides by E. Angel Feb-1-4 SMD159, Transformations 1 L Overview
More informationTransformations. Rotation and Scaling
Transformations In OpenGL, transformation are performed in the opposite order they are called 4 3 2 1 translate(1., 1.,.); rotatez(45.); scale(2., 2.,.); DrawSquare(.,., 1.); 4 3 2 1 scale(2., 2.,.); rotatez(45.);
More informationBasic Elements. Geometry is the study of the relationships among objects in an n-dimensional space
Basic Elements Geometry is the study of the relationships among objects in an n-dimensional space In computer graphics, we are interested in objects that exist in three dimensions We want a minimum set
More informationComputer Viewing. CS 537 Interactive Computer Graphics Prof. David E. Breen Department of Computer Science
Computer Viewing CS 537 Interactive Computer Graphics Prof. David E. Breen Department of Computer Science 1 Objectives Introduce the mathematics of projection Introduce OpenGL viewing functions Look at
More informationTransformations Computer Graphics I Lecture 4
15-462 Computer Graphics I Lecture 4 Transformations Vector Spaces Affine and Euclidean Spaces Frames Homogeneous Coordinates Transformation Matrices January 23, 2003 [Angel, Ch. 4] Frank Pfenning Carnegie
More informationComputer Graphics Geometric Transformations
Computer Graphics 2016 6. Geometric Transformations Hongxin Zhang State Key Lab of CAD&CG, Zhejiang University 2016-10-31 Contents Transformations Homogeneous Co-ordinates Matrix Representations of Transformations
More informationComp 410/510 Computer Graphics Spring Programming with OpenGL Part 4: Three Dimensions
Comp 410/510 Computer Graphics Spring 2018 Programming with OpenGL Part 4: Three Dimensions Objectives Develop a bit more sophisticated three-dimensional example - Rotating cube Introduce hidden-surface
More informationComputer Graphics. Chapter 5 Geometric Transformations. Somsak Walairacht, Computer Engineering, KMITL
Chapter 5 Geometric Transformations Somsak Walairacht, Computer Engineering, KMITL 1 Outline Basic Two-Dimensional Geometric Transformations Matrix Representations and Homogeneous Coordinates Inverse Transformations
More informationComputer Graphics. Chapter 7 2D Geometric Transformations
Computer Graphics Chapter 7 2D Geometric Transformations Chapter 7 Two-Dimensional Geometric Transformations Part III. OpenGL Functions for Two-Dimensional Geometric Transformations OpenGL Geometric Transformation
More informationTransformations Computer Graphics I Lecture 4
15-462 Computer Graphics I Lecture 4 Transformations Vector Spaces Affine and Euclidean Spaces Frames Homogeneous Coordinates Transformation Matrices January 24, 2002 [Angel, Ch. 4] Frank Pfenning Carnegie
More informationModeling Transform. Chapter 4 Geometric Transformations. Overview. Instancing. Specify transformation for objects 李同益
Modeling Transform Chapter 4 Geometric Transformations 李同益 Specify transformation for objects Allow definitions of objects in own coordinate systems Allow use of object definition multiple times in a scene
More informationProgramming with OpenGL Complete Programs Objectives Build a complete first program
Programming with OpenGL Complete Programs Objectives Build a complete first program Introduce shaders Introduce a standard program structure Simple viewing Two-dimensional viewing as a special case of
More information3D Mathematics. Co-ordinate systems, 3D primitives and affine transformations
3D Mathematics Co-ordinate systems, 3D primitives and affine transformations Coordinate Systems 2 3 Primitive Types and Topologies Primitives Primitive Types and Topologies 4 A primitive is the most basic
More informationBuilding Models. Prof. George Wolberg Dept. of Computer Science City College of New York
Building Models Prof. George Wolberg Dept. of Computer Science City College of New York Objectives Introduce simple data structures for building polygonal models - Vertex lists - Edge lists Deprecated
More informationCS452/552; EE465/505. Geometry Transformations
CS452/552; EE465/505 Geometry Transformations 1-26-15 Outline! Geometry: scalars, points & vectors! Transformations Read: Angel, Chapter 4 (study cube.html/cube.js example) Appendix B: Spaces (vector,
More informationAnnouncement. Project 1 has been posted online and in dropbox. Due: 11:59:59 pm, Friday, October 14
Announcement Project 1 has been posted online and in dropbox Due: 11:59:59 pm, Friday, October 14 Project 1: Interactive Viewing of Two Teapots How to create a teapot? Before OpenGL 3., glutsolidteapot
More informationComputer Science 336 Fall 2017 Homework 2
Computer Science 336 Fall 2017 Homework 2 Use the following notation as pseudocode for standard 3D affine transformation matrices. You can refer to these by the names below. There is no need to write out
More informationIntroduction to Computer Graphics with WebGL
Introduction to Computer Graphics with WebGL Ed Angel The Mandelbrot Set Fractals Fractal (fractional geometry) objects generate some of the most complex and beautiful graphics - The mathematics describing
More informationCS452/552; EE465/505. Image Processing Frame Buffer Objects
CS452/552; EE465/505 Image Processing Frame Buffer Objects 3-12 15 Outline! Image Processing: Examples! Render to Texture Read: Angel, Chapter 7, 7.10-7.13 Lab3 new due date: Friday, Mar. 13 th Project#1
More informationWebGL A quick introduction. J. Madeira V. 0.2 September 2017
WebGL A quick introduction J. Madeira V. 0.2 September 2017 1 Interactive Computer Graphics Graphics library / package is intermediary between application and display hardware Application program maps
More informationWe assume that you are familiar with the following:
We will use WebGL 1.0. WebGL 2.0 is now being supported by most browsers but requires a better GPU so may not run on older computers or on most cell phones and tablets. See http://webglstats.com/. We will
More informationCS 432 Interactive Computer Graphics
CS 432 Interactive Computer Graphics Lecture 4 3D Viewing Matt Burlick - Drexel University - CS 432 1 Reading Angel Chapters 3-4 Red Book Chapter 5, Appendix E Matt Burlick - Drexel University - CS 432
More informationGLOBAL EDITION. Interactive Computer Graphics. A Top-Down Approach with WebGL SEVENTH EDITION. Edward Angel Dave Shreiner
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
More informationTransformations Week 9, Lecture 18
CS 536 Computer Graphics Transformations Week 9, Lecture 18 2D Transformations David Breen, William Regli and Maxim Peysakhov Department of Computer Science Drexel University 1 3 2D Affine Transformations
More informationOpenGL pipeline Evolution and OpenGL Shading Language (GLSL) Part 2/3 Vertex and Fragment Shaders
OpenGL pipeline Evolution and OpenGL Shading Language (GLSL) Part 2/3 Vertex and Fragment Shaders Prateek Shrivastava CS12S008 shrvstv@cse.iitm.ac.in 1 GLSL Data types Scalar types: float, int, bool Vector
More informationComputer Graphics 7: Viewing in 3-D
Computer Graphics 7: Viewing in 3-D In today s lecture we are going to have a look at: Transformations in 3-D How do transformations in 3-D work? Contents 3-D homogeneous coordinates and matrix based transformations
More informationCS452/552; EE465/505. Lighting & Shading
CS452/552; EE465/505 Lighting & Shading 2-17 15 Outline! More on Lighting and Shading Read: Angel Chapter 6 Lab2: due tonight use ASDW to move a 2D shape around; 1 to center Local Illumination! Approximate
More informationGEOMETRIC TRANSFORMATIONS AND VIEWING
GEOMETRIC TRANSFORMATIONS AND VIEWING 2D and 3D 1/44 2D TRANSFORMATIONS HOMOGENIZED Transformation Scaling Rotation Translation Matrix s x s y cosθ sinθ sinθ cosθ 1 dx 1 dy These 3 transformations are
More informationGraphics and Interaction Transformation geometry and homogeneous coordinates
433-324 Graphics and Interaction Transformation geometry and homogeneous coordinates Department of Computer Science and Software Engineering The Lecture outline Introduction Vectors and matrices Translation
More informationComputer Graphics (CS 543) Lecture 4a: Linear Algebra for Graphics (Points, Scalars, Vectors)
Computer Graphics (CS 543) Lecture 4a: Linear Algebra for Graphics (Points, Scalars, Vectors) Prof Emmanuel Agu Computer Science Dept. Worcester Polytechnic Institute (WPI) Announcements Sample exam 1
More informationCOMP30019 Graphics and Interaction Transformation geometry and homogeneous coordinates
COMP30019 Graphics and Interaction Transformation geometry and homogeneous coordinates Department of Computer Science and Software Engineering The Lecture outline Introduction Vectors and matrices Translation
More informationCS Computer Graphics: Transformations & The Synthetic Camera
CS 543 - Computer Graphics: Transformations The Snthetic Camera b Robert W. Lindeman gogo@wpi.edu (with help from Emmanuel Agu ;-) Introduction to Transformations A transformation changes an objects Size
More informationCS559 Computer Graphics Fall 2015
CS559 Computer Graphics Fall 2015 Practice Midterm Exam Time: 2 hrs 1. [XX Y Y % = ZZ%] MULTIPLE CHOICE SECTION. Circle or underline the correct answer (or answers). You do not need to provide a justification
More informationLast week. Machiraju/Zhang/Möller/Fuhrmann
Last week Machiraju/Zhang/Möller/Fuhrmann 1 Geometry basics Scalar, point, and vector Vector space and affine space Basic point and vector operations Sided-ness test Lines, planes, and triangles Linear
More information3D Transformation. In 3D, we have x, y, and z. We will continue use column vectors:. Homogenous systems:. x y z. x y z. glvertex3f(x, y,z);
3D Transformation In 3D, we have x, y, and z. We will continue use column vectors:. Homogenous systems:. 3D Transformation glvertex3f(x, y,z); x y z x y z A Right Handle Coordinate System x y z; y z x;
More information1 Transformations. Chapter 1. Transformations. Department of Computer Science and Engineering 1-1
Transformations 1-1 Transformations are used within the entire viewing pipeline: Projection from world to view coordinate system View modifications: Panning Zooming Rotation 1-2 Transformations can also
More informationAffine Transformation. Edith Law & Mike Terry
Affine Transformation Edith Law & Mike Terry Graphic Models vs. Images Computer Graphics: the creation, storage and manipulation of images and their models Model: a mathematical representation of an image
More informationIntroduction to Computer Graphics with WebGL
Introduction to Computer Graphics with WebGL Ed Angel Classical Viewing Computer Graphics with WebGL Ed Angel, 204 Classical Viewing Viewing requires three basic elements - One or more objects - A viewer
More informationTransformations. CSCI 420 Computer Graphics Lecture 5
CSCI 420 Computer Graphics Lecture 5 Transformations Jernej Barbic University of Southern California Vector Spaces Euclidean Spaces Frames Homogeneous Coordinates Transformation Matrices [Angel, Ch. 3]
More informationTransformations. OpenGL Transformations. 4x4 Model-view Matrix (this lecture) OpenGL Transformation Matrices. 4x4 Projection Matrix (next lecture)
CSCI 420 Computer Graphics Lecture 5 OpenGL Transformations Transformations Vector Spaces Euclidean Spaces Frames Homogeneous Coordinates Transformation Matrices Jernej Barbic [Angel, Ch. 3] University
More informationUNIT 2 2D TRANSFORMATIONS
UNIT 2 2D TRANSFORMATIONS Introduction With the procedures for displaying output primitives and their attributes, we can create variety of pictures and graphs. In many applications, there is also a need
More informationThree Main Themes of Computer Graphics
Three Main Themes of Computer Graphics Modeling How do we represent (or model) 3-D objects? How do we construct models for specific objects? Animation How do we represent the motion of objects? How do
More informationObject Representation Affine Transforms. Polygonal Representation. Polygonal Representation. Polygonal Representation of Objects
Object Representation Affine Transforms Polygonal Representation of Objects Although perceivable the simplest form of representation they can also be the most problematic. To represent an object polygonally,
More informationOPENGL RENDERING PIPELINE
CPSC 314 03 SHADERS, OPENGL, & JS UGRAD.CS.UBC.CA/~CS314 Textbook: Appendix A* (helpful, but different version of OpenGL) Alla Sheffer Sep 2016 OPENGL RENDERING PIPELINE 1 OPENGL RENDERING PIPELINE Javascript
More informationReview of Thursday. xa + yb xc + yd
Review of Thursday Vectors and points are two/three-dimensional objects Operations on vectors (dot product, cross product, ) Matrices are linear transformations of vectors a c b x d y = xa + yb xc + yd
More informationTransformations. CSCI 420 Computer Graphics Lecture 4
CSCI 420 Computer Graphics Lecture 4 Transformations Jernej Barbic University of Southern California Vector Spaces Euclidean Spaces Frames Homogeneous Coordinates Transformation Matrices [Angel, Ch. 4]
More informationWe will use WebGL 1.0. WebGL 2.0 is now being supported by most browsers but requires a better GPU so may not run on older computers or on most cell
We will use WebGL 1.0. WebGL 2.0 is now being supported by most browsers but requires a better GPU so may not run on older computers or on most cell phones and tablets. See http://webglstats.com/. We will
More informationC P S C 314 S H A D E R S, O P E N G L, & J S RENDERING PIPELINE. Mikhail Bessmeltsev
C P S C 314 S H A D E R S, O P E N G L, & J S RENDERING PIPELINE UGRAD.CS.UBC.C A/~CS314 Mikhail Bessmeltsev 1 WHAT IS RENDERING? Generating image from a 3D scene 2 WHAT IS RENDERING? Generating image
More informationVector Algebra Transformations. Lecture 4
Vector Algebra Transformations Lecture 4 Cornell CS4620 Fall 2008 Lecture 4 2008 Steve Marschner 1 Geometry A part of mathematics concerned with questions of size, shape, and relative positions of figures
More information2D and 3D Transformations AUI Course Denbigh Starkey
2D and 3D Transformations AUI Course Denbigh Starkey. Introduction 2 2. 2D transformations using Cartesian coordinates 3 2. Translation 3 2.2 Rotation 4 2.3 Scaling 6 3. Introduction to homogeneous coordinates
More informationComputer Graphics: Viewing in 3-D. Course Website:
Computer Graphics: Viewing in 3-D Course Website: http://www.comp.dit.ie/bmacnamee 2 Contents Transformations in 3-D How do transformations in 3-D work? 3-D homogeneous coordinates and matrix based transformations
More informationEECE 478. Learning Objectives. Learning Objectives. Linear Algebra and 3D Geometry. Linear algebra in 3D. Coordinate systems
EECE 478 Linear Algebra and 3D Geometry Learning Objectives Linear algebra in 3D Define scalars, points, vectors, lines, planes Manipulate to test geometric properties Coordinate systems Use homogeneous
More informationProgramming with WebGL Part 1: Background. CS 432 Interactive Computer Graphics Prof. David E. Breen Department of Computer Science
Programming with WebGL Part 1: Background CS 432 Interactive Computer Graphics Prof. David E. Breen Department of Computer Science E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley
More informationTransforms. COMP 575/770 Spring 2013
Transforms COMP 575/770 Spring 2013 Transforming Geometry Given any set of points S Could be a 2D shape, a 3D object A transform is a function T that modifies all points in S: T S S T v v S Different transforms
More informationCS452/552; EE465/505. Texture Mapping in WebGL
CS452/552; EE465/505 Texture Mapping in WebGL 2-26 15 Outline! Texture Mapping in WebGL Read: Angel, Chapter 7, 7.3-7.5 LearningWebGL lesson 5: http://learningwebgl.com/blog/?p=507 Lab3 due: Monday, 3/2
More informationNotes on Assignment. Notes on Assignment. Notes on Assignment. Notes on Assignment
Notes on Assignment Notes on Assignment Objects on screen - made of primitives Primitives are points, lines, polygons - watch vertex ordering The main object you need is a box When the MODELVIEW matrix
More information2D/3D Geometric Transformations and Scene Graphs
2D/3D Geometric Transformations and Scene Graphs Week 4 Acknowledgement: The course slides are adapted from the slides prepared by Steve Marschner of Cornell University 1 A little quick math background
More informationFall CSCI 420: Computer Graphics. 2.2 Transformations. Hao Li.
Fall 2017 CSCI 420: Computer Graphics 2.2 Transformations Hao Li http://cs420.hao-li.com 1 OpenGL Transformations Matrices Model-view matrix (4x4 matrix) Projection matrix (4x4 matrix) vertices in 3D Model-view
More informationAffine Transformations in 3D
Affine Transformations in 3D 1 Affine Transformations in 3D 1 Affine Transformations in 3D General form 2 Translation Elementary 3D Affine Transformations 3 Scaling Around the Origin 4 Along x-axis Shear
More informationModels and Architectures. Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015
Models and Architectures 1 Objectives Learn the basic design of a graphics system Introduce pipeline architecture Examine software components for an interactive graphics system 2 Image Formation Revisited
More informationCSCI E-74. Simulation and Gaming
CSCI E-74 Virtual and Augmented Reality for Simulation and Gaming Fall term 2017 Gianluca De Novi, PhD Lesson 3 General Introduction to OpenGL APIs and TRS Perspective Simulation Perspective simulation
More informationGraphics Programming. Computer Graphics, VT 2016 Lecture 2, Chapter 2. Fredrik Nysjö Centre for Image analysis Uppsala University
Graphics Programming Computer Graphics, VT 2016 Lecture 2, Chapter 2 Fredrik Nysjö Centre for Image analysis Uppsala University Graphics programming Typically deals with How to define a 3D scene with a
More informationGEOMETRIC OBJECTS AND TRANSFORMATIONS I
Computer UNIT Graphics - 4 and Visualization 6 Hrs GEOMETRIC OBJECTS AND TRANSFORMATIONS I Scalars Points, and vectors Three-dimensional primitives Coordinate systems and frames Modelling a colored cube
More informationOverview. Affine Transformations (2D and 3D) Coordinate System Transformations Vectors Rays and Intersections
Overview Affine Transformations (2D and 3D) Coordinate System Transformations Vectors Rays and Intersections ITCS 4120/5120 1 Mathematical Fundamentals Geometric Transformations A set of tools that aid
More informationComputer Viewing. CITS3003 Graphics & Animation. E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley
Computer Viewing CITS3003 Graphics & Animation E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012 1 Objectives Introduce the mathematics of projection Introduce OpenGL viewing
More informationHello, welcome to the video lecture series on Digital Image Processing. So in today's lecture
Digital Image Processing Prof. P. K. Biswas Department of Electronics and Electrical Communications Engineering Indian Institute of Technology, Kharagpur Module 02 Lecture Number 10 Basic Transform (Refer
More informationIntroduction to OpenGL
OpenGL is an alternative to Direct3D for 3D graphics rendering Originally developed by Silicon Graphics Inc (SGI), turned over to multi-vendor group (OpenGL Architecture Review Board) in 1992 Unlike DirectX,
More informationClassical and Computer Viewing. Adapted From: Ed Angel Professor of Emeritus of Computer Science University of New Mexico
Classical and Computer Viewing Adapted From: Ed Angel Professor of Emeritus of Computer Science University of New Mexico Planar Geometric Projections Standard projections project onto a plane Projectors
More informationLecture 6 Sections 4.3, 4.6, 4.7. Wed, Sep 9, 2009
Lecture 6 Sections 4.3, 4.6, 4.7 Hampden-Sydney College Wed, Sep 9, 2009 Outline 1 2 3 4 re are three mutually orthogonal axes: the x-axis, the y-axis, and the z-axis. In the standard viewing position,
More informationCopyright Khronos Group 2012 Page 1. Teaching GL. Dave Shreiner Director, Graphics and GPU Computing, ARM 1 December 2012
Copyright Khronos Group 2012 Page 1 Teaching GL Dave Shreiner Director, Graphics and GPU Computing, ARM 1 December 2012 Copyright Khronos Group 2012 Page 2 Agenda Overview of OpenGL family of APIs Comparison
More informationINF3320 Computer Graphics and Discrete Geometry
INF3320 Computer Graphics and Discrete Geometry Transforms (part II) Christopher Dyken and Martin Reimers 21.09.2011 Page 1 Transforms (part II) Real Time Rendering book: Transforms (Chapter 4) The Red
More informationLecture 5: Transforms II. Computer Graphics and Imaging UC Berkeley CS184/284A
Lecture 5: Transforms II Computer Graphics and Imaging UC Berkeley 3D Transforms 3D Transformations Use homogeneous coordinates again: 3D point = (x, y, z, 1) T 3D vector = (x, y, z, 0) T Use 4 4 matrices
More informationThe Graphics Pipeline and OpenGL I: Transformations!
! The Graphics Pipeline and OpenGL I: Transformations! Gordon Wetzstein! Stanford University! EE 267 Virtual Reality! Lecture 2! stanford.edu/class/ee267/!! Logistics Update! all homework submissions:
More informationCS 428: Fall Introduction to. Transformations in OpenGL + hierarchical modeling. Andrew Nealen, Rutgers, /21/2009 1
CS 428: Fall 2009 Introduction to Computer Graphics Transformations in OpenGL + hierarchical modeling 9/21/2009 1 Review of affine transformations Use projective geometry staple of CG Euclidean (x,z) (x,y,z)
More information