1 e. angel and d. shreiner: interactive computer graphics 6e © addison-wesley 2012. geometry...

119
1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃黃黃 ) Computer Science National Chiao Tung University, Taiwan

Upload: godfrey-hudson

Post on 28-Dec-2015

221 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

1E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012.

Geometry

Sai-Keung Wong (黃世強 )

Computer Science

National Chiao Tung University, Taiwan

Page 2: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

2E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012.

Objectives

• Introduce the elements of geometry Scalars

Vectors

Points

•Develop mathematical operations among them in a coordinate-free manner

•Define basic primitives Line segments

Polygons

Page 3: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

3E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012.

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

• Want a minimum set of primitives from which we can build more sophisticated objects

• We will need three basic elements Scalars

Vectors

Points

Page 4: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

4E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012.

Coordinate-Free Geometry

• When we learned simple geometry, most of us started with a Cartesian approach

Points were at locations in space p=(x,y,z) We derived results by algebraic manipulations

involving these coordinates• This approach was nonphysical

Physically, points exist regardless of the location of an arbitrary coordinate system

Most geometric results are independent of the coordinate system

Example Euclidean geometry: two triangles are identical if two corresponding sides and the angle between them are identical

Page 5: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

5E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012.

Scalars

• Need three basic elements in geometry Scalars, Vectors, Points

• Scalars can be defined as members of sets which can be combined by two operations (addition and multiplication) obeying some fundamental axioms (associativity, commutivity, inverses)

• Examples include the real and complex number systems under the ordinary rules with which we are familiar

• Scalars alone have no geometric properties

Page 6: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

6E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012.

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

Page 7: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

7E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012.

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

Page 8: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

8E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012.

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

Page 9: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

9E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012.

Vectors Lack Position

• These vectors are identical Same length and magnitude

• Vectors spaces insufficient for geometry Need points

Page 10: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

10E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012.

Points

•Location in space•Operations allowed between points and vectors

Point-point subtraction yields a vector

Equivalent to point-vector addition

P=v+Q

v=P-Q

Page 11: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

11E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012.

Affine Spaces

•Point + a vector space•Operations

Vector-vector addition

Scalar-vector multiplication

Point-vector addition

Scalar-scalar operations

• For any point define 1 • P = P

0 • P = 0 (zero vector)

Page 12: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

12E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012.

Lines

•Consider all points of the form P()=P0 + d

Set of all points that pass through P0 in the direction of the vector d

Page 13: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

13E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012.

Parametric Form

•This form is known as the parametric form of the line

More robust and general than other forms Extends to curves and surfaces

•Two-dimensional forms Explicit: y = mx +h Implicit: ax + by +c =0 Parametric:

x() = x0 + (1-)x1

y() = y0 + (1-)y1

Page 14: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

14E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012.

Rays and Line Segments

• If >= 0, then P() is the ray leaving P0 in the direction d

If we use two points to define v, then

P( ) = Q + (R-Q)=Q+v

=R + (1-)Q

For 0<=<=1 we get all the

points on the line segment

joining R and Q

Page 15: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

15E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012.

Convexity

•An object is convex iff for any two points in the object all points on the line segment between these points are also in the object

P

Q Q

P

convex not convex

Page 16: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

16E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012.

Affine Sums

•Consider the “sum”

P=1P1+2P2+…..+nPn

Can show by induction that this sum makes sense iff

1+2+…..n=1in which case we have the affine sum of the points P1P2,…..Pn

• If, in addition, i>=0, we have the convex hull of P1P2,…..Pn

Page 17: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

17E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012.

Convex Hull

•Smallest convex object containing P1P2,…..Pn

•Formed by “shrink wrapping” points

Page 18: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

18E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012.

Curves and Surfaces

•Curves are one parameter entities of the form P() where the function is nonlinear

•Surfaces are formed from two-parameter functions P(, )

Linear functions give planes and polygons

P() P(, )

Page 19: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

19E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012.

Planes

•A plane can be defined by a point and two vectors or by three points

P(,)=R+u+v P(,)=R+(Q-R)+(P-Q)

u

v

R

P

R

Q

Page 20: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

20E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012.

Triangles

convex sum of P and Q

