Shading Triangles. Lecture 37. Robb T. Koether. Hampden-Sydney College. Mon, Nov 30, PDF Free Download

Shading Triangles Lecture 37 Robb T. Koether Hampden-Sydney College Mon, Nov 30, 2015 Robb T. Koether (Hampden-Sydney College) Shading Triangles Mon, Nov 30, 2015 1 / 35

Outline 1 Shading Triangles Barycentric Coordinates Vector Interpretation 2 An Example Fast Interpolation 3 Comparison with OpenGL 4 Assignment Robb T. Koether (Hampden-Sydney College) Shading Triangles Mon, Nov 30, 2015 2 / 35

Shading Triangles When a triangle is defined, each vertex is given a shade. Either Robb T. Koether (Hampden-Sydney College) Shading Triangles Mon, Nov 30, 2015 4 / 35

Shading Triangles When a triangle is defined, each vertex is given a shade. Either The RGB values are stored per vertex in the VAO, or Robb T. Koether (Hampden-Sydney College) Shading Triangles Mon, Nov 30, 2015 4 / 35

Shading Triangles When a triangle is defined, each vertex is given a shade. Either The RGB values are stored per vertex in the VAO, or The function glvertexattrib*() assigns a color to all three vertices, or The vertex shader calculates the shade. Robb T. Koether (Hampden-Sydney College) Shading Triangles Mon, Nov 30, 2015 4 / 35

Shading Triangles When a triangle is defined, each vertex is given a shade. Either The RGB values are stored per vertex in the VAO, or The function glvertexattrib*() assigns a color to all three vertices, or The vertex shader calculates the shade. In any case, primitive assembly occurs between the vertex shader and the fragment shader. At the time of primitive assembly, the three vertices have been assigned shades. Robb T. Koether (Hampden-Sydney College) Shading Triangles Mon, Nov 30, 2015 4 / 35

Shading Triangles When a triangle is defined, each vertex is given a shade. Either The RGB values are stored per vertex in the VAO, or The function glvertexattrib*() assigns a color to all three vertices, or The vertex shader calculates the shade. In any case, primitive assembly occurs between the vertex shader and the fragment shader. At the time of primitive assembly, the three vertices have been assigned shades. As a consequence, the shades of the three vertices are interpolated across the interior of the triangle. Robb T. Koether (Hampden-Sydney College) Shading Triangles Mon, Nov 30, 2015 4 / 35

Barycentric Coordinates Every point in the plane may be expressed uniquely in barycentric coordinates based on the vertices of a triangle ABC. Let A = (a 1, a 2 ), B = (b 1, b 2 ), C = (c 1, c 2 ). Let P = (x, y) be a point in the plane. The barycentric coordinates (p, q, r) of P are determined by the equations pa + qb + rc = P p + q + r = 1. Robb T. Koether (Hampden-Sydney College) Shading Triangles Mon, Nov 30, 2015 6 / 35

Barycentric Coordinates For an arbitrary triangle ABC, to solve for p, q, and r, we use the system of equations pa 1 + qb 1 + rc 1 = x pa 2 + qb 2 + rc 2 = y p + q + r = 1. The solution is guaranteed to be unique, provided that A, B, and C are not collinear. Robb T. Koether (Hampden-Sydney College) Shading Triangles Mon, Nov 30, 2015 7 / 35

Shading Triangles Consider the following triangle ABC. C(5, 10) A(0, 0) B(15, 0) Robb T. Koether (Hampden-Sydney College) Shading Triangles Mon, Nov 30, 2015 8 / 35

Barycentric Coordinates Example Let A = (0, 0), B = (15, 0), C = (5, 10), as in the diagram, and let P = (6, 6). Then 15q + 5r = 6 10r = 6 p + q + r = 1. The solution is p = 1 5, q = 1 5, r = 3 5. Robb T. Koether (Hampden-Sydney College) Shading Triangles Mon, Nov 30, 2015 9 / 35

Barycentric Coordinates C(0, 0, 1) P(1/5, 1/5, 3/5) A(1, 0, 0) B(0, 1, 0) Robb T. Koether (Hampden-Sydney College) Shading Triangles Mon, Nov 30, 2015 10 / 35

Vector Interpretation Let A serve as the origin and form the vectors u = B A and v = C A. C(5, 10) v = (5, 10) A(0, 0) u = (15, 0) B(15, 0) Robb T. Koether (Hampden-Sydney College) Shading Triangles Mon, Nov 30, 2015 12 / 35

Vector Interpretation Then any point within the triangle (or anywhere in the plane) may be expressed as a unique linear combination of u and v. C(5, 10) v = (5, 10) P(6, 6) A(0, 0) u = (15, 0) B(15, 0) Robb T. Koether (Hampden-Sydney College) Shading Triangles Mon, Nov 30, 2015 12 / 35

