OpenGL - Textures

textures（ texture ） It can be mapped as a picture to the triangle drawn in the previous section , However, you need to specify the corresponding for each vertex texture coordinate（ Texture coordinates ）：

• (0, 0) In the lower left corner of the texture
• (1, 1) In the upper right corner of the texture
• s、t、r representative x、y、z Axis

Using texture coordinates to obtain color is called sampling (Sampling), Other positions will be interpolated (Fragment Interpolation), The texture coordinates are specified below ：

float texCoords[] = {
    
    0.0f, 0.0f,  // lower-left corner 
    1.0f, 0.0f,  // lower-right corner
    0.5f, 1.0f   // top-center corner
};

Texture Wrapping

If the texture coordinates are out of bounds , You can set the following policies for sampling ：

// GL_REPEAT: The default behavior for textures. Repeats the texture image.
// GL_MIRRORED_REPEAT: Same as GL_REPEAT but mirrors the image with each repeat.
// GL_CLAMP_TO_EDGE: Clamps the coordinates between 0 and 1. The result is that higher coordinates become clamped to the edge, resulting in a stretched edge pattern.
// GL_CLAMP_TO_BORDER: Coordinates outside the range are now given a user-specified border color.
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_MIRRORED_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_MIRRORED_REPEAT);

Different strategies take the form of ：

• GL_MIRRORED_REPEAT： It can be seen that the left, right, up and down of each picture are mirror symmetry
• GL_CLAMP_TO_BORDER： You need to specify an additional boundary color

float borderColor[] = {
     1.0f, 1.0f, 0.0f, 1.0f };
glTexParameterfv(GL_TEXTURE_2D, GL_TEXTURE_BORDER_COLOR, borderColor); 

Texture Filtering

When you zoom in, you will find pixels , Texture pixels （Texture Pixel）, When sampling by texture coordinates , It will inevitably involve the problem of resolution , There are several pixels around a coordinate , There are two strategies to obtain pixel color ：

• GL_NEAREST： Get the pixel color whose center point is closest to the texture coordinates , Will produce granular patterns , Clearly see the composition of some pixels ,8-bit Commonly used
• GL_LINEAR： Get the mixed color of pixels near the texture coordinates , The closer the distance, the greater the effect , Produce a smoother picture , It is not easy to see a single pixel , Will be more real

When zooming , You can set the filtering method . Linear filtering for amplification , Avoid solid colors , Zoom out with proximity filter , Ensure clarity ：

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

Mipmaps

Imagine an object far from the observer , With high definition materials , It is difficult to sample at this time , Because a point has a large span , And waste memory .

So , Use mipmaps Solve this problem , There will be a series of texture images , The former is the latter 2 times . According to the distance of the observer , Use the most appropriate texture image .

After creating the texture, you can call glGenerateMipmaps , Will only take effect if the texture is reduced .

Loading and creating textures

//  Loading pictures 
int width, height, nrChannels;
unsigned char *data = stbi_load("container.jpg", &width, &height, &nrChannels, 0);
unsigned int texture;
glGenTextures(1, &texture);
glBindTexture(GL_TEXTURE_2D, texture);
// 2、 Appoint mipmap The level of , If you create it manually 
// 3、 Store the form of the texture , The only pictures selected are RGB Information 
// 6、border, Has always been a 0
// 7、8  Specify the form and data type of picture pixel data 
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data);
glGenerateMipmap(GL_TEXTURE_2D);
stbi_image_free(data);

Apply texture ：

#version 330 core
layout (location = 0) in vec3 aPos;
layout (location = 1) in vec3 aColor;
layout (location = 2) in vec2 aTexCoord;

out vec3 ourColor;
out vec2 TexCoord;

void main()
{
    
    gl_Position = vec4(aPos, 1.0);
    ourColor = aColor;
    TexCoord = aTexCoord;
}

#version 330 core
out vec4 FragColor;
  
in vec3 ourColor;
in vec2 TexCoord;

// texture units
uniform sampler2D ourTexture;

void main()
{
    
    FragColor = texture(ourTexture, TexCoord);
}

ourShader.use(); // don't forget to activate the shader before setting uniforms! 
glUniform1i(glGetUniformLocation(ourShader.ID, "texture1"), 0); // set it manually
glActiveTexture(GL_TEXTURE0); // activate the texture unit first before binding texture
glBindTexture(GL_TEXTURE_2D, texture);
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0); 

If the picture is found along y Axis flipped callable stbi_set_flip_vertically_on_load(true);

Paint multiple textures