CS380: Introduction to Computer Graphics Varying Variables Chapter 3 Min H. Kim KAIST School of Computing Rasterization SUMMARY 2
Path from vertex to pixel 3 Clipping coordinates Eye coordinates (projected) à clip coordinates à normalized device coordinates (NDCs) (reminder) Dividing clip coordinates (x c, y c,z c,w c ) by the w c (w c = ) component (the fourth component in the homogeneous coordinates) yields normalized device coordinates (NDCs). x n y n z n w n w n = x c y c z c w c s x 0 c x 0 0 s y c y 0 = f + n 0 0 2 fn f n f n 0 0 0 x e y e z e 4 2
Viewport matrix We need a transform that maps the lower left corner to [ 0.5, 0.5] t and upper right corner to [W 0.5, H 0.5] t The appropriate scale and shift can be done using the viewport matrix: x w y w z w W / 2 0 0 (W ) / 2 = 0 H / 2 0 (H ) / 2 0 0 / 2 / 2 0 0 0 x n y n z n 5 Texture Viewport The abstract domain for textures is not the canonical square, but instead is the unit square. In this case the coordinate transformation matrix is: x w y w = W 0 0 / 2 0 H 0 / 2 0 0 0 x t y t 6 3
Chapter 3 and Appendix B VARYING VARIABLES 7 Interpolation of varying variables In between the vertex and fragment shader, we need to interpolate the values of the varying variables. What is the desired interpolant, and how should we compute it. This is surprisingly subtle. 8 4
Texture mapping 9 Wrong representation of texture When texture coordinates (x t, y t ) are linearly interpolated in window coordinates, an incorrect image results. 0 5
Correct representation of texture How can we interpolate texture coordinates (x t, y t ) properly like this? Motivation: texture coordinates Let us map a square checkerboard image onto a quad We break up the quad and the image each into two triangles. We will associate [x t, y t ] t texture coordinates for each vertex. We desire that in the interior of a triangle, [x t, y t ] t should be determined as the unique interpolant functions over the triangle that are affine in (x o, y o,z o ) 2 6
Motivation: texture coordinates Even steps on the geometry should be even steps in the texture. If we use this interpolation and fetch the texture values, we should get an expected foreshortening effect. 3 Linear interpolation Suppose we simply used linear interpolation on the x t and y t functions on texture. Then, as we move by some fixed 2D vector displacement on the screen, the texture coordinates will be updated by some fixed 2D vector displacement in texture coordinates. In this case, all of the squares of the texture will map to equal size parallelograms. We will get an odd seam where the two triangles meet. 4 7
Affine functions in 2D We say a function v( ) is an affine function in the variables x and y if it is of the form: v(x, y)= ax +by +c for some constants a,b and c This can also be written as: x v = a b c y 5 Affine functions in 2D Also called linear but note the additive constant term. An affine function can be evaluated by plugging in x, y or by incremental evaluation along a line in x, y space. We already saw for example that z n is an affine function of x n, y n and so was a 3D edge function : z n = ax n + by n + c 6 8
Affine/linear interpolation in 2D v i If we are given, the values of v for three (non-collinear) points in the (x, y) 2D plane, say the vertices of a triangle, This determines an affine function v entire plane. x over the x2 v i x3 7 Affine/linear interpolation in 2D In this case, we say that v is the linear interpolant of the values at the three vertices. The process of evaluating the linear interpolant of three vertices is called linear interpolation. v i Given the one can use some simple matrix operations to solve for the constants [a,b,c]. x x2 v i x3 8 9
How do you interpolate values defined at vertices across the entire triangle? D Interpolation How do you interpolate values defined at vertices across the entire triangle? Solve a simpler problem first: x x 2 0
D Interpolation How do you interpolate values defined at vertices across the entire triangle? Solve a simpler problem first: 0 x t x 2 Want to define a value for every t [0,] 0 t D Interpolation How do we come up with this equation? Look at the picture! t
D Interpolation t The further t is from the red point, the more blue we want. D Interpolation t The further t is from the red point, the more blue we want. The further t is from the blue point, the more red we want. 2
D Interpolation t The further t is from the red point, the more blue we want. The further t is from the blue point, the more red we want. Percent blue = (length of blue segment)/(total length) D Interpolation t The further t is from the red point, the more blue we want. The further t is from the blue point, the more red we want. Percent blue = (length of blue segment)/(total length) Percent red = (length of red segment)/(total length) 3
D Interpolation t The further t is from the red point, the more blue we want. The further t is from the blue point, the more red we want. Percent blue = (length of blue segment)/(total length) Percent red = (length of red segment)/(total length) Value at t = (% blue)(value at blue) + (% red)(value at red) D Interpolation x 0 t The further t is from the red point, the more blue we want. The further t is from the blue point, the more red we want. Percent blue = t Percent red = -t Value at t = tx + (-t)x 2 x 2 4
2D Interpolation Now what about triangles? 2D Interpolation Now what about triangles? Just consider the geometry: x x 2 p What s the interpolated value at the point p? x 3 5
2D Interpolation x Last time (in D) we used ratios of lengths. x 2 p t x 3 2D Interpolation Now what about triangles? Just consider the geometry: What about ratios of areas (2D)? p 6
2D Interpolation Now what about triangles? Just consider the geometry: p If we color the areas carefully, the red area (for example) covers more of the triangle as p approaches the red point. 2D Interpolation Just like before: percent red = area of red triangle total area percent green = area of green triangle total area percent blue = area of blue triangle total area p 7
2D Interpolation p Just like before: percent red Value at p: = area of red triangle total area percent green = area of green triangle total area percent blue = area of blue triangle total area (% red)(value at red) + (% green)(value at green) + (% blue)(value at blue) 2D Interpolation Σ λ = i i Why? Look at the picture! x Just like before: percent red = percent green = A A A 2 A = λ = λ 2 barycentric coordinates percent blue = A 3 A = λ 3 x 2 A 3 A p A 2 Value at p: (A x + A x + A x )/A 2 2 3 3 x 3 barycentric interpolation a.k.a. convex combination a.k.a. affine linear extension Now convert this to a bunch of ugly symbols if you want... just don t think about it that way! 8
Affine functions in 3D We say a function v is affine in variable x, y and z if it is of the form: v(x, y,z)= ax +by +cz +d Such a function can be uniquely determined by its values at the four vertices of a tetrahedron sitting in 3D. 37 Triangles in 3D Given a triangle in 3D, suppose we specify the value of a function at its three vertices. There may be many functions that are affine in (x, y,z) that agree with these three values. But all of these functions will agree when restricted to the plane of the triangle in 2D. As such, we can refer to this restricted function over the triangle as the linear interplant of the vertex values. 38 9
Interpolating colors of an object When we associate colors with vertices, it is natural to interpret our desired color field to be the unique interpolating function over the triangle that is affine in the object coordinates, (x o, y o,z o ), not in screen coordinates! During texture mapping, it is natural to interpret each of the texture coordinates, (x t, y t ), as the unique interpolating functions over the triangle that affine in (x o, y o,z o ). 39 Interpolating colors of an object As a rather self referential example, we can even think of each of the three object coordinates of a point on some triangle in 3D as affine functions in (x o, y o,z o ). For example, v(x o, y o,z o )= x o (when a = and b = c = d =0) For this reason, the default semantics of OpenGL is to interpolate all varying variables as functions over triangles that are affine in (x o, y o,z o ). 40 20
Interpolating colors of an object As we will see, this is equivalent to a function being affine over eye coordinates, (x e, y e,z e ), but it is not equivalent to a function being affine over normalized device coordinates, (x n, y n,z n ), or window coordinates. 4 Going down If we have a function v that is affine in (x, y,z) when restricted to a triangle in 3D, Then we can use the fact that the triangle is flat to write v as a function that is affine in only two variables. Idea: write z as an affine function of (x, y) plug this into the affine expression for v. z = ex + fy + g v = ax +by +c(ex + fy + g)+d v = hx +iy + j 42 2
Going sideways Suppose we have some matrix expression of the form: x' x y' y z' w' = M for some 4-by-4 matrix M (where M does not even have to be an affine matrix). Then, just looking at the four rows independently, we see that x', y',z', and w' are all affine functions of (x, y,z). z 43 More sideways If we have a function v which is affine in (x, y,z), then, given the relation of the previous equation, we can see that v is also affine (x', y',z',w'). To see this, note that: v = a b c d v = a b c d x y z x' M y' z' w' x' y' z' w' = M x y z 44 22
More sideways v = e f g h x' y' z' w' So the property of affine-ness is in agreement between object or eye or clip coordinates, and also between normalized and window coordinates. 45 Not sideways The only time we have to be careful is when division is done. For example, given the relation: x' y' z' w' = M x y z vs. x'w' y'w' z'w' w' It will generally not be the case that a function v, which was affine in (x, y,z) will be affine in (x', y',z') or (x', y',z',w'). Our varying variables are not affine in NDC or windows coordinates. = M x y z 46 23
How to evaluate the varying variables Recall x n y n z n = PM Inverting our matrices, this implies that at each point on the triangle, we have the relation: x o y o z o x o y o z o = M P x n y n z n 47 How to evaluate the varying variables Now suppose that v is an affine function of (x o, y o,z o ). We also make use of the obvious fact that the constant function is also affine in (x o, y o,z o ) Thus for some (a,b,c,d), we have x o v a b c d = y o 0 0 0 z o 48 24
How to evaluate the varying variables And therefore: v v = = a b c d 0 0 0 e f g h i j k l x n M y P n w n z n x n w n y n w n z n For some appropriate values e l x o y o z o = M P x n w n y n w n z n 49 How to evaluate the varying variables Now divide both sides by and we get v Conclusion: = v e f g h i j k l and normalized device coordinates. x n y n z n are affine functions of 50 25
How to evaluate the varying variables going sideways we deduce that are affine functions of window coordinates (x. w, y w,z w ) v going down we can conclude: and are both affine function of (x w, y w ). Meaning that we can calculate their values at each pixel, just given their values at the vertices and linear interpolation. The above derivation can now be thrown away. v and 5 VV in OpenGL Now we can see how OpenGL can perform the correct rational linear interpolation to calculate v at each pixel. The vertex shader is run on each vertex, calculating clip coordinates and varying variables for each vertex. Clipping is run on each triangle; this may create new vertices. Linear interpolation in clip coordinates space is run to determine the clip coordinates and varying variable values for each such new vertex. 52 26
VV in OpenGL For each vertex, and for each varying variable v, OpenGL creates an internal variable v. Additionally, for each vertex OpenGL creates one internal variable. w Min H. Kim (KAIST) Foundations of 3D Computer n Graphics, S. Gortler, MIT Press, 202 53 VV in OpenGL For each vertex, division is done to obtain the normalized device coordinates. x n = x c w c, y n = y c w c,z n = z c w c, 54 27
VV in OpenGL For each vertex, the normalized device coordinates are transformed to window coordinates. The [x w, y w ] t coordinates are used to position the triangle on the screen. 55 For every interior pixel of the triangle, linear interpolation is used to obtain the interpolated values of v z. w, (for all v) and z w At each pixel, the interpolated value is used for z-buffering. 56 28
VV in OpenGL At each pixel, and for all varying variables, division is done on the interpolated internal variables to obtain the correct answer: v = v w / n 57 VV in OpenGL The varying variables v is passed into the fragment shader. 58 29