OpenGL学习之路：第11章 - GLSL 顶点/片段着色器绘制纹理立方体

2023-09-14 06:48:56

GLSL 顶点/片段着色器绘制纹理立方体：开启 3D 图形的新篇章

简介

在上一章中，我们探索了 OpenGL 的基本光照和材质技术，绘制了一个带有光照效果的 3D 场景。在这个激动人心的旅程中，我们将更深入地研究 OpenGL 的着色语言 (GLSL)，重点关注如何使用 GLSL 顶点和片段着色器绘制一个带纹理的立方体。准备好踏上探索 3D 图形的新篇章了吗？

环境设置：搭建舞台

创建窗口和上下文

就像任何舞台剧一样，我们的 3D 场景也需要一个窗口和一个上下文。在这里，我们将遵循上章中的步骤来创建这个基础。

加载着色器程序：定义规则

接下来，我们需要加载并创建着色器程序，它定义了将 3D 场景转化为屏幕像素的规则。我们将使用一个顶点着色器和一个片段着色器，分别负责处理顶点位置和纹理信息。

顶点着色器：

attribute vec3 aPos; // 顶点位置
attribute vec2 aTexCoords; // 纹理坐标
varying vec2 vTexCoords; // 片段着色器中使用的纹理坐标

void main() {
    gl_Position = vec4(aPos, 1.0f); // 设置顶点位置
    vTexCoords = aTexCoords; // 传递纹理坐标
}

片段着色器：

varying vec2 vTexCoords; // 从顶点着色器接收纹理坐标
uniform int texture_diffuse1; // 扩散纹理（我们的图片）

void main() {
    gl_FragColor = texture2D(texture_diffuse1, vTexCoords); // 根据纹理坐标设置片段颜色
}

启用顶点和纹理数据：连接组件

有了着色器程序后，我们需要启用顶点和纹理数据，就像连接舞台上的所有组件一样。

准备数据：搭建场景

顶点数据：立方体的形状

为了绘制一个立方体，我们需要一个包含顶点位置和纹理坐标的顶点缓冲对象 (VBO)。以下是立方体顶点的详细信息：

float cube_vertex[] = {
    // 位置                   纹理
    // 前面
    -0.5f, -0.5f, 0.5f,  0.0f, 0.0f,
     0.5f, -0.5f, 0.5f,  1.0f, 0.0f,
     0.5f,  0.5f, 0.5f,  1.0f, 1.0f,
    -0.5f,  0.5f, 0.5f,  0.0f, 1.0f,

    // 后面
    -0.5f, -0.5f, -0.5f,  0.0f, 0.0f,
     0.5f, -0.5f, -0.5f,  1.0f, 0.0f,
     0.5f,  0.5f, -0.5f,  1.0f, 1.0f,
    -0.5f,  0.5f, -0.5f,  0.0f, 1.0f,

    // 上面
    -0.5f,  0.5f, 0.5f,  0.0f, 0.0f,
     0.5f,  0.5f, 0.5f,  1.0f, 0.0f,
     0.5f,  0.5f, -0.5f,  1.0f, 1.0f,
    -0.5f,  0.5f, -0.5f,  0.0f, 1.0f,

    // 下面
    -0.5f, -0.5f, -0.5f,  0.0f, 0.0f,
     0.5f, -0.5f, -0.5f,  1.0f, 0.0f,
     0.5f, -0.5f, 0.5f,  1.0f, 1.0f,
    -0.5f, -0.5f, 0.5f,  0.0f, 1.0f,

    // 右面
    0.5f,  0.5f,  0.5f,  0.0f, 0.0f,
    0.5f,  0.5f, -0.5f,  1.0f, 0.0f,
    0.5f, -0.5f, -0.5f,  1.0f, 1.0f,
    0.5f, -0.5f,  0.5f,  0.0f, 1.0f,

    //  left
    -0.5f,  0.5f,  0.5f,  0.0f, 0.0f,
    -0.5f, -0.5f,  0.5f,  1.0f, 0.0f,
    -0.5f, -0.5f, -0.5f,  1.0f, 1.0f,
    -0.5f,  0.5f, -0.5f,  0.0f, 1.0f
};