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

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

纹理介绍

我们可以为每个顶点添加颜色来增加图形的细节，从而创建出有趣的图像。但是，如果想让图形看起来更真实，我们就必须有足够多的顶点，从而指定足够多的颜色。这将会产生很多额外开销，因为每个模型都会需求更多的顶点，每个顶点又需求一个颜色属性。程序员们更喜欢用纹理，纹理是一个2D图片，他可以用来添加物体的细节。我们可以在一张图片上插入非常多的细节，这样就可以让物体非常精细而不用指定额外的顶点。

为了能够把纹理映射(Map)到三角形上，我们需要指定三角形的每个顶点各自对应纹理的哪个部分。这样每个顶点就会关联着一个纹理坐标(Texture Coordinate)，用来标明该从纹理图像的哪个部分采样（使用纹理坐标获取纹理颜色叫做采样）。之后在图形的其它片段上进行片段插值(Fragment Interpolation)。

纹理在shader中的表示

GLSL有一个供纹理对象使用的内建数据类型，叫做采样器(Sampler)。我们可以声明一个uniform sampler2D texture把一个纹理添加到片段着色器中，通过在CPU调用 glUniform1f（）函数，向texture传值，从而实现载入纹理（图片）到Shader。

Texture 的函数调用

image.png

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

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

当调用glTexImage2D时，当前绑定的纹理对象就会被附加上纹理图像。该函数最终会把图像数据从CPU端，搬到GPU端，即第一步创建的texture中。

创造一张RGB图片

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

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

纹理传入shader

激活纹理单元

glActiveTexture(GL_TEXTURE0);

绑定纹理

glBindTexture(GL_TEXTURE_2D, texture);

向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）。

根据坐标轴，转换出纹理坐标。定义在顶点着色器中，原因是纹理坐标涉及到插值，所以要在插值前传入。注：纹理坐标本身是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,
    };

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

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

着色器接收纹理坐标。顶点着色器中，aTexCoord接收vertexUV, 并传递到片段着色器中去使用。我们使用GLSL内建的texture函数来采样纹理的颜色，它第一个参数是纹理采样器，第二个参数是对应的纹理坐标。texture函数会使用之前设置的纹理参数对相应的颜色值进行采样。这个片段着色器的输出就是纹理的（插值）纹理坐标上的(过滤后的)颜色。

       //顶点着色器 
       #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纹理坐标系中左下角为原点（0，0），而图片的原点在左上角，所以在y轴上颠倒了。stb_image.h(图像加载库，需引入)能够在图像加载时帮助我们翻转y轴，只需要在加载任何图像前加入以下语句即可：

stbi_set_flip_vertically_on_load(true);

若没有用图像加载库，就把纹理坐标上下颠倒一下。