user input and animation. for further reading angel 7 th ed: –chapter 3: input and animation....

User Input and Animation

For Further Reading

• Angel 7th Ed: – Chapter 3: Input and Animation.– Chapter 4: Rotation and other transformation.

• Beginning WebGL:– Chapter 1: Animation and Model Movement.

2

Example 2 from Last Week

Triangle with Per-Vertex Color

(HTML code)<script id="vertex-shader" type="x-shader/x-vertex">attribute vec4 vPosition;attribute vec4 vColor;varying vec4 fColor;void main() { fColor = vColor; gl_Position = vPosition;}</script>

<script id="fragment-shader" type="x-shader/x-fragment">precision mediump float;varying vec4 fColor; // Note that this will be interpolated ...void main() { gl_FragColor = fColor;}</script>

Triangle with Per-Vertex Color

(JavaScript code)window.onload = function init() { var canvas = document.getElementById( "gl-canvas" ); gl = WebGLUtils.setupWebGL( canvas ); if ( !gl ) { alert( "WebGL isn't available" ); }

// Three Vertices var vertices = [ vec3( -1, -1, 0 ), vec3( 0, 1, 0 ), vec3( 1, -1, 0 ) ];

var colors = [ vec3( 1, 0, 0 ), vec3( 0, 1, 0 ), vec3( 0, 0, 1 ) ];

(Nothing New Here)

// // Configure WebGL // gl.viewport( 0, 0, canvas.width, canvas.height ); gl.clearColor( 1.0, 1.0, 1.0, 1.0 ); // Load shaders and initialize attribute buffers var program = initShaders( gl, "vertex-shader", "fragment-shader" ); gl.useProgram( program ); // Load the data into the GPU var bufferId = gl.createBuffer(); gl.bindBuffer( gl.ARRAY_BUFFER, bufferId ); gl.bufferData( gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW );

// Associate our shader variables with our data buffer var vPosition = gl.getAttribLocation( program, "vPosition" ); gl.vertexAttribPointer( vPosition, 3, gl.FLOAT, false, 0, 0 ); gl.enableVertexAttribArray( vPosition );

// Repeat the above process for the color attributes of the vertices.

var cBufferId = gl.createBuffer(); gl.bindBuffer( gl.ARRAY_BUFFER, cBufferId ); gl.bufferData( gl.ARRAY_BUFFER, flatten(colors), gl.STATIC_DRAW );

var vColor = gl.getAttribLocation( program, "vColor" ); gl.vertexAttribPointer( vColor, 3, gl.FLOAT, false, 0, 0 ); gl.enableVertexAttribArray( vColor );

render();};

Homework #1

• Draw at least two triangles with per-vertex colors.

8

What are Still Missing?

• 3D data, but still 2D look.

• Can we move the object?– How to draw it many time? animation!– How to move it? transformation!– How to control it? user input!

9

Example 1: Rotating Triangle

• Rotated along the X axis:

Rotating Triangle(HTML code)

<script id="vertex-shader" type="x-shader/x-vertex">attribute vec4 vPosition;attribute vec4 vColor;varying vec4 fColor;uniform mat4 rotate;

voidmain(){ fColor = vColor; gl_Position = rotate * vPosition;}</script>

<body><canvas id="gl-canvas" width="512" height="512">Oops ... your browser doesn't support the HTML5 canvas element</canvas>

<button id= "xButton">Rotate X</button><button id= "yButton">Rotate Y</button><button id= "zButton">Rotate Z</button>

</body></html>

Notice!

• The rotation is done with the matrix in “uniform mat4 rotate” in the vertex shader.

• Buttons are added to the HTML <body> element.

• What do we need to change in JS?– To set up the matrix– To handle the button inputs

13

Rotating Triangle(JavaScript code)

var xAxis = 0;var yAxis = 1;var zAxis = 2;

var axis = 0;var theta = [ 0, 0, 0 ];

var matrixLoc;var rotateMatrix = mat4();...matrixLoc = gl.getUniformLocation(program, "rotate");

//event listeners for buttons document.getElementById( "xButton" ).onclick = rotateX; document.getElementById( "yButton" ).onclick = rotateY; document.getElementById( "zButton" ).onclick = rotateZ;

render();

