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

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

纹理在shader中的表示

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

Texture 的函数调用

image.png

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。
最后一个参数是真正的图像数据。

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

造一张图片

代码语言：javascript复制

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

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

纹理传入shader

激活纹理单元

代码语言：javascript复制

glActiveTexture(GL_TEXTURE0);

绑定纹理

代码语言：javascript复制

glBindTexture(GL_TEXTURE_2D, texture);

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

代码语言：javascript复制

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维

代码语言：javascript复制

 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。

代码语言：javascript复制

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

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

代码语言：javascript复制

       //顶点着色器 
       #version 330n
        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 330n
        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轴，只需要在加载任何图像前加入以下语句即可：

代码语言：javascript复制

stbi_set_flip_vertically_on_load(true);

opengl 图像处理 api 编程算法

0 人点赞