OpenGL 从入门到成魔-第7章-纹理和纹理坐标

注：参考自bilibili系列视频，OpenGL 从入门到成魔-第7章-纹理和纹理坐标，更详细的内容可以从视频获取https://www.bilibili.com/video/BV1bZ4y1W7tX

纹理在shader中的表示

uniform sampler2D texture 通过cpu glUniform1f（）函数，向texture传值。

Texture 的函数调用

image.png

image.png

1. glGenTextures(1, &textureId) 创建texture
2. glBindTexture(GL_TEXTURE_2D, textureId) 绑定texture
3. glTexParameteri() 必须设置的四个选项
4. glPixelStorei(GL_UNPACK_ALIANMENT, 1); 默认是4字节对齐，如果图像宽度不是4的倍数，会补齐到4字节，图像会有偏移。这里我们设置成1字节对齐，这样会影响性能。如果到了性能瓶颈，这里可以选择为4字节对齐。
5. glTexImage2D(...)

• 第一个参数指定了纹理目标(Target)。设置为GL_TEXTURE_2D意味着会生成与当前绑定的纹理对象在同一个目标上的纹理（任何绑定到GL_TEXTURE_1D和GL_TEXTURE_3D的纹理不会受到影响）。
• 第二个参数为纹理指定多级渐远纹理的级别，如果你希望单独手动设置每个多级渐远纹理的级别的话。这里我们填0，也就是基本级别。
• 第三个参数告诉OpenGL我们希望把纹理储存为何种格式。即在GPU中图片存储形式，主要指定几个通道。
• 第四个和第五个参数设置最终的纹理的宽度和高度。
• 下个参数应该总是被设为0（历史遗留的问题）。
• 第七个参数定义了源图的格式，即源图几个通道。
• 第八个参数定义了源图每个通道的数据类型BYTE。
• 最后一个参数是真正的图像数据。

函数最终会把图像数据从CPU端，搬到GPU端

造一张图片

int width = 2;
int height = 2;
unsigned char imgData[] = {
255,0,0,         0,255,0,
0,0,255,         127,127,127
}

由此，看出图片的本真。 传到上面函数的最后一个参数中。

纹理传入shader

1. 激活纹理单元

glActiveTexture(GL_TEXTURE0);

1. 绑定纹理

glBindTexture(GL_TEXTURE_2D, texture);

1. 向shader中的uniform sampler2D texture变量传值, 值为0，0是纹理单元编号GL_TEXTURE0

glUniform1i(glGetUniformLocation(program, "texture"), 0);

首先，0号纹理单元和纹理绑定，然后0号纹理单元和shader里的sampler2D texture变量绑定，从而做好对应。 一个shader中，最多处理32个纹理单元，openGL es，最多处理16个。

纹理坐标

image.png

GLSL内建的texture函数来采样纹理的颜色，它第一个参数是纹理采样器，第二个参数是对应的纹理坐标。texture函数的返回值就是，在该纹理坐标上的rgba值（vec4）。

1. 根据坐标轴，转换出纹理坐标。定义在顶点着色器中，原因是纹理坐标涉及到插值，所以要在插值前传入。注：纹理坐标本身是2维的，但是为了使用vao addVertex3D(),这里定义成了3维

 float vertexsUV[] =
    {
          1.0f,  1.0f, 0.0f,
          0.0f,  1.0f, 0.0f,
          0.0f,  0.0f, 0.0f,
          1.0f,   0.0f, 0.0f,
    };

1. 把纹理坐标传到GPU。像顶点位置坐标一样，向VAO中添加一个VBO，调用addVertex3D，注意第三个参数是layout,我们这里是第二个顶点属性（顶点着色器的 每个输入变量叫顶点属性），故填1。

    VAO->addVertex3D(vetexsUV, 4, 1);

1. 着色器接收纹理坐标。顶点着色器中，aTexCoord接收vertexUV, 并传递到片段着色器中去使用。

       //顶点着色器 
       #version 330\n
        layout(location = 0) in vec3 pos;
        layout(location = 1) in vec3 aTexCoord;
        out vec3 outPos;
        out vec3 TexCoord;
        void main()
        {
            outPos = pos;
            gl_Position = vec4(pos, 1.0);
            TexCoord = aTexCoord;
        }
     
      //片段着色器
       #version 330\n
        out vec4 rgbaColor;
        in vec3 outPos;
        in vec3 TexCoord;

        uniform sampler2D t;
        void main()
        {
            vec2 uv = vec2(TexCoord.x, TexCoord.y);
            rgbaColor = texture(t, uv);
        }

图片反了

此时，我们的纹理以及绘制出来了，但是上下颠倒了。这是因为OpenGL要求y轴0.0坐标是在图片的底部的，但是图片的y轴0.0坐标通常在顶部。stb_image.h(图像加载库，需引入)能够在图像加载时帮助我们翻转y轴，只需要在加载任何图像前加入以下语句即可：

stbi_set_flip_vertically_on_load(true);