OpenGL纹理贴图实战入门示例

本文还有配套的精品资源，点击获取

简介：OpenGL是计算机图形学中常用的图形API，用于创建和操作三维图形。本“OpenGL纹理贴图简单例子”通过一个完整的示例程序，讲解如何使用纹理贴图技术将图像映射到3D模型表面，以增强图形的真实感和细节表现。内容涵盖纹理对象的创建、图像加载、纹理坐标设置、参数配置、绑定流程以及着色器中的纹理采样，帮助初学者掌握OpenGL纹理贴图的核心流程，并为构建复杂3D场景打下基础。

1. OpenGL纹理贴图基础概念

在三维图形渲染中，纹理贴图是增强物体表面细节与真实感的关键技术。简单来说，纹理贴图是将二维图像“包裹”在三维模型表面的过程。纹理由像素（texel）组成，每个像素包含颜色信息；而纹理坐标（通常称为UV坐标）定义了图像如何映射到模型表面的每个顶点上。

在渲染流程中，顶点着色器接收纹理坐标，经过插值后传递给片段着色器，最终通过纹理采样函数（如 texture() ）获取对应颜色值，完成贴图过程。

纹理与着色器紧密相关，是现代OpenGL中实现复杂材质与光照效果的基础。掌握纹理贴图原理，将为后续实践操作奠定坚实基础。

2. 纹理对象创建与图像加载

在现代图形渲染中，纹理贴图是增强三维模型真实感和细节表现的重要手段。而实现纹理贴图的第一步，是创建和管理纹理对象，并将图像数据加载到GPU的纹理存储中。本章将从纹理对象的创建与绑定开始，逐步介绍图像数据的加载、处理与纹理内存的分配过程，为后续的纹理映射打下坚实的基础。

2.1 纹理对象的创建与绑定

在OpenGL中，纹理对象（Texture Object）是用于封装纹理数据及其相关状态的容器。纹理对象的创建和绑定是使用纹理的第一步，它们通过特定的API函数进行操作。

2.1.1 glGenTextures与glBindTexture函数详解

glGenTextures 函数用于生成一个或多个未使用的纹理对象名称（即纹理ID）：

void glGenTextures(GLsizei n, GLuint *textures);

• n ：要生成的纹理对象数量。
• textures ：用于存储生成的纹理ID的数组。

示例：

GLuint textureID;
glGenTextures(1, &textureID);

生成纹理对象后，必须使用 glBindTexture 函数将其绑定到一个纹理目标上，以激活该纹理：

void glBindTexture(GLenum target, GLuint texture);

• target ：纹理目标，例如 GL_TEXTURE_2D 。
• texture ：之前生成的纹理ID。

示例：

glBindTexture(GL_TEXTURE_2D, textureID);

逻辑分析：

• glGenTextures 生成的是一个唯一的整数标识符，用于后续操作。
• glBindTexture 将当前纹理目标（如2D纹理）与该标识符绑定，后续的纹理操作都作用于该纹理对象。
• OpenGL使用绑定机制来区分多个纹理对象，类似于VAO和VBO的绑定方式。

2.1.2 纹理目标（GL_TEXTURE_2D等）的选择与使用

纹理目标决定了纹理的类型，常见的有：

纹理目标	描述
GL_TEXTURE_1D	一维纹理，常用于颜色渐变查找表
GL_TEXTURE_2D	二维纹理，最常见的纹理类型
GL_TEXTURE_3D	三维纹理，用于体积渲染
GL_TEXTURE_CUBE_MAP	立方体贴图，用于环境映射

绑定纹理目标后，后续的纹理参数设置和数据上传都将作用于该类型纹理。

示例：

// 创建并绑定一个二维纹理
GLuint texture2D;
glGenTextures(1, &texture2D);
glBindTexture(GL_TEXTURE_2D, texture2D);

参数说明：

• 选择正确的纹理目标对于后续的数据上传和采样方式至关重要。
• 例如，立方体贴图需要绑定 GL_TEXTURE_CUBE_MAP ，并分别上传6个面的数据。

2.1.3 多纹理绑定与管理技巧

在实际渲染中，常常需要同时使用多个纹理。例如，一个物体可能需要基础颜色贴图、法线贴图、高光贴图等多个纹理。

OpenGL通过 纹理单元（Texture Unit） 机制支持多纹理绑定：

glActiveTexture(GL_TEXTURE0 + unit);
glBindTexture(GL_TEXTURE_2D, textureID);

• unit ：纹理单元编号，从0开始，例如 GL_TEXTURE0 、 GL_TEXTURE1 等。
• 每个纹理单元可以绑定一种类型的纹理。

示例代码：

// 绑定第一个纹理到纹理单元0
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, textureID1);

