• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
CS 354 Pixel Updating
 

CS 354 Pixel Updating

on

  • 826 views

January 26, 2012

January 26, 2012

Lecture 4: Updating Pixels

CS 354 Computer Graphics

http://www.cs.utexas.edu/~mjk/teaching/cs354_s12/

University of Texas

Statistics

Views

Total Views
826
Views on SlideShare
826
Embed Views
0

Actions

Likes
0
Downloads
48
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    CS 354 Pixel Updating CS 354 Pixel Updating Presentation Transcript

    • CS 354 Pixel Updating Mark Kilgard University of Texas January 26, 2012
    • 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)
    • 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
    • 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
    • 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
    • Daily Quiz
      • 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.
      • 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)?
      • 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
    • Programmer’s View: OpenGL API Example
      • Let’s draw a triangle
      glShadeModel ( GL_SMOOTH ); // smooth color interpolation glEnable ( 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 OpenGL usage; no semantic meaning, just highlights grouping
    • 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
    • A Simplified Graphics Pipeline Application 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
    • 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
    • Setup Plane Equation
      • Setup plane equation to solve for “red” as a function of (x,y)
      Setup system of equations Solve for plane equation coefficients A, B, C Do the same for green, blue, and alpha (opacity)…
    • Computing 3x3 Inverse
      • How would we compute?
    • Computing 3x3 Inverse
      • Can use Gaussian elimination or…
      • Brute force works!
      Given a matrix… It’s inverse is…
    • Simpler Brute Force Form
      • General form simplifies down to
      This denominator could be zero – when? When area of triangle LMN has zero area All math is linear terms 
    • Putting It Together
      • Plane equation coefficients (A, B, C) generated by multiplying inverse matrix by vector of per-vertex attributes
    • Putting It Together
      • Plane equation coefficients (A, B, C) generated by multiplying inverse matrix by vector of per-vertex attributes
    • Putting It Together
      • Computing the A coefficient
    • Putting It Together
      • Computing the B coefficient
    • Putting It Together
      • Computing the C coefficient
    • 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
    • More Intuitive Way to Interpolate
      • Barycentric coordinates
      L M N P Area(PMN) Area(LMN) = α Area(LPN) Area(LMN) = β Area(LMP) Area(LMN) = γ Note : α + β + γ = 1 by construction attribute(P) = α ×attribute(L) + β ×attribute(M) + γ ×attribute(N)
    • 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
    • Simplest Fragment Shading
      • Flat color shading
        • glShadeModel ( GL_FLAT )
      • Interpolated color shading
        • glShadeModel ( GL_SMOOTH )
    • 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
    • Examples of Complex Shaders
    • Fragment Shaders in the Pipeline Geometry Program 3D Application or Game OpenGL API GPU Front End Vertex Assembly Vertex Shader Clipping, Setup, and Rasterization Fragment Shader Texture Fetch Raster Operations Framebuffer Access Memory Interface CPU – GPU Boundary OpenGL 3.3 Attribute Fetch Primitive Assembly Parameter Buffer Read programmable fixed-function Legend
    • Interpolating Window Space Z
      • Plane equation coefficients (A, B, C) generated by multiplying inverse matrix by vector of per-vertex attributes
    • 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) L z = 0.65 M z = 0.40 N z = 0.40
    • Interpolating Window Space Z
      • Substitute per-vertex (x,y) and Z values for the L, M, and N vertexes
      Z(x,y) = -0.000625*x + 0.0003125*y + 0.540625 A z = -0.000625 B z = 0.0003125 C z = 0.540625 Complete Z plane equation
    • A Simplified Graphics Pipeline Application 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 closer objects obscure (hide) more distant objects
    • Depth Buffer Visualized Window-space Z white = 1.0 (far), black = 0.0 (near) Window-space 1-Z white = 0.0 (near), black = 1.0 (far) Depth-tested 3D scene How depth values are really stored in the depth buffer
    • Not Just for View Occlusion Depth Buffers also Useful for Shadow Generation Without Shadows With Shadows Projected Shadow Map Light’s View Light’s View Depth
    • 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
    • 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
    • Depth Test Operation 0.8 0.65 time pixel depth fragment depth 0.65<0.8 is true 0.65 0.72 0.65<0.8 is false 0.65 depth test passes depth test fails
    • 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
    • A Simplified Graphics Pipeline Application 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 shaded color to color buffer
    • 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
    • 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)
    • 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
    • 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
    • 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