cs 354 pixel updating
DESCRIPTION
January 26, 2012 Lecture 4: Updating Pixels CS 354 Computer Graphics http://www.cs.utexas.edu/~mjk/teaching/cs354_s12/ University of TexasTRANSCRIPT
![Page 1: CS 354 Pixel Updating](https://reader033.vdocuments.site/reader033/viewer/2022061103/540b6372dab5ca00638b7ac8/html5/thumbnails/1.jpg)
CS 354Pixel Updating
Mark KilgardUniversity of TexasJanuary 26, 2012
![Page 2: CS 354 Pixel Updating](https://reader033.vdocuments.site/reader033/viewer/2022061103/540b6372dab5ca00638b7ac8/html5/thumbnails/2.jpg)
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)
![Page 3: CS 354 Pixel Updating](https://reader033.vdocuments.site/reader033/viewer/2022061103/540b6372dab5ca00638b7ac8/html5/thumbnails/3.jpg)
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
![Page 4: CS 354 Pixel Updating](https://reader033.vdocuments.site/reader033/viewer/2022061103/540b6372dab5ca00638b7ac8/html5/thumbnails/4.jpg)
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
![Page 5: CS 354 Pixel Updating](https://reader033.vdocuments.site/reader033/viewer/2022061103/540b6372dab5ca00638b7ac8/html5/thumbnails/5.jpg)
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
![Page 6: CS 354 Pixel Updating](https://reader033.vdocuments.site/reader033/viewer/2022061103/540b6372dab5ca00638b7ac8/html5/thumbnails/6.jpg)
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
![Page 7: CS 354 Pixel Updating](https://reader033.vdocuments.site/reader033/viewer/2022061103/540b6372dab5ca00638b7ac8/html5/thumbnails/7.jpg)
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
![Page 8: CS 354 Pixel Updating](https://reader033.vdocuments.site/reader033/viewer/2022061103/540b6372dab5ca00638b7ac8/html5/thumbnails/8.jpg)
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
![Page 9: CS 354 Pixel Updating](https://reader033.vdocuments.site/reader033/viewer/2022061103/540b6372dab5ca00638b7ac8/html5/thumbnails/9.jpg)
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
![Page 10: CS 354 Pixel Updating](https://reader033.vdocuments.site/reader033/viewer/2022061103/540b6372dab5ca00638b7ac8/html5/thumbnails/10.jpg)
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 ""
![Page 11: CS 354 Pixel Updating](https://reader033.vdocuments.site/reader033/viewer/2022061103/540b6372dab5ca00638b7ac8/html5/thumbnails/11.jpg)
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)…
![Page 12: CS 354 Pixel Updating](https://reader033.vdocuments.site/reader033/viewer/2022061103/540b6372dab5ca00638b7ac8/html5/thumbnails/12.jpg)
CS 354 12
Computing 3x3 Inverse
How would we compute?
1
1
1
1
yx
yx
yx
NN
MM
LL
![Page 13: CS 354 Pixel Updating](https://reader033.vdocuments.site/reader033/viewer/2022061103/540b6372dab5ca00638b7ac8/html5/thumbnails/13.jpg)
CS 354 13
Computing 3x3 Inverse
Can use Gaussian elimination or… Brute force works!
Given a matrix…
It’s inverse is…
![Page 14: CS 354 Pixel Updating](https://reader033.vdocuments.site/reader033/viewer/2022061103/540b6372dab5ca00638b7ac8/html5/thumbnails/14.jpg)
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
![Page 15: CS 354 Pixel Updating](https://reader033.vdocuments.site/reader033/viewer/2022061103/540b6372dab5ca00638b7ac8/html5/thumbnails/15.jpg)
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
![Page 16: CS 354 Pixel Updating](https://reader033.vdocuments.site/reader033/viewer/2022061103/540b6372dab5ca00638b7ac8/html5/thumbnails/16.jpg)
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
![Page 17: CS 354 Pixel Updating](https://reader033.vdocuments.site/reader033/viewer/2022061103/540b6372dab5ca00638b7ac8/html5/thumbnails/17.jpg)
CS 354 17
Putting It Together
Computing the A coefficient
red
red
red
red
red
red
C
B
A
N
M
L
![Page 18: CS 354 Pixel Updating](https://reader033.vdocuments.site/reader033/viewer/2022061103/540b6372dab5ca00638b7ac8/html5/thumbnails/18.jpg)
CS 354 18
Putting It Together
Computing the B coefficient
red
red
red
red
red
red
C
B
A
N
M
L
![Page 19: CS 354 Pixel Updating](https://reader033.vdocuments.site/reader033/viewer/2022061103/540b6372dab5ca00638b7ac8/html5/thumbnails/19.jpg)
CS 354 19
Putting It Together
Computing the C coefficient
red
red
red
red
red
red
C
B
A
N
M
L
![Page 20: CS 354 Pixel Updating](https://reader033.vdocuments.site/reader033/viewer/2022061103/540b6372dab5ca00638b7ac8/html5/thumbnails/20.jpg)
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
![Page 21: CS 354 Pixel Updating](https://reader033.vdocuments.site/reader033/viewer/2022061103/540b6372dab5ca00638b7ac8/html5/thumbnails/21.jpg)
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)
![Page 22: CS 354 Pixel Updating](https://reader033.vdocuments.site/reader033/viewer/2022061103/540b6372dab5ca00638b7ac8/html5/thumbnails/22.jpg)
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
![Page 23: CS 354 Pixel Updating](https://reader033.vdocuments.site/reader033/viewer/2022061103/540b6372dab5ca00638b7ac8/html5/thumbnails/23.jpg)
CS 354 23
Simplest Fragment Shading
Flat color shading glShadeModel(GL_FLAT)
Interpolated color shading glShadeModel(GL_SMOOTH)
![Page 24: CS 354 Pixel Updating](https://reader033.vdocuments.site/reader033/viewer/2022061103/540b6372dab5ca00638b7ac8/html5/thumbnails/24.jpg)
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
![Page 25: CS 354 Pixel Updating](https://reader033.vdocuments.site/reader033/viewer/2022061103/540b6372dab5ca00638b7ac8/html5/thumbnails/25.jpg)
CS 354 25
Examples of Complex Shaders
![Page 26: CS 354 Pixel Updating](https://reader033.vdocuments.site/reader033/viewer/2022061103/540b6372dab5ca00638b7ac8/html5/thumbnails/26.jpg)
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
![Page 27: CS 354 Pixel Updating](https://reader033.vdocuments.site/reader033/viewer/2022061103/540b6372dab5ca00638b7ac8/html5/thumbnails/27.jpg)
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
![Page 28: CS 354 Pixel Updating](https://reader033.vdocuments.site/reader033/viewer/2022061103/540b6372dab5ca00638b7ac8/html5/thumbnails/28.jpg)
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
![Page 29: CS 354 Pixel Updating](https://reader033.vdocuments.site/reader033/viewer/2022061103/540b6372dab5ca00638b7ac8/html5/thumbnails/29.jpg)
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
![Page 30: CS 354 Pixel Updating](https://reader033.vdocuments.site/reader033/viewer/2022061103/540b6372dab5ca00638b7ac8/html5/thumbnails/30.jpg)
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
![Page 31: CS 354 Pixel Updating](https://reader033.vdocuments.site/reader033/viewer/2022061103/540b6372dab5ca00638b7ac8/html5/thumbnails/31.jpg)
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
![Page 32: CS 354 Pixel Updating](https://reader033.vdocuments.site/reader033/viewer/2022061103/540b6372dab5ca00638b7ac8/html5/thumbnails/32.jpg)
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
![Page 33: CS 354 Pixel Updating](https://reader033.vdocuments.site/reader033/viewer/2022061103/540b6372dab5ca00638b7ac8/html5/thumbnails/33.jpg)
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
![Page 34: CS 354 Pixel Updating](https://reader033.vdocuments.site/reader033/viewer/2022061103/540b6372dab5ca00638b7ac8/html5/thumbnails/34.jpg)
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
![Page 35: CS 354 Pixel Updating](https://reader033.vdocuments.site/reader033/viewer/2022061103/540b6372dab5ca00638b7ac8/html5/thumbnails/35.jpg)
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
![Page 36: CS 354 Pixel Updating](https://reader033.vdocuments.site/reader033/viewer/2022061103/540b6372dab5ca00638b7ac8/html5/thumbnails/36.jpg)
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
![Page 37: CS 354 Pixel Updating](https://reader033.vdocuments.site/reader033/viewer/2022061103/540b6372dab5ca00638b7ac8/html5/thumbnails/37.jpg)
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
![Page 38: CS 354 Pixel Updating](https://reader033.vdocuments.site/reader033/viewer/2022061103/540b6372dab5ca00638b7ac8/html5/thumbnails/38.jpg)
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
![Page 39: CS 354 Pixel Updating](https://reader033.vdocuments.site/reader033/viewer/2022061103/540b6372dab5ca00638b7ac8/html5/thumbnails/39.jpg)
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)
![Page 40: CS 354 Pixel Updating](https://reader033.vdocuments.site/reader033/viewer/2022061103/540b6372dab5ca00638b7ac8/html5/thumbnails/40.jpg)
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
![Page 41: CS 354 Pixel Updating](https://reader033.vdocuments.site/reader033/viewer/2022061103/540b6372dab5ca00638b7ac8/html5/thumbnails/41.jpg)
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
![Page 42: CS 354 Pixel Updating](https://reader033.vdocuments.site/reader033/viewer/2022061103/540b6372dab5ca00638b7ac8/html5/thumbnails/42.jpg)
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