// 绑定第二个纹理到纹理单元1
glActiveTexture(GL_TEXTURE1);
glBindTexture(GL_TEXTURE_2D, textureID2);

管理技巧：

• 使用宏或常量命名纹理单元编号，提高可读性：
  c #define TEX_UNIT_DIFFUSE 0 #define TEX_UNIT_NORMAL 1
• 在着色器中通过 uniform sampler2D 变量指定使用的纹理单元：
  glsl uniform sampler2D u_diffuseMap; uniform sampler2D u_normalMap;
• 在CPU端使用 glUniform1i 将纹理单元编号传入着色器：
  c glUniform1i(glGetUniformLocation(shaderProgram, "u_diffuseMap"), TEX_UNIT_DIFFUSE); glUniform1i(glGetUniformLocation(shaderProgram, "u_normalMap"), TEX_UNIT_NORMAL);

2.2 图像数据的加载与处理

纹理贴图的本质是将图像数据上传到GPU的纹理存储中。因此，图像数据的加载和格式匹配至关重要。

2.2.1 常用图像格式支持（如PNG、JPEG等）

OpenGL本身不支持直接加载图像文件，因此需要借助第三方库完成图像解码工作。常见的图像格式支持如下：

格式	描述
PNG	支持透明通道，压缩无损，适合纹理贴图
JPEG	压缩有损，文件体积小，适合背景图
BMP	无压缩，加载速度快，但体积大
DDS	直接支持压缩纹理格式（如DXT）

不同格式的图像在使用时需注意：

• PNG支持Alpha通道（RGBA），适合带透明度的纹理；
• JPEG通常为RGB格式，适合不透明贴图；
• DDS是专为纹理设计的格式，支持GPU直接加载压缩纹理。

2.2.2 使用第三方库（如stb_image）加载图像

stb_image 是一个轻量级的单头文件图像加载库，支持PNG、JPEG、BMP等多种格式，适合集成到OpenGL项目中。

加载图像的基本步骤如下：

#define STB_IMAGE_IMPLEMENTATION
#include "stb_image.h"

int width, height, nrChannels;
unsigned char *data = stbi_load("texture.png", &width, &height, &nrChannels, 0);

if (data) {
    // 使用data数据上传到纹理
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data);
    stbi_image_free(data);
} else {
    printf("Failed to load texture\n");
}

参数说明：

• width , height ：图像的宽高；
• nrChannels ：图像的通道数（如RGB为3，RGBA为4）；
• data ：指向图像像素数据的指针；
• 最后一个参数为 desired_channels ，设为0表示自动识别。

逻辑分析：

• stbi_load 函数加载图像文件并解码为RGB或RGBA格式；
• 若加载失败，返回 NULL ；
• 加载成功后，需使用 glTexImage2D 将图像数据上传到GPU；
• 最后必须调用 stbi_image_free 释放内存，防止内存泄漏。

2.2.3 图像数据格式与OpenGL内部格式匹配

在使用 glTexImage2D 上传图像数据时，需要注意三个参数的匹配：

void glTexImage2D(GLenum target, GLint level, GLint internalformat, GLsizei width, GLsizei height, GLint border, GLenum format, GLenum type, const void *data);

关键参数说明：

参数	含义	示例值
internalformat	OpenGL内部存储格式	GL_RGB , GL_RGBA
format	图像数据格式	GL_RGB , GL_RGBA
type	数据类型	GL_UNSIGNED_BYTE

常见组合：

图像通道数	format	internalformat
3	GL_RGB	GL_RGB
4	GL_RGBA	GL_RGBA

逻辑分析：

• format 和 type 用于描述图像数据的原始格式；
• internalformat 用于告诉OpenGL内部存储的格式；
• 若使用压缩纹理格式（如 GL_COMPRESSED_RGB_S3TC_DXT1_EXT ），则需先加载为标准格式再转换，或使用DDS文件直接加载。

2.3 纹理内存分配与数据传输

在纹理对象绑定并准备好图像数据后，下一步是将图像数据上传到GPU的纹理内存中。

2.3.1 glTexImage2D函数详解

glTexImage2D 函数用于为当前绑定的纹理对象分配内存并上传图像数据：

void glTexImage2D(GLenum target, GLint level, GLint internalformat, GLsizei width, GLsizei height, GLint border, GLenum format, GLenum type, const void *data);

• level ：MIP等级，0为基本层；
• border ：必须为0（历史遗留参数）；
• data ：图像数据指针。

示例：

glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data);

逻辑分析：

• 此函数不仅分配内存，还将图像数据复制到GPU内存中；
• 若 data 为 NULL ，则只分配内存，不上传数据；
• 后续章节将介绍MIP映射，此时 level 将用于指定不同层级。

2.3.2 纹理数据的上传与格式转换

在某些情况下，图像数据的格式与目标纹理的格式不一致，需要进行格式转换。

