Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in...

51
Geometry CS 432 Interactive Computer Graphics Prof. David E. Breen Department of Computer Science 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012.

Transcript of Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in...

Page 1: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

Geometry

CS 432 Interactive Computer GraphicsProf. David E. Breen

Department of Computer Science

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

Page 2: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

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

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

Page 3: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

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

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

Page 4: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

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

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

Page 5: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

5

Transformations to Change Coordinate Systems

• 4 coordinate systems1 point P

)45()8.1,7.6(

)5.0,5.0()3,2()2,4(

43

32

21

RTMSTM

TM

•=

•=

=

1994 Foley/VanDam/Finer/Huges/Phillips ICG

Page 6: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

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

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

Page 7: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

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

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

v

Page 8: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

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

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

v -v avv

u

w

Page 9: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

Linear Vector Spaces

•Mathematical system for manipulating vectors•Operations

- Scalar-vector multiplication u=av- Vector-vector addition: w=u+v

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

Make sense in a vector space

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

Page 10: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

Vectors Lack Position

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

• These vectors are identical- Same direction and magnitude (length)

• Vectors spaces insufficient for geometry- Need points

Page 11: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

Points

•Location in space•Operations allowed between points and vectors

- Point-point subtraction yields a vector- Equivalent to point-vector addition

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

P=v+Q

v=P-Q

Page 12: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

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)

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

Page 13: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

Lines

•Consider all points of the form- P(a)=P0 + a d- Set of all points that pass through P0 in the

direction of the vector d

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

Page 14: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

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(a) = ax0 + (1-a)x1

y(a) = ay0 + (1-a)y1

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

Page 15: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

Rays and Line Segments

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

• If a >= 0, then P(a) is the ray leaving P0 in the direction dIf we use two points to define v, then

P( a) = Q + a (R-Q) = Q+av= aR + (1-a)Q

For 0 <= a < =1 we get all thepoints on the line segmentjoining R and Q

Page 16: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

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

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

P

Q Q

P

convex not convex

Page 17: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

Affine Sums

•Consider the “sum”P=a1P1+a2P2+…..+anPn

Ifa1+a2+…..an=1

in which case we have the affine sum of the points P1,P2,…..Pn

• If, in addition, ai>=0, we have the convex hull of P1,P2,…..Pn

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

Page 18: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

Convex Hull

•Smallest convex object containing P1,P2,…..Pn

•Formed by “shrink wrapping” points

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

Page 19: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

Curves and Surfaces

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

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

- Linear functions give planes and polygons

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

P(a) P(a, b)

Page 20: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

Planes

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

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

P(a,b)=R+au+bv P(a,b)=R+a(Q-R)+b(P-R)

u

v

R

P

RQ

Page 21: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

Triangles

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

convex sum of S(a) and R

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

convex sum of P and Q

Page 22: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

Barycentric Coordinates

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

P(a1, a2, a3)=a1P+a2Q+a3Rwhere a1 +a2 +a3 = 1ai>=0

The representation is called the barycentric coordinate representation of P

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

Page 23: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

Normals

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

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

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

u vR

Page 24: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

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

Representation

Page 25: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

25E. 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 26: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

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

Linear Independence

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

a1v1+a2v2+.. anvn=0 iff a1=a2=…=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 27: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

27E. 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=a1v1+ a2v2 +….+anvn

where the {ai} are unique

Page 28: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

28E. 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 29: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

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

Coordinate Systems

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

• A vector is written v=a1v1+ a2v2 +….+anvn

• The list of scalars {a1, a2, …. an}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=[a1 a2 …. an]T=

a!a"⋮a$

Page 30: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

30E. 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 WebGL 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 31: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

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

Coordinate Systems

•Which is correct?

•Both are because vectors have no fixed location

vv

Page 32: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

32E. 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

v1v2

v3

Page 33: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

33E. 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=a1v1+ a2v2 +….+anvn

•Every point can be written asP = P0 + b1v1+ b2v2 +….+bnvn

Page 34: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

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

Confusing Points and Vectors

Consider the point and the vectorP = P0 + b1v1+ b2v2 +….+bnvn

v=a1v1+ a2v2 +….+anvn

They appear to have the similar representationsp=[b1 b2 b3] v=[a1 a2 a3]which confuses the point with the vectorA vector has no position v

pv

Vector can be placed anywherepoint: fixed

Page 35: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

35

Homogeneous Coordinates

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

Page 36: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

36E. 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 writev=a1v1+ a2v2 +a3v3 = [a1 a2 a3 0 ] [v1 v2 v3 P0] T