convex sum of S() and R

for 0<=,<=1, we get all points in triangle

Page 21: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

Barycentric Coordinates

Triangle is convex so any point inside can be represented as an affine sum

P(1, 2, 3)=1P+2Q+3R

where

1 +2 +3 = 1

i>=0

The representation is called the barycentric coordinate representation of P

21E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012.

Page 22: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

22E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012.

Normals

• Every plane has a vector n normal (perpendicular, orthogonal) to it

• From point-two vector form P(,)=R+u+v, we know we can use the cross product to find n = u v and the equivalent form

(P()-P) n=0

u

v

P

Page 23: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

23E. Angel and D. Shriener: Interactive Computer Graphics 6E © Addison-Wesley 2012

Representation

Sai-Keung Wong (黃世強 )

Computer Science

National Chiao Tung University, Taiwan

Page 24: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

24E. Angel and D. Shriener: Interactive Computer Graphics 6E © Addison-Wesley 2012

Objectives

• Introduce concepts such as dimension and basis

• Introduce coordinate systems for representing vectors spaces and frames for representing affine spaces

•Discuss change of frames and bases• Introduce homogeneous coordinates

Page 25: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

25E. Angel and D. Shriener: Interactive Computer Graphics 6E © Addison-Wesley 2012

Linear Independence

•A set of vectors v1, v2, …, vn is linearly independent if

1v1+2v2+.. nvn=0 iff 1=2=…=0

• If a set of vectors is linearly independent, we cannot represent one in terms of the others

• If a set of vectors is linearly dependent, at least one can be written in terms of the others

Page 26: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

26E. Angel and D. Shriener: Interactive Computer Graphics 6E © Addison-Wesley 2012

Dimension

• In a vector space, the maximum number of linearly independent vectors is fixed and is called the dimension of the space

• In an n-dimensional space, any set of n linearly independent vectors form a basis for the space

• Given a basis v1, v2,…., vn, any vector v can be written as

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

where the {i} are unique

Page 27: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

27E. Angel and D. Shriener: Interactive Computer Graphics 6E © Addison-Wesley 2012

Representation

•Until now we have been able to work with geometric entities without using any frame of reference, such as a coordinate system

•Need a frame of reference to relate points and objects to our physical world.

For example, where is a point? Can’t answer without a reference system

World coordinates

Camera coordinates

Page 28: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

28E. Angel and D. Shriener: Interactive Computer Graphics 6E © Addison-Wesley 2012

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

.

Page 29: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

29E. Angel and D. Shriener: Interactive Computer Graphics 6E © Addison-Wesley 2012

Example

• v=2v1+3v2-4v3

• a=[2 3 –4]T

•Note that this representation is with respect to a particular basis

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

Page 30: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

30E. Angel and D. Shriener: Interactive Computer Graphics 6E © Addison-Wesley 2012

Coordinate Systems

•Which is correct?

•Both are because vectors have no fixed location

v

v

Page 31: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

31E. Angel and D. Shriener: Interactive Computer Graphics 6E © Addison-Wesley 2012

Frames

•A coordinate system is insufficient to represent 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

Page 32: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

32E. Angel and D. Shriener: Interactive Computer Graphics 6E © Addison-Wesley 2012

Representation in a Frame

•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

Page 33: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

33E. Angel and D. Shriener: Interactive Computer Graphics 6E © Addison-Wesley 2012

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 confuses the point with the vector

A vector has no position v

pv

Vector can be placed anywhere

point: fixed

Page 34: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

34E. Angel and D. Shriener: Interactive Computer Graphics 6E © Addison-Wesley 2012

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

Page 35: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

35E. Angel and D. Shriener: Interactive Computer Graphics 6E © Addison-Wesley 2012

Homogeneous Coordinates

The homogeneous coordinates form for a three dimensional point [x y z] is given as

p =[x’ y’ z’ w] T =[wx wy wz w] T

We return to a three dimensional point (for w0) byxx’/wyy’/wzz’/wIf w=0, the representation is that of a vectorNote that homogeneous coordinates replaces points in

three dimensions by lines through the origin in four dimensions

For w=1, the representation of a point is [x y z 1]

Page 36: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