例如，图像为RGBA格式，但希望存储为RGB格式：

glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, data);

此时OpenGL会自动丢弃Alpha通道的数据。

逻辑分析：

• OpenGL支持自动格式转换；
• 若目标格式为压缩格式（如 GL_COMPRESSED_RGBA ），则需确保硬件支持；
• 转换过程中可能损失数据精度，应尽量使用匹配格式。

2.3.3 纹理数据的压缩与优化策略

为了提高渲染性能和节省显存，可以使用压缩纹理格式。常见的压缩格式包括：

格式	说明
GL_COMPRESSED_RGB_S3TC_DXT1_EXT	有损压缩，适用于不透明纹理
GL_COMPRESSED_RGBA_S3TC_DXT5_EXT	支持Alpha通道，适合半透明纹理

压缩纹理的使用流程如下：

1. 使用工具（如NVIDIA Texture Tools）将图像转换为压缩格式（如DDS）；
2. 加载DDS文件，获取压缩数据；
3. 使用 glCompressedTexImage2D 上传压缩纹理：

glCompressedTexImage2D(GL_TEXTURE_2D, 0, format, width, height, 0, compressedSize, compressedData);

优化策略：

• 压缩纹理可减少内存带宽占用，提高渲染效率；
• 支持硬件解压，无需额外CPU解码；
• 需确保显卡支持对应压缩格式。

总结与延伸

本章系统地介绍了OpenGL中纹理对象的创建与绑定流程、图像数据的加载与格式处理，以及纹理内存的分配与上传方法。通过 glGenTextures 和 glBindTexture 构建纹理对象，使用 stb_image 等库加载图像数据，并通过 glTexImage2D 完成数据上传，是纹理贴图流程的核心步骤。

下一章将深入探讨纹理参数的设置，包括纹理过滤方式、MIP映射原理与配置，以及纹理环绕方式的控制，为高质量纹理渲染提供进一步支持。

3. 纹理参数设置与MIP映射

在OpenGL中，纹理贴图不仅仅是将一张图像“贴”到几何体表面那么简单。为了获得最佳的渲染效果，我们需要对纹理对象进行一系列参数配置。这些参数决定了纹理在不同距离、角度、缩放状态下的显示效果。本章将重点讲解纹理的过滤方式设置、MIP映射的原理与应用，以及纹理环绕与边缘处理策略，帮助你掌握如何在实际开发中优化纹理的视觉表现与性能表现。

3.1 纹理过滤方式设置

纹理过滤是控制纹理在放大或缩小时的显示质量的关键机制。它直接影响纹理在不同分辨率下的表现，尤其是在物体远离或靠近相机时。

3.1.1 GL_TEXTURE_MIN_FILTER与GL_TEXTURE_MAG_FILTER的作用

在OpenGL中，我们通过 glTexParameter 函数来设置纹理的过滤方式。两个关键的参数是：

• GL_TEXTURE_MIN_FILTER ：用于控制纹理在缩小（Minification）时的过滤方式。
• GL_TEXTURE_MAG_FILTER ：用于控制纹理在放大（Magnification）时的过滤方式。

3.1.2 放大与缩小过滤器的配置（GL_NEAREST、GL_LINEAR等）

常见的纹理过滤方式包括：

过滤方式	说明
GL_NEAREST	最邻近插值，速度快但画质差
GL_LINEAR	线性插值，画质更平滑
GL_NEAREST_MIPMAP_NEAREST	使用最近的MIP层级，最近邻
GL_LINEAR_MIPMAP_NEAREST	使用最近的MIP层级，线性插值
GL_NEAREST_MIPMAP_LINEAR	使用两个MIP层级的混合，最近邻
GL_LINEAR_MIPMAP_LINEAR	使用两个MIP层级的混合，线性插值（三线性过滤）

以下是一个设置纹理过滤方式的代码示例：

glBindTexture(GL_TEXTURE_2D, textureID);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

代码解释：

• glBindTexture(GL_TEXTURE_2D, textureID) ：绑定纹理对象。
• glTexParameteri(..., GL_TEXTURE_MIN_FILTER, ...) ：设置缩小过滤方式为三线性过滤。
• glTexParameteri(..., GL_TEXTURE_MAG_FILTER, ...) ：设置放大过滤方式为线性过滤。

3.1.3 不同过滤方式对性能和画质的影响

• GL_NEAREST ：性能最高，但容易出现锯齿和块状。
• GL_LINEAR ：性能适中，画质比 GL_NEAREST 好。
• MIP映射 + 线性混合 ：画质最好，但需要额外内存和生成MIP层级的计算时间。

过滤方式	画质	性能	是否使用MIP
GL_NEAREST	差	高	否
GL_LINEAR	中	中	否
GL_LINEAR_MIPMAP_LINEAR	好	低	是

