Android OpenGL ES (ii) ---- smooth coloring, androidopengl

Android OpenGL ES (ii) ---- smooth coloring, androidopengl

The color after mixing each clip in a straight line or triangle can be generated using a varying. We can not only mix colors, but also pass any value to varying. OpenGL selects two values belonging to the straight line or three values belonging to the triangle, and smoothly mix these values on that basic element, each segment will have a different value. This mixture is implemented using linear interpolation. To understand how it works, let's take a straight line as an example.

1. Linear interpolation along a straight line

Suppose there is a straight line with a red vertex and a green vertex. We need to mix the color from one to another.

On the left side of the line, the color of each segment is more red. As you move toward the right side, the red components of those segments gradually decrease. In the middle, they are between red and green; as it approaches green vertices, fragments become increasingly green.

We can see that each color component scales linearly with the line length. Because the left vertex of a line segment is red and the right vertex is green, the left vertex is 100% red, the middle vertex is 50% red, and the right vertex is 0% red.

The same is true for green. Because the left vertex is red and the right vertex is green, the left vertex of the line segment is 0% green, the middle vertex is 50% green, and the right vertex is 100% green.

Once we combine these two colors, we finally get a straight line after mixing.

This is the basic explanation of linear interpolation. The intensity of each color depends on the distance between each clip and the vertex containing that color.

To calculate these values, we can use vertex 0 and vertex 1 to calculate the distance ratio of the current segment. The distance ratio is only the percentage between 0 and 100. 0% is the left vertex, and 100% is the right vertex. When we move from left to right, the distance ratio increases linearly from 0% to 100%. Here are several examples of distance ratio:

To use linear interpolation to calculate the actually mixed value, we can use the following formula:

Blended_value = (vertex_0_value * (100%-distance_radio) + (vertex_1_value * distance_radio)

This formula is applied to each component. Therefore, if we process the color value, this calculation will be applied to the red, green, blue, and Alpha components respectively, the calculated result is merged into a new color value.

Let's use the example of this straight line to verify this formula. Set vertex_0_value to red, its RGB value to (, 0), vertex_1_value to green, and its RGB value to (, 0 ). Calculate the color of several positions on the line segment.

Table 4-1 linear interpolation formula

Location	Distance Ratio	Formula
Leftmost end	0%	(Vertex_0_value * (1-distance_radio) + (vertex_1_value * distance_radio) = (100%, 0) * (0%-0%) + (, 0) *) = (, 0, 0) * 100%) = (1, 0, 0) (red)
1/4 straight lines	25%	(Vertex_0_value * (1-distance_radio) + (vertex_1_value * distance_radio) = (100%, 0) * (25%-25%) + (, 0) *) = (, 0, 0) * 75%) + (25%, 0) * 0.75) = (0.25, 0.75) + (0, 0.25, 0) = (, 0) (red)
Intermediate	50%	(Vertex_0_value * (1-distance_radio) + (vertex_1_value * distance_radio) = (100%, 0) * (50%-50%) + (, 0) *) = (, 0, 0) * 50%) + (50%, 0) * 0.5) = (0.5, 0.5) + (0, 0.5, 0) = (, 0) (Half red and half green)
3/4 straight lines	75%	(Vertex_0_value * (1-distance_radio) + (vertex_1_value * distance_radio) = (100%, 0) * (75%-75%) + (, 0) *) = (, 0, 0) * 25%) + (75%, 0) * 0.25) = (0.75, 0.25) + (0, 0.75, 0) = (, 0) (large green)
Rightmost	100%	(Vertex_0_value * (1-distance_radio) + (vertex_1_value * distance_radio) = (100%, 0) * (100%-100%) + (, 0) *) = (, 0, 0) * 0%) + (100%, 0) *) = (, 0) (green)

 

Note that the weights of the two colors add up to 100% at any time. If Red is 100%, green is 0%; If Red is 50%, green is 50%.

With a varying, we can mix any two colors. Of course, this is not limited to colors; any other attribute can also be applied with interpolation technology.

 

2. Mixing on a triangle surface

When we only process two points, it is not difficult to clarify how linear interpolation works. We know that from one vertex of a color to another vertex, the ratio is reduced from 100% to 0%, and all the scaled colors are combined to get the final color.

Linear interpolation on a triangle works the same way, but now three points and three colors need to be processed. Let's look at an intuitive example:

 

This triangle is associated with three colors: The top vertex is blue, the left vertex is red, and the right vertex is yellow. Let's break down the triangle by the color derived from each vertex:

Like the straight line, each color is the strongest at its vertices, and moving to other vertices will become darker. We also use the ratio to determine the relative weight of each color, but this time the proportion of the area to be used, rather than the length.

 

For any given point in the triangle, draw a straight line from that point to the point corresponding to each vertex to generate three internal triangles. The area ratio of the three internal triangles determines the weight of each color on that point. For example, the intensity of the yellow vertex depends on the area of the internal triangle relative to the yellow vertex. The larger the relative triangle of the Golden vertex, the more yellow the segment at that vertex.

Like a straight line, these weights are always 100%. You can use the following company to calculate the color components of any point in the triangle:

Blended_value = (vertex_0_value * vertex_0_weight) + (vertex_1_value * vertex_1_weight) + (vertex_2_value * (100%-vertex_0_weight-vertex_1_weight ))

We have understood how it works in a straight line. In this case, we do not need to give specific examples. The principle is the same, but this time we have to deal with three points instead of two.

If you do not understand vector algorithms, You can first look at linear algebra. Of course, the two formulas are relatively simple. It may not be obvious to start to explain the two courses involved in learning OpenGL ES in depth. More and more courses will be applied in the future. Of course, computing is more about linear algebra, and the concept of space later will involve knowledge in the graph theory of discrete mathematics.

The next article explains the basic programming of OpenGL.