CS 354Pixel Updating

Mark KilgardUniversity of TexasJanuary 26, 2012

CS 354 2

Today’s material

Homework #1 (Project Zero) was due In-class quiz Lecture topic: pixel updating

Finishing up simple_triangle’s use of the Graphics Pipeline What sorts of math do we need to create computer graphics

scenes? Assignment

Reading Chapter 3, 146-186 Chapter 4, 195-237

Next homework (Homework #2) due Thursday, February 2 Math problems Look for PDF of homework problems announced on Piazza

tomorrow (Friday)

CS 354 3

Course Information Reminders Piazza

Working well now https://piazza.com/utexas/cs354

Public CS course web site http://www.cs.utexas.edu/~mjk/teaching/cs354_s12/

Lecture slides in PDF form Now has class lecture schedule

Slideshare.net http://www.slideshare.net/Mark_Kilgard

Lecture slides for web browser viewing

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 How triangle is converted to edge equations How edge equations are tested at pixel locations to

rasterize a triangle How colors are smoothly interpolated over triangle

This lecture More about interpolation Basic hidden surface removal via depth testing Pixel updates

CS 354 6

Daily Quiz

1. Given a triangle in 2D window space with vertexes

(10,15) (55, 10) (30, 35)

So its edge equations are: 5*x + 45*y – 725 > 0-25*x - 25*y + 1625 > 0 20*x - 20*y + 100 > 0

Is the window space position (39, 30) within this triangle? YES or NO

Explain why or why not.

2. A triangle has a plane equation to determine “redness”:

-5/800*x + -5/800*y + 725/800

What is the red magnitude at (35,20)?

3. If a rasterization algorithm avoids both double hitting pixels and pixel gaps along the shared edge of two triangles, what word describes this property?

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

CS 354 7

Programmer’s View:OpenGL API Example

Let’s draw a triangleglShadeModel(GL_SMOOTH); // smooth color interpolationglEnable(GL_DEPTH_TEST); // enable hidden surface removal

glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);glBegin(GL_TRIANGLES); { // every 3 vertexes makes a triangle glColor4ub(255, 0, 0, 255); // RGBA=(1,0,0,100%) glVertex3f(-0.8, 0.8, 0.3); // XYZ=(-8/10,8/10,3/10)

glColor4ub(0, 255, 0, 255); // RGBA=(0,1,0,100%) glVertex3f( 0.8, 0.8, -0.2); // XYZ=(8/10,8/10,-2/10)

glColor4ub(0, 0, 255, 255); // RGBA=(0,0,1,100%) glVertex3f( 0.0, -0.8, -0.2); // XYZ=(0,-8/10,-2/10)} glEnd();

Pro Tip: use curly braces to “bracket” nested OpenGLusage; no semantic meaning, just highlights grouping

CS 354 8

Programmer’s View:GLUT API Example

Windowing code#include <GL/glut.h> // includes necessary OpenGL headers

void display() { // << insert code on prior slide here >> glutSwapBuffers();}

void main(int argc, char **argv) { // request double-buffered color window with depth buffer glutInitDisplayMode(GLUT_RGBA | GLUT_DOUBLE | GLUT_DEPTH); glutInit(&argc, argv); glutCreateWindow(“simple triangle”); glutDisplayFunc(display); // function to render window glutMainLoop();}

FYI: GLUT = OpenGL Utility Toolkit

CS 354 9

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

Got to here in last lecture

Depth buffer

CS 354 10

Color Interpolation

Our simple triangle is drawn with smooth color interpolation Recall: glShadeModel(GL_SMOOTH)

How is color interpolated? Think of a plane equation to computer each color

component (say red) as a function of (x,y) Just done for samples positions within the triangle

redredred CyBxAredness ""

CS 354 11

Setup Plane Equation

Setup plane equation to solve for “red” as a function of (x,y)

red

red

red

yx

yx

yx

red

red

red

C

B

A

NN

MM

LL

N

M

L

1

1

1

red

red

red

red

red

red

yx

yx

yx

C

B

A

N

M

L

NN

MM

LL1

1

1

1

Setup system ofequations

Solve for planeequation coefficientsA, B, C

Do the same for green, blue, and alpha (opacity)…

CS 354 12

Computing 3x3 Inverse

How would we compute?

1

1

1

1

yx

yx

yx

NN

MM

LL

CS 354 13

Computing 3x3 Inverse

Can use Gaussian elimination or… Brute force works!

Given a matrix…

It’s inverse is…

CS 354 14

Simpler Brute Force Form

General form simplifies down to

1

1

1

1

yx

yx

yx

NN

MM

LL

This denominator could be zero – when?When area of triangle LMN has zero area

All math is linear terms

CS 354 15

Putting It Together

Plane equation coefficients (A, B, C) generated by multiplying inverse matrix by vector of per-vertex attributes

red

red

red

red

red

red

yx

yx

yx

C

B

A

N

M

L

NN

MM

LL1

1

1

1

CS 354 16

Putting It Together

Plane equation coefficients (A, B, C) generated by multiplying inverse matrix by vector of per-vertex attributes

red

red

red

red

red

red

C

B

A

N

M

L

CS 354 17

Putting It Together

Computing the A coefficient

red

red

red

red

red

red

C

B

A

N

M

L

CS 354 18

Putting It Together

Computing the B coefficient

red

red

red

red

red

red

C

B

A

N

M

L

CS 354 19

Putting It Together

Computing the C coefficient

red

red

red

red

red

red

C

B

A

N

M

L

CS 354 20

Vector Version for RGB

Same pattern extends for interpolating vector attributes such as color Use matrix form

Easily extends to alpha with a 4x3 matrix Works for texture coordinates and any other linearly

interpolated attribute too

bluegreenred

bluegreenred

bluegreenred

bluegreenred

bluegreenred

bluegreenred

yx

yx

yx

CCC

BBB

AAA

NNN

MMM

LLL

NN

MM

LL1

1

1

1

CS 354 21

More Intuitive Way to Interpolate

Barycentric coordinates

L M

N

P

Area(PMN)Area(LMN)

= α

Area(LPN)Area(LMN)

= β

Area(LMP)Area(LMN)

= γ

Note: α + β + γ = 1by construction

attribute(P) = α×attribute(L) + β×attribute(M) + γ×attribute(N)

CS 354 22

Fragment Shading

Fragment shading “Process of determining the color and/or

depth of a pixel covered by rasterization of a primitive”

Pixels vs. Fragments Fragment :: meteor

Fragments are transient

Pixel :: meteorite Pixel’s state is retained in the framebuffer

CS 354 23

Simplest Fragment Shading

Flat color shading glShadeModel(GL_FLAT)

Interpolated color shading glShadeModel(GL_SMOOTH)

CS 354 24

General Fragment Shading

Modern GPUs allow an application specified program to run at each fragment “Fragment shader” Written in a high-level shading language

Available languages: Cg, HLSL, or GLSL, all C-like

Inputs to fragment shader are Interpolated attributes

Examples: RGBA colors, texture coordinate sets, fog coordinate Textures

Images that can be sampled by the shader Window space locations

(x,y,z) Uniform values

Constant for all shader instances of a particular primitive batch

CS 354 25

Examples of Complex Shaders

CS 354 26

Fragment 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

CS 354 27

Interpolating Window Space Z

Plane equation coefficients (A, B, C) generated by multiplying inverse matrix by vector of per-vertex attributes

z

z

z

z

z

z

yx

yx

yx

C

B

A

N

M

L

NN

MM

LL1

1

1

1

CS 354 28

Per-vertex Depth of Our Simple Triangle

Assume the window is 500x500 pixels So glViewport(0,0,500,500) has been called And glDepthRange(0,1)

L=(50, 450, 0.65) N=(450,450,0.4)

M=(250,50,0.4)

Lz = 0.65Mz = 0.40Nz = 0.40

CS 354 29

Interpolating Window Space Z

Substitute per-vertex (x,y) and Z values for the L, M, and N vertexes

z

z

z

C

B

A

4.0

4.0

65.01

1450450

150250

145050

Z(x,y) = -0.000625*x + 0.0003125*y + 0.540625

Az= -0.000625

Bz = 0.0003125

Cz = 0.540625

Complete Z plane equation

CS 354 30

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

Ensure closerobjects obscure

(hide) moredistant objects

CS 354 31

Depth Buffer Visualized

Window-space Zwhite = 1.0 (far), black = 0.0 (near)

Window-space 1-Zwhite = 0.0 (near), black = 1.0 (far)

Depth-tested3D scene

How depth valuesare really stored

in the depth buffer

CS 354 32

Not Just for View OcclusionDepth Buffers also Useful for Shadow Generation

Without Shadows With ShadowsProjected Shadow Map

Light’s View Light’s View Depth

CS 354 33

Depth Buffer Algorithm

Simple, brute force Every color sample in framebuffer has corresponding depth

sample Discrete, solves occlusion in pixel space Memory intensive, but fast for hardware

Basic algorithm Clear the depth buffer to its “maximum far” value (generally 1.0) Interpolate fragment’s Z Read fragment’s corresponding depth buffer sample Z value If interpolated Z is less than (closer) than Z from depth buffer

Then replace the depth buffer Z with the fragment’s Z And also allow the fragment’s shaded color to update the

corresponding color value in color buffer Otherwise discard fragment

Do not update depth or color buffer

CS 354 34

Depth Buffer Example

Fragment gets rasterized Fragment’s Z value is

interpolated Resulting Z value is 0.65

Read the corresponding pixel’s Z value Reads the value 0.8

Evaluate depth function 0.65 GL_LESS 0.8 is true So 0.65 replaces 0.8 in the

depth buffer

Second primitive rasterizes same pixel

Fragment’s Z value is interpolated Resulting Z value is 0.72

Read the corresponding pixel’s Z value Reads the value 0.65

Evaluate depth function 0.72 GL_LESS 0.65 is

false So the fragment’s depth

value and color value are discarded

CS 354 35

Depth Test Operation

0.8

0.65

time

pixeldepth

fragmentdepth

0.65<0.8is true

0.65

0.72

0.65<0.8is false

0.65depth test

passes

depth testfails

CS 354 36

OpenGL API for Depth Testing Simple to use

Most applications just “enable” depth testing and hidden surfaces are removed Enable it: glEnable(GL_DEPTH_TEST)

Disabled by default Must have depth buffer allocated for it to work

Example: glutInitDisplayMode(GLUT_RGBA | GLUT_DOUBLE | GLUT_DEPTH) More control

Clearing the depth buffer glClear(GL_DEPTH_BUFFER_BIT | otherBits) glClearDepth(zvalue)

Initial value is 1.0, the maximum Z value in the depth buffer glDepthFunc(zfunc)

zfunc is one of GL_LESS, GL_GREATER, GL_EQUAL, GL_GEQUAL, GL_LEQUAL, GL_ALWAYS, GL_NEVER, GL_NOTEQUAL

Initial value is GL_LESS glDepthMask(boolean)

True means write depth value if depth test passes; if false, don’t write Initial value is GL_TRUE

glDepthRange Maps NDC Z values to window-space Z values Initially [0,1], mapping to the entire available depth range

CS 354 37

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

Write shadedcolor to color buffer

CS 354 38

Math Concepts

Graphics involves lots of “short” vectors 1 to 4 components Many examples:

Positions, colors, directions, normals, edge equations, plane equations, texture coordinates

Why use vectors? Compact notation Efficient for SIMD hardware evaluation Harness linear algebra & analytical geometry

CS 354 39

Vector Operations

Addition, subtraction (a,b,c) + (d,e,f) = (a+d, b+e, c+f) (a,b,c) - (d,e,f) = (a-d, b-e, c-f)

Scaling k*(a,b,c) = (k*a,k*b,k*c) -(a,b,c) = (-a,-b,-c)

Dot product (a.k.a. inner product) (a,b,c) • (d,e,f) = a*d + b*e + c*f

Cross product (a,b,c) × (d,e,f) = (b*f-c*e, c*d-a*f, a*e-b*d)

CS 354 40

Vector Operations

Triple product A • (B × C) 2D meaning,

Linear interpolation t*(a,b,c) + (1-t)*(d,e,f) Equivalently: (a,b,c) + t(d-a,e-b,f-c) Example: blending between colors

Euclidean norm √(A • A) Use: distance

Normalize A / √(A • A) Convert vectors to unit-length directions

CS 354 41

Matrix Multiplication

v’ = M v Where M is a matrix and v is a vector Use: coordinate system changes

v = M-1 v’ Inverse matrix multiplication Use: back projection

CS 354 42

Next Lecture

More Graphics Math Interpolation, vector math, and number representations for

computer graphics As usual, expect a short quiz on today’s lecture

Know how the depth test operates Given an inverse matrix based on (x,y) values of a triangle and

some per-vertex attributes, compute the plane equation for the attribute

Assignments Reading from “Interactive Computer Graphics” (Angel)

Chapter 3, 146-186 Chapter 4, 195-237

Second homework (math problems) Due Thursday, February 2 in class

Look for 2nd homework on class

web site