3.2 MIP映射原理与应用

MIP映射（MIP Mapping）是一种优化纹理在远距离渲染时视觉质量和性能的技术。它通过预先生成多个不同分辨率的纹理图像（称为MIP层级），在渲染时根据物体与相机的距离选择合适的层级。

3.2.1 MIP映射的基本概念与工作原理

MIP映射的名称来源于拉丁语“multum in parvo”，意为“小中见大”。每个MIP层级都是前一层级的一半宽高，直到最小为1x1像素。

例如，一个1024x1024的纹理将生成如下MIP层级：

Level 0: 1024x1024
Level 1: 512x512
Level 2: 256x256
Level 10: 1x1

当物体远离相机时，OpenGL会选择较低分辨率的MIP层级来渲染，从而减少内存带宽使用，提高性能，并避免纹理闪烁（Texture Aliasing）。

3.2.2 glGenerateMipmap函数的使用

在纹理数据上传后，我们可以调用 glGenerateMipmap 来自动生成所有MIP层级：

glBindTexture(GL_TEXTURE_2D, textureID);
glGenerateMipmap(GL_TEXTURE_2D);

代码解释：

• glBindTexture(...) ：绑定纹理对象。
• glGenerateMipmap(GL_TEXTURE_2D) ：为当前绑定的2D纹理生成MIP层级。

⚠️ 注意：使用 glGenerateMipmap 前必须先调用 glTexImage2D 上传基础纹理数据。

3.2.3 MIP映射与LOD（细节层次）控制

LOD（Level of Detail）用于控制当前使用哪个MIP层级。LOD值越大，使用的MIP层级越小（分辨率越低）。

我们可以通过 glTexParameter 设置LOD偏移或范围：

// 设置LOD的最大层级
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAX_LEVEL, 5);

// 设置LOD的最小和最大偏移
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_LOD_BIAS, -0.4f);

mermaid流程图：MIP映射工作流程

graph TD
    A[原始纹理图像] --> B[生成MIP层级]
    B --> C[渲染时选择合适MIP层级]
    C --> D{距离相机远近}
    D -->|远| E[使用低分辨率层级]
    D -->|近| F[使用高分辨率层级]

3.3 纹理环绕与边缘处理

纹理坐标（UV坐标）通常在 [0, 1] 范围内。当纹理坐标超出这个范围时，我们需要指定如何处理这些“越界”的纹理坐标。

3.3.1 GL_TEXTURE_WRAP_S与GL_TEXTURE_WRAP_T设置

OpenGL 提供了多种纹理环绕模式：

模式名称	行为说明
GL_REPEAT	重复纹理，超出部分循环显示
GL_MIRRORED_REPEAT	镜像重复
GL_CLAMP_TO_EDGE	限制在边缘，不重复
GL_CLAMP_TO_BORDER	使用指定的边缘颜色填充

示例代码：

glBindTexture(GL_TEXTURE_2D, textureID);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);

代码解释：

• GL_TEXTURE_WRAP_S 控制U方向的环绕模式。
• GL_TEXTURE_WRAP_T 控制V方向的环绕模式。

3.3.2 边缘颜色与重复模式的应用

当使用 GL_CLAMP_TO_BORDER 时，我们需要指定边缘颜色：

GLfloat borderColor[] = { 1.0f, 0.0f, 0.0f, 1.0f }; // 红色
glTexParameterfv(GL_TEXTURE_2D, GL_TEXTURE_BORDER_COLOR, borderColor);

3.3.3 不同环绕方式对渲染效果的影响

环绕方式	适用场景	效果描述
GL_REPEAT	地面、墙面贴图	纹理无限重复
GL_MIRRORED_REPEAT	对称图案、水波纹	镜像重复，无缝拼接
GL_CLAMP_TO_EDGE	UI、物体边缘不希望重复	保持边缘不变
GL_CLAMP_TO_BORDER	特效边缘、透明边界处理	使用自定义颜色填充边缘

表格：环绕方式与应用场景对照

模式名称	应用场景示例	优点	缺点
GL_REPEAT	地面、草地贴图	简单易用，自动循环	容易看出重复边界
GL_MIRRORED_REPEAT	镜面反射、水面	无缝拼接，视觉更自然	纹理需支持镜像处理
GL_CLAMP_TO_EDGE	模型边缘、UI贴图	保持边缘清晰，无变形	边缘部分可能不协调
GL_CLAMP_TO_BORDER	透明贴图、特效贴图	可控性强，适合定制化	需要手动设置边缘颜色

mermaid流程图：纹理坐标越界处理流程

graph TD
    A[纹理坐标超出[0,1]] --> B{环绕模式}
    B -->|GL_REPEAT| C[循环纹理]
    B -->|GL_MIRRORED_REPEAT| D[镜像翻转]
    B -->|GL_CLAMP_TO_EDGE| E[限制到边缘]
    B -->|GL_CLAMP_TO_BORDER| F[使用指定颜色填充]