Vector Interpretation We have P A = 1 5 u + 3 5 v. Robb T. Koether (Hampden-Sydney College) Shading Triangles Mon, Nov 30, 2015 13 / 35

Vector Interpretation These coefficients add up to 4 5, leaving 1 4 5 = 1 5 coefficient of A. That is, P = 1 5 A + 1 5 B + 3 5 C. These are the barycentric coordinates again. left over as the Robb T. Koether (Hampden-Sydney College) Shading Triangles Mon, Nov 30, 2015 14 / 35

Shading the Triangle Let the vertices be red, yellow, and blue. C(1, 1, 0) A(1, 0, 0) B(0, 0, 1) Robb T. Koether (Hampden-Sydney College) Shading Triangles Mon, Nov 30, 2015 16 / 35

Shading the Triangle Every pixel is shaded in proportion to its barycentric coordinates. That is, if P = pa + qb + rc, then the shade of P is the same linear combination of the shades of A, B, and C. For example, the point (6, 6) would be shaded 1 5 (1, 0, 0) + 1 5 (0, 0, 1) + 3 5 (1, 1, 0) = ( 4 5, 3 5, 1 ) 5 = (0.8, 0.6, 0.2). Robb T. Koether (Hampden-Sydney College) Shading Triangles Mon, Nov 30, 2015 17 / 35

The Change in Shade It will be simpler to start at a vertex and apply changes in shade since the horizontal change in shade is constant and the vertical change in shade is constant. Robb T. Koether (Hampden-Sydney College) Shading Triangles Mon, Nov 30, 2015 19 / 35

The Change in Shade The barycentric coordinates of A are (1, 0, 0). If we move one unit to the right from A, the barycentric coordinates are ( 14 15, 0, 15) 1. This represents a change in barycentric coordinates of ( 1 15, 0, 15) 1. Robb T. Koether (Hampden-Sydney College) Shading Triangles Mon, Nov 30, 2015 20 / 35

The Change in Shade Apply that change to the shades of the vertices and we get a change in shade of 1 15 (1, 0, 0) + 0 (1, 1, 0) + 1 15 (0, 0, 1) = ( 1 15, 0, 1 15). Robb T. Koether (Hampden-Sydney College) Shading Triangles Mon, Nov 30, 2015 21 / 35

The Change in Shade Similarly, if we move one unit up from A, the barycentric coordinates are ( 14 15, 1 10, 30) 1. This represents a change in barycentric coordinates of ( 1 15, 1 10, 30) 1. Robb T. Koether (Hampden-Sydney College) Shading Triangles Mon, Nov 30, 2015 22 / 35

The Change in Shade Apply that change to the shades of the vertices and we get a change in shade of 1 15 (1, 0, 0) + 1 1 10 (1, 1, 0) 30 (0, 0, 1) = ( 1 30, 1 10, 30) 1. Robb T. Koether (Hampden-Sydney College) Shading Triangles Mon, Nov 30, 2015 23 / 35

The Change in Shade Expressed in 255ths, the changes are To the right: ( 17, 0, 17) Upward: ( 8 1 2, 25 1 2, 8 ) 1 2 Next, we find the shade of the lower-left pixel ( 1 2 above and 1 2 to the right of A). Then we apply the above changes as we move left and up to the other pixels. Robb T. Koether (Hampden-Sydney College) Shading Triangles Mon, Nov 30, 2015 24 / 35

Shading the Bottom Row The lower-left pixel has coordinates ( 1 2, 2) 1. Therefore, the change in shade from A, expressed in 255ths, is 1 2 ( 17, 0, 17) + 1 ( 2 8 1 2, 25 1 2, 8 1 ) ( 2 = 4 1 4, 12 3 4, 4 4) 1. Thus, the shade is ( 250 3 4, 12 3 4, 4 1 4), or (251, 13, 4). Robb T. Koether (Hampden-Sydney College) Shading Triangles Mon, Nov 30, 2015 25 / 35

Shading the Bottom Row Interpolate the shade of the leftmost pixel. C(1, 1, 0) (250¾, 12¾, 4¼) A(1, 0, 0) B(0, 0, 1) Robb T. Koether (Hampden-Sydney College) Shading Triangles Mon, Nov 30, 2015 26 / 35

Shading the Bottom Row Now we can easily compute the shades of the rest of the pixels in the bottom row by applying the change ( 17, 0, 17). Robb T. Koether (Hampden-Sydney College) Shading Triangles Mon, Nov 30, 2015 27 / 35

