CS 354 Graphics Math

CS 354Graphics Math

Mark KilgardUniversity of TexasFebruary 2, 2012

CS 354 2

Today’s material

Homework #2 due today In-class quiz Lecture topic: graphics math & projective transformations

Homogenous coordinates Orthographic and frustum projective transformations

Assignment Reading

Chapter 6, pages 323-330 Project #1 to be assigned soon

Building a 3D object model loader Due Thursday, February 16 Look for announcement on piazza and course web site for details

CS 354 3

Administrative Final exam will be moved to the exam period

(Instead of last day of class) Making last day of class a review session instead Details coming

I’m going to start providing daily quiz solutions on piazza Provide you more feedback Also opportunity to expound on significance of the

quiz questions Expect versions of quiz questions to re-appear on

mid-term and final exams

CS 354 4

My Office Hours

Tuesday, before class Painter (PAI) 5.35 8:45 a.m. to 9:15

Thursday, after class ACE 6.302 11:00 a.m. to 12:00

CS 354 5

Last time, this time

Last lecture, we discussed Getting coordinates from object space to

NDC space Generalized clipping and culling OpenGL’s matrix manipulation API

This lecture Consequences of homogeneous coordinates More graphics mathematics

CS 354 6

Daily Quiz

1. In homogenous 3D space, which one of these (x,y,z,w) positions is NOT co-located (meaning specifying the same position):

(5, -2, 7, 2)(2.5, 1, 3.5, 1)(-15, 6, -21, -6)(5000,-2000,7000,2000)

2. A scalar “MAD” performs either a multiply (A×B) or multiply-add (A×B+C) operation.

How many scalar MAD operations are required to multiply a general 4x4 matrix by a 4-component vector?

3. Arrange in “first to last” order the following coordinate transforms in the conceptual vertex transformation pipeline:

a) modelview transformb) projection transformc) perspective divided) viewport & depth range transform

On a sheet of paper• Write your EID, name, and date• Write #1, #2, #3, followed by its answer

CS 354 7

A Simplified Graphics PipelineApplication

Vertex batching & assembly

Triangle assembly

Triangle clipping

Triangle rasterization

Fragment shading

Depth testing

Color update

Application-

OpenGL API boundary

Framebuffer

NDC to window space

Depth buffer

severaloperations

left outfor simplicityin explaining

the simple_triangleexample

CS 354 8

A few more steps expandedApplication

Vertex batching & assembly

Lighting

View frustum clipping

Triangle rasterization

Fragment shading

Depth testing

Color update

Application-

OpenGL API boundary

Framebuffer

NDC to window space

Depth buffer

Vertex transformation

User defined clipping

Back face culling

Perspective divide

Triangle assemblyTexture coordinate generation

was just “triangle clipping” before

CS 354 9

Conceptual Vertex Transformation

glVertex*API

commands

Modelviewmatrix

User-definedclip planes

View-frustumclip planes

to primitiverasterization

object-space coordinates

(xo,yo,zo,wo) eye-space coordinates

(xe,ye,ze,we)

clipped eye-space coordinates

clipped clip-space coordinates Perspective

divisionProjection

matrix

Viewport + Depth Rangetransformation

(xc,yc,zc,wc)

window-spacecoordinates

(xw,yw,zw,1/wc)

normalized device coordinates (NDC)

(xn,yn,zn,1/wc)

clip-spacecoordinates

(xc,yc,zc,wc)

(xe,ye,ze,we)

(xe,ye,ze,we)

CS 354 10

Four-component positions!

Conventional geometry represents 3D points at (x,y,z) positions Affine 3D positions, Cartesian coordinates

Projective position concept Use fourth coordinate: W

So (x,y,z,w) (x/w, y/w, z/w) is the corresponding affine 3D position Known as “homogeneous coordinates”

Advantages Represents perspective cleanly Allows rasterization of external triangles Puts off (expensive) division

CS 354 11

Example, All Identical Positions Affine 3D

(x,y,z)

Projective 3D (x,y,z,w) → (x/w,y/w,z/w)

(2,-5,10) (2,-5,10,1)

(4,-10,20,2)

(1,-2.5,5,0.5)

(-2,5,-10,-1)

CS 354 12

SubtractingHomogeneous Coordinates

Say we have A = (xa,ya,za,wa) B = (xb,yb,zb,wb)

What if we want to know the difference between these two homogeneous positions? We want B-A

What does that mean? If wa=1 and wb=1, then we might expect