通过本章的学习，你应该已经掌握了如何配置纹理的过滤方式、使用MIP映射优化纹理渲染质量，以及设置纹理的环绕模式来处理UV越界情况。这些参数设置在实际项目中至关重要，不仅影响视觉效果，也关系到程序的性能与稳定性。下一章我们将深入讲解纹理坐标的定义与在着色器中的处理方式，进一步完善纹理贴图的全流程知识体系。

4. 纹理坐标定义与着色器处理

在OpenGL中，纹理贴图的核心在于如何定义纹理坐标，并在着色器中进行处理。纹理坐标（通常称为UV坐标）决定了顶点如何映射到纹理图像上。这一过程涉及到顶点数据的组织、着色器变量的声明与传递、以及最终在片段着色器中使用采样器进行颜色采样。

本章将从纹理坐标的定义开始，逐步深入到顶点着色器和片段着色器中如何处理这些坐标，并通过完整的代码示例展示如何实现纹理贴图的着色器程序。

4.1 纹理坐标的定义与传递

4.1.1 UV坐标的数学表示与映射方式

纹理坐标通常用两个浮点数表示，分别为U和V，取值范围为[0, 1]。U轴从左到右，V轴从下到上。例如，一个2D纹理的左下角对应(0, 0)，右上角对应(1, 1)。

在三维模型中，每个顶点都关联一组纹理坐标，用于指定该顶点在纹理图像上的位置。当多个顶点共享相同的纹理坐标时，可以实现纹理的重复、镜像等效果。

坐标点	U 值	V 值	说明
左下角	0.0	0.0	纹理图像左下角
右下角	1.0	0.0	纹理图像右下角
左上角	0.0	1.0	纹理图像左上角
右上角	1.0	1.0	纹理图像右上角

说明 ：以上为标准的纹理坐标映射方式。开发者可以根据需要对坐标进行变换，如旋转、缩放等。

4.1.2 在顶点属性中添加纹理坐标数据

为了将纹理坐标传入着色器，我们需要将其作为顶点属性的一部分。通常顶点数据结构包含位置、颜色、法线、纹理坐标等多个属性。

// 顶点结构体定义（C++示例）
struct Vertex {
    float position[3];  // 3D坐标
    float texCoords[2]; // 纹理坐标
};

顶点数组的组织方式如下：

Vertex vertices[] = {
    {{-0.5f, -0.5f, 0.0f}, {0.0f, 0.0f}},  // 左下角
    {{ 0.5f, -0.5f, 0.0f}, {1.0f, 0.0f}},  // 右下角
    {{ 0.5f,  0.5f, 0.0f}, {1.0f, 1.0f}},  // 右上角
    {{-0.5f,  0.5f, 0.0f}, {0.0f, 1.0f}}   // 左上角
};

逻辑分析 ：
- 每个顶点携带两个属性：位置坐标和纹理坐标。
- 纹理坐标按照[0.0, 1.0]范围定义，与纹理图像的宽高一一对应。
- 该结构适用于VBO（顶点缓冲对象）和VAO（顶点数组对象）的数据传递。

4.1.3 使用VBO和VAO传递纹理坐标

创建VBO和VAO是高效传递顶点数据的关键步骤。以下是创建流程：

GLuint VBO, VAO;
glGenVertexArrays(1, &VAO);
glGenBuffers(1, &VBO);

glBindVertexArray(VAO);

glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

// 位置属性
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, sizeof(Vertex), (void*)0);
glEnableVertexAttribArray(0);

// 纹理坐标属性
glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE, sizeof(Vertex), (void*)offsetof(Vertex, texCoords));
glEnableVertexAttribArray(1);

glBindVertexArray(0); // 解绑VAO

参数说明 ：
- glVertexAttribPointer ：设置顶点属性指针。
- 第一个参数 0 表示位置属性索引， 1 表示纹理坐标属性索引。
- sizeof(Vertex) 表示每个顶点的字节大小。
- (void*)offsetof(Vertex, texCoords) 用于计算纹理坐标在结构体中的偏移量。

4.2 顶点着色器中的纹理坐标处理

4.2.1 in变量与out变量的声明与传递

在顶点着色器中，我们需要声明输入变量接收纹理坐标，并将其传递给片段着色器：

#version 330 core
layout (location = 0) in vec3 aPos;
layout (location = 1) in vec2 aTexCoords;

out vec2 TexCoords;

void main() {
    gl_Position = vec4(aPos, 1.0);
    TexCoords = aTexCoords; // 传递纹理坐标到片段着色器
}

