Date post: | 07-Sep-2014 |
Category: |
Technology |
Upload: | mark-kilgard |
View: | 907 times |
Download: | 3 times |
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