36E. Angel and D. Shriener: Interactive Computer Graphics 6E © Addison-Wesley 2012

Homogeneous Coordinates and Computer Graphics

•Homogeneous coordinates are key to all computer graphics systems

All standard transformations (rotation, translation, scaling) can be implemented with matrix multiplications using 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

Page 37: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

37E. Angel and D. Shriener: Interactive Computer Graphics 6E © Addison-Wesley 2012

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

Page 38: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

38E. Angel and D. Shriener: Interactive Computer Graphics 6E © Addison-Wesley 2012

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

Page 39: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

39E. Angel and D. Shriener: Interactive Computer Graphics 6E © Addison-Wesley 2012

Matrix Form

The coefficients define a 3 x 3 matrix

and the bases can be related by

see text for numerical examples

a=MTb

33

M =

Page 40: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

40E. Angel and D. Shriener: Interactive Computer Graphics 6E © Addison-Wesley 2012

Change of Frames

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

• Any point or vector can be represented in either frame

• We can represent Q0, u1, u2, u3 in terms of P0, v1, v2, v3

Consider two frames:(P0, v1, v2, v3)(Q0, u1, u2, u3) P0 v1

v2

v3

Q0

u1u2

u3

Page 41: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

41E. Angel and D. Shriener: Interactive Computer Graphics 6E © Addison-Wesley 2012

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 =

Page 42: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

42E. Angel and D. Shriener: Interactive Computer Graphics 6E © Addison-Wesley 2012

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

Page 43: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

43E. Angel and D. Shriener: Interactive Computer Graphics 6E © Addison-Wesley 2012

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

Page 44: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

44E. Angel and D. Shriener: Interactive Computer Graphics 6E © Addison-Wesley 2012

The World and Camera Frames

• When we work with representations, we work with n-tuples or arrays of scalars

• Changes in frame are then defined by 4 x 4 matrices

• In OpenGL, the base frame that we start with is the world frame

• Eventually we represent entities in the camera frame by changing the world representation using the model-view matrix

• Initially these frames are the same (M=I)

Page 45: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

45E. Angel and D. Shriener: Interactive Computer Graphics 6E © Addison-Wesley 2012

Moving the Camera

If objects are on both sides of z=0, we must move camera frame

1000

d100

0010

0001

M =

Page 46: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

46E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Transformations

Sai-Keung Wong (黃世強 )

Computer Science

National Chiao Tung University, Taiwan

Page 47: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

47E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Objectives

• Introduce standard transformations Rotation

Translation

Scaling

Shear

•Derive homogeneous coordinate transformation matrices

•Learn to build arbitrary transformation matrices from simple transformations

Page 48: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

48E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

General Transformations

A transformation maps points to other points and/or vectors to other vectors

Q=T(P)

v=T(u)

Page 49: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

49E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

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

Page 50: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

50E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Pipeline Implementation

transformation rasterizer

u

v

u

v

T

T(u)

T(v)

T(u)T(u)

T(v)

T(v)

vertices vertices pixels

framebuffer

(from application program)

Page 51: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

51E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Notation

We will be working with both coordinate-free representations of transformations and representations within a particular frame

P,Q, R: points in an affine space u, v, w: vectors in an affine space , , : scalars p, q, r: representations of points

-array of 4 scalars in homogeneous coordinates u, v, w: representations of points

-array of 4 scalars in homogeneous coordinates

Page 52: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

52E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

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

Page 53: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

53E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

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

Page 54: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

54E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

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

Page 55: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

55E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

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

Page 56: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

56E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

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 (

Page 57: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

57E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

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

Page 58: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

58E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Rotation Matrix

1000

0100

00 cossin

00sin cos

R = Rz() =

Page 59: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

59E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

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

Page 60: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

60E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Scaling

1000

000

000

000

z

y

x

s

s

s

S = S(sx, sy, sz) =

x’=sxxy’=syxz’=szx

p’=Sp

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

Page 61: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

61E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Reflection

corresponds to negative scale factors

originalsx = -1 sy = 1

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

Page 62: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

62E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

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)

Page 63: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

63E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

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

Page 64: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

64E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

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

Page 65: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

65E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

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

Page 66: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

66E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

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)

Page 67: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