P = P0 + b1v1+ b2v2 +b3v3= [b1 b2 b3 1 ] [v1 v2 v3 P0] T

Thus we obtain the four-dimensional homogeneous coordinate representation

v = [a1 a2 a3 0 ] T

p = [b1 b2 b3 1 ] T

Page 37: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

37E. 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 w¹0) byx¬x’/wy¬y’/wz¬z’/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 38: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

38E. 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=0for vectors and w=1 for points

- For perspective we need a perspective division

Page 39: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

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

Change of Coordinate Systems

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

v=a1v1+ a2v2 +a3v3 = [a1 a2 a3] [v1 v2 v3] T

=b1u1+ b2u2 +b3u3 = [b1 b2 b3] [u1 u2 u3] T

a=[a1 a2 a3 ]b=[b1 b2 b3]

where

Page 40: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

40E. 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 = g11v1+g12v2+g13v3u2 = g21v1+g22v2+g23v3u3 = g31v1+g32v2+g33v3

v

Page 41: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

41E. 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

M =

g!! g!" g!%g"! g"" g"%g%! g%" g%%

Page 42: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

42E. 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 43: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

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

Representing One Frame in Terms of the Other

u1 = g11v1+g12v2+g13v3u2 = g21v1+g22v2+g23v3u3 = g31v1+g32v2+g33v3Q0 = g41v1+g42v2+g43v3 +g44P0

Extending what we did with change of bases

defining a 4 x 4 matrix

M =

g!!g"!g%!g&!

g!"g""g%"g&"

g!%g"%g%%g&%

0001

Page 44: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

44E. 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=[a1 a2 a3 a4 ] in the first frameb=[b1 b2 b3 b4 ] in the second frame

where a4 =b4 = 1 for points and a4 =b4 = 0 for vectors and

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

a=MTb

Page 45: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

46E. 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 WebGL, 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 46: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

47E. 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

úúúú

û

ù

êêêê

ë

é

-1000d10000100001

M =

Page 47: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

Swapping Shader Programs

• May need different shader programs for different objects or situations in a graphics application

• Could pass a flag to one set of shader programs to execute different code for different objects or situations

• This strategy might produce performance degradation

• Alternative: Dynamically change shader programs

48

Page 48: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

Swapping Shader Programs(WebGL 1)

During initialization•Create shaders

•Get locations of uniform and attrib variables

49

program1_ID = initShaders(gl, "vertex_shader1", "fragment_shader1");program2_ID = initShaders(gl, "vertex_shader2", "fragment_shader2");

thetaLoc1 = gl.getUniformLocation(program1_ID, ”theta1");positionLoc1 = gl.getAttribLocation(program1_ID, "vPosition");

thetaLoc2 = gl.getUniformLocation(program2_ID, ”theta2");positionLoc2 = gl.getAttribLocation(program2_ID, "vPosition");

Page 49: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

Swapping Shader Programs(WebGL 1)

During initialization

•Create and fill buffers

50

positionBuffer1 = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer1);gl.bufferData(gl.ARRAY_BUFFER, flatten(positions1), gl.STATIC_DRAW);

positionBuffer2 = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer2);gl.bufferData(gl.ARRAY_BUFFER, flatten(positions2), gl.STATIC_DRAW);

Page 50: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

Swapping Shader Programs(WebGL 1)

In the render() function•Use first shader program

•Set uniform value

•Bind a buffer and define its attributes

•Draw data in the buffer51

gl.useProgram(program1_ID);

gl.uniform1f(thetaLoc1, rotateAngle1);

gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer1);gl.vertexAttribPointer(positionLoc1, 2, gl.FLOAT, false, 0, 0);gl.enableVertexAttribArray(positionLoc1);

gl.drawArrays(gl.TRIANGLE_FAN, 0, numOfVertices1);

Page 51: Geometry - Drexel CCIdavid/Classes/CS432/Lectures/...-In computer graphics, we are interested in objects that exist in three dimensions •Want a minimum set of primitives from which

Swapping Shader Programs(WebGL 1)

In the render() function•Use first shader program

•Set uniform value

•Bind a buffer and define its attributes

•Draw data in the buffer52

gl.useProgram(program2_ID);

gl.uniform1f(thetaLoc2, rotateAngle2);

gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer2);gl.vertexAttribPointer(positionLoc2, 2, gl.FLOAT, false, 0, 0);gl.enableVertexAttribArray(positionLoc2);

gl.drawArrays(gl.TRIANGLE_FAN, 0, numOfVertices2);