98
1 3D Transformations CS 234 Jeff Parker

1 3D Transformations CS 234 Jeff Parker. 2 Objectives Notifications Homework Gallery Pen and Paper Review transformations Apply these ideas to 3D movement

Embed Size (px)

Citation preview

1

3D Transformations

CS 234

Jeff Parker

2

Objectives

NotificationsHomework

GalleryPen and Paper

Review transformationsApply these ideas to 3D movement

3

Notifications

I've figured out how to get notified by iSite:

4

Notifications

I've figured out how to get notified by iSite:

5

Notifications

I've figured out how to get notified by iSite:

6

Gallery & Three RequestsWe will look at three examples: I have posted the code for eachPlease include a .jpg of your project

A jpg makes it easy for me to include your screenshotWe do like .pdfs, but don't want to tear them apart

Please include your name in all your filesMakes it easier for us to match you to your work

Please mimic Angel's organizationCreate a folder with your name on it. Develop your source in folder. Zip the folder and submit.

RootCommonJohnDoeHw4

<Your .html and .js files>

7

Gallery

Charles

8

Gallery Dan

9

Dan// set up the tic tac toe boarddrawRectP(0.32, 1, 0.34, -1);drawRectP(-0.32, 1, -0.34, -1);drawRectP(-1, 0.32, 1, 0.34);drawRectP(-1, -0.32, 1, -0.34);

