OpenGL (二): 纹理绘制

朴灿烈づ我的快乐病毒、 2022-04-10 04:29 371阅读 0赞

### 纹理绘制 ###

*  前言
 *  部分代码
 *   *  texture.vs
     *  texture.fs
     *  main.cpp ( 部分 )
     *  结果
     *  逐行解释
 *  其他API
 *   *  Texture Wrap
     *  Texture Mix
     *   *  texture.fs
         *  main.cpp
         *  结果
     *  Texture Filter
 *  总结

# 前言 #

我个人不喜欢"纹理"这个翻译, 所以之后使用 *Texture* 来替代.  
一个几何图案的 Texture 即为**与它相绑定的图片**, 从[上一篇博客][Link 1]可以知道, *Fragment Shader* 负责计算一个图形的颜色, 而一个图片实际上就是一个颜色复杂的方形, 所以 OpenGL 中 Texture 是由 Fragment Shader 来完成的. 具体的流程是:

1.  将图片信息加载到 Shader 中
2.  Vertex Shader 将 Texture 图片与几何图形的各个顶点相映射, 并将坐标传递给 Fragment Shader
3.  Fragment Shader 根据该坐标从图片中**取样**, 从而得到图片对应位置的像素值 (即颜色)

# 部分代码 #

如果读过[上一篇博客][Link 1]应该能够对 OpenGL 的使用进行自己的简单封装, 所以从本篇博客开始, 只贴部分代码.  
*.vs* 后缀表示这是一个 Vertex Shader  
*.fs* 后缀表示这是一个 Fragment Shader

## texture.vs ##

#version 330 core
    
    layout (location = 0) in vec3 position;
    layout (location = 1) in vec2 texCoord;
    
    out vec2 _texCoord;
    
    void main() { 
        _texCoord = texCoord;
        gl_Position = vec4(position, 1.0);
    }

其中 texCoord 表示该顶点对应的 Texture 坐标.  
**Texture 坐标定义为: 左下角为 ( 0, 0 ), 右上角为 ( 1, 1 )**

## texture.fs ##

#version 330 core
    
    out vec4 outColor;
    
    in vec2 _texCoord;
    uniform sampler2D tex;
    
    void main() { 
        outColor = texture(tex, _texCoord);
    }

其中 tex 变量表示的是该 Texture 的图片数据, texture(tex, \_texCoord) 表示取该图片的该坐标的像素值.

## main.cpp ( 部分 ) ##

float vertices[20] = { 
           -0.5f, -0.5f, 0.f, 0.f, 0.f,
           -0.5f, 0.5f,  0.f, 0.f, 1.f,
            0.5f, -0.5f, 0.f, 1.f, 0.f,
            0.5f, 0.5f,  0.f, 1.f, 1.f
        };
        Shader *shader = new Shader("texture.vs", "texture.fs");
        int width, height, nChannels;
        unsigned char* data = stbi_load("aragaki_yui.jpg", &width, &height, &nChannels, 0);
        GLuint texture;
        glGenTextures(1, &texture);
        glBindTexture(GL_TEXTURE_2D, texture);
        glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data);
        glGenerateMipmap(GL_TEXTURE_2D);
     
        // 加载 Vertex Array...
        
        shader->use();
        glBindTexture(GL_TEXTURE_2D, texture);
        glBindVertexArray(VAO);
        glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);

## 结果 ##

![新垣结衣][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbmNlZWVfXw_size_16_color_FFFFFF_t_70]

## 逐行解释 ##

1.  vertices 数组分为4组, 每行5个元素, 分别是 x, y, z 坐标和其 Texture 的 x, y 坐标. 我们可以看到, 方形的左下角对应 Texture 的左下角 (第一行数据), 方形的右上角对应 Texture 的右上角 (第四行数据). 向 Vertex Shader 送数据的时候应该是这样送:

glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, sizeof(float) * 5, (void*)0);
        glEnableVertexAttribArray(0);
        glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE, sizeof(float) * 5, (void*)(sizeof(float) * 3)); // 最后一个参数是偏移量, 即跳过前面3个float
        glEnableVertexAttribArray(1);

1.  Shader 类是对 *glProgram* 的封装
2.  *stbi\_load()* 函数来自于 *stb\_image* 库, [在这下载][Link 2]. 功能是读取一个图片并返回一个 *unsigned char*\* 指针.
3.  接下来是生成并绑定一个 Texture 缓冲, 并将图片的数据 Copy 过去, 类似于传递顶点数据, 其中
    
        glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data);
        glGenerateMipmap(GL_TEXTURE_2D);
    
     *  第一个参数是设置 Mipmap 的等级, 0 表示这是基本等级.
     *  第二个参数表示存到缓冲区的图片格式.
     *  第三, 第四个参数表示图片的宽度和高度.
     *  第五个参数是历史遗留问题, **必须为0**.
     *  第六个参数是原始图片的格式. 最后两个参数表示输入图片的数据类型和指针.