function rotateX() { axis = xAxis;};function rotateY() { ...

function render() { gl.clear( gl.COLOR_BUFFER_BIT );

theta[axis] += 2.0; rotateMatrix = mult(rotate(theta[xAxis], 1, 0, 0),

mult(rotate(theta[yAxis], 0, 1, 0), rotate(theta[zAxis], 0, 0, 1) ));

gl.uniformMatrix4fv(matrixLoc, 0, flatten(rotateMatrix));

gl.drawArrays( gl.TRIANGLES, 0, 3 );

requestAnimFrame( render );}

Summary

• HTML5 <button>

• Add event listener: document.getElementById( ).onclick

• Call requestAnimFrame( ) after drawing

• Use a uniform matrix in the vertex shader.

16

Lab Time!

• Add a “Pause” button to stop/start the rotation.

• Hint: Use a Boolean variable to control the change of theta[axis].

17

Transformations

19Angel: Interactive Computer Graphics 3E © Addison-Wesley 2002

Vectors

•Physical definition: a vector is a quantity with two attributes

Direction

Magnitude

•Examples include Force

Velocity

Directed line segments• Most important example for graphics• Can map to other types

v


Vector Operations

• Every vector has an inverse Same magnitude but points in opposite direction

• Every vector can be multiplied by a scalar

• There is a zero vector Zero magnitude, undefined orientation

• The sum of any two vectors is a vector Use head-to-tail axiom

v -v vv

u

w


Linear Vector Spaces

•Mathematical system for manipulating vectors•Operations

Scalar-vector multiplication u=v

Vector-vector addition: w=u+v

•Expressions such as v=u+2w-3r

Make sense in a vector space


Coordinate Systems

• Consider a basis v1, v2,…., vn

• A vector is written v=1v1+ 2v2 +….+nvn

• The list of scalars {1, 2, …. n}is the representation of v with respect to the given basis

• We can write the representation as a row or column array of scalars

a=[1 2 …. n]T=

n

2

1

.


Example

•V=2v1+3v2-4v3•A=[2 3 –4]•Note that this representation is with respect to a particular basis

•For example, in OpenGL we start by representing vectors using the world basis but later the system needs a representation in terms of the camera or eye basis


Coordinate Systems

•Which is correct?

•Both are because vectors have no fixed location

v

v


Frames

•Coordinate System is insufficient to present points

• If we work in an affine space we can add a single point, the origin, to the basis vectors to form a frame

P0

v1

v2

v3


•Frame determined by (P0, v1, v2, v3)

•Within this frame, every vector can be written as

v=1v1+ 2v2 +….+nvn

•Every point can be written as

P = P0 + 1v1+ 2v2 +….+nvn


Confusing Points and Vectors

Consider the point and the vector

P = P0 + 1v1+ 2v2 +….+nvn

v=1v1+ 2v2 +….+nvn

They appear to have the similar representations

p=[1 2 3] v=[1 2 3]

which confuse the point with the vector

A vector has no position v

pv

can place anywherefixed


A Single Representation

If we define 0•P = 0 and 1•P =P then we can write

v=1v1+ 2v2 +3v3 = [1 2 3 0 ] [v1 v2 v3 P0]

T

P = P0 + 1v1+ 2v2 +3v3= [1 2 3 1 ] [v1 v2 v3 P0]

T

Thus we obtain the four-dimensional homogeneous coordinate representation

v = [1 2 3 0 ] T

p = [1 2 3 1 ] T


Homogeneous Coordinates

The general form of four dimensional homogeneous coordinates is

p=[x y z w] T

We return to a three dimensional point (for w0) by

xx/w

yy/w

zz/w

If w=0, the representation is that of a vector

Note that homogeneous coordinates replaces points in three dimensions by lines through the origin in four dimensions


Homogeneous Coordinates and Computer Graphics

•Homogeneous coordinates are key to all computer graphics systems

All standard transformations (rotation, translation, scaling) can be implemented by matrix multiplications with 4 x 4 matrices

Hardware pipeline works with 4 dimensional representations

For orthographic viewing, we can maintain w=0 for vectors and w=1 for points

For perspective we need a perspective division


Change of Coordinate Systems

•Consider two representations of a the same vector with respect to two different bases. The representations are

v=1v1+ 2v2 +3v3 = [1 2 3] [v1 v2 v3]

T

=1u1+ 2u2 +3u3 = [1 2 3] [u1 u2 u3]

T

a=[1 2 3 ]b=[1 2 3]

where


Representing second basis in terms of first

Each of the basis vectors, u1,u2, u3, are vectors that can be represented in terms of the first basis

u1 = 11v1+12v2+13v3

u2 = 21v1+22v2+23v3

u3 = 31v1+32v2+33v3

v


Matrix Form

The coefficients define a 3 x 3 matrix

and the basis can be related by

see text for numerical examples

a=MTb

33

M =


Change of Frames

• We can apply a similar process in homogeneous coordinates to the representations of both points and vectors

• Consider two frames

• Any point or vector can be represented in each

(P0, v1, v2, v3)(Q0, u1, u2, u3)

P0 v1

v2

v3

Q0

u1u2

u3


Representing One Frame in Terms of the Other

u1 = 11v1+12v2+13v3

u2 = 21v1+22v2+23v3

u3 = 31v1+32v2+33v3

Q0 = 41v1+42v2+43v3 +44P0

Extending what we did with change of bases

defining a 4 x 4 matrix

M =


Working with Representations

Within the two frames any point or vector has a representation of the same form

a=[1 2 3 4 ] in the first frameb=[1 2 3 4 ] in the second frame

where 4 4 for points and 4 4 for vectors and

The matrix M is 4 x 4 and specifies an affine transformation in homogeneous coordinates

a=MTb


Affine Transformations

•Every linear transformation is equivalent to a change in frames

•Every affine transformation preserves lines

•However, an affine transformation has only 12 degrees of freedom because 4 of the elements in the matrix are fixed and are a subset of all possible 4 x 4 linear transformations


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

39

2D Transformation

•Translation

)','(' t om o v e ),( yxPyxP

y

x

dyy

dxx

'

'

),('

,'

'' ,

yx

y

x

ddTPP

d

dT

y

xP

y

xP

P(x, y)

P’(x’, y’)

x

y

dx

dy

40

2D Transformation

•Scaling

axis thea lo ng b y and

axis thea lo ng b y S ca le

ys

xs

y

x

ysy

xsx

y

x

'

'

PssSP

y

x

s

s

y

x

yx

y

x

),('

0

0

'

'

x

y

P0(x0, y0)

P1(x1, y1)

y112

y0

y1

y012

x112

x012

x1 x0

41

2D Transformation

•Rotation

o r i g i n a b o u t t h e a n g l ea n t h r o u g h R o t a t e

co ssin'

s inco s'

yxy

yxx

PRP

y

x

y

x

)('

cossin

sincos

'

'

P(x, y)

P’(x’, y’)

x

y

42

2D Transformation

•Derivation of the rotation equation

cossinsincos

)sin('

sinsincoscos

)cos('

rr

ry

rr

rx

co ssin'

s inco s'

yxy

yxx

P(x, y)

P’(x’, y’)

x

y

r

sin

cos

ry

rx

rcos

rsin

rcos(+)

rsin(+)


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


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 expressesthat point = vector + point


Translation Matrix

We can also express translation using a 4 x 4 matrix T in homogeneous coordinatesp’=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

1000

d100

d010

d001

z

y

x


Rotation Matrix

1000

0100

00 cossin

00sin cos

R = Rz() =


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() =

1000

0 cos sin0

0 sin- cos0

0001

1000

0 cos0 sin-

0010

0 sin0 cos


Scaling

1000

000

000

000

z

y

x

s

s

s

S = S(sx, sy, sz) =

x’=sxxy’=syyz’=szz

p’=Sp

Expand or contract along each axis (fixed point of origin)


Reflection

corresponds to negative scale factors

originalsx = -1 sy = 1

sx = -1 sy = -1 sx = 1 sy = -1


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)


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


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 present points. In terms of column matrices