canvas.addEventListener("mousedown", function(e){

if ( moves >8) return;

// we'll say that the first player is X, then O// Get the x/y index of where the user clicked...

var clickedBox = getClickedBox(e);

10

Danfunction getClickedBox(e) {

var x = e.offsetX==undefined?e.layerX:e.offsetX;var y = e.offsetY==undefined?e.layerY:e.offsetY;

var p = vec2(2*x/canvas.width-1, 2*(canvas.height-y)/canvas.height-1);

var yIndex;var xIndex;if (p[0] < -0.32) {

xIndex = 0;}else if (p[0] > -0.34 && p[0] < 0.32) {

xIndex = 1; ...

11

Dan// we'll say that the first player is X, then O// first we get the x/y index of where the user...var clickedBox = getClickedBox(e);var xIndex = clickedBox[0];var yIndex = clickedBox[1];

// if user clicked in a boxif (typeof xIndex != 'undefined' &&

typeof yIndex != 'undefined') { var boxIndex = (xIndex * 3) + yIndex; if (usedBoxes.indexOf(boxIndex) > -1)

return; usedBoxes.push(boxIndex);

12

Dan // we draw in that location, 0,0 bottom left, 2,2

moves++;var xCenter = -1 + ((xIndex * 0.66) + .165);var yCenter = -1 + ((yIndex * 0.66) + .165);

if (first) {// draw "X" as first playerdrawX(xCenter, yCenter);first = false;

}else {

// draw "O" as second playerfirst = true;drawO(xCenter, yCenter);

}

13

Gallery

Polina

Note the instructionsThe checkers are lovely

14

Gallery

Polina

Note the instructionsThe checkers are lovely

15

Gallery

Polina

Note the instructionsThe checkers are lovely

Two colorsSelected & UserSelected is

Black or whiteInterpolate between

16

Gallery

Multiple instances of same shapeMove the object before rasterizingOutput of the program: caught and missed

Alexander

17

Alex<!DOCTYPE html><html><head><meta http-equiv="Content-Type"

content="text/html;charset=utf-8" ><title>2D Sierpinski Gasket</title>

<script id="vertex-shader" type="x-shader/x-vertex">attribute vec3 vPosition;attribute vec3 vColor;

uniform float dgrs;uniform vec3 trnsX;varying vec4 color;

18

Alex<!DOCTYPE html><html><head><meta http-equiv="Content-Type"

content="text/html;charset=utf-8" ><title>2D Sierpinski Gasket</title>

<script id="vertex-shader" type="x-shader/x-vertex">attribute vec3 vPosition;attribute vec3 vColor;

uniform float dgrs;uniform vec3 trnsX;varying vec4 color;

Please include your name in all files

Check title

19

Alex<script id="vertex-shader" type="x-shader/x-vertex">

...

uniform float dgrs;

uniform vec3 trnsX;

...

void

main(){

mat4 rotateMat = mat4( 1, 0, 0, 0,

0, cos(dgrs), sin(dgrs), 0,

0, -sin(dgrs), cos(dgrs), 0,

0, 0, 0, 1);

mat4 translationMat = mat4( 1, 0, 0, 0,

0, 1, 0, 0,

0, 0, 1, 0,

trnsX[0], trnsX[1], trnsX[2], 1);

gl_Position = translationMat * rotateMat * vec4(vPosition, 1.0);

color = vec4(vColor, 1.0);

} </script>

20

Alex's JS// Renders the circle which represents the hole

function renderHole(){

gl.uniform1f(rotateDegrees, 0.95);

gl.uniform3fv(translateVector, [holePosition[0],

holePosition[1], holePosition[2]]);

gl.drawArrays( gl.TRIANGLE_FAN, spherePoints, circlePoints );

}

// Renders the sphere(s)

function renderCphere(){

gl.uniform1f(rotateDegrees, 0.55);

for(var i = 0; i < spheresPositions.length; i++){

gl.uniform3fv(translateVector, spheresPositions[i]);

gl.drawArrays( gl.TRIANGLE_STRIP, 0, spherePoints );

}

}Draw multiple copies of same thing

21

GalleryDerrick

Thoughts?

22

GalleryDerrick

"I downloaded a picture of a go board from the internet and then used an eye dropper tool from Pixelmator to choose the color with the rgb values." - Derrick

23

Gallery

Multiple instances of same shapeMove the object before rasterizing

Derrick

var baseColors = [ vec4(0.77, 0.64, 0.39, 1.0), //background vec4(0.0, 0.0, 0.0, 1.0), //black vec4(1.0, 1.0, 1.0, 1.0) //white];

24

Derrickfunction render(){

gl.clear( gl.COLOR_BUFFER_BIT );

// board grid linesfor (var i=0; i < 80; i=i+2)

gl.drawArrays(gl.LINE_LOOP, i, 2);

// render go stonesfor (var i=80; i < index; i=i+numOfCirclePoints)

gl.drawArrays(gl.TRIANGLE_FAN, i, numOfCirclePoints);

window.requestAnimFrame(render);}

Uses same buffer to hold lines and triangles

25

Derrickfor (var j=0; j < boardDimension; j++)

{

for (var i=0; i < boardDimension; i++)

{

vertPos=((j*boardDimension) + i)*4;

if ((i % 2)==(j % 2)){

square (vertices[vertPos], vertices[vertPos+1], vertices[vertPos+2], vertices[vertPos+3], 0);

}

else

{

square (vertices[vertPos], vertices[vertPos+1], vertices[vertPos+2], vertices[vertPos+3], 1);

}

if ((i==(boardDimension-1)) && (j != (boardDimension-1)))

{

triangle (vertices[vertPos+2], vertices[vertPos+3], vertices[vertPos+3], 0 );

triangle (vertices[vertPos+3], vertices[vertPos+3], vertices[vertPos+4], 0 );

}

}

}

26

Review: 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

27

Affine Transformations

We want our transformations to be Line PreservingCharacteristic of many physically important

transformationsRigid body transformations:

Rotation, TranslationNon-Rigid transformations: Scaling, Shear

We need only transform endpoints of line segmentsLet GPU connect transformed endpoints

28

Rotations

Matrices provide a compact representation for rotations, and many other transformation

T (x, y) = (x cos(a) - y sin(a), x sin(a) + y cos(a))To multiply matrices, multiply the rows of first by the columns of second

cos(θ ) −sin(θ )

sin(θ ) cos(θ )

⎣ ⎢

⎦ ⎥x

y

⎣ ⎢

⎦ ⎥=

x cos(θ ) − ysin(θ )

x sin(θ )+ ycos(θ )

⎣ ⎢

⎦ ⎥

29

Euler Angles

Rotations about x, y, or z axisPerform the rotations in fixed orderAny rotation is the produce of three of these rotations

Euler AnglesNot unique Not obvious how to find the angles

Different order would give different angles

cos(θ ) 0 −sin(θ )

0 1 0

sin(θ ) 0 cos(θ )

⎢ ⎢ ⎢

⎥ ⎥ ⎥

1 0 0

0 cos(θ ) −sin(θ )

0 sin(θ ) cos(θ )

⎢ ⎢ ⎢

⎥ ⎥ ⎥

Euler Angles Wikipedia

30

Determinant

If the length of each column is 1, the matrix preserves the length of vectors (1, 0) and (0, 1)

We also will look at the DeterminantDeterminant of a rotation is 1

But determinant == 1 does not imply a rotation

a b

c d= ad − bc

cos(θ ) −sin(θ )

sin(θ ) cos(θ )= cos2(θ )+sin2(θ ) =1

31

Scaling

sx 0 0

0 sy 0

0 0 sz

⎢ ⎢ ⎢

⎥ ⎥ ⎥

S = S(sx, sy, sz) =

x’=sxxy’=syxz’=szx

p’=Sp

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

user.xmission.com/~nate/tutors.html

32

ReflectionReflection corresponds to negative scale factors

Has determinant == -1Example below sends (x, y, z) (-x, y, z)Note that the product of two reflections is a rotation originalsx = -1 sy = 1

sx = -1 sy = -1

sx = 1 sy = -1

−1 0 0

0 1 0

0 0 1

⎢ ⎢ ⎢

⎥ ⎥ ⎥

33

Order of Transformations

Note that matrix on the right is the first applied to the point pMathematically, the following are equivalent p’ = ABCp = A(B(Cp))We use column matrices to represent points. In terms of row matrices p’T = pTCTBTAT

That is, the "last" transformation is applied first.

We will see that the implicit transformations have the same order property

34

Rotation About a Fixed Point other than the Origin

Move fixed point to originRotateMove fixed point back

M = T(pf) R() T(-pf)

35

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 (rotate)Locate (translate)

TRS

36

Shear

Helpful to add one more basic transformationEquivalent to pulling faces in opposite directions

37

Shear Matrix

Consider simple shear along x axis

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

1 cot(θ) 0

0 1 0

0 0 1

⎢ ⎢ ⎢

⎥ ⎥ ⎥

H() =

38

Translations

We cannot define a translation in 2D space with a 2x2 matrixNo choice for a, b, c, and d that moves the origin, (0, 0), to

some other point, such as (5, 3) in the equation above

a b

c d

⎣ ⎢

⎦ ⎥0

0

⎣ ⎢

⎦ ⎥= ? =

5

3

⎣ ⎢

⎦ ⎥

39

Translation

To address this, we consider 2D movements in 3DWe pick a representative – we let (x, y, 1) represent (x, y)

Like coasters on glass coffee table one unit above the floorTrack the movement of these representatives€

a b

c d

⎣ ⎢

⎦ ⎥0

0

⎣ ⎢

⎦ ⎥= ? =

5

3

⎣ ⎢

⎦ ⎥

Jeff Parker

40

Translation

We use a shear transformation T(x, y, z) in 3DNote that T(0, 0, 0) = (0, 0, 0)However, T(0, 0, 1) = (5, 3, 1)

Combines with scaling, reflection, and rotation€

1 0 5

0 1 3

0 0 1

⎢ ⎢ ⎢

⎥ ⎥ ⎥

x

y

1

⎢ ⎢ ⎢

⎥ ⎥ ⎥=

x + 5

y + 3

1

⎢ ⎢ ⎢

⎥ ⎥ ⎥

41

Translation

We use a shear transformation T(x, y, z) in 3DNote that T(0, 0, 0) = (0, 0, 0) - VectorHowever, T(0, 0, 1) = (5, 3, 1) - Point

Combines with scaling, reflection, and rotation€

1 0 5

0 1 3

0 0 1

⎢ ⎢ ⎢

⎥ ⎥ ⎥

x

y

1

⎢ ⎢ ⎢

⎥ ⎥ ⎥=

x + 5

y + 3

1

⎢ ⎢ ⎢

⎥ ⎥ ⎥

42

Projective Space

What happens if transformation moves point (x, y, 1) off the plane z = 1?We rescale - divide by the z value

For example, the point (9, 21, 3) (3, 7, 1)We may reduce to "lowest form" – when z = 1Project onto the plane z = 1

We have many representatives of the form: (3t, 7t, t)There are all equivalent in our Projective Model

1 0 5

0 1 3

0 0 1

⎢ ⎢ ⎢

⎥ ⎥ ⎥

x

y

1

⎢ ⎢ ⎢

⎥ ⎥ ⎥=

x + 5

y + 3

1

⎢ ⎢ ⎢

⎥ ⎥ ⎥

43

Projective Space

The same trick works to perform 3D TranslationsRepresent triples (x, y, z) as (x, y, z, 1) in 4D

Harder to visualize thisMathematicians reason by analogy to lower dimensions

1 0 0 5

0 1 0 3

0 0 1 2

0 0 0 1

⎢ ⎢ ⎢ ⎢

⎥ ⎥ ⎥ ⎥

x

y

z

1

⎢ ⎢ ⎢ ⎢

⎥ ⎥ ⎥ ⎥

=

x + 5

y + 3

z + 2

1

⎢ ⎢ ⎢ ⎢

⎥ ⎥ ⎥ ⎥

44

GLSL uses col major form<script id="vertex-shader" type="x-shader/x-vertex">

...

uniform float dgrs;

uniform vec3 trnsX;

...

void

main(){

mat4 rotateMat = mat4( 1, 0, 0, 0,

0, cos(dgrs), sin(dgrs), 0,

0, -sin(dgrs), cos(dgrs), 0,

0, 0, 0, 1);

mat4 translationMat = mat4( 1, 0, 0, 0,

0, 1, 0, 0,

0, 0, 1, 0,

trnsX[0], trnsX[1], trnsX[2], 1);

gl_Position = translationMat * rotateMat * vec4(vPosition, 1.0);

color = vec4(vColor, 1.0);

} </script>

45

Inverses

We can find inverses for all of our transformationsFocus on the basic moves we have studied –

Translation – translate back in the opposite directionRotation – rotate the the same angle, backwardsReflection – reflect a second time in the same planeScale – rescale by the reciprocal: If you doubled x, halve x.

1 0 0 −5

0 1 0 −3

0 0 1 −2

0 0 0 1

⎢ ⎢ ⎢ ⎢

⎥ ⎥ ⎥ ⎥

x

y

z

1

⎢ ⎢ ⎢ ⎢

⎥ ⎥ ⎥ ⎥

=

x − 5

y − 3

z − 2

1

⎢ ⎢ ⎢ ⎢

⎥ ⎥ ⎥ ⎥

46

Rotating Cube

Angel gives us two versionsThey look the same

Difference is in how we send traingles to GPU

"All problems in computer science can be solved by another level of indirection" – David Wheeler

47

HTML files$ diff cube.html cubev.html 43c43,45< precision mediump float;---> #ifdef GL_ES> precision highp float;> #endif

57c59< <script type="text/javascript"

src="cube.js"></script>---> <script type="text/javascript"

src="cubev.js"></script>...

48

HTML files

The first difference can be removedThe versions on iSite have been edited to align them

Changes to html and js files

$ diff cube.html cubev.html 57c59< <script type="text/javascript"

src="cube.js"></script>---> <script type="text/javascript"

src="cubev.js"></script>

49

cube.js

var NumVertices = 36;

var points = [];var colors = [];

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

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

50

cube.jsvar axis = 0;var theta = [ 0, 0, 0 ];

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

gl.DEPTH_BUFFER_BIT);

theta[axis] += 2.0; gl.uniform3fv(thetaLoc, theta);

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

requestAnimFrame( render );}

// Euler Angles

51

cube.js document.getElementById( "xButton" ).onclick =

function () { axis = xAxis; };

document.getElementById( "yButton" ).onclick = function () { axis = yAxis; };

document.getElementById( "zButton" ).onclick = function () { axis = zAxis; };

render();}

52

cube.html<script id="vertex-shader" type="x-shader/x-vertex">

attribute vec4 vPosition;attribute vec4 vColor;varying vec4 fColor;

uniform vec3 theta;

void main(){ // Compute the sines and cosines of theta for // each of the three axes in one step. vec3 angles = radians( theta ); vec3 c = cos( angles ); vec3 s = sin( angles );

53

Vertex Shader vec3 angles = radians( theta ); vec3 c = cos( angles ); vec3 s = sin( angles );

// Remeber: thse matrices are column-major mat4 rx = mat4( 1.0, 0.0, 0.0, 0.0, 0.0, c.x, s.x, 0.0, 0.0, -s.x, c.x, 0.0, 0.0, 0.0, 0.0, 1.0 );

mat4 ry = mat4( c.y, 0.0, -s.y, 0.0, 0.0, 1.0, 0.0, 0.0, s.y, 0.0, c.y, 0.0, 0.0, 0.0, 0.0, 1.0 );

54

Vertex Shader mat4 ry = mat4( c.y, 0.0, -s.y, 0.0, 0.0, 1.0, 0.0, 0.0, s.y, 0.0, c.y, 0.0, 0.0, 0.0, 0.0, 1.0 );

mat4 rz = mat4( c.z, -s.z, 0.0, 0.0, s.z, c.z, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0 );

fColor = vColor; gl_Position = rz * ry * rx * vPosition;}</script>

55

Fragment Shader<script id="fragment-shader" type="x-shader/x-fragment">

precision mediump float;

varying vec4 fColor;

voidmain(){ gl_FragColor = fColor;}

</script>

56

Cube Geometry: JavaScriptfunction colorCube(){ 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 );}

57

Cube Geometry: JavaScriptfunction colorCube(){ 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 );}