67E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

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

Page 68: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

68E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Shear

• Helpful to add one more basic transformation

• Equivalent to pulling faces in opposite directions

Page 69: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

69E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Shear Matrix

Consider simple shear along x axis

x’ = x + y cot y’ = yz’ = z

1000

0100

0010

00cot 1

H() =

Page 70: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

70E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

OpenGL Transformations

Sai-Keung Wong (黃世強 )

Computer Science

National Chiao Tung University, Taiwan

Page 71: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

71E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Objectives

•Learn how to carry out transformations in OpenGL

Rotation

Translation

Scaling

• Introduce mat,h and vec.h transformations Model-view

Projection

Page 72: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

72E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Pre 3.1OpenGL Matrices

• In 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);

Page 73: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

73E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

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

CTMvertices vertices

p p’=CpC

Page 74: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

74E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

CTM operations

• The CTM can be altered either by loading a new CTM or by postmutiplication

Load an identity matrix: C ILoad an arbitrary matrix: C M

Load a translation matrix: C TLoad a rotation matrix: C RLoad a scaling matrix: C S

Postmultiply by an arbitrary matrix: C CMPostmultiply by a translation matrix: C CTPostmultiply by a rotation matrix: C C RPostmultiply by a scaling matrix: C C S

Page 75: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

75E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Rotation about a Fixed Point

Start with identity matrix: C IMove fixed point to origin: C CTRotate: C CRMove 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.

Page 76: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

76E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Reversing the Order

We want C = T –1 R T so we must do the operations in the following order

C IC CT -1

C CRC CT

Each operation corresponds to one function call in the program.

Note that the last operation specified is the first executed in the program

Page 77: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

77E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

CTM in OpenGL

•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

Page 78: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

78E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Rotation, Translation, Scaling

mat4 r = Rotate(theta, vx, vy, vz)m = m*r;

mat4 s = Scale( sx, sy, sz)mat4 t = Transalate(dx, dy, dz);m = m*s*t;

mat4 m = Identity();

Create an identity matrix:

Multiply on right by rotation matrix of theta in degrees where (vx, vy, vz) define axis of rotation

Do same with translation and scaling:

Page 79: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

79E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

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

mat 4 m = Identity();m = Translate(1.0, 2.0, 3.0)* Rotate(30.0, 0.0, 0.0, 1.0)* Translate(-1.0, -2.0, -3.0);

Page 80: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

80E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Arbitrary Matrices

•Can load and multiply by matrices defined in the application program

•Matrices are stored as one dimensional array of 16 elements which are the components of the desired 4 x 4 matrix stored by columns

•OpenGL functions that have matrices as parameters allow the application to send the matrix or its transpose

Page 81: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

81E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Matrix Stacks

• In many situations we want to save transformation matrices for use later

Traversing hierarchical data structures (Chapter 8)

Avoiding state changes when executing display lists

•Pre 3.1 OpenGL maintained stacks for each type of matrix

•Easy to create the same functionality with a simple stack class

Page 82: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

82E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Reading Back State

• Can also access OpenGL variables (and other parts of the state) by query functions

glGetIntegervglGetFloatvglGetBooleanvglGetDoublevglIsEnabled

Page 83: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

83E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Using Transformations

• Example: use idle function to rotate a cube and mouse function 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

Page 84: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

84E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

main.c

void main(int argc, char **argv) { glutInit(&argc, argv); glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH); glutInitWindowSize(500, 500); glutCreateWindow("colorcube"); glutReshapeFunc(myReshape); glutDisplayFunc(display); glutIdleFunc(spinCube); glutMouseFunc(mouse); glEnable(GL_DEPTH_TEST); glutMainLoop();}

Page 85: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

85E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Idle and Mouse callbacks

void spinCube() {theta[axis] += 2.0;if( theta[axis] > 360.0 ) theta[axis] -= 360.0;glutPostRedisplay();

}

void mouse(int btn, int state, int x, int y){ if(btn==GLUT_LEFT_BUTTON && state == GLUT_DOWN) axis = 0; if(btn==GLUT_MIDDLE_BUTTON && state == GLUT_DOWN) axis = 1; if(btn==GLUT_RIGHT_BUTTON && state == GLUT_DOWN) axis = 2;}

