5.5 绘制带贴图的立方体盒子 | 5. 绘制贴图 | 游戏引擎浅入浅出

## 5.5 绘制带贴图的立方体盒子

```text 
「游戏引擎 浅入浅出」是一本开源电子书，PDF/随书代码/资源下载： https://github.com/ThisisGame/cpp-game-engine-book 
```

```c
CLion项目文件位于 samples\texture\draw_cube_texture
```

上一节已经解析了图片，得到RGB数据，这一节将数据上传到显卡并渲染。

### 1. 上传RGB数据到显卡

在 `texture2d.h` 中，添加成员变量`gl_texture_id_`存储GPU创建纹理的唯一ID。
```c++
GLuint gl_texture_id_;//纹理ID
```

解析图片成功后，将图片RGB数据上传到GPU。

```c++
Texture2D* Texture2D::LoadFromFile(std::string& image_file_path)
{
    Texture2D* texture2d=new Texture2D();

stbi_set_flip_vertically_on_load(true);//翻转图片，解析出来的图片数据从左下角开始，这是因为OpenGL的纹理坐标起始点为左下角。
    int channels_in_file;//通道数
    unsigned char* data = stbi_load(image_file_path.c_str(), &(texture2d->width_), &(texture2d->height_), &channels_in_file, 0);
    if (data!= nullptr)
    {
        //根据颜色通道数，判断颜色格式。
        ......
    }

//1. 通知显卡创建纹理对象，返回句柄;
    glGenTextures(1, &(texture2d->gl_texture_id_));

//2. 将纹理绑定到特定纹理目标;
    glBindTexture(GL_TEXTURE_2D, texture2d->gl_texture_id_);

//3. 将图片rgb数据上传到GPU;
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, texture2d->width_, texture2d->height_, 0, texture2d->gl_texture_format_, GL_UNSIGNED_BYTE, data);

//4. 指定放大，缩小滤波方式，线性滤波，即放大缩小的插值方式;
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);

//释放图片文件内存
    stbi_image_free(data);

return texture2d;
}
```
这样，RGB数据就上传到显卡中了。
数据上传后，返回纹理句柄供后续使用。

下面来看看在Shader中如何从纹理上获取颜色数据。

### 2. Shader中使用纹理

在片段Shader中使用，GLSL提供函数 `texture2D` ，在纹理的指定坐标上，取出颜色值。

```c
vec4 texture2D(sampler2D sampler, vec2 coord, float bias)
```

参数sampler就是纹理数据。
参数coord就是UV坐标。

下面就是完整的片段Shader。

```glsl
#version 110
uniform sampler2D u_diffuse_texture;
varying vec4 v_color;
varying vec2 v_uv;
void main()
{
    gl_FragColor = texture2D(u_diffuse_texture,v_uv);
}
```

主要是调用`texture2D`函数，从纹理 `u_diffuse_texture` 中，以 `v_uv` 为UV坐标，取出颜色值，赋值给 `gl_FragColor`作为颜色输出。

UV坐标，在 `5.1 颜色和贴图` 这一节简单介绍过，注意看上面的片段Shader代码：

```glsl
varying vec2 v_uv;
```
变量`v_uv`被 `varying` 修饰，说明UV坐标是从顶点Shader传递过来的，数据经过插值。

顶点Shader代码如下：

```glsl
#version 110

uniform mat4 u_mvp;

attribute  vec3 a_pos;
attribute  vec4 a_color;
attribute  vec2 a_uv;

varying vec4 v_color;
varying vec2 v_uv;

void main()
{
    gl_Position = u_mvp * vec4(a_pos, 1.0);
    v_color = a_color;
    v_uv = a_uv;
}
```

介绍完了纹理的使用过程，下面就传入UV坐标和纹理到Shader中进行渲染。<a id="antiCollectorAdTxt" href="https://github.com/ThisisGame/cpp-game-engine-book">「游戏引擎 浅入浅出」是一本开源电子书，PDF/随书代码/资源下载： https://github.com/ThisisGame/cpp-game-engine-book</a>

### 3. 上传UV坐标

UV坐标和顶点坐标也是一一对应，且取值范围是[0,1]。
立方体有6个面，每个面2个三角形，对应UV坐标数据如下：

```c++
static const glm::vec2 kUvs[36] =
{
        //Front
        glm::vec2(0.0f, 0.0f),
        glm::vec2(1.0f, 0.0f),
        glm::vec2(1.0f, 1.0f),