逐行分析 ：
- in vec3 aPos 和 in vec2 aTexCoords 分别接收顶点位置和纹理坐标。
- out vec2 TexCoords 是输出变量，用于传递给片段着色器。
- TexCoords = aTexCoords 将纹理坐标直接传递给下一阶段。

4.2.2 纹理坐标的插值与变换

OpenGL会在光栅化阶段自动对顶点之间的纹理坐标进行插值，使得每个片段都能获得一个平滑的纹理坐标。

在顶点着色器中也可以对纹理坐标进行变换，例如缩放、旋转等：

TexCoords = aTexCoords * 2.0; // 纹理坐标放大2倍，纹理重复

4.2.3 多纹理坐标通道的使用

当使用多个纹理时，可以声明多个纹理坐标通道：

layout (location = 1) in vec2 aTexCoords1;
layout (location = 2) in vec2 aTexCoords2;

out vec2 TexCoords1;
out vec2 TexCoords2;

void main() {
    gl_Position = vec4(aPos, 1.0);
    TexCoords1 = aTexCoords1;
    TexCoords2 = aTexCoords2;
}

说明 ：
- 适用于多纹理混合（如法线贴图与漫反射贴图）的场景。
- 每个纹理坐标通道可以对应不同的纹理采样器。

4.3 片段着色器中的纹理采样

4.3.1 sampler2D类型的使用与绑定

在片段着色器中，我们使用 sampler2D 类型来引用纹理对象：

#version 330 core
out vec4 FragColor;

in vec2 TexCoords;

uniform sampler2D ourTexture;

void main() {
    FragColor = texture(ourTexture, TexCoords);
}

参数说明 ：
- sampler2D 是纹理采样器类型。
- texture 函数根据纹理坐标从纹理中采样颜色。

4.3.2 texture函数的调用与颜色采样

texture(sampler, coords) 函数是采样纹理的核心函数：

vec4 color = texture(ourTexture, TexCoords);

逻辑分析 ：
- sampler ：纹理采样器绑定的纹理单元。
- coords ：由顶点着色器插值得到的纹理坐标。
- 返回值为该纹理坐标对应的颜色值（vec4）。

4.3.3 多纹理混合与颜色叠加实现

当需要混合多个纹理时，可以使用多个 sampler2D 变量：

uniform sampler2D texture1;
uniform sampler2D texture2;

void main() {
    vec4 color1 = texture(texture1, TexCoords);
    vec4 color2 = texture(texture2, TexCoords);
    FragColor = mix(color1, color2, 0.5); // 50%混合
}

说明 ：
- mix(a, b, t) ：线性混合函数，t为混合比例（0~1）。
- 可用于实现纹理叠加、透明度混合等效果。

4.4 实现纹理贴图的完整着色器代码示例

4.4.1 顶点着色器代码结构分析

#version 330 core
layout (location = 0) in vec3 aPos;
layout (location = 1) in vec2 aTexCoords;

out vec2 TexCoords;

void main() {
    gl_Position = vec4(aPos, 1.0);
    TexCoords = aTexCoords;
}

结构分析 ：
- 定义了两个输入属性：顶点位置和纹理坐标。
- 输出纹理坐标到片段着色器。
- 设置顶点位置为齐次坐标。

4.4.2 片段着色器代码结构分析

#version 330 core
out vec4 FragColor;

in vec2 TexCoords;

uniform sampler2D ourTexture;

void main() {
    FragColor = texture(ourTexture, TexCoords);
}

结构分析 ：
- 接收插值后的纹理坐标。
- 使用 sampler2D 采样器进行纹理采样。
- 最终输出颜色值。

4.4.3 编译、链接与使用着色器程序

以下是C++代码中加载、编译并使用上述着色器的流程：

GLuint vertexShader = glCreateShader(GL_VERTEX_SHADER);
glShaderSource(vertexShader, 1, &vertexShaderSource, NULL);
glCompileShader(vertexShader);

GLuint fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
glShaderSource(fragmentShader, 1, &fragmentShaderSource, NULL);
glCompileShader(fragmentShader);

GLuint shaderProgram = glCreateProgram();
glAttachShader(shaderProgram, vertexShader);
glAttachShader(shaderProgram, fragmentShader);
glLinkProgram(shaderProgram);

glUseProgram(shaderProgram);

绑定纹理 ：

glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, textureID);
glUniform1i(glGetUniformLocation(shaderProgram, "ourTexture"), 0);

流程图 ：

graph TD
    A[顶点数据准备] --> B[创建VBO和VAO]
    B --> C[加载着色器源码]
    C --> D[编译顶点着色器]
    D --> E[编译片段着色器]
    E --> F[链接着色器程序]
    F --> G[绑定纹理]
    G --> H[使用着色器绘制]

小结

