JavaScript WebGL uses image confusion points

Introduction

JavaScript WebGL After using the image some questions arise.

• Origin
• My GitHub

Why can you get the image content by taking a few points of texture coordinates?

The origin of the coordinate system of an image in WebGL is in the lower left corner, with the positive horizontal direction to the right and the positive vertical direction up. Texture coordinates are two components that represent a position in an image. The first component, s, is the percentage from the left side of the image. The second component, t, is the percentage from the bottom of the image. The geometry in WebGL is ultimately composed of triangles. When using images, not necessarily all triangles, you need to use texture coordinates to specify the position of the corresponding decomposed triangle vertices in the image. In order for texture coordinates to apply to any image, use a percentage to specify the position.

According to the above information, the texture coordinates are related to the drawn vertices, and the way of drawing the vertices also affects the acquisition of textures.

Do texture coordinates and vertex coordinates have to be in one-to-one correspondence?

I tried it, for example, 4 vertices, but only the texture coordinates corresponding to 3 vertices are provided, and the following prompt appears:

WebGL warning: drawElementsInstanced: Indexed vertex fetch requires 4 vertices, but attribs only supply 3.

But the number of redundant vertex coordinates has no effect.

Is there a requirement for the order in which textures are activated and texture targets are bound?

gl.TEXTURE0 to see the difference without using the default texture unit 061dcd69f7a902:

• activate first and then bind example
• first bind and then activate example

It can be found that the texture needs to be activated first and then bound to .

It should also be noted here that the texture will be bindTexture once, but this does not necessarily take effect in the end. It is best to bind it again when using it to be on the safe side. See some examples to separate the logic of creating and using textures.

What about multiple textures in the same location?

Earlier we know that the texture has its own texture unit. When drawing, the corresponding texture unit needs to be activated. Then there is the following situation:

• A set of vertices, but associated with multiple texture units
• Two sets of vertices in the same position, associated with their respective texture units

A set of vertices, but associated with multiple texture units

This situation is easier to predict, after all, a single texture unit is finally specified, and the last specified will be drawn, which is example .

But what if there is an image with a transparent area in it? This is example , first using a cat picture texture, then use texture dog pictures, dog picture and the background is transparent, eventually shows only dog pictures.

Two sets of vertices in the same position, associated with their respective texture units

This is example , only to find a final set of vertices corresponding texture image.

example of the image 161dcd69f7aa94 containing the transparent area, the result is only the texture image corresponding to the last set of vertices.

summary

Inferred from the above test: by default, texture images of the same vertex do not retain the texture image data used in history.

To confirm it again, look at the intersection of the two textures some cases example , find the intersection of the place is dog picture texture transparent place, directly see the background color of the parent element of Canvas is also no historical texture data.

References

• Texture Maps
• Texture Mapping Using Images
• Introduction to Computer Graphics