Page 86: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

86E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Display callback

void display(){ glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glUniform(…); //or glUniformMatrix glDrawArrays(…);

glutSwapBuffers();}

We can form matrix in application and send to shader and let shader do the rotation or we can send the angle and axis to the shader and let the shader form the transformation matrix and then do the rotation

More efficient than transforming data in application and resending the data

Page 87: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

87E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Using the Model-view Matrix

• In OpenGL the model-view matrix is used to Position the camera

• Can be done by rotations and translations but is often easier to use a LookAt function

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

Page 88: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

88E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

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 (see text)

Page 89: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

89E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Incremental Rotation

• Consider the two approaches

For a sequence of rotation matrices R0,R1,

…..,Rn , find the Euler angles for each and use Ri= Riz Riy Rix

• Not very efficient

Use the final positions to determine the axis and angle of rotation, then increment only the angle

• Quaternions can be more efficient than either

Page 90: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

90E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Quaternions

• Extension of imaginary numbers from two to three dimensions

• Requires one real and three imaginary components i, j, k

• Quaternions can express rotations on sphere smoothly and efficiently. Process:

Model-view matrix quaternion Carry out operations with quaternions Quaternion Model-view matrix

q=q0+q1i+q2j+q3k

Page 91: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

91E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Interfaces

• One of the major problems in interactive computer graphics is how to use two-dimensional devices such as a mouse to interface with three dimensional obejcts

• Example: how to form an instance matrix?• Some alternatives

Virtual trackball 3D input devices such as the spaceball Use areas of the screen

• Distance from center controls angle, position, scale depending on mouse button depressed

Page 92: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

92E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Building Models

Sai-Keung Wong (黃世強 )

Computer Science

National Chiao Tung University, Taiwan

Page 93: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

93E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Objectives

• Introduce simple data structures for building polygonal models

Vertex lists

Edge lists

•Deprecated OpenGL vertex arrays

Page 94: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

94E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Representing a Mesh

• Consider a mesh

• There are 8 nodes and 12 edges 5 interior polygons

6 interior (shared) edges

• Each vertex has a location vi = (xi yi zi)

v1 v2

v7

v6

v8

v5

v4

v3

e1

e8

e3

e2

e11

e6

e7

e10

e5

e4

e9

e12

Page 95: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

95E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Simple Representation

• Define each polygon by the geometric locations of its vertices

• Leads to OpenGL code such as

• Inefficient and unstructured Consider moving a vertex to a new location

Must search for all occurrences

vertex[i] = vec3(x1, x1, x1);vertex[i+1] = vec3(x6, x6, x6);vertex[i+2] = vec3(x7, x7, x7);i+=3;

Page 96: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

96E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Inward and Outward Facing Polygons

• The order {v1, v6, v7} and {v6, v7, v1} are equivalent in that the same polygon will be rendered by OpenGL but the order {v1, v7, v6} is different

• The first two describe outwardly

facing polygons• Use the right-hand rule =

counter-clockwise encirclement

of outward-pointing normal • OpenGL can treat inward and

outward facing polygons differently

Page 97: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

97E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Geometry vs Topology

•Generally it is a good idea to look for data structures that separate the geometry from the topology

Geometry: locations of the vertices

Topology: organization of the vertices and edges

Example: a polygon is an ordered list of vertices with an edge connecting successive pairs of vertices and the last to the first

Topology holds even if geometry changes

Page 98: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

98E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Vertex Lists

• Put the geometry in an array

• Use pointers from the vertices into this array

• Introduce a polygon listx1 y1 z1

x2 y2 z2

x3 y3 z3

x4 y4 z4

x5 y5 z5.

x6 y6 z6

x7 y7 z7

x8 y8 z8

P1P2P3P4P5

v1

v7

v6

v8

v5

v6topology geometry

Page 99: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

99E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Shared Edges

• Vertex lists will draw filled polygons correctly but if we draw the polygon by its edges, shared edges are drawn twice

• Can store mesh by edge list

Page 100: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

100E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Edge List

v1 v2

v7

v6

v8

v5

v3

e1

e8

e3

e2

e11

e6

e7

e10

e5