本章系统讲解了OpenGL中纹理贴图的核心流程，包括纹理坐标的定义、在顶点和片段着色器中的处理方式，以及完整的着色器代码实现。通过本章内容，开发者可以掌握如何将纹理坐标传递到着色器中，并在片段着色器中进行采样与混合，从而实现高质量的纹理贴图效果。下一章将在此基础上，通过完整的实战流程演示如何在OpenGL中实现纹理贴图的全流程渲染。

5. OpenGL纹理贴图完整流程实战

在本章中，我们将结合前几章的理论知识，逐步实现一个完整的OpenGL纹理贴图流程。通过本章的学习，你将掌握如何从零开始搭建一个支持纹理贴图的渲染环境，并实现多纹理混合与动态切换效果。

5.1 准备环境与依赖库

5.1.1 GLFW与GLAD的初始化流程

为了创建OpenGL上下文和窗口，我们使用GLFW库。而GLAD则用于加载OpenGL函数指针。以下是初始化GLFW和GLAD的基本代码：

#include <glad/glad.h>
#include <GLFW/glfw3.h>

int main() {
    // 初始化GLFW
    glfwInit();
    glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 4); // OpenGL 4.6
    glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 6);
    glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);

    // 创建窗口
    GLFWwindow* window = glfwCreateWindow(800, 600, "Texture Mapping Demo", NULL, NULL);
    if (!window) {
        std::cerr << "Failed to create GLFW window" << std::endl;
        glfwTerminate();
        return -1;
    }

    glfwMakeContextCurrent(window);

    // 初始化GLAD
    if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress)) {
        std::cerr << "Failed to initialize GLAD" << std::endl;
        return -1;
    }

    return 0;
}

说明 ： glfwWindowHint 用于设置OpenGL版本和核心模式。 glfwMakeContextCurrent 将窗口上下文设置为当前线程的上下文。 gladLoadGLLoader 加载OpenGL函数指针。

5.1.2 创建窗口与上下文环境

在上述代码中，我们已经完成了窗口的创建与上下文绑定。接下来，我们还需要设置视口（viewport）：

glViewport(0, 0, 800, 600);
glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);

void framebuffer_size_callback(GLFWwindow* window, int width, int height) {
    glViewport(0, 0, width, height);
}

说明 ： glViewport 设置渲染区域大小； glfwSetFramebufferSizeCallback 设置窗口大小变化时的回调函数，确保视口自动调整。

5.1.3 加载和编译着色器程序

我们使用简单的顶点和片段着色器来处理纹理。以下是顶点着色器 vertex_shader.glsl ：

#version 460 core
layout (location = 0) in vec3 aPos;
layout (location = 1) in vec2 aTexCoord;

out vec2 TexCoord;

void main() {
    gl_Position = vec4(aPos, 1.0);
    TexCoord = aTexCoord;
}

片段着色器 fragment_shader.glsl ：

#version 460 core
in vec2 TexCoord;
out vec4 FragColor;

uniform sampler2D texture1;

void main() {
    FragColor = texture(texture1, TexCoord);
}

加载并编译着色器的代码如下：

GLuint vertexShader = glCreateShader(GL_VERTEX_SHADER);
glShaderSource(vertexShader, 1, &vertexShaderSource, NULL);
glCompileShader(vertexShader);

GLuint fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
glShaderSource(fragmentShader, 1, &fragmentShaderSource, NULL);
glCompileShader(fragmentShader);

GLuint shaderProgram = glCreateProgram();
glAttachShader(shaderProgram, vertexShader);
glAttachShader(shaderProgram, fragmentShader);
glLinkProgram(shaderProgram);

glDeleteShader(vertexShader);
glDeleteShader(fragmentShader);

说明 ： glCreateShader 创建着色器对象； glShaderSource 设置着色器源码； glCompileShader 编译着色器； glLinkProgram 链接着色器程序。

5.2 构建几何图形与纹理映射

5.2.1 创建矩形或立方体顶点数据

我们以一个矩形为例，定义其顶点位置和纹理坐标：

float vertices[] = {
    // positions          // texture coords
     1.0f,  1.0f, 0.0f,   1.0f, 1.0f, // top right
     1.0f, -1.0f, 0.0f,   1.0f, 0.0f, // bottom right
    -1.0f, -1.0f, 0.0f,   0.0f, 0.0f, // bottom left
    -1.0f,  1.0f, 0.0f,   0.0f, 1.0f  // top left 
};
unsigned int indices[] = {
    0, 1, 2,
    2, 3, 0
};

5.2.2 配置顶点属性指针

我们使用VBO和VAO来管理顶点数据：

unsigned int VBO, VAO, EBO;
glGenVertexArrays(1, &VAO);
glGenBuffers(1, &VBO);
glGenBuffers(1, &EBO);

glBindVertexArray(VAO);

glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, 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);

