WebGL Lesson 25: Texturing basics | More challenges in August

This is the 11th day of my participation in the August Wenwen Challenge.More challenges in August

Title: WebGL Lesson 25: The Basics of Texturing | More challenges in AugustCopy the code

Helpful hints

This article is the 25th in the WebGL Curriculum column, and it is highly recommended to start with the previous one. Because we spent a lot of time talking about vectors and matrix operations. These basics will influence your thinking.

primers

We know that an image, even if it’s small, has hundreds or thousands of pixels.

But the number of vertices that we pass into WebGL is usually not that high.

So, for example, if you draw a square the way we did last time, you only get 12 points. (If you think it’s four points, you can go back to the last lesson and have a look at it before you taste the content of this lesson.)

So what if we need to fill a picture with this square?

We can’t just prepare a vertex for a pixel and not blow it up.

So, again, let’s review how WebGL draws triangles:

• 1. Position the three points of the triangle
• 2. Draw the three points according to the color passed in, or according to the color in the shader
• 3. The interpolation(That’s the point.)

Interpolation in depth

Two interpolation

What is two-point interpolation? That is to say, there are two points: A (xA, yA) A (x_A y_A) (xA, yA) and B (xB, yB) B (x_B y_B) B (xB, yB).

The color of point A in RGB is (1,1,1), which is pure white.

The color of point B in RGB is 0,0,0, which is pure black.

So the question is, if you connect AB, what is the color of any point on the AB segment?Copy the code

We use our simple senses to conclude:

He that is close to A is white and close to B is blackCopy the code

I’m not going to list the exact formula, but I’ll do it when I need it.

Three interpolation

This is going to take a little bit of time. Suppose there are three points: ABC, and the colors are red, green and blue.

It looks like this:

All right, so any point inside the triangle that is composed of these three points, let’s say, let’s take a point D, and what color would this point D be if we interpolated it?

Here’s an interesting conclusion:

If the coordinates of the three points ABC are

$\left(\begin{array}{cc} x_A\\ y_A\end{array}\right) \left(\begin{array}{cc} x_B\\ y_B\end{array}\right) \left(\begin{array}{cc} x_C\\ y_C\end{array}\right)$

If the coordinates of D

(xDyD) = a ∗ ∗ (xAyA) + b (xByB) + c ∗ (xCyC) \ left (\ begin {array} {cc} x_D \ \ y_D {array} \ \ end right) = a * \ left (\ begin {array} {cc} x_A \ \ y_A\end{array}\right) + b * \left(\begin{array}{cc} x_B\\ y_B\end{array}\right)+ c * \left(\begin{array}{cc} x_C\\ Y_C {array} \ \ end right) (xDyD) = a ∗ ∗ (xAyA) + b (xByB) + c ∗ (xCyC) (1)

So the color of D

D yan = a + b + b ∗ ∗ a yan yan yan D_ yan c ∗ c = a * A_ yan + b + c * * B_ yan C_ yan yan = D ∗ a yan a + b + c ∗ ∗ b yan yan c (2)

In other words: we find three numbers A, B, and c. If these three numbers combine the coordinates of ABC into the coordinates of D, then the color of D, these three numbers combine the colors of ABC.

Formula 1, namely, the coordinate of point D, can be expressed by matrix:

$\left(\begin{array}{cc} x_D\\ y_D\end{array}\right) = \left(\begin{array}{ccc} x_A&x_B&x_C\\ y_A&y_B&y_C\end{array}\right) * \left(\begin{array}{cc} a\\ b \\c \end{array}\right)$

Formula 2, which is the color of point D, can be expressed by matrix:

$\left(\begin{array}{cc} R_D\\ G_D\\ B_D\end{array}\right) = \left(\begin{array}{ccc} R_A&R_B&R_C\\ G_A&G_B&G_C\\ B_A&B_B&B_C\end{array}\right) * \left(\begin{array}{cc} a\\ b \\c \end{array}\right)$

Formally speaking, everything owned by the three points ABC can be combined with the three numbers ABC, no matter whether you are coordinates, colors or other things.

• 1. To give you an example,The temperature:

The temperature of ABC is 1℃, 30℃ and 50 ℃ respectively. Given the coordinates of point D:

$\left(\begin{array}{cc} x_D\\ y_D\end{array}\right) = \left(\begin{array}{ccc} x_A&x_B&x_C\\ y_A&y_B&y_C\end{array}\right) * \left(\begin{array}{cc} a\\ b \\c \end{array}\right)$

Q: What is the temperature of point D if interpolation is used?

A: We combine the three numbers ABC.

$\left(\begin{array}{cc} temperature _D\end{array}\right) = \left(\begin{array}{CCC} temperature _A& Temperature _B& Temperature _C\end{array}\right) * \left(\begin{array}{cc} a\\ b \\c \end{array}\right) = a * 1 + b * 30 + c * 50$

Sampling information: UV

You know, the purpose of this lecture is not simply to synthesize a color.

Instead, fill the middle with an image.

There is an added step in this, which is how the points we pass into WebGL correspond to the image itself.

We know that an image is a rectangular region of width by height.

Let’s take this rectangle

• The bottom left corner is the origin (0,0)

• The upper right hand corner is (1,1)

So anywhere in the middle, there’s a coordinate, and let’s write this coordinate as (u, v).

For example,

• (u, v) = (0.5, 0.5)
• The top left corner of u, v is equal to 0, 1.
• In the lower right corner, (u, v) = (1, 0).

In other words, any (u,v) can find a position on an image, and this position must have the RGB color information of the image itself.

This is how we specify the image information of a coordinate point, the information is UV information.

For example, if (u,v) at point A = (0,0), then sampling at point A is done at the lower left corner of the picture.

For example, if (u,v) at point B = (0,1), then sampling at point B is done at the upper left corner of the image.

For example, if (u,v) at point C = (1,1), then sampling at point C is done at the upper right corner of the image.

So if I have a point D, the coordinates of point D:

$\left(\begin{array}{cc} x_D\\ y_D\end{array}\right) = \left(\begin{array}{ccc} x_A&x_B&x_C\\ y_A&y_B&y_C\end{array}\right) * \left(\begin{array}{cc} a\\ b \\c \end{array}\right)$

So what’s u,v at D? According to the above section, the three interpolation algorithms are as follows:

$\left(\begin{array}{cc} U_D\\ V_D\end{array}\right) = \left(\begin{array}{ccc} U_A&U_B&U_C\\ V_A&V_B&V_C\end{array}\right) * \left(\begin{array}{cc} a\\ b \\c \end{array}\right)$

Well, now that we have the delta of u,v at D, we can find a corresponding point on the picture and sample it.

conclusion

WebGL draw a triangle, if we provide the pictures and the UV coordinates information, then the other points in a triangular UV information, is the ability to interpolation, the UV after information, can and samples on the image, and then, inside the triangle can be pictures on the color of the sample to fill.

With the end of the text, here is the q&ACopy the code

Small ability can say: ok, relatively easy to understand, next class is not to engage in practice, that is, to engage in a code?

• A: Yes, this lecture is about the principle, and the next one will be about the code.