B-A = (xb-xa,yb-ya,zb-za,1) Actually w result will be zero so

B-A = (xb-xa,yb-ya,zb-za,0) When w=0, that indicates a direction rather than a position

Let’s explore why this is—and why it makes sense

CS 354 13

Thinking about Fractions

Say I want to subtract 2/3 from 4/5 so 4/5 – 2/3 Clearly the answer is not (4-2)/(5-3)=2/2=1 Calculator says 0.8-0.6666=0.13334

Instead we need to homogenize the denominator so 3×(4/5) - 5×(2/3) = 12/15 – 10/15 = 2/15 And 2/15 ≈ 0.13334

Homogenous coordinates are like fractions (x,y,z,w) ≈ (x/w,y/w,z/w,w/w) So let’s try making a consistent denominator

CS 354 14

Consistent Denominators forHomogenous Coordinates

Think about A=wa×wb×(xa/wa,ya/wa,za/wa,wa/wa)

a.k.a. A=(wb×xa,wb×ya,wb×za,wa×wb) B=wa×wb×(xb/wb,yb/wb,zb/wb,wb/wb)

a.k.a. B=(wa×xb,wa×yb,wa×zb,wa×wb)

Now subtract B-A and get an answer B-A = (wa×xb-wb×xa,wa×yb-wb×ya,wa×zb-wb×za,0)

Think of a vector with w=0 as being a position “at infinity” in the direction of (x,y,z) Very powerful idea—expect us to revisit this

CS 354 15

Affine View FrustumClip Equations

The idea of a [-1,+1]3 view frustum cube Regions outside this cube get clipped Regions inside the cube get rasterized

Equations -1 ≤ xc ≤ +1

-1 ≤ yc ≤ +1

-1 ≤ zc ≤ +1

CS 354 16

Projective View FrustumClip Equations

Generalizes clip cube as a projective space Uses (xc,yc,zc,wc) clip-space coordinates

Equations -wc ≤ xc ≤ +wc

-wc ≤ yc ≤ +wc

-wc ≤ zc ≤ +wc

Notice Impossible for wc < 0 to survive clipping

Interpretation: wc is distance in front of the eye So negative wc values are “behind your head”

CS 354 17

NDC Space Clip Cube

(-1,-1,-1) (+1,-1,-1)

(+1,+1,-1) (-1,+1,-1)

(-1,-1,+1)

(+1,+1,+1)

(+1,-1,+1)

(-1,+1,+1)

Post-perspective divide puts the region surviving clipping within the [-1,+1]3

CS 354 18

Clip Space Clip Cube

(xmin/w,ymin/w,zmin/w)

Pre-perspective divide puts the region surviving clipping within-w ≤ x ≤ w, -w ≤ y ≤ w, -w ≤ z ≤ w

(xmax/w,ymin/w,zmin/w)

(xmax/w,ymin/w,zmax/w) (xmin/w,ymin/w,zmax/w)

(xmax/w,ymax/w,zmax/w)

(xmax/w,ymax/w,zmin/w) (xmin/w,ymax/w,zmin/w)

(xmin/w,ymax/w,zmax/w) Constraints xmin = -w xmax = w ymin = -w ymax = w zmin = -w zmax = w w>0

CS 354 19

Window Space Clip Cube

(x,y,zNear) (x+w,y,zNear)

(x+w,y+h,zNear) (x,y+h,zNear)

(x,y,zFar)

(x+w,y+h,zFar)

(x+w,y,zFar)

(x,y+h,zFar)

Assuming glViewport(x,y,w,h) and glDepthRange(zNear,zFar)

Constraints w>0 h>0 0 ≤ zNear ≤ 1 0 ≤ zFar ≤ 1

CS 354 20

Vertex Transformation

Object-space vertex position transformed by a general linear projective transformation Expressed as a 4x4 matrix

o

o

o

o

c

c

c

c

w

z

y

x

mmmm

mmmm

mmmm

mmmm

w

z

y

x

151173

141062

13951

12840

CS 354 21

Orthographic Transform

Prototype glOrtho(GLdouble left, GLdouble right,

GLdouble bottom, GLdouble top, GLdouble near, GLdouble far)

Post-concatenates an orthographic matrix

1000

200

02

0

002

nf

nf

nf

bt

bt

bt

lr

lr

lr

CS 354 22

glOrtho Example

Consider glLoadIdentity();

glOrtho(-20, 30, 10, 60, 15, -25) left=-20, right=30, bottom=10, top=50, near=15, far=-25