说明 ： glVertexAttribPointer 定义顶点属性布局，其中位置偏移量为0和3 * sizeof(float)。

5.2.3 将纹理绑定到几何体表面

使用 stb_image 加载纹理图像：

int width, height, nrChannels;
unsigned char* data = stbi_load("container.jpg", &width, &height, &nrChannels, 0);
if (data) {
    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);
}
stbi_image_free(data);

说明 ： stbi_load 用于加载图像文件； glTexImage2D 将图像数据上传到GPU； glGenerateMipmap 生成MIP映射。

绑定纹理到着色器：

glUseProgram(shaderProgram);
glUniform1i(glGetUniformLocation(shaderProgram, "texture1"), 0);

说明 ： glUniform1i 设置纹理单元编号，这里绑定到纹理单元0。

5.3 实现纹理贴图的完整渲染循环

5.3.1 主渲染循环的结构与流程

主循环中不断清空颜色缓冲、绑定纹理、绘制图形并交换缓冲区：

while (!glfwWindowShouldClose(window)) {
    glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
    glClear(GL_COLOR_BUFFER_BIT);

    glUseProgram(shaderProgram);
    glBindTexture(GL_TEXTURE_2D, texture);
    glBindVertexArray(VAO);
    glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);

    glfwSwapBuffers(window);
    glfwPollEvents();
}

说明 ： glDrawElements 使用索引缓冲绘制图形； glfwSwapBuffers 交换双缓冲； glfwPollEvents 处理输入事件。

5.3.2 每帧的纹理状态更新与绘制

可以在主循环中添加动态逻辑，比如键盘控制纹理切换或动画效果：

if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS)
    glfwSetWindowShouldClose(window, true);

5.3.3 清理资源与退出流程

在程序退出前，应释放所有OpenGL资源：

glDeleteVertexArrays(1, &VAO);
glDeleteBuffers(1, &VBO);
glDeleteBuffers(1, &EBO);
glDeleteProgram(shaderProgram);
glDeleteTextures(1, &texture);

glfwTerminate();

说明 ： glDeleteTextures 删除纹理对象； glfwTerminate 清理GLFW资源。

5.4 多纹理与纹理混合实战

5.4.1 同时加载并绑定多个纹理

加载第二张纹理：

unsigned int texture2;
glGenTextures(1, &texture2);
glBindTexture(GL_TEXTURE_2D, texture2);
// 设置纹理参数...
data = stbi_load("awesomeface.png", &width, &height, &nrChannels, 0);
if (data) {
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, data);
    glGenerateMipmap(GL_TEXTURE_2D);
}
stbi_image_free(data);

5.4.2 使用uniform变量切换纹理单元

在着色器中定义两个纹理：

uniform sampler2D texture1;
uniform sampler2D texture2;

在CPU端设置纹理单元：

glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, texture1);
glUniform1i(glGetUniformLocation(shaderProgram, "texture1"), 0);

glActiveTexture(GL_TEXTURE1);
glBindTexture(GL_TEXTURE_2D, texture2);
glUniform1i(glGetUniformLocation(shaderProgram, "texture2"), 1);

5.4.3 实现纹理融合与切换动画效果

在片段着色器中进行纹理混合：

void main() {
    FragColor = mix(texture(texture1, TexCoord), texture(texture2, TexCoord), 0.5);
}

说明 ： mix 函数实现线性插值混合，0.5 表示各占一半。

你也可以通过动态uniform传入混合因子，实现纹理切换动画：

float mixFactor = sin(glfwGetTime()) / 2.0f + 0.5f;
glUniform1f(glGetUniformLocation(shaderProgram, "mixFactor"), mixFactor);

在片段着色器中：

uniform float mixFactor;

void main() {
    FragColor = mix(texture(texture1, TexCoord), texture(texture2, TexCoord), mixFactor);
}

说明 ：通过 glfwGetTime() 获取时间，计算出随时间变化的混合因子，实现动态纹理切换效果。

本章通过实战演示了从环境搭建到纹理贴图全流程的实现过程，涵盖了从顶点数据配置、纹理加载与绑定、着色器编写到多纹理混合的完整步骤。下一章我们将深入探讨纹理过滤、MIP映射优化等内容，敬请期待。

本文还有配套的精品资源，点击获取

简介：OpenGL是计算机图形学中常用的图形API，用于创建和操作三维图形。本“OpenGL纹理贴图简单例子”通过一个完整的示例程序，讲解如何使用纹理贴图技术将图像映射到3D模型表面，以增强图形的真实感和细节表现。内容涵盖纹理对象的创建、图像加载、纹理坐标设置、参数配置、绑定流程以及着色器中的纹理采样，帮助初学者掌握OpenGL纹理贴图的核心流程，并为构建复杂3D场景打下基础。

本文还有配套的精品资源，点击获取