e4

e9

e12

e1e2e3e4e5e6e7e8e9

x1 y1 z1

x2 y2 z2

x3 y3 z3

x4 y4 z4

x5 y5 z5.

x6 y6 z6

x7 y7 z7

x8 y8 z8

v1v6

Note polygons arenot represented

Page 101: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

101E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Modeling a Cube

typedef vex3 point3;point3 vertices[] = {point3(-1.0,-1.0,-1.0), point3(1.0,-1.0,-1.0), point3(1.0,1.0,-1.0), point3(-1.0,1.0,-1.0), point3(-1.0,-1.0,1.0), point3(1.0,-1.0,1.0), point3(1.0,1.0,1.0), point3(-1.0,1.0,1.0)};

typedef vec3 color3;color3 colors[] = {color3(0.0,0.0,0.0), color3(1.0,0.0,0.0), color3(1.0,1.0,0.0), color(0.0,1.0,0.0), color3(0.0,0.0,1.0), color3(1.0,0.0,1.0), color3(1.0,1.0,1.0), color3(0.0,1.0,1.0});

Define global arrays for vertices and colors

Page 102: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

102E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Drawing a triangle from a list of indices

Draw a triangle from a list of indices into the array vertices and assign a color to each index

void triangle(int a, int b, int c, int d){ vcolors[i] = colors[d]; position[i] = vertices[a]; vcolors[i+1] = colors[d]); position[i+1] = vertices[a]; vcolors[i+2] = colors[d]; position[i+2] = vertices[a]; i+=3; }

Page 103: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

103E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Draw cube from faces

void 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

Page 104: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

104E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Efficiency

•The weakness of our approach is that we are building the model in the application and must do many function calls to draw the cube

•Drawing a cube by its faces in the most straight forward way used to require

6 glBegin, 6 glEnd 6 glColor 24 glVertex More if we use texture and lighting

Page 105: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

105E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Vertex Arrays

• OpenGL provided a facility called vertex arrays that allows us to store array data in the implementation

• Six types of arrays were supported initially Vertices

Colors

Color indices

Normals

Texture coordinates

Edge flags

• Now vertex arrays can be used for any attributes

Page 106: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

106E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Old Style Initialization

• Using the same color and vertex data, first we enableglEnableClientState(GL_COLOR_ARRAY);

glEnableClientState(GL_VERTEX_ARRAY);

• Identify location of arraysglVertexPointer(3, GL_FLOAT, 0, vertices);

glColorPointer(3, GL_FLOAT, 0, colors);

3d arrays stored as floats data contiguousdata array

Page 107: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

107E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Mapping indices to faces

•Form an array of face indices

•Each successive four indices describe a face of the cube

•Draw through glDrawElements which replaces all glVertex and glColor calls in the display callback

GLubyte cubeIndices[24] = {0,3,2,1,2,3,7,6 0,4,7,3,1,2,6,5,4,5,6,7,0,1,5,4};

Page 108: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

108E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Drawing the cube

• Old Method:

• Problem is that although we avoid many function calls, data are still on client side

• Solution: no immediate mode

Vertex buffer object

Use glDrawArrays

glDrawElements(GL_QUADS, 24, GL_UNSIGNED_BYTE, cubeIndices);

Draws cube with 1 function call!!

Page 109: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

Rotating Cube

•Full example•Model Colored Cube•Use 3 button mouse to change direction of rotation

•Use idle function to increment angle of rotation

109E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

Page 110: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

Cube Vertices

110E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

// Vertices of a unit cube centered at origin// sides aligned with axespoint4 vertices[8] = { point4( -0.5, -0.5, 0.5, 1.0 ), point4( -0.5, 0.5, 0.5, 1.0 ), point4( 0.5, 0.5, 0.5, 1.0 ), point4( 0.5, -0.5, 0.5, 1.0 ), point4( -0.5, -0.5, -0.5, 1.0 ), point4( -0.5, 0.5, -0.5, 1.0 ), point4( 0.5, 0.5, -0.5, 1.0 ), point4( 0.5, -0.5, -0.5, 1.0 )};

Page 111: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

Colors

111E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