Matrix

1000

200

02

0

002

nf

nf

nf

bt

bt

bt

lr

lr

lr

10004

1

20

100

2

30

20

10

5

100

25

1

=

-Z axis

CS 354 23

Transform All Box Corners Consider

glLoadIdentity();glOrtho(-20, 30, 10, 60, 15, -25);

l=-20, r=30, b=10, t=50, n=15, f=-25 Eight box corners: (-20,10,-15), (-20,10,25), (-20, 50,-15), (-20, 50,-25),

(30,10,-15), (30,10,25), (30,50,-15), (30,50,25)

Transform each corner by the 4x4 matrix

1111

25152515

50501010

30303030

1111

25152515

50501010

20202020

10004

1

20

100

2

30

20

10

5

100

25

1

8 corners in column vector (position) form

keep in mind: looking downthe negative Z axis… so Z box coordinates are

negative n (-15) and negative f (+25)

CS 354 24

Box Corners in Clip Space

1111

25152515

50501010

30303030

1111

25152515

50501010

20202020

10004

1

20

100

2

30

20

10

5

100

25

1

1111

1111

1111

1111

1111

1111

1111

1111

Observe: result is “corners” of clip space (and NDC) clip cube

Think of glOrtho as a transform parameterization to map an axis-aligned box to the clip cube

8 “eye space” corners in column vector (position) form

CS 354 25

Orientation of OpenGL’sEye-space Coordinate System

-Z direction“looking into the screen”

+X-X

+Y

-Y

+Z direction“poking out of the screen”

CS 354 26

OpenGL Rule-of-Thumb forHandedness of Coordinate Systems

When Object coordinate system is right-handed, Modelview transform is generated from one or more of the

commands glTranslate, glRotate, and glScale with positivescaling values,

Projection transform is loaded with glLoadIdentityfollowed by exactly one of glOrtho or glFrustum,

Near value specified for glDepthRange is less than thefar value;

Then Eye coordinate system is right-handed Clip, NDC, and window coordinate systems

are left-handed

CS 354 27

Conventional OpenGL Handedness

Right-handed Object space Eye space

Left-handed Clip space Normalized Device

Coordinate (NDC) space Window space

Positive depthis further from viewer

In eye space, eyeis “looking down” thenegative Z axis

CS 354 28

Frustum Transform

Prototype glFrustum(GLdouble left, GLdouble right,

GLdouble bottom, GLdouble top, GLdouble near, GLdouble far)

Post-concatenates a frustum matrix

0100