pT’ = pTCTBTAT


General Rotation About the Origin

x

z

yv

A rotation by about an arbitrary axiscan be decomposed into the concatenationof 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 commuteWe can use rotations in another order butwith different angles


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)

Additional Comments

Common/MV.js

• We have used the following functions in Common/MV.js:– mat4(): 4x4 matrix constructor– rotate(angle, axis)– mult(A, B): compute A*B

• Other Matrix libraries in JavaScript are available, e.g., The Beginning WebGL book recommends gl-matrix.js (See https://github.com/toji/gl-matrix)

56

Other User Inputs & Mouse Click

• Plenty of online resource:– Google “HTML5 input” leads us to

http://www.w3schools.com/html/html_form_input_types.asp

57

CAD-like Examples

www.cs.unm.edu/~angel/WebGL/7E/03

square.html: puts a colored square at location of each mouse click

triangle.html: first three mouse clicks define first triangle of triangle strip. Each succeeding mouse clicks adds a new triangle at end of strip

58Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

Returning Position from Click Event

Canvas specified in HTML file of size canvas.width x canvas.height

Returned window coordinates are event.clientX and event.clientY

59

// add a vertex to GPU for each clickcanvas.addEventListener("click", function() { gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer); var t = vec2(-1+2*event.clientX/canvas.width, -1+2*(canvas.height-event.clientY)/canvas.height); gl.bufferSubData(gl.ARRAY_BUFFER, sizeof[’vec2’]*index, t); index++;});

Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

Window Coordinates

60

w

h

(0, 0)

(w -1, h-1)

(xw, yw)


Window to Clip Coordinates

61

x 12* wx

w

y 12 * w(h y )

h

(0,h) ( 1, 1)

(w,0) (1,1)


user input and animation. for further reading angel 7 th ed: –chapter 3: input and animation....

Documents

vcolor gl

vposition gl

getelementbyid glcanvas

webgl gl

createbuffer gl

bufferdata gl

bindbuffer gl

cbufferid gl