We just learned that we can use a varying to produce a blended color at each fragment of a line or triangle. We can blend more than just colors; we can send any value to a varying, and OpenGL will take the two values belonging to a line, or the three belonging to a triangle, and smoothly blend these values across the primitive, with a different value for each fragment. This blending is done using linear interpolation. To learn how this works, let’s first start with the example of a line.
Linear Interpolation Along a Line
Let’s say that we had a line with a red vertex and a green vertex, and we wanted to blend the colors from one to the other. The blended colors would look something like this:
At the left side of the line, the color of each fragment is mostly red. As we move toward the right, the fragments become less red, and in the middle, they are somewhere in between red and green. As we get closer to the green vertex, the fragments become more and more green.
We can see that each color scales linearly along the length of the line. Since the left vertex of the line is red and the right vertex is green, the left end of the line should be 100 percent red, the middle should be 50 percent red, and the right should be 0 percent red:
Chapter 4. Adding Color and Shade
•
66The same thing happens with green. Since the left vertex is red and the right vertex is green, the left end of the line will be 0 percent green, the middle will be 50 percent green, and the right will be 100 percent green:
Once we add the two together, we end up with a blended line:
This is linear interpolation in a nutshell. The strength of each color depends on the distance of each fragment from the vertex containing that color.
To calculate this, we can take the value at vertex 0 and the value at vertex 1, and then we calculate the distance ratio for the current fragment. The distance ratio is simply a ratio between 0 and 100 percent, with 0 percent being the left vertex and 100 percent being the right vertex. As we move from left to right, the distance ratio will increase linearly from 0 to 100 percent. Here’s an example of a few distance ratios:
Adding a New Color Attribute
•
67To calculate the actual blended value using linear interpolation, we can then use the following formula:
blended_value = (vertex_0_value * (100% – distance_ratio)) + (vertex_1_value * distance_ratio) This calculation is done for each component, so if we’re dealing with color values, this calculation will be done for the red, green, blue, and alpha com-ponents separately, with the results combined into a new color value.
Let’s try this out with our line example. Let the vertex_0_value equal red, with an RGB value of (1, 0, 0), and the vertex_1_value equal green, with an RGB value of (0, 1, 0). Let’s calculate the final color for a few positions on the line:
Equation Distance
ratio Position
(vertex_0_value * (1 - distance_ratio)) + (vertex_1_value * distance_ratio) =
(vertex_0_value * (1 – distance_ratio)) + (vertex_1_value * distance_ratio) =
(vertex_0_value * (1 – distance_ratio)) + (vertex_1_value * distance_ratio) =
(vertex_0_value * (1 – distance_ratio)) + (vertex_1_value * distance_ratio) =
Equation Distance
ratio Position
((1, 0, 0) * 25%) + ((0, 1, 0) * 75%) = (0.25, 0, 0) + (0, 0.75, 0) =
(0.25, 0.75, 0) (mostly green)
(vertex_0_value * (1 – distance_ratio)) + (vertex_1_value * distance_ratio) =
100%
Far right
((1, 0, 0) * (100% – 100%)) + ((0, 1, 0) * 100%) = ((1, 0, 0) * 0%) + ((0, 1, 0) * 100%) =
(0, 1, 0) (green) Table 2—Linear interpolation equation examples
Notice that at all times the weights of both colors add up to 100 percent. If red is at 100 percent, green is at 0 percent. If red is 50 percent, green is 50 percent.
Using a varying, we can blend any two colors together. We’re also not limited to colors: we can interpolate other attributes as well.
Now that we know how linear interpolation works with a line, let’s read on to see how this works with a triangle.
Blending Across the Surface of a Triangle
Figuring out how linear interpolation works wasn’t so bad when we were dealing with just two points; we learned that each color scales from 100 per-cent to 0 perper-cent from that color’s vertex to the other vertex on the line, and that both scaled colors are added together to give the final color.
Linear interpolation across a triangle works with the same idea, but there are now three points and three colors to deal with. Let’s look at a visual example:
Adding a New Color Attribute
•
69This triangle has three colors associated with it: the top vertex is cyan, the left vertex is magenta, and the right is yellow. Let’s break the triangle down into the colors derived from each vertex:
Just like with the line, each color is strongest near its vertex and fades away toward the other vertices. We also use ratios to determine the relative weights of each color, except this time we use ratios of areas instead of lengths:
At any given point inside the triangle, three inner triangles can be created by drawing a line from that point to each vertex. The ratios of the areas of these inner triangles determine the weight of each color at that point. For example, the strength of yellow at that point is determined by the area of the inner Chapter 4. Adding Color and Shade
•
70triangle that is opposite of the yellow vertex. The closer the point gets to the yellow vertex, the larger that triangle gets, and the more yellow the fragment at that point will be.
Just like with the line, these weights always equal 100 percent. We can use the following formula to calculate the color at any point inside the triangle:
blended_value = (vertex_0_value * vertex_0_weight) + (vertex_1_value * vertex_1_weight) + (ver-tex_2_value * (100% – vertex_0_weight – vertex_1_weight))
Given that we understand how this works with a line, we don’t need to go into specific examples here. The idea is the same, but we have three points instead of two.
4.4 Rendering with the New Color Attribute
Now that we’ve added a color attribute to our data and we’ve updated the vertex and fragment shaders to use this attribute, the next steps are to remove the old code that passed in the color via a uniform and to tell OpenGL to read in colors as a vertex attribute.