2)(00

02

0

002

nf

fn

nf

nfbt

bt

bt

nlr

lr

lr

n

CS 354 29

glFrustum Example

Consider glLoadIdentity();

glFrustum(-30, 30, -20, 20, 1, 1000) left=-30, right=30, bottom=-20, top=20, near=1, far=1000

Matrix

0100999

2000

999

100100

0020

10

00030

1

=

-Z axis

0100

2)(00

02

0

002

nf

fn

nf

nfbt

bt

bt

nlr

lr

lr

n

symmetric left/right & top/bottom so zero

CS 354 30

Transform All Box Corners Consider

glLoadIdentity();glFrustum(-30, 30, -20, 20, 1, 1000)

left=-30, right=30, bottom=-20, top=20, near=1, far=1000 Eight box corners: (-30,-20,-1), (-30,-20,-1000), (-30, 20,-1), (-30, 20,-1000),

(30,10,-1), (30,10,-1000), (30,50,-1), (30,50,-1000)

Transform each corner by the 4x4 matrix

1111

1000110001

20000202000020

30000303000030

1111

1000110001

20000202000020

30000303000030

0100999

2000

999

100100

0020

10

00030

1

8 in column vector (position) form

keep in mind: looking downthe negative Z axis… so Z box coordinates are

negative n (-1) and negative f (-1000)

near near near near far far far far

CS 354 31

Box Corners in Clip Space

1000110001

1000110001

1000110001

1000110001

1000110001

1000110001

1000110001

1000110001

8 “eye space” corners in column vector (position) form

1111

1000110001

20000202000020

30000303000030

1111

1000110001

20000202000020

30000303000030

0100999

2000

999

100100

0020

10

00030

1

CS 354 32

Box Corners in NDC Space

Perform perspective divide

Observe: W component is 1 (at near plane) or 1/1000 (at far plane)

Also observe that Z component is always -1 (assuming W=1 eye-space positions)

1000110001

1000110001

1000110001

1000110001

1000110001

1000110001

1000110001

1000110001

wdivide

1111

1111

1111

1111

1111

1111

1111

1111

CS 354 33

Frustum Visualization

Think of a frustum as a camera’s view

CS 354 34

Conclusions aboutglOrtho and glFrustum

These OpenGL commands provide a parameterized transform mapping eye space into the “clip cube”

Each command glOrtho is orthographic glFrustum is

single-point perspective

CS 354 35

1-, 2-, and 3-point Perspective

A 4x4 matrix can represent 1, 2, or 3 vanishing points As well as zero for orthographic views

3-point perspective

2-point perspective1-point perspective

CS 354 36

Perspective in Art History

[Pietro Perugino, 1482]

CS 354 37

Perspective in Art History

[Pietro Perugino, 1482]

Vanishing point

CS 354 38

Humanist Analysis of Perspective

[Albrecht Dürer, 1471]

CS 354 39

Perspective Divide

Divide clip-space (x,y,z) by clip-space w To get Normalized Device Coordinate (NDC) space

Means reciprocal operation is done once And done after clipping Minimizes division by zero concern

c

c

c

c

c

c

n

n

n

wzw

yw

x

z

y

x

CS 354 40

Correspondence of Eye Space to NDC Space

Eye space Normalized Device Coordinate (NDC) space

“behind the eye”

“beyond the far clip plane”

“between eye and near clip plane”

“rendered (visible) region”

[Eric Lengyel]

CS 354 41

Viewport and Depth Range

Prototypes glViewport(GLint vx, GLint vy, GLsizei vw, GLsizei vh) glDepthRange(GLclampd n, GLclampd f)

Equations Maps NDC space to window space

22

22

22

nfznf

vvy

v

vvx

v

z

y

x

n

hyn

h

wxn

w

w

w

w

CS 354 42

Conceptual Vertex Transformation

glVertex*API

commands

Modelviewmatrix

User-definedclip planes

View-frustumclip planes

to primitiverasterization

object-space coordinates

(xo,yo,zo,wo) eye-space coordinates

(xe,ye,ze,we)

clipped eye-space coordinates

clipped clip-space coordinates Perspective

divisionProjection

matrix

Viewport + Depth Rangetransformation

(xc,yc,zc,wc)

window-spacecoordinates

(xw,yw,zw,1/wc)

normalized device coordinates (NDC)

(xn,yn,zn,1/wc)

clip-spacecoordinates

(xc,yc,zc,wc)

(xe,ye,ze,we)

(xe,ye,ze,we)

CS 354 43

Vertex Shaders in the Pipeline

GeometryProgram

3D Applicationor Game

OpenGL API

GPUFront End

VertexAssembly

VertexShader

Clipping, Setup,and Rasterization

FragmentShader

Texture Fetch

RasterOperations

Framebuffer Access

Memory Interface

CPU – GPU Boundary

OpenGL 3.3

Attribute Fetch

PrimitiveAssembly

Parameter Buffer Readprogrammable

fixed-function

Legend

So far, we’ve discussed “fixed-function” vertex transformationSo far, we’ve discussed “fixed-function” vertex transformation

Modern GPUs make vertex processing Modern GPUs make vertex processing programmableprogrammable

Via vertex shaders!Via vertex shaders!

CS 354 44

Vertex Transformation inVertex Shaders

GLSL Cg/HLSLvoid transform(float4 pos : POSITION, float4 col : COLOR, out float4 oPos : POSITION, out float4 oCol : COLOR, uniform float4x4 mvp){ // Pass through color oCol = color; // Transform position from object // space to clip space oPos = mul(mvp, pos);}

void main(void){ gl_FrontColor = gl_Color; gl_Position = ftransform();}

void main(void){ gl_FrontColor = gl_Color; gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex}

Or

CS 354 45

Intrigued by Homogenous Coordinates and Projective Transformations?

Read A Trip Down the Graphics Pipeline By Jim Blinn Particularly the “The

Homogeneous Perspective Transform” chapter

Entire book is great Informal style Based on Blinn’s IEEE

Computer Graphics & Applications column

Opportunity to develop your intuition for graphics

Two more books in the series—also great

CS 354 46

Next Lecture

Graphics Math Viewing, modeling, and quaternions As usual, expect a short quiz on today’s lecture

Know how frustum and ortho matrices transform points

Assignments Reading

Chapter 6, 310-322 Next project (Project #1) to be assigned Thursday,

February 2 Building a 3D object model loader Due Thursday, February 16