使用纹理给三角形赋予缤纷色彩：OpenGL进阶指南

前端

2023-09-26 18:34:37

引言

在上一篇文章中，我们踏入了OpenGL的神奇世界，绘制了第一个三角形。现在，让我们继续这段旅程，探索如何使用纹理为我们的三角形注入五彩缤纷的活力。

纹理是什么？

想象一下，你在绘画一幅画，但你想为某个区域添加一种特定的图案。你不会重新绘制整个区域，而是会创建一个纹理——一个包含该图案的图像文件——并将其贴到该区域。

在OpenGL中，纹理的工作原理与此类似。它是一个二位图像，存储在显存中。当我们绘制物体时，我们可以将纹理映射到物体表面，从而为物体赋予颜色、图案或其他细节。

为三角形添加纹理

要为三角形添加纹理，我们需要执行以下步骤：

创建纹理对象： 首先，我们需要创建一个纹理对象来存储纹理数据。
绑定纹理对象： 然后，我们将纹理对象绑定到一个纹理单元，这是OpenGL用来管理纹理的地方。
加载纹理数据： 接下来，我们将我们的纹理图像加载到纹理对象中。
配置纹理参数： 最后，我们将配置纹理的一些参数，例如如何对纹理进行过滤和环绕。

纹理坐标

纹理坐标是将纹理映射到三角形表面的另一种方法。它们允许我们指定纹理图像上的哪些部分应该映射到三角形的哪些部分。纹理坐标通常在0到1之间的范围内，其中(0, 0)代表纹理图像的左下角，(1, 1)代表右上角。

将纹理映射到三角形

一旦我们创建并配置了纹理，就可以将其映射到三角形了。我们可以使用glTexCoord2f()函数为每个三角形顶点指定纹理坐标。

示例代码

以下是使用纹理给三角形赋予颜色的示例代码：

// 创建纹理对象
GLuint texture;
glGenTextures(1, &texture);

// 绑定纹理对象
glBindTexture(GL_TEXTURE_2D, texture);

// 加载纹理数据
int width, height, nrChannels;
unsigned char *data = stbi_load("texture.png", &width, &height, &nrChannels, 0);

// 配置纹理参数
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

// 为纹理分配数据
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data);

// 释放纹理数据
stbi_image_free(data);

// 创建三角形顶点数据
float vertices[] = {
    // 顶点坐标            // 纹理坐标
    0.5f, 0.5f, 0.0f,  1.0f, 1.0f,  // 右上角
    0.5f, -0.5f, 0.0f,  1.0f, 0.0f,  // 右下角
    -0.5f, -0.5f, 0.0f,  0.0f, 0.0f,  // 左下角
};

// 创建缓冲区对象
GLuint VBO, VAO;
glGenBuffers(1, &VBO);
glGenVertexArrays(1, &VAO);

// 绑定缓冲区对象
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBindVertexArray(VAO);

// 将顶点数据复制到缓冲区对象中
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

// 设置顶点属性指针
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);
glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)(3 * sizeof(float)));
glEnableVertexAttribArray(1);

// 渲染三角形
glDrawArrays(GL_TRIANGLES, 0, 3);