1. Shading Polygons
Lecture 36
Wed, Nov 28, 2007

2. Shading Polygons
When a polygon is defined, each vertex is given a shade.
glColor() gives it a shade, or
The lighting model gives it a shade.
To shade the interior of the polygon, the polygon is first divided into triangles.
Then each triangle is shaded through interpolation of the vertex shades.

3. Shading Polygons
Consider the following polygon.

4. Shading Polygons
It may be triangulated as follows.

5. Shading Polygons
Thus, we need only consider shading triangles.

6. Interesting Question
Can you think of a way to assign a shade to each interior point of a rectangle, using all four vertices? ?

7. Shading Polygons Consider the following triangle ABC. C(5, 10) A(0, 0)

8. Barycentric Coordinates
Every point in the plane may be expressed uniquely in barycentric coordinates based on the vertices of a triangle ABC.
Let A = (a1, a2), B = (b1, b2), C = (c1, c2).
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.

9. Barycentric Coordinates
We get the system of equations
pax + qbx + rcx = x
pay + qby + rcy = y
p + q + r = 1.
There is guaranteed to be a unique solution provided A, B, and C are not collinear.

10. Example Let A = (0, 0), B = (15, 0), C = (5, 10), as in the diagram.
Let P = (6, 6).
Solve
15q + 5r = 6
10r = 6
p + q + r = 1.
The solution is p = 1/5, q = 1/5, r = 3/5.

11. Geometric Interpretation
Let A serve as the origin and form the vectors u = B – A and v = C – A.
C(5, 10)
(5, 10) = v
A(0, 0)
B(15, 0)
u = (15, 0)

12. Geometric Interpretation
Then any point within the triangle (or anywhere in the plane) may be expressed as a unique linear combination of u and v.

13. Geometric Interpretation
We have AP = (1/5)u + (3/5)v.
C(5, 10) P AP
(3/5)v
A(0, 0)
B(15, 0)
(1/5)u

14. Geometric Interpretation
These coefficients add up to 4/5, leaving 1 – 4/5 = 1/5 left over as the coefficient of A.
That is P = (1/5)A + (1/5)B + (3/5)C.
These are the barycentric coordinates again.

15. Shading the Triangle Let the vertices be red, yellow, and blue.
C, shade = (1, 1, 0) A
shade = (1, 0, 0) B
shade = (0, 0, 1)

16. 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).

17. 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.

18. 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, 1/15).
This represents a change of
(-1/15, 0, 1/15).
Apply that change to the shades of the vertices and we get a change in shade of

19. The Change in Shade
Similarly, if we move one unit up from A, the barycentric coordinates are
(14/15, 1/10, -1/30).
This represents a change of
(-1/15, 1/10, -1/30).
Apply that change to the shades of the vertices and we get a change in shade of
(1/30, 1/10, -1/30).

20. The Change in Shade Expressed in 255ths, the changes are
To the right: (-17, 0, 17)
Upward: (8½, 25½, -8½)
Next, we find the shade of the lower-left pixel (½ above and ½ to the right of A).
Then we apply the above changes as we move left and up to the other pixels.

21. Shading the Bottom Row The lower-left pixel has coordinates (½, ½).
Therefore, the change in shade from A, expressed in 255ths, is
(½)(-17, 0, 17) + (½)(8½, 25½, -8½)
= (-4¼, 12¾, 4¼).
Thus, the shade is (250¾, 12¾, 4¼), or
(251, 13, 4).

22. Shading the Bottom Row Interpolate the shade of the leftmost pixel. C
(250¾, 12¾, 4¼) A B

23. 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).

24. Shading the Bottom Row Interpolate the shade of the leftmost pixel. C
(250¾, 12¾, 4¼) A B
(233¾, 12¾, 21¼)
(216¾, 12¾, 38¼), etc.

25. Shading the Rest of the Triangle
Using the vertical change, the shade of the first pixel on the second row, in 255ths, is
(233¾, 12¾, 21¼) + (8½, 25½, -8½)
= (242¼, 38¼, 12¾).
So its shade is (242, 38, 13).
Fill in the remainder of the second row as we did in the first row.

26. Shading the Rest of the Triangle
Interpolate the shade of the leftmost pixel. C
(242¼, 38¼, 12¾) A B
(233¾, 12¾, 21¼)
(225¼, 38¼, 46¾)

27. Shading the Rest of the Triangle
Continue in the same manner throughout the remaining rows.

28. Shading the Rest of the Triangle
Interpolate the shade of the leftmost pixel. C
(250¾, 63¾, 21¼) A B

29. Shading the Rest of the Triangle
Interpolate the shade of the leftmost pixel. C
(242¼, 89¼, 12¾) A B

30. Shading the Rest of the Triangle
Interpolate the shade of the leftmost pixel. C
(250¾, 114¾, 21¼) A B

31. Shading the Rest of the Triangle
Interpolate the shade of the leftmost pixel. C
(242¼, 140¼, 12¾) A B

32. Shading the Rest of the Triangle
Interpolate the shade of the leftmost pixel. C
(250¾, 165¾, 21¼) A B

33. Shading the Rest of the Triangle
Interpolate the shade of the leftmost pixel. C
(242¼, 191¼, 12¾) A B

34. Shading the Rest of the Triangle
Interpolate the shade of the leftmost pixel. C
(250¾, 216¾, 21¼) A B

35. Shading the Rest of the Triangle
Interpolate the shade of the leftmost pixel. C A B

36. The Shaded Triangle
Just the triangle.

37. Compare to OpenGL
Here is a screen shot of the same triangle, shaded by OpenGL.

38. Compare to the Demo
Here is a screen shot of the same triangle, shaded by the demo program.

39. Shading Polygons
Read
Run