Notes and homework on scan converting triangles

As I mentioned in class this week, in order to efficiently render fully shaded versions of our animated shapes, we are going to need to paint them as individual triangles into the image, while interpolating color and perspective z.

As I said in class, some of your polygons have four vertices. Fortunately you can always convert a four sided polygon to two triangles at the moment when you need to render it:

(a,b,c,d) → (a,b,c) and (a,c,d)

The most computationally efficient way to do shading is to only apply a shading algorithm (such as the Phong shading algorithm) at the vertices. This is call vertex shading.

The more flexible and powerful (although slower) way to do shading is to apply a shading algorithm at each pixel, interpolating the surface normals themselves. This is called pixel shading, and the interpolation itself is called Phong interpolation (not to be confused with Phong shading).

In practice, renderers tend to use a combination of vertex shaders and pixel shaders. For now we will just be doing vertex shading, because it is simple and it runs fast. Later, if there is time, we might try pixel shading and Phong interpolation, which can help with things like texturing.

When you do vertex shading, you first do the shading algorithm at each vertex of your polygon - so you already have colors at each vertex, and now you just need to interpolate them. This means that by the time you do scan conversion, the data you have at each vertex is:

  [ p_x , p_y , p_z , red , green , blue ]

You are going to use the p_x and p_y to figure out which pixel the vertex falls on in the image, first you do the perspective calculation. If you place the camera at the origin, as we did in our ray tracing assignments, then the perspective computation looks like this:

   px ← fx / z 
   py ← fy / z 
   pz ← 1 / z

On the other hand, if you place the camera at point (0,0,f) along the positive z axis, looking at the origin, as we did in the earlier part of the semester (so that you can center your geometry around the origin), then the perspective computation looks like this:

   px ← fx / (f - z)
   py ← fy / (f - z)
   pz ← 1 / (f - z)

Feel free to use either of the above two models. Remember: the first one places the camera at the origin, and the second works well if you model your geometry at the origin.

Note: the scale of pz doesn't matter, since pz will be used only to compare the front-to-back order of scan-converted triangles.

After computing the perspective transformation, you just do your standard viewport transformation on px,py to compute which pixel the vertex lands on.

As we discussed in class, you are going to be implementing the Z-buffer algorithm, in which you interpolate the three vertex [ red , green , blue , p_z] values over all the image pixels covered by the triangle in order to figure out which triangle is the frontmost one at each pixel of the image, and also to what color should be at that pixel.

Next week I am going to ask you to implement the complete Z-buffer algorithm. This week I just want you to work on the core part of the scan conversion: Interpolating vertex values across image pixels.

As we discussed in class, this scan-conversion step is the key place in your rendering pipeline where things are either going to be fast enough to do interactive graphics, or not. There are two things that are crucial for making this algorithm go fast:

As we discussed in class, you need to use iterative methods. That's just a fancy way of saying that wherever possible, use addition instead of multiplication.
Use integer arithmetic rather than floating point arithmetic. This is especially important in a language like Java, which implements integer math a lot faster than floating point math.

Also, as we discussed in class, the key to making triangle scan-conversion easy to implement and bug-free is to recast it as a simpler problem. In the two diagrams below you see the basic principle of converting a polygon into trapezoids, first by splitting that polygon into triangles (if it isn't already a triangle), and then by splitting each triangle into two trapezoids.

Once you have a trapezoid, then, as we said in class, the only thing you need to do is efficiently interpolate the [r,g,b,p_z] values from the four corners down to the pixel level.

To find the interpolated values at any given pixel (x,y), you first find the interpolated values at the left and right edges of each scan line, and then you interpolate those two values to get the value at the pixel. In other words:

          // COMPUTE TOP-TO-BOTTOM INTERPOLATION FRACTION FOR THIS SCAN LINE

                t_y = (y - TL_y) / (BL_y - TL_y)

          // LINEARLY INTERPOLATE TO GET VALUES AT LEFT AND RIGHT EDGES OF THIS SCAN LINE

                L = lerp(t_y, TL, BL)
                R = lerp(t_y, TR, BR)

          // COMPUTE LEFT-TO-RIGHT INTERPOLATION FRACTION OF THE PIXEL

                t_x = (x - L_x) / (R_x - L_x)

          // LINEARLY INTERPOLATE TO GET VALUE AT PIXEL

                [r,g,b,p_z]_x,y = lerp(t_x, L, R)

where L and R are vectors containing values for r,g,b and p_z.

Homework due Thursday April 26

For your homework, which is due next Thursday, you should at least demonstrate that you can split a triangle into two trapezoids, and then apply the above math to interpolate [r,g,b,p_z] values down to the pixel level. To do this, I suggest you write a Java applet that extends MISApplet (which is what you did for ray tracing), and show that your applet correctly interpolates given any choices of locations [x,y] and colors [r,g,b] at each of the three triangle vertices.

Once you get that much working, try implementing the two kinds of speed-ups, iterative methods and integer arithmetic.

In more detail, here's how you can implement those speed-ups:

Iterative methods. To do this, you first compute an amount to increment per scan line when marching down the left edge and the right edge, respectively:

    // COMPUTE TOTAL NUMBER OF SCAN LINES IN TRAPEZOID

    int n = BL_y - TL_y

    dL_dy = (BL - TL) / n
    dR_dy = (BR - TR) / n
   
    L = TL
    R = TR

    for (int y = TL_y ; y <= BL_y ; y++) {

       // INCREMENTALLY UPDATE VALUES ALONG LEFT AND RIGHT EDGES

       L += dL_dy
       R += dR_dy

 
       // COMPUTE TOTAL NUMBER OF PIXELS ACROSS THIS SCAN LINE

       int m = R_x - L_x

       d_dx = (R - L) / m


       [r,g,b,p_z] = L

       for (int x = L_x ; x < R_x ; x++) {

          // INCREMENTALLY UPDATE VALUE AT PIXEL

          [r,g,b,p_z] += d_dx
       }
    }

Integer arithmetic: To do this, you can scale all your values up by some power of two, say 2¹² = 4096, and do all operations using integers. Then scale everything back down again when you've finally interpolated down to the pixel level.

If you implement both of the above speed-ups, you'll see a very dramatic improvement in running time.