Shading the Bottom Row Interpolate the shade of the leftmost pixel. C(1, 1, 0) (250¾, 12¾, 4¼) A(1, 0, 0) B(0, 0, 1) (233¾, 12¾, 21¼) (216¾, 12¾, 38¼) Robb T. Koether (Hampden-Sydney College) Shading Triangles Mon, Nov 30, 2015 28 / 35

Shading the Rest of the Triangle Using the vertical change, the shade of the first pixel on the second row, in 255ths, is ( 233 3 4, 12 3 4, 21 1 ) ( 4 + 8 1 2, 25 1 2, 8 1 ) ( 2 = 242 1 4, 38 1 4, 12 3 4). So its shade is (242, 38, 13). Fill in the remainder of the second row as we did in the first row, using ( 17, 0, 17). Robb T. Koether (Hampden-Sydney College) Shading Triangles Mon, Nov 30, 2015 29 / 35

Shading the Rest of the Triangle C(1, 1, 0) (242¼, 38¼, 12¾) A(1, 0, 0) B(0, 0, 1) (233¾, 12¾, 21¼) (225¼, 38¼, 46¾) Interpolate the shade of the leftmost pixel Robb T. Koether (Hampden-Sydney College) Shading Triangles Mon, Nov 30, 2015 30 / 35

Shading the Rest of the Triangle C(1, 1, 0) (250¾, 63¾, 21¼) A(1, 0, 0) B(0, 0, 1) Continue in the same manner throughout the remaining rows Robb T. Koether (Hampden-Sydney College) Shading Triangles Mon, Nov 30, 2015 30 / 35

Shading the Rest of the Triangle C(1, 1, 0) (242¼, 89¼, 12¾) A(1, 0, 0) B(0, 0, 1) Interpolate and shade the row Robb T. Koether (Hampden-Sydney College) Shading Triangles Mon, Nov 30, 2015 30 / 35

Shading the Rest of the Triangle C(1, 1, 0) (250¾, 114¾, 21¼) A(1, 0, 0) B(0, 0, 1) Interpolate and shade the row Robb T. Koether (Hampden-Sydney College) Shading Triangles Mon, Nov 30, 2015 30 / 35

Shading the Rest of the Triangle C(1, 1, 0) (242¼, 140¼, 12¾) A(1, 0, 0) B(0, 0, 1) Interpolate and shade the row Robb T. Koether (Hampden-Sydney College) Shading Triangles Mon, Nov 30, 2015 30 / 35

Shading the Rest of the Triangle (250¾, 165¾, 21¼) C(1, 1, 0) A(1, 0, 0) B(0, 0, 1) Interpolate and shade the row Robb T. Koether (Hampden-Sydney College) Shading Triangles Mon, Nov 30, 2015 30 / 35

Shading the Rest of the Triangle C(1, 1, 0) (242¼, 191¼, 12¾) A(1, 0, 0) B(0, 0, 1) Interpolate and shade the row Robb T. Koether (Hampden-Sydney College) Shading Triangles Mon, Nov 30, 2015 30 / 35

Shading the Rest of the Triangle (250¾, 216¾, 21¼) C(1, 1, 0) A(1, 0, 0) B(0, 0, 1) Interpolate and shade the row Robb T. Koether (Hampden-Sydney College) Shading Triangles Mon, Nov 30, 2015 30 / 35

Shading the Rest of the Triangle C(1, 1, 0) A(1, 0, 0) B(0, 0, 1) Interpolate and shade the row Robb T. Koether (Hampden-Sydney College) Shading Triangles Mon, Nov 30, 2015 30 / 35

Shading the Rest of the Triangle Just the triangle Robb T. Koether (Hampden-Sydney College) Shading Triangles Mon, Nov 30, 2015 30 / 35

Compare to OpenGL Here is a screen shot of the same triangle, shaded by OpenGL. Robb T. Koether (Hampden-Sydney College) Shading Triangles Mon, Nov 30, 2015 32 / 35

Compare to the Demo Here is a screen shot of the same triangle, shaded by the my demo program. Robb T. Koether (Hampden-Sydney College) Shading Triangles Mon, Nov 30, 2015 33 / 35

Assignment Assignment Add animation to the Canal Boat program. Animate the paddles (upper and lower) to open and close. Animate the gates (upper and lower) to open and close. Animate the boat to move upstream and downstream. The water level in the lock should rise and fall as a logical consequence of the status of the gates and paddles. Disallow any combination that would allow the water to flow straight through the lock. Include in the text window instructions telling which F-keys control the animation. This work is due by Monday, December 7. Robb T. Koether (Hampden-Sydney College) Shading Triangles Mon, Nov 30, 2015 35 / 35

Shading Triangles. Lecture 37. Robb T. Koether. Hampden-Sydney College. Mon, Nov 30, 2015