Upload
buiquynh
View
214
Download
2
Embed Size (px)
Citation preview
1
1
Introduction to Computer Graphics with WebGL
Ed Angel
Transformations
Computer Graphics with WebGL © Ed Angel, 2014
2
General Transformations
A transformation maps points to other points and/or vectors to other vectors
Q=T(P)
v=T(u)
Computer Graphics with WebGL © Ed Angel, 2014
3
Affine Transformations
• Line preserving • Characteristic of many physically important
transformations - Rigid body transformations: rotation, translation - Scaling, shear
• Importance in graphics is that we need only transform endpoints of line segments and let implementation draw line segment between the transformed endpoints
Computer Graphics with WebGL © Ed Angel, 2014
2
4
Pipeline Implementation
transformation rasterizer
u
v
u
v
T
T(u)
T(v)
T(u) T(u)
T(v)
T(v)
vertices vertices pixels
frame buffer
(from application program)
Computer Graphics with WebGL © Ed Angel, 2014
5
Translation
• Move (translate, displace) a point to a new location
• Displacement determined by a vector d - Three degrees of freedom - P’=P+d
P
P’
d
Computer Graphics with WebGL © Ed Angel, 2014
6
How many ways?
Although we can move a point to a new location in infinite ways, when we move many points there is usually only one way
object translation: every point displaced by same vector
Computer Graphics with WebGL © Ed Angel, 2014
3
7
Translation Using Representations
Using the homogeneous coordinate representation in some frame
p=[ x y z 1]T
p’=[x’ y’ z’ 1]T
d=[dx dy dz 0]T
Hence p’ = p + d or x’=x+dx y’=y+dy z’=z+dz
note that this expression is in four dimensions and expresses point = vector + point
Computer Graphics with WebGL © Ed Angel, 2014
8
Translation Matrix
We can also express translation using a 4 x 4 matrix T in homogeneous coordinates p’=Tp where
T = T(dx, dy, dz) =
This form is better for implementation because all affine transformations can be expressed this way and multiple transformations can be concatenated together
Computer Graphics with WebGL © Ed Angel, 2014
9
Moving the Camera
If objects are on both sides of z=0, we must move camera frame
T=MT =
Computer Graphics with WebGL © Ed Angel, 2014
1
1
Introduction to Computer Graphics with WebGL
Ed Angel
Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and
Science Laboratory UNM Presidential Teaching Fellow
University of New Mexico
Computer Graphics with WebGL © Ed Angel, 2014
2
Rotation (2D)
Consider rotation about the origin by θ degrees - radius stays the same, angle increases by θ
x’=x cos θ –y sin θy’ = x sin θ + y cos θ
x = r cos φy = r sin φ
x’ = r cos (φ + θ)y’ = r sin (φ + θ)
Computer Graphics with WebGL © Ed Angel, 2014
3
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
- or in homogeneous coordinates
p’=Rz(θ)p
x’=x cos θ –y sin θy’ = x sin θ + y cos θz’ =z w’=w
Computer Graphics with WebGL © Ed Angel, 2014
2
4
Rotation Matrix
R = Rz(θ) =
Computer Graphics with WebGL © Ed Angel, 2014
5
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
R = Rx(θ) =
R = Ry(θ) =
Computer Graphics with WebGL © Ed Angel, 2014
6
Scaling
S = S(sx, sy, sz) =
x’=sxx y’=syy z’=szz
p’=Sp
Expand or contract along each axis (fixed point of origin)
Computer Graphics with WebGL © Ed Angel, 2014
3
7
Reflection
corresponds to negative scale factors
original sx = -1 sy = 1
sx = -1 sy = -1 sx = 1 sy = -1
Computer Graphics with WebGL © Ed Angel, 2014
1
1
Introduction to Computer Graphics with WebGL
Ed Angel
Transformations 3
Computer Graphics with WebGL © Ed Angel, 2014
2
Shear
• Helpful to add one more basic transformation • Equivalent to pulling faces in opposite directions
Computer Graphics with WebGL © Ed Angel, 2014
3
Shear Matrix
Consider simple shear along x axis
x’ = x + y cot θy’ = y z’ = z
H(θ) =
Computer Graphics with WebGL © Ed Angel, 2014
2
4
Inverses
• Although we could compute inverse matrices by general formulas, we can use simple geometric observations
- Translation: T-1(dx, dy, dz) = T(-dx, -dy, -dz) - Rotation: R -1(θ) = R(-θ)
• Holds for any rotation matrix • Note that since cos(-θ) = cos(θ) and sin(-θ)=-sin(θ) R -1(θ) = R T(θ)
- Scaling: S-1(sx, sy, sz) = S(1/sx, 1/sy, 1/sz)
- Shear: H -1(θ) = H(-θ)
Computer Graphics with WebGL © Ed Angel, 2014
5
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
Computer Graphics with WebGL © Ed Angel, 2014
6
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 = pTCTBTAT
Computer Graphics with WebGL © Ed Angel, 2014
3
7
General Rotation About the Origin
θ
x
z
y v
A rotation by θ about an arbitrary axis can be decomposed into the concatenation of rotations about the x, y, and z axes
R(θ) = Rz(θz) Ry(θy) Rx(θx)
θx θy θz are called the Euler angles
Note that rotations do not commute We can use rotations in another order but with different angles
Computer Graphics with WebGL © Ed Angel, 2014
8
Rotation About a Fixed Point other than the Origin
Move fixed point to origin Rotate Move fixed point back M = T(pf) R(θ) T(-pf)
Computer Graphics with WebGL © Ed Angel, 2014
9
Instancing
• In modeling, we often start with a simple object centered at the origin, oriented with the axis, and at a standard size
• We apply an instance transformation to its vertices to Scale Orient Locate
Computer Graphics with WebGL © Ed Angel, 2014
1
1
Introduction to Computer Graphics with WebGL
Ed Angel
Transformations in WebGL
Computer Graphics with WebGL © Ed Angel, 2014
OpenGL and Transformations
• Three major tasks involving transformations - modeling - positioning and orienting the camera - projection
• All can be carried out in either the CPU or GPU • All can be specified by 4 x 4 matrices • Fixed function OpenGL had a set of transformation
matrices - now deprecated - must form and apply these transformations ourselves
2Computer Graphics with WebGL © Ed Angel, 2014
Model-View Transformation
• Components of a model are specified in model coordinates which are brought into the world by instancing
- model coordinate to object coordinate transformation - affine: rotation, translation, scaling
• application (object coordinate) specification must be converted to camera coordinates
- specify camera position and orientation in object coordinates
- affine: rotation, translation, scaling • Combine into the model-view transformation
3Computer Graphics with WebGL © Ed Angel, 2014
2
Projection Transformation
• Projection is equivalent to specifying the lens and size of the camera
- combination of a non-affine projection transformation and clipping
- projection transformation can be specified by a 4 x 4 homogeneous coordinate matrix
- requires perspective division • Projection transformation in WebGL results in a
representation in clip coordinate • Combining the two the output of the vertex shader is
4Computer Graphics with WebGL © Ed Angel, 2014
q = P*MV*p
5
Current Transformation Matrix (CTM)
• Conceptually there is a 4 x 4 homogeneous coordinate matrix, the current transformation matrix (CTM) that is applied to all vertices that pass down the pipeline
- product (concatenation) of model-view matrix and projection matrix
• The CTM is defined in the user program and can be applied in either the CPU or GPU
CTM vertices vertices p p’=Cp
C
Computer Graphics with WebGL © Ed Angel, 2014
6
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
Computer Graphics with WebGL © Ed Angel, 2014
3
7
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.
Computer Graphics with WebGL © Ed Angel, 2014
8
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
Computer Graphics with WebGL © Ed Angel, 2014
9
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
Computer Graphics with WebGL © Ed Angel, 2014
4
10
Using MV.js in Application
var r = rotate(theta, vx, vy, vz);m = mult(m, r);
var s = scale( sx, sy, sz)var t = translate(dx, dy, dz);m = mult(s, t);
var m = mat4();
Create an identity matrix:
Multiply on right by rotation matrix of theta in degrees where (vx, vy, vz) define axis of rotation
Also have rotateX, rotateY, rotateZ
Do same with translation and scaling:
Computer Graphics with WebGL © Ed Angel, 2014
11
Example
• Rotation about z axis by 30 degrees with a fixed point of (1.0, 2.0, 3.0)
• Remember that last matrix specified in the program is the first applied
var m = mult(translate(1.0, 2.0, 3.0), rotate(30.0, 0.0, 0.0, 1.0));m = mult(m, translate(-1.0, -2.0, -3.0));
Computer Graphics with WebGL © Ed Angel, 2014
12
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
• WebGL wants column major data
• gl.unifromMatrix4f has a parameter for automatic transpose by it must be set to false.
• flatten function converts to column major order which is required by WebGL functions
Computer Graphics with WebGL © Ed Angel, 2014
5
13
Matrix Stacks
• In many situations we want to save transformation matrices for use later
- Traversing hierarchical data structures • 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();
Computer Graphics with WebGL © Ed Angel, 2014
1
1
Introduction to Computer Graphics with WebGL
Ed Angel
Modeling A Cube
Computer Graphics with WebGL © Ed Angel, 2014
Rotating Cube Example
2Computer Graphics with WebGL © Ed Angel, 2014
What is a Cube?
• For rendering: 12 triangles using 36 vertices • Geometrically there are only 8 distinct vertices
- need a data structure • Depending on the API
- 6 faces (or 6 intersecting planes) - 1 atomic object (Computer Solid Geometry)
• Our approach: 6 faces, each a quadrilateral that is is rendered as two triangles, a triangle strip or a triangle fan
- use a simple data structure to share vertices 3
Computer Graphics with WebGL © Ed Angel, 2014
2
Assumptions
• Specify vertices in clip coordinates • Specify a color attribute for each vertex • Use default camera • Don’t have to worry about projection matrix • Model-view matrix is only needed for rotation
- rotate model with respect to fixed camera
4Computer Graphics with WebGL © Ed Angel, 2014
5
Modeling a Cube
var vertices = [ vec3( -0.5, -0.5, 0.5 ), vec3( -0.5, 0.5, 0.5 ), vec3( 0.5, 0.5, 0.5 ), vec3( 0.5, -0.5, 0.5 ), vec3( -0.5, -0.5, -0.5 ), vec3( -0.5, 0.5, -0.5 ), vec3( 0.5, 0.5, -0.5 ), vec3( 0.5, -0.5, -0.5 ) ];
Define global array for vertices
Computer Graphics with WebGL © Ed Angel, 2014
6
Colors
var vertexColors = [ [ 0.0, 0.0, 0.0, 1.0 ], // black [ 1.0, 0.0, 0.0, 1.0 ], // red [ 1.0, 1.0, 0.0, 1.0 ], // yellow [ 0.0, 1.0, 0.0, 1.0 ], // green [ 0.0, 0.0, 1.0, 1.0 ], // blue [ 1.0, 0.0, 1.0, 1.0 ], // magenta [ 0.0, 1.0, 1.0, 1.0 ], // cyan [ 1.0, 1.0, 1.0, 1.0 ] // white ];
Define global array for colors
Computer Graphics with WebGL © Ed Angel, 2014
3
7
Draw cube from faces
function colorCube( ){ quad(0,3,2,1); quad(2,3,7,6); quad(0,4,7,3); quad(1,2,6,5); quad(4,5,6,7); quad(0,1,5,4);}
0
5 6
2
4 7
1
3 Note that vertices are ordered so that we obtain correct outward facing normals Each quad generates two triangles
Computer Graphics with WebGL © Ed Angel, 2014
Initialization
8
var canvas, gl;var numVertices = 36;var points = [];var colors = [];
window.onload = function init(){ canvas = document.getElementById( "gl-canvas" ); gl = WebGLUtils.setupWebGL( canvas );
colorCube();
gl.viewport( 0, 0, canvas.width, canvas.height ); gl.clearColor( 1.0, 1.0, 1.0, 1.0 ); gl.enable(gl.DEPTH_TEST);
// rest of initialization and html file // same as previous examples
Computer Graphics with WebGL © Ed Angel, 2014
9
The quad Function
Put position and color data for two triangles from a list of indices into the array vertices
var quad(a, b, c, d){ var indices = [ a, b, c, a, c, d ]; for ( var i = 0; i < indices.length; ++i ) {
points.push( vertices[indices[i]]); colors.push( vertexColors[indices[i]] );
// for solid colored faces use //colors.push(vertexColors[a]);
}}
Computer Graphics with WebGL © Ed Angel, 2014
4
Render Function
10
function render(){ gl.clear( gl.COLOR_BUFFER_BIT |gl.DEPTH_BUFFER_BIT); gl.drawArrays( gl.TRIANGLES, 0, numVertices ); requestAnimFrame( render );}
Computer Graphics with WebGL © Ed Angel, 2014
11
Mapping indices to faces var indices = [1,0,3,3,2,1,2,3,7,7,6,2, 3,0,4,4,7,3,6,5,1,1,2,6,4,5,6,6,7,4,5,4,0,0,1,5];
Computer Graphics with WebGL © Ed Angel, 2014
Rendering by Elements
• Send indices to GPU
• Render by elements
• Even more efficient if we use triangle strips or triangle fans
12
var iBuffer = gl.createBuffer();gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iBuffer);gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint8Array(indices), gl.STATIC_DRAW);
gl.drawElements( gl.TRIANGLES, numVertices, gl.UNSIGNED_BYTE, 0 );
Computer Graphics with WebGL © Ed Angel, 2014
1
1
Introduction to Computer Graphics with WebGL
Ed Angel
Rotating the Cube
Computer Graphics with WebGL © Ed Angel, 2014
Rotating Cube Example
2Computer Graphics with WebGL © Ed Angel, 2014
3
Using Transformations
• Example: Begin with a cube rotating • Use mouse and a 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 - Color and position are vertex attributes
• Add buttons to control rotation direction
Computer Graphics with WebGL © Ed Angel, 2014
2
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
4Computer Graphics with WebGL © Ed Angel, 2014
Event Listeners
5Computer Graphics with WebGL © Ed Angel, 2014
var theta = [0, 0, 0];var xAxis = 0;var yAxis = 1;var zAxis = 2;var axis = xAxis;
document.getElementById( "xButton" ).onclick = function () { axis = xAxis;}; document.getElementById( "yButton" ).onclick = function () { axis = yAxis;}; document.getElementById( "zButton" ).onclick = function () { axis = zAxis;};
Rendering
6
function render(){ gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); theta[axis] += 2.0; gl.uniform3fv(thetaLoc, theta); gl.drawArrays( gl.TRIANGLES, 0, NumVertices ); requestAnimFrame( render );}
Computer Graphics with WebGL © Ed Angel, 2014
3
Rotation Shader
7
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.0, 0.0, 0.0, 0.0, 0.0, c.x, s.x, 0.0, 0.0, -s.x, c.x, 0.0, 0.0, 0.0, 0.0, 1.0 );
Computer Graphics with WebGL © Ed Angel, 2014
Rotation Shader (cont)
8
mat4 ry = mat4( c.y, 0.0, -s.y, 0.0, 0.0, 1.0, 0.0, 0.0, s.y, 0.0, c.y, 0.0, 0.0, 0.0, 0.0, 1.0 );
mat4 rz = mat4( c.z, -s.z, 0.0, 0.0, s.z, c.z, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0 );
fColor = vColor; gl_Position = rz * ry * rx * vPosition;}
Computer Graphics with WebGL © Ed Angel, 2014
9
Smooth Rotation
• From a practical standpoint, we are often want to use transformations to move and reorient an object smoothly
- Problem: find a sequence of model-view matrices M0,M1,…..,Mn so that when they are applied successively to one or more objects we see a smooth transition
• For orientating an object, we can use the fact that every rotation corresponds to part of a great circle on a sphere
- Find the axis of rotation and angle - Virtual trackball
Computer Graphics with WebGL © Ed Angel, 2014
4
10
Interfaces
• One of the major problems in interactive computer graphics is how to use a two-dimensional device such as a mouse to interface with three dimensional objects
• Example: how to form an instance matrix?
• Some alternatives - Virtual trackball - 3D input devices such as the spaceball - Gestural devices - Use areas of the screen
• Distance from center controls angle, position, scale depending on mouse button depressed
Computer Graphics with WebGL © Ed Angel, 2014