// RGBA colorscolor4 vertex_colors[8] = { color4( 0.0, 0.0, 0.0, 1.0 ), // black color4( 1.0, 0.0, 0.0, 1.0 ), // red color4( 1.0, 1.0, 0.0, 1.0 ), // yellow color4( 0.0, 1.0, 0.0, 1.0 ), // green color4( 0.0, 0.0, 1.0, 1.0 ), // blue color4( 1.0, 0.0, 1.0, 1.0 ), // magenta color4( 1.0, 1.0, 1.0, 1.0 ), // white color4( 0.0, 1.0, 1.0, 1.0 ) // cyan};

Page 112: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

Quad Function

112E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

// quad generates two triangles for each face and assigns colors// to the verticesint Index = 0;void quad( int a, int b, int c, int d ){ colors[Index] = vertex_colors[a]; points[Index] = vertices[a]; Index++; colors[Index] = vertex_colors[b]; points[Index] = vertices[b]; Index++; colors[Index] = vertex_colors[c]; points[Index] = vertices[c]; Index++; colors[Index] = vertex_colors[a]; points[Index] = vertices[a]; Index++; colors[Index] = vertex_colors[c]; points[Index] = vertices[c]; Index++; colors[Index] = vertex_colors[d]; points[Index] = vertices[d]; Index++;}

Page 113: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

Color Cube

113E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

// generate 12 triangles: 36 vertices and 36 colorsvoidcolorcube(){ quad( 1, 0, 3, 2 ); quad( 2, 3, 7, 6 ); quad( 3, 0, 4, 7 ); quad( 6, 5, 1, 2 ); quad( 4, 5, 6, 7 ); quad( 5, 4, 0, 1 );}

Page 114: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

Initialization I

114E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

void init(){ colorcube();

// Create a vertex array object

GLuint vao; glGenVertexArrays ( 1, &vao ); glBindVertexArray ( vao );

Page 115: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

Initialization II

115E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

// Create and initialize a buffer object GLuint buffer; glGenBuffers( 1, &buffer ); glBindBuffer( GL_ARRAY_BUFFER, buffer ); glBufferData( GL_ARRAY_BUFFER, sizeof(points) + sizeof(colors), NULL, GL_STATIC_DRAW ); glBufferSubData( GL_ARRAY_BUFFER, 0, sizeof(points), points ); glBufferSubData( GL_ARRAY_BUFFER, sizeof(points), sizeof(colors), colors );// Load shaders and use the resulting shader program GLuint program = InitShader( "vshader36.glsl", "fshader36.glsl" ); glUseProgram( program );

Page 116: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

Initialization III

116E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

// set up vertex arrays GLuint vPosition = glGetAttribLocation( program, "vPosition" ); glEnableVertexAttribArray( vPosition ); glVertexAttribPointer( vPosition, 4, GL_FLOAT, GL_FALSE, 0, BUFFER_OFFSET(0) );

GLuint vColor = glGetAttribLocation( program, "vColor" ); glEnableVertexAttribArray( vColor ); glVertexAttribPointer( vColor, 4, GL_FLOAT, GL_FALSE, 0, BUFFER_OFFSET(sizeof(points)) );

theta = glGetUniformLocation( program, "theta" );

Page 117: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

Display Callback

117E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

voiddisplay( void ){ glClear( GL_COLOR_BUFFER_BIT |GL_DEPTH_BUFFER_BIT );

glUniform3fv( theta, 1, theta ); glDrawArrays( GL_TRIANGLES, 0, NumVertices );

glutSwapBuffers();}

Page 118: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

Mouse Callback

118E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

voidmouse( int button, int state, int x, int y ){ if ( state == GLUT_DOWN ) { switch( button ) { case GLUT_LEFT_BUTTON: Axis = Xaxis; break; case GLUT_MIDDLE_BUTTON: Axis = Yaxis; break; case GLUT_RIGHT_BUTTON: Axis = Zaxis; break; } }}

Page 119: 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012. Geometry Sai-Keung Wong ( 黃世強 ) Computer Science National Chiao Tung

Idle Callback

119E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

voididle( void ){ theta[axis] += 0.01;

if ( theta[axis] > 360.0 ) { theta[axis] -= 360.0; }

glutPostRedisplay();}