4.  *glGenerateMipmap()* 函数用于生成图片的 Mipmap, Mipmap 简单来说就是为一个图片生成多个尺寸大小成 2 : 1的等比数列的图片序列, 这样的好处是当图片在绘制时如果太小了, 可以使用相应的小图片来进行计算, 从而提高时空效率.

**为什么如果不调用 glGenerateMipmap() 则不会绘制图像? 这一点我还没搞懂**

# 其他API #

## Texture Wrap ##

当图片的面积**小于**其多边形的面积时, 多余部分该如何填充?  
API 为:

glTexParameteri(GL_TEXTURE_2D, [WRAP_DIMENSION], [WRAP_MODE]);

其中 *WRAP\_DIMENSION* 取值为

1.  *GL\_TEXTURE\_WRAP\_S* : 表示 x 轴方向
2.  *GL\_TEXTURE\_WRAP\_T* : 表示 y 轴方向
3.  *GL\_TEXTURE\_WRAP\_R* : 表示 z 轴方向

其中 *WRAP\_MODE* 取值为下面这 4 个宏:

1.  *GL\_REPEAT* (默认)  
    ![GL\_REPEAT][GL_REPEAT]
2.  GL\_MIRRORED\_REPEAT  
    ![GL\_MIRRORED\_REPEAT][GL_MIRRORED_REPEAT]
3.  GL\_CLAMP\_TO\_EDGE  
    ![GL\_CLAMP\_TO\_EDGE][GL_CLAMP_TO_EDGE]
4.  GL\_CLAMP\_TO\_BORDER  
    需要指定 Border 的颜色, 默认为黑色.

float borderColor[] = { 0.8f, 0.2f, 0.5f, 1.f};
        glTexParameterfv(GL_TEXTURE_2D, GL_TEXTURE_BORDER_COLOR, borderColor);

![GL\_CLAMP\_TO\_BORDER][GL_CLAMP_TO_BORDER]

## Texture Mix ##

Fragment Shader 可以混合多种 Texture 和颜色:

### texture.fs ###

#version 330 core
    
    out vec4 outColor;
    
    in vec2 _texCoord;
    uniform sampler2D tex1;
    uniform sampler2D tex2;
    
    void main() { 
        outColor = mix(texture(tex1, _texCoord), texture(tex2, _texCoord), 0.2) * vec4(1.0, 0.8, 0.95, 1.0);
    }

其中 mix 函数表示将两个 Texture 的像素混合, 它的第三个参数表示前者取 0.8, 后者取 0.2.  
**OpenGL 里颜色混合一般用乘法**

### main.cpp ###

// 绑定两次 GL_TEXTURE_2D
    
        glActiveTexture(GL_TEXTURE0);
        glBindTexture(GL_TEXTURE_2D, texture);
        glActiveTexture(GL_TEXTURE1);
        glBindTexture(GL_TEXTURE_2D, bg);
        
        int tex1Loc = shader->getUniformLocation("tex1");
        int tex2Loc = shader->getUniformLocation("tex2");
        glUniform1i(tex1Loc, 0);
        glUniform1i(tex2Loc, 1);
    	
    	// glBindVertexArray(VAO)...

### 结果 ###

![MIX][]

## Texture Filter ##

Texture Filter 适用于当一个图片的分辨率太低时, 应如何填充"空隙", API为

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, [FILTER_MODE]);

其中 *FILTER\_MODE*有两个取值:

1.  GL\_NEAREST (默认)  
    ![GL\_NEAREST][GL_NEAREST]
2.  GL\_LINEAR  
    ![GL\_LINEAR][GL_LINEAR]

# 总结 #

Texture 绘制是计算机图形学中十分常用的功能, OpenGL巧妙地将图片数据和 Shader 相联系, 尤其是用 Fragment Shader 来计算图片的像素, ***让我对图片的绘制有了新的理解!***

[Link 1]: https://blog.csdn.net/vinceee__/article/details/85151386
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbmNlZWVfXw_size_16_color_FFFFFF_t_70]: /images/20220403/3b1e0af18e804108b8bf3bdc981ae1c1.png
[Link 2]: https://github.com/nothings/stb/blob/master/stb_image.h
[GL_REPEAT]: /images/20220403/f0dbe2c4296c4673a68c325df1defad0.png
[GL_MIRRORED_REPEAT]: /images/20220403/127b8d16f817486287dc137351ebe9d6.png
[GL_CLAMP_TO_EDGE]: /images/20220403/5f9230d4d145478dbde9acd590a47fae.png
[GL_CLAMP_TO_BORDER]: /images/20220403/60fd7ea0580c43d7808a6b02fef302ac.png
[MIX]: /images/20220403/1189d8e327294b779aeda36e9a702e05.png
[GL_NEAREST]: /images/20220403/8b1502f653ca4e1c873a1314a98ae8bc.png
[GL_LINEAR]: /images/20220403/1ccf8185ebb64805b93ab2e3994a3df5.png