58

Cube Geometry: JavaScriptfunction quad(a, b, c, d){ ... // Parition the quad into two triangles to render it // We create two triangles from the quad indices

//vertex color assigned by the index of the vertex

var indices = [ a, b, c, a, c, d ];

for ( var i = 0; i < indices.length; ++i ) { points.push( vertices[indices[i]] ); colors.push( vertexColors[indices[i]] );

// for solid colored faces use //colors.push(vertexColors[a]); }}

59

Solid Colorsfunction quad(a, b, c, d){ ... // Parition the quad into two triangles to render it // We create two triangles from the quad indices

//vertex color assigned by the index of the vertex

var indices = [ a, b, c, a, c, d ];

for ( var i = 0; i < indices.length; ++i ) { points.push( vertices[indices[i]] ); // colors.push( vertexColors[indices[i]] );

// for solid colored faces use colors.push(vertexColors[a]); }}

60

Cube Geometry: JavaScriptfunction quad(a, b, c, d){ var vertices = [ vec3( -0.5, -0.5, 0.5 ), vec3( -0.5, 0.5, 0.5 ), vec3( 0.5, 0.5, 0.5 ), vec3( 0.5, -0.5, 0.5 ), vec3( -0.5, -0.5, -0.5 ), vec3( -0.5, 0.5, -0.5 ), vec3( 0.5, 0.5, -0.5 ), vec3( 0.5, -0.5, -0.5 ) ];

61

Cube Geometry: JavaScriptfunction quad(a, b, c, d){ var vertices = [ vec3( -0.5, -0.5, 0.5 ), ... ]; var vertexColors = [ [ 0.0, 0.0, 0.0, 1.0 ], // black [ 1.0, 0.0, 0.0, 1.0 ], // red [ 1.0, 1.0, 0.0, 1.0 ], // yellow [ 0.0, 1.0, 0.0, 1.0 ], // green [ 0.0, 0.0, 1.0, 1.0 ], // blue [ 1.0, 0.0, 1.0, 1.0 ], // magenta [ 1.0, 1.0, 1.0, 1.0 ], // white [ 0.0, 1.0, 1.0, 1.0 ] // cyan ];

62

Cube Geometry: Vector Versionvar indices = [ 1, 0, 3, 3, 2, 1, 2, 3, 7, 7, 6, 2, 3, 0, 4, 4, 7, 3, 6, 5, 1, 1, 2, 6, 4, 5, 6, 6, 7, 4, 5, 4, 0, 0, 1, 5];

63

Cube Geometry: Vector Versionvar indices = [ 1, 0, 3, 3, 2, 1, 2, 3, 7, 7, 6, 2,

3, 0, 4, 4, 7, 3,

6, 5, 1, 1, 2, 6,

4, 5, 6, 6, 7, 4, ...

Replaces

function colorCube(){ 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 );}

64

DiffsI edited the files to align them

$ diff cube.js cubev.js 7,9d6< var points = [];< var colors = [];<

40a38,52> // indices of the 12 triangles that comprise the cube> var indices = [> 1, 0, 3,> 3, 2, 1,> 2, 3, 7,> 7, 6, 2,> 3, 0, 4,

65

Diffs49,50d60< colorCube();< 61a72,77> // array element buffer > var iBuffer = gl.createBuffer();> gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iBuffer);> gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new

Uint8Array(indices), gl.STATIC_DRAW);> 66c82< gl.bufferData( gl.ARRAY_BUFFER, flatten(colors),

gl.STATIC_DRAW );---> gl.bufferData( gl.ARRAY_BUFFER, flatten(vertexColors),

gl.STATIC_DRAW );

66

Diffs99,128d114< function colorCube()< {< quad( 1, 0, 3, 2 );< quad( 2, 3, 7, 6 ); ...< quad( 5, 4, 0, 1 );< }< < function quad(a, b, c, d) < {< // We need to partition the quad into two triangles in

order for< // WebGL to be able to render it. In this case, we

create two

67

Diffs (cont)136c122< gl.drawArrays( gl.TRIANGLES, 0, NumVertices );---> gl.drawElements( gl.TRIANGLES, NumVertices,

gl.UNSIGNED_BYTE, 0 );

glDrawElements specifies multiple geometric primitives with very few subroutine calls. Instead of calling a GL function to pass each individual vertex, normal, texture coordinate, edge flag, or color, you can prespecify separate arrays of vertices, normals, and so on, and use them to construct a sequence of primitives with a single call to glDrawElements.

68

Droste Effect

69

Droste Effect

Royal Can transformation is just scaling. Droste has rotation and translation

70

Escher-Droste

http://wakaba.c3.cx/w/escher_droste.htmlTry Firefox…

Started with question from Charles – I want to understand that!

71

All work in Fragment Shader

</script><script id="fragmentshader" type="x-shader/x-fragment">precision highp float;

uniform sampler2D texture;uniform vec2 size;uniform float time;uniform float p1,p2;uniform int dipole;

const float factor=256.0;const float pi=3.1415926535;

72

Reading Texture in GPUvoid main(){

...

vec2 transformed=cmul(logpos,vec2(p2,-p1*log(factor)/(2.0*pi)));

vec2 texcoords = vec2(-transformed.y/(2.0*pi),transformed.x/log(factor)-0.35-time*0.1);

gl_FragColor = texture2D(texture,texcoords);}</script>

73

Initialize texture in CPU<script type="text/javascript"> ... texture=gl.createTexture();

texture.image=new Image();texture.image.onload=function(){

gl.bindTexture(gl.TEXTURE_2D,texture);...gl.generateMipmap(gl.TEXTURE_2D);

}texture.image.src="/images/escher.jpg";

74

Escher-Droste

http://wakaba.c3.cx/w/escher_droste.htmlTry Firefox…

http://wakaba.c3.cx/images/escher.jpg

75

Math: Convex SumVector Operations

We can add or subtract two vectorsCan multiply vector by scalarWe have two ways to multiple two vectors

Dot product: gives scalarWorks in any dimension

In 3D, cross product: gives vectorWeaker version exists in 7D

No Jacobi Identity in 7D

76

Point Operations

We can add a vector and a pointWe can subtract two pointsWe cannot multiply a point by a scalarWe cannot add two points

77

Point Operations

We can add a vector and a pointWe can subtract two pointsWe cannot multiply a point by a scalarWe cannot add two points

But we can average two points

78

Point Operations

Given points P and Q

P = (xp , yp , zp )

Q = (xq , yq , zq )

79

Point Operations

Given points P and QCan find a point midway between them

P = (xp , yp , zp )

Q = (xq , yq , zq )

S = (xp + xq

2,yp + yq

2,zp + zq

2)

80

Point Operations

Given points P and QCan find a point midway between them

P = (xp , yp , zp )

Q = (xq , yq , zq )

S =1

2P +

1

2Q

81

Point Operations

Given points P and QCan find a point closer to P

P = (xp , yp , zp )

Q = (xq , yq , zq )

S =1

3P +

2

3Q

82

Point Operations

Given points P and QCan find any point between P and Q

P = (xp , yp , zp )

Q = (xq , yq , zq )

S = tP +(1− t)Q

83

Point Operations

Given points P and QLet v be the vector from Q to P

v = (P −Q)

S = Q + tv = Q + t(P −Q) = tP +(1− t)Q

84

Point Operations

Give P, Q, and R, can form sums

S =αP +(1−α )Q

T = βS +(1− β )R

T = βS +(1− β )αP +(1− β )(1−α )Q

β +(1− β )α +(1− β )(1−α ) = β +(1− β )[α +(1−α )]

β +(1− β )[α +(1−α )] = β +(1− β ) =1

That is, the coefficients sum to 1: convex sumCalled the Barycentric Coefficients

85

Convex Sum

We want polygons to be convexIllustration of convex hull of a set of points

86

Convex Sum

When we rasterize, we will be working on scan linesWe will interpolate attributes, such as colorInterpolate down the edges – convex sumFor each scan line, interpolate the endpoints

Use Barycentric Coefficients as weights

87

Parametric Equations

We have seen several ways to describe a line (1) Point-slope form

(2) General EquationCan describe a vertical line

(3) General Equation as dot product

We looked at two new forms(4) Two Point form Rise over run of typical point

(5) Parameterized by a variable tLet's look at parameterized versions of other curves

(1) y = mx +b

(2) ax +by = c

(3) (x, y)• (a,b) = c

(4)y − y1

x − x1

=y2 − y1

x2 − x1

(5) (x, y) = (1− t)v1 + tv2

88

Parametric Equations

Consider the circleWhile this is a form you recognize, has problems

It is not a function: when x = a, there are two legal values for yDoes not give instructions on how to traverse the curve (!?!)

Why would we worry about this?Important in animation: characters move

on curvesAn alternative is to describe the points as traced by point

We parameterize the point via the angleAs theta runs from 0 to 2pi, we trace out the unit circle

The form to match the equation above is

(x − a)2 +(y −b)2 = k2

(x, y) = (cosθ ,sinθ )

(x, y) = (k cosθ + a, k sinθ +b)

89

Parameterized Lines

Once again, we start with a line defined by two endpoints

We will start at e1 and travel to e2

Define v1 as the vector from the origin to e1

Define v2 as the vector from the origin to e2

Define v3 = v2 – v1

Consider

v1 + tv3 = v1 + t(v2 – v1)

When t = 0, this is v1

When t = 1, this is v1 + (v2-v1) = v2

In between, this is (1-t)v1 + tv2

90

Application

Does a line segment intersect a line?Does line segment ( (1, 1,), (4, 3) ) intersect 3x – 2y = 5?

v3 = v2 – v1 = (4, 3) – (1, 1) = (3, 2)Define the line segment as

(x, y) = (1, 1) + t(3, 2) = (1 + 3t, 1 + 2t)Runs from (1, 1) to (4, 3) as t goes from 0 to 1

Plug this into equation of the line 3x – 2y = 5, and solve for t3(1 + 3t) - 2(1 + 2t) = 53 – 2 + 9t – 4t = 51 + 5t = 5

Does this have a root in [0, 1]?

91

Painter's Algorithm

Painter's Algorithm performs hidden surface removalSort the objects by their distance from the eyePaint the furthest things first, working your way to front

92

Painter's Algorithm

One difficulty is that we have to sort the objectsA second difficulty is that most objects don't have a fixed

depthWe can have circular chains

93

Painter's Algorithm

We can solve the problem by throwing memory at itAssign a buffer to hold depth of pixelAs we paint each pixel that will appear,remember the depth in the Z-Buffer

94

ZBuffer

We start with two images: remember color and depth

95

ZBuffer

96

Using z-BufferTo use the z-Buffer, you must

1) Ask for a depth buffer when you create your window.

2) Place a call to glEnable (GL_DEPTH_TEST) in your program's initialization routine, after a context is created and made current.

3) Ensure that your zNear and zFar clipping planes are set correctly and in a way that provides adequate depth buffer precision. In particular, zNear and zFar should be positive (not zero or negative) values.

4) Pass GL_DEPTH_BUFFER_BIT as a parameter to glClear

When zNear is too small, you get "z fighting"

97

Project for next weekConstruct a 3D worldMust have multiple objects

At least two different objects, multiple copies of oneMust have animation and user control of some aspectWe are going to have a "fly over" coming up

http://www.youtube.com/watch?v=nCYZjmfyQFcBuild an interesting world

by Steve DavisTeapot is an OpenGL primitive

98

Summary

Looked at work of fellow studentsWe have moved to animating the 3rd DimensionWe have found a way to represent translations

Next week, transformations to provide perspectiveWe have seen a new way to write the equation of a line