效果展示

1. 加载并创建一个纹理
   

2. 通过纹理单元使用多个纹理
   

准备条件

1. 首先已经通过【OpenGL】使用OpenGL创建窗口使用OpenGL创建出了窗口并且启动了渲染循环
2. 通过【OpenGL】绘制三角形掌握了创建着色器程序以及在渲染循环中绘制OpenGL图元（三角形）
3. 通过【OpenGL】着色器（Shader）的使用掌握通过Uniform从应用程序中直接给片段着色器发送数据以及通过顶点着色器向片段着色器发送多个数据

加载、创建并生成一个纹理

顶点着色器

/*
*	顶点着色器
*   这里的顶点着色器要能够接受顶点坐标为一个顶点属性，并把坐标传给片段着色器
*/
#version 330 core
layout (location = 0) in vec3 aPos;     // 位置变量的属性位置值为0
layout (location = 1) in vec3 aColor;	// 颜色变量的属性位置值为1
layout (location = 2) in vec2 aTexCoord;// 纹理坐标变量的属性位置值为2

out vec3 ourColor;
out vec2 TexCoord;

void main()
{
	gl_Position = vec4(aPos, 1.0);
	ourColor = aColor;
	TexCoord = vec2(aTexCoord.x, aTexCoord.y);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

片段着色器

/*
*	片段着色器
*	Uniform是一种从CPU的应用向GPU的着色器发送数据的方式，但uniform和顶点属性有些不同。首先，uniform是全局的（Global）。全局意味着uniform变量必须在每个着色器程序对象中都是独一无二的，而且
*	它可以被着色器程序的任意着色器在任意阶段访问。第二，无论你把uniform值设置成什么，uniform会一直保存它们的数据，直到它们被重置或更新。
*
*	Note:如果你声明了一个uniform却在GLSL代码中没用过，编译器会静默移除这个变量，导致最后编译出的版本中并不会包含它，这可能导致几个非常麻烦的错误，记住这点！
*/

/*
*	片段着色器会把顶点着色器的输出变量TexCoord作为输入变量
*/
#version 330 core
out vec4 FragColor;

in vec3 ourColor;
in vec2 TexCoord;

/*
*	片段着色器也应该能够访问纹理对象，但是我们怎样能把纹理对象传给片段着色器呢？GLSL有一个供纹理对象使用的内建数据类型，叫做采样器（Sampler），它以纹理类型作为后缀，比如sampler2D。
*   我们可以简单声明一个uniform sampler2D把一个纹理添加到片段着色器中，稍后我们会把纹理赋值给这个uniform
*/
// texture sampler纹理采样
uniform sampler2D texture1; // 在OpenGL程序代码中设定这个纹理采样的变量

void main()
{
	/*
	*	我们使用GLSL内建的texture函数来采样纹理的颜色，它第一个参数是纹理采样器，第二个参数是对应的纹理坐标。texture函数会使用之前设置的纹理参数对相应的颜色值进行采样。这个片段着色器的输出就是纹理的（插值）
	*	纹理坐标上的（过滤后的）颜色
	*   
	*/
	FragColor = texture(texture1, TexCoord)
	/*
	*	我们还可以把得到的纹理颜色与顶点颜色混合，来获得更有趣的效果。我们只需要把纹理颜色与顶点颜色在片段着色器中相乘来混合二者的颜色：
	*/
	//FragColor = texture(texture1, TexCoord)* vec4(ourColor, 1.0);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

纹理的加载、创建与生成

/*
* 因为OpenGL是一个标准/规范，具体的实现是由驱动开发商针对特定显卡实现的。
* 由于OpenGL驱动版本众多，它大多数函数的位置都无法在编译时确定下来，需要运行时查询。
* 所以任务就落在了开发者身上，开发者需要在运行时获取函数地址并将其保存在一个函数指针中，供以后使用。
* 
* glad是一个开源的库，它能解决我们上面提到的获取函数地址并将其保存在一个函数指针中供以后使用繁琐的问题
*/
#include 
/*
* GLFW是一个专门针对OpenGL的C语言库，它提供了一些渲染物体所需的最低限度的接口。它允许用户创造OpenGL上下文，定义窗口参数以及处理用户输入。
*/
#include 
#include "shader_s.h"

/*
*   使用纹理之前要做的第一件事就是把它们加载到我们的应用中。纹理图像可能被存储为各种各样的格式，每种都有自己的数据结构和排列，所以我们如何才能把这些图像加载到应用中呢？
*   一个解决方案是选一个需要的文件格式，比如.PNG，然后自己写一个图像加载器，把图像转化为字节序列。写自己的图像加载器虽然不难，但仍然挺麻烦的，而且如果要支持更多文件格式呢？
*   你就不得不为每种你希望支持的格式写加载器了。
*   使用一个支持多种流行格式的图像加载库来为我们解决这个问题。我们要使用的就是stb_image.h库
*/
#include "stb_image.h"

#include 

// 处理所有输入: 查询GLFW是否在此框架内按下/释放相关键，并做出相应反应
// ---------------------------------------------------------------------------------------------------------
void processInput(GLFWwindow* window)
{
    if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS)
        glfwSetWindowShouldClose(window, true);
}

// glfw: 每当窗口大小改变（由操作系统或用户调整大小）时，这个回调函数就会执行
// ---------------------------------------------------------------------------------------------
void framebuffer_size_callback(GLFWwindow* window, int width, int height)
{
    // 确保视口与新窗口尺寸匹配：请注意，宽度和高度将明显大于视网膜显示器上指定的宽度和高度
    // 此方法提供的数据进行视口变换；标准化设备坐标会变成屏幕空间坐标
    glViewport(0, 0, width, height);
}

// 设置
const unsigned int SCR_WIDTH = 800;
const unsigned int SCR_HEIGHT = 600;

/*
*   我们已经了解到，我们可以为每个顶点添加颜色来增加图形的细节，从而创建出有趣的图像。但是，如果想让图形看起来更真实，我们就必须有足够多的顶点，从而指定足够多的颜色。这将会产生很多额外开销，
*   因为每个模型都会需求更多的顶点，每个顶点又需求一个颜色属性。
* 
*   艺术家和程序员更喜欢使用纹理（Texture）。纹理是一个2D图片（甚至也有1D和3D的纹理），它可以用来添加物体的细节；
*/

int main()
{
    // glfw: 初始化和配置
    // ------------------------------
    glfwInit();
    glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);// 设置主版本号
    glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);// 设置次版本号
    glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);// 使用的是核心模式

#ifdef __APPLE__
    glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GL_TRUE);// MacOXS系统才需要设置
#endif

    // glfw 创建窗口对象
    // --------------------
    GLFWwindow* window = glfwCreateWindow(SCR_WIDTH, SCR_HEIGHT, "LearnOpenGL", NULL, NULL);
    if (window == NULL)
    {
        std::cout << "Failed to create GLFW window" << std::endl;
        glfwTerminate();
        return -1;
    }
    glfwMakeContextCurrent(window);
    glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);

    // glad: 加载所有OpenGL函数指针
    // ---------------------------------------
    if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress))
    {
        std::cout << "Failed to initialize GLAD" << std::endl;
        return -1;
    }

    // 构建并编译我们的着色器程序
    // ------------------------------------
    Shader ourShader("4.1.texture.vs", "4.1.texture.fs");

    /*
    *   为了能够把纹理映射到图形上，我们需要指定图形的每个顶点各自对应纹理的哪个部分。这样每个顶点就会关联着一个纹理坐标（Texture Coordinate），用来标明该从纹理图像的哪个部分采样。
    * 
    *   使用纹理坐标获取纹理颜色叫做采样（Sampling）
    */

    // 设置顶点数据（和缓冲区）并配置顶点属性
    // ------------------------------------------------------------------
    /*
    *   添加了一个额外的顶点属性
    */
    float vertices[] = {
        // positions位置          // colors颜色           // texture coords纹理坐标
         0.5f,  0.5f, 0.0f,   1.0f, 0.0f, 0.0f,   1.0f, 1.0f, // top right
         0.5f, -0.5f, 0.0f,   0.0f, 1.0f, 0.0f,   1.0f, 0.0f, // bottom right
        -0.5f, -0.5f, 0.0f,   0.0f, 0.0f, 1.0f,   0.0f, 0.0f, // bottom left
        -0.5f,  0.5f, 0.0f,   1.0f, 1.0f, 0.0f,   0.0f, 1.0f  // top left 
    };
    unsigned int indices[] = {
        0, 1, 3, // first triangle 
        1, 2, 3  // second triangle
    };
    // 顶点缓冲对象 + 顶点数据对象 + 索引缓冲对象
    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, 8 * sizeof(float), (void*)0);
    glEnableVertexAttribArray(0);
    // 颜色属性
    glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(3 * sizeof(float)));
    glEnableVertexAttribArray(1);
    // 纹理坐标属性
    glVertexAttribPointer(2, 2, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(6 * sizeof(float)));
    glEnableVertexAttribArray(2);


    // 加载并创建一个纹理
    // -------------------------
    /*
    *   glGenTextures函数首先需要输入生成纹理的数量，然后把它们储存在第二个参数的unsigned int数组中
    */
    unsigned int texture;
    glGenTextures(1, &texture);
    /*
    *   像其他对象一样，我们需要绑定它，让之后任何的纹理指令都可以配置当前绑定的纹理。
    */
    glBindTexture(GL_TEXTURE_2D, texture); // 所有即将进行的 GL_TEXTURE_2D操作现在都会对该纹理现象产生影响


    /*
    *   纹理坐标的范围通常是从（0，0）到（1，1），那如果我们把纹理坐标设置在范围之外会发生什么？OpenGL默认的行为是重复这个纹理图像，但OpenGL提供了更多的选择
    *   GL_REPEAT：对纹理的默认行为。重复纹理图像。
    *   GL_MIRRORED_REPEAT：和GL_REPEAT一样，但每次重复图片是镜像放置的。
    *   GL_CLAMP_TO_EDGE：纹理坐标会被约束在0到1之间，超出的部分会重复纹理坐标的边缘，产生一种边缘被拉伸的效果。
    *   GL_CLAMP_TO_BORDER：超出的坐标为用户指定的边缘颜色。
    */

    // 设置纹理环绕的方式（对单独的一个坐标轴设置（s、t；如果是3D纹理那么还有一个r，它们和x、y、z是等价的））
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);	// 设置纹理环绕为 GL_REPEAT (对纹理的默认行为。重复纹理图像)
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);

    /*
    *   纹理坐标不依赖于分辨率（Resolution），它可以是任意浮点值，所以OpenGL需要知道怎样将纹理像素（Texture Pixel）映射到纹理坐标。当你有一个很大的物体但是纹理的分辨率很低的时候这就变得很重要了。
    *   你可能已经猜到了，OpenGL也有对于纹理过滤（Texture Filtering）的选项。纹理过滤有很多个选项，但是现在我们只讨论最重要的两种：GL_NEAREST 和 GL_LINEAR
    * 
    *   Texture Pixel也叫Texel，你可以想象你打开一张.jpg格式图片，不断放大你会发现它是由无数像素点组成的，这个点就是纹理像素；注意不要和纹理坐标搞混，纹理坐标是你给模型顶点设置的那个数组，OpenGL以这个顶点
    *   的纹理坐标数据去查找纹理图像上的像素，然后进行采样提取纹理像素的颜色。
    * 
    *   GL_NEAREST产生了颗粒状的图案，我们能够清晰看到组成纹理的像素，而GL_LINEAR能够产生更平滑的图案，很难看出单个的纹理像素。
    *   当进行放大和缩小操作的时候可以设置纹理过滤的选项，比如你可以在纹理被缩小的时候使用邻近过滤，被放大时使用线性过滤，
    */

    /*
    *   有一个包含着上千物体的大房间，每个物体上都有纹理。有些物体会很远，但其纹理会拥有与近处物体同样高的分辨率。由于远处的物体可能只产生很少的片段，OpenGL从高分辨率纹理中为这些片段获取正确的颜色值就很困难，
    *   因为它需要对一个跨过纹理很大部分的片段只拾取一个纹理颜色。在小物体上这样会产生不真实的感觉，更不用说对它们使用高分辨率纹理浪费内存的问题了。
    * 
    *   OpenGL使用一种叫做多级渐远纹理（Mipmap）的概念来解决这个问题，它简单来说就是一系列的纹理图像，后一个纹理图像是前一个的二分之一。多级渐远纹理背后的理念很简单：距观察者的距离超过一定的阈值，OpenGL会使用
    *   不同的多级渐远纹理，即最适合物体的距离的那个。由于距离远，解析度不高也不会被用户注意到。同时，多级渐远纹理另一加分之处是它的性能非常好。
    * 
    *   多级渐远纹理的过滤方式：
    *   GL_NEAREST_MIPMAP_NEAREST：使用最邻近的多级渐远纹理来匹配像素大小，并使用邻近插值进行纹理采样
    *   GL_LINEAR_MIPMAP_NEAREST：使用最邻近的多级渐远纹理级别，并使用线性插值进行采样
    *   GL_NEAREST_MIPMAP_LINEAR：在两个最匹配像素大小的多级渐远纹理之间进行线性插值，使用邻近插值进行采样
    *   GL_LINEAR_MIPMAP_LINEAR：在两个邻近的多级渐远纹理之间使用线性插值，并使用线性插值进行采样
    */

    /*
    *   Note：
    *   一个常见的错误是，将放大过滤的选项设置为多级渐远纹理过滤选项之一。这样没有任何效果，因为多级渐远纹理主要是使用在纹理被缩小的情况下的：纹理放大不会使用
    *   多级渐远纹理，为放大过滤设置多级渐远纹理的选项会产生一个GL_INVALID_ENUM错误代码。
    */


    // 设置纹理的过滤方式
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
    // 加载图片，创建纹理以及生成多级渐远纹理
    int width, height, nrChannels;
    // The FileSystem::getPath(...) is part of the GitHub repository so we can find files on any IDE/platform; replace it with your own image path.
    /*
    *   stbi_load这个函数首先接受一个图像文件的位置作为输入。接下来它需要三个int作为它的第二、第三和第四个参数，stb_image.h将会用图像的宽度、高度和颜色通道的个数填充这三个变量。
    *   我们之后生成纹理的时候会用到的图像的宽度和高度的。
    */
    unsigned char* data = stbi_load("container.jpg", &width, &height, &nrChannels, 0);
    if (data)
    {
        /*
        *   纹理已经绑定了，我们可以使用前面载入的图片数据生成一个纹理了。纹理可以通过glTexImage2D来生成。
        *   参数解析：
        *   第一个参数指定了纹理目标（Target）。设置为GL_TEXTURE_2D意味着会生成与当前绑定的纹理对象在同一个目标上的纹理。
        *   第二个参数为纹理指定多级渐远纹理的级别，如果你希望单独手动设置每个多级渐远纹理的级别的话。这里我们填0，也就是基本级别
        *   第三个参数告诉OpenGL我们希望把纹理储存为何种格式。我们的图像只有RGB值，因此我们也把纹理储存为RGB值。
        *   第四个和第五个参数设置为最终的纹理的宽度和高度。我们之前加载图像的时候存储了它们，所以我们使用对应的变量。
        *   下个参数应该总是被设为0（历史遗留的问题）
        *   第七第八个参数定义了源图的格式和数据类型。我们使用RGB值加载这个图像，并把它们储存为char(byte)数组，我们将会传入对应值。
        *   最后一个参数是真正的图像数据
        * 
        */

        /*
        *   当调用glTexImage2D时，当前绑定的纹理对象就会被附加上纹理图像。然而，目前只有基本级别（Base-level）的纹理图像被加载了，如果要使用多级渐远纹理，我们必须手动设置所有不同的图像（不断递增第二个参数）。
        *   或者，直接在生成纹理之后调用glGenerateMipmap。这会为当前绑定的纹理自动生成所有需要的多级渐远纹理。
        */
        glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data);
        /*
        * 手工为每个纹理图像创建一系列多级渐远纹理很麻烦，幸好OpenGL有一个glGenerateMipmaps函数，在创建完一个纹理后调用它OpenGL就会承担接下来的所有工作了。
        */
        glGenerateMipmap(GL_TEXTURE_2D);
    }
    else
    {
        std::cout << "Failed to load texture" << std::endl;
    }
    /*
    *   生成了纹理和相应的多级渐远纹理后，释放图像的内存是一个很好的习惯。
    */
    stbi_image_free(data);


    // 渲染循环
    // -----------
    while (!glfwWindowShouldClose(window))
    {
        // 输入
        // -----
        processInput(window);

        // 渲染指令
        // ------
        glClearColor(0.2f, 0.3f, 0.3f, 1.0f); // 设置清空屏幕所用的颜色（此函数是一个状态设置函数）
        glClear(GL_COLOR_BUFFER_BIT);// 清空颜色缓冲（是一个状态使用函数）

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

        // 渲染容器
        ourShader.use();//激活着色器
        glBindVertexArray(VAO);
        glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);

        // glfw: 交换缓冲区和轮询IO事件（按键按下/释放、鼠标移动等）
        // -------------------------------------------------------------------------------
        glfwSwapBuffers(window);
        glfwPollEvents();
    }

    // 可选: 一旦资源超出其用途，就取消分配:
    // ------------------------------------------------------------------------
    glDeleteVertexArrays(1, &VAO);
    glDeleteBuffers(1, &VBO);
    glDeleteBuffers(1, &EBO);

    // glfw: 终止，清除所有先前分配的GLFW资源.
    // ------------------------------------------------------------------
    glfwTerminate();
    return 0;
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280

通过纹理单元使用多个纹理

顶点着色器

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

out vec3 ourColor;
out vec2 TexCoord;

void main()
{
	gl_Position = vec4(aPos, 1.0);
	ourColor = aColor;
	TexCoord = vec2(aTexCoord.x, aTexCoord.y);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

片段着色器

/*
*	为什么sampler2D变量是个uniform，却不用glUniform给它复制。使用glUniform1i，我们可以给纹理采样器分配一个位置值，这样的话我们能够在一个片段着色器中设置多个纹理。一个纹理的位置值通常称为一个
*	纹理单元（Texture Unit）。一个纹理的默认纹理单元是0，它是默认的激活纹理单元，所以前面部分我们没有分配一个位置值。
*
*	纹理单元的主要目的是让我们在着色器中可以使用多于一个的纹理。通过把纹理单元赋值给采样器，我们可以一次绑定多个纹理，只要我们首先激活对应的纹理单元。就像glBindTexture一样，我们可以使用glActiveTexture
*	激活纹理单元，传入我们需要使用的纹理单元
*/

/*
*	Note：
*	OpenGL至少保证有16个纹理单元供你使用，也就是说你可以激活从GL_TEXTURE0到GL_TEXTRUE15。它们都是按顺序定义的，所以我们也可以通过GL_TEXTURE0 + 8的方式获得GL_TEXTURE8，这在当我们需要循环一些纹理单元
*	的时候会很有用。
*/
#version 330 core
out vec4 FragColor;

in vec3 ourColor;
in vec2 TexCoord;

// texture samplers
uniform sampler2D texture1;
uniform sampler2D texture2;

void main()
{
	/*
	*	GLSL内建的mix函数需要接受两个值作为参数，并对它们根据第三个参数进行线性插值。如果第三个值是0.0，它会返回第一个输入；如果是1.0，会返回第二个输入值。0.2会返回80%的第一个输入颜色和20%的第二个输入颜色，
	*	即返回两个纹理的混合色。
	*/
	// 在两个纹理之间线性插值 (80% container, 20% awesomeface)
	FragColor = mix(texture(texture1, TexCoord), texture(texture2, TexCoord), 0.5);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

纹理单元的使用

/*
*   因为OpenGL是一个标准/规范，具体的实现是由驱动开发商针对特定显卡实现的。
*   由于OpenGL驱动版本众多，它大多数函数的位置都无法在编译时确定下来，需要运行时查询。
*   所以开发任务就落在了开发者身上，开发者需要在运行时获取函数地址并将其保存在一个函数指针中，供以后使用。
* 
*   glad是一个开源的库，它能解决我们上面提到的获取函数地址并将其保存在一个函数指针中供以后使用的问题。
*/
#include 
/*
*   GLFW是一个专门针对OpenGL的C语言库，它提供了一些渲染物体所需的最低限度的接口。它允许用户创造OpenGL上下文，定义窗口参数以及处理用户输入。
*/
#include 
/*
*   使用纹理之前要做的第一件事就是把它们加载到我们的应用中。纹理图像可能被存储为各种各样的格式，每种都有自己的数据结构和排列，所以我们如何才能把这些图像加载到应用中呢？
*   一个解决方案是选一个需要的文件格式，比如.PNG，然后自己写一个图像加载器，把图像转化为字节序列。写自己的图像加载器虽然不难，但仍然挺麻烦的，而且如果要支持更多文件格式呢？
*   你就不得不为每种你希望支持的格式写加载器了。
*   使用一个支持多种流行歌是的图像加载库来为我们解决这个问题。我们要使用的就是stb_image.h
*/
#include "stb_image.h"

#include "shader_s.h"

#include 


// 处理所有输入：查询GLFW是否在此框架内按下/释放相关键，并做出相应反应
// ---------------------------------------------------------------------------------------------------------
void processInput(GLFWwindow* window)
{
    if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS)
        glfwSetWindowShouldClose(window, true);
}

// glfw: 每当窗口大小改变（由操作系统或用户调整大小）时，这个函数回调就会执行
// ---------------------------------------------------------------------------------------------
void framebuffer_size_callback(GLFWwindow* window, int width, int height)
{
    // 确保视口与新窗口尺寸匹配：请注意，宽度和高度将明显大于视网膜显示器上指定的宽度和高度
    // 此方法提供的数据进行视口变换：标准化设备坐标会变成屏幕空间坐标
    glViewport(0, 0, width, height);
}

// 设置
const unsigned int SCR_WIDTH = 800;
const unsigned int SCR_HEIGHT = 600;

int main()
{
    // glfw: 初始化和配置
    // ------------------------------
    glfwInit();
    glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);// 设置主版本号
    glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);// 设置次版本号
    glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);// 使用的是核心模式

#ifdef __APPLE__
    glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GL_TRUE);// MacOXS系统才需要设置
#endif

    // glfw 创建窗口对象
    // --------------------
    GLFWwindow* window = glfwCreateWindow(SCR_WIDTH, SCR_HEIGHT, "LearnOpenGL", NULL, NULL);
    if (window == NULL)
    {
        std::cout << "Failed to create GLFW window" << std::endl;
        glfwTerminate();
        return -1;
    }
    glfwMakeContextCurrent(window);
    glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);

    // glad: 加载所有OpenGL函数指针
    // ---------------------------------------
    if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress))
    {
        std::cout << "Failed to initialize GLAD" << std::endl;
        return -1;
    }

    // 构建并编译我们的着色器程序
    // ------------------------------------
    Shader ourShader("4.2.texture.vs", "4.2.texture.fs");

    /*
    *   为了能够把纹理映射到图形上，我们需要指定图形的每个顶点各自对应纹理的哪个部分。这样每个顶点就会关联着一个纹理坐标（Texture Coordinate），用来标明该从纹理图像的哪个部分采样。
    * 
    *   使用纹理坐标获取纹理颜色叫做采样（Sampling）
    */

    // 设置顶点数据（和缓冲区）并配置顶点属性
    // ------------------------------------------------------------------
    /*
    *   添加了一个额外的顶点属性
    */
    float vertices[] = {
        // positions位置          // colors颜色           // texture coords纹理坐标
         0.5f,  0.5f, 0.0f,   1.0f, 0.0f, 0.0f,   1.0f, 1.0f, // top right
         0.5f, -0.5f, 0.0f,   0.0f, 1.0f, 0.0f,   1.0f, 0.0f, // bottom right
        -0.5f, -0.5f, 0.0f,   0.0f, 0.0f, 1.0f,   0.0f, 0.0f, // bottom left
        -0.5f,  0.5f, 0.0f,   1.0f, 1.0f, 0.0f,   0.0f, 1.0f  // top left 
    };
    unsigned int indices[] = {
        0, 1, 3, // first triangle
        1, 2, 3  // second triangle
    };
    // 顶点缓冲对象+顶点数组对象+索引缓冲对象
    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, 8 * sizeof(float), (void*)0);
    glEnableVertexAttribArray(0);
    // 颜色属性
    glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(3 * sizeof(float)));
    glEnableVertexAttribArray(1);
    // 纹理坐标属性
    glVertexAttribPointer(2, 2, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(6 * sizeof(float)));
    glEnableVertexAttribArray(2);


    // 加载并创建一个纹理
    // -------------------------
    /*
    *   glGenTextures函数首先需要输入生成纹理的数量，然后把它们储存在第二个参数的unsigned int数组中
    */
    unsigned int texture1, texture2;
    // 纹理 1
    // ---------
    glGenTextures(1, &texture1);
    /*
    *   像其他对象一样，我们需要绑定它，让之后任何的纹理指令都可以配置当前绑定的纹理。
    */
    glBindTexture(GL_TEXTURE_2D, texture1);// 所有即将进行的GL_TEXTURE_2D操作现在都会对纹理现象产生影响
    // 设置纹理环绕的方式（对单独的一个坐标轴设置（s、t：如果是3D纹理那么还有一个r，它们和x、y、z是等价的））
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);	// 设置纹理环绕为GL_REPEAT（对纹理的默认行为。重复纹理图像）
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);

    /*
    *   纹理坐标不依赖于分辨率（Resolution），它可以是任意浮点值，所以OpenGL需要知道怎样将纹理像素（Texture Pixel）映射到纹理坐标。当你有一个很大的物体但是纹理的分辨率很低的时候就变得很重要了。
    *   你可能已经猜到了，OpenGL也有对于纹理过滤（Texture Filtering）的选项。纹理过滤有很多个选项，但是现在我们只讨论最重要的两种：GL_NEAREST和GL_LINEAR
    * 
    *   Texture Pixel也叫Texel，你可以想象你打开一张.jpg格式图片，不断放大你会发现它是由无数像素点组成的，这个点就是纹理像素；注意不要和纹理坐标搞混，纹理坐标是你给模型顶点设置的那个数组，OpenGL以这个顶点
    *   的纹理坐标数据去查找纹理图像上的像素，然后进行采样提取纹理像素的颜色。
    * 
    *   GL_NEAREST产生了颗粒状的图案，我们能够清晰看到组成纹理的像素，而GL_LINEAR能够产生更平滑的图案，很难看出单个的纹理像素。
    *   当进行放大和缩小操作的时候可以设置纹理过滤的选项，比如你可以在纹理被缩小的时候使用邻近过滤，被放大时使用线性过滤。
    */

    /*
    *   有一个包含着上千物体的大房间，每个物体上都有纹理。有些物体会很远，但其纹理会拥有与近处物体同样高的分辨率。由于远处的物体可能只产生很少的片段，OpenGL从高分辨率纹理中为这些片段获取正确的颜色值就很困难。
    *   因为它需要对一个跨过纹理很大部分的片段只拾取一个纹理颜色。在小物体上这样会产生不真实的感觉，更不用说对它们使用高分辨率纹理浪费内存的问题了。
    * 
    *   OpenGL使用一种叫做多级渐远纹理（Mipmap）的概念来解决这个问题，它简单来说就是一系列的纹理图像，后一个纹理图像是前一个的二分之一。多级渐远纹理背后的理念很简单：距观察者的距离超过一定的阈值，OpenGL
    *   会使用不用的多级渐远纹理，即最适合物体的距离的那个。由于距离源，解析度不高也不会被用户注意到。同时，多级渐远纹理另一加分之处是它的性能非常好。
    * 
    *   多级渐远纹理的过滤方式：
    *   GL_NEAREST_MIPMAP_NEAREST：使用最邻近的多级渐远纹理来匹配像素大小，并使用邻近插值进行纹理采样
    *   GL_LINEAR_MIPMAP_NEAREST：使用最邻近的多级渐远纹理级别，并使用线性插值进行采样
    *   GL_NEAREST_MIPMAP_LINEAR：在两个最匹配像素大小的多级渐远纹理之间进行线性插值，使用邻近插值进行采样
    *   GL_LINEAR_MIPMAP_LINEAR：在两个邻近的多级渐远纹理之间使用线性插值，并使用线性插值进行采样
    */

    /*
    *   Note：
    *   一个常见的错误是，将放大过滤的选项设置为多级渐远纹理过滤选项之一。这样没有任何效果，因为多级渐远纹理主要是使用在纹理被缩小的情况下的：纹理放大不会使用多级渐远纹理，
    *   为放大过滤设置多级渐远纹理的选项会产生一个GL_INVALID_ENUM错误代码。
    */

    // 设置纹理的过滤方式
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
    // 加载图片，创建纹理以及生成多级渐远纹理
    int width, height, nrChannels;
    stbi_set_flip_vertically_on_load(true); // 告诉stb_image.h 在y轴上翻转加载的纹理
    // The FileSystem::getPath(...) is part of the GitHub repository so we can find files on any IDE/platform; replace it with your own image path.
    /*
    *   stbi_load这个函数首先接受一个图像文件的位置作为输入。接下来它需要三个int作为它的第二、第三和第四个参数，stb_image.h将会用图像的宽度、高度和颜色通道的个数填充这三个变量。
    *   我们之后生成纹理的时候会用到的图像的宽度和高度的。
    */
    unsigned char* data = stbi_load("container.jpg", &width, &height, &nrChannels, 0);
    if (data)
    {
        /*
        *   纹理已经绑定了，我们可以使用前面载入的图片数据生成一个纹理了。纹理可以通过glTexImage2D来生成。
        *   参数解析：
        *   第一个参数指定了纹理目标（Target）。设置为GL_TEXTURE_2D意味着会生成与当前绑定的纹理对象在同一个目标上的纹理。
        *   第二个参数为纹理指定多级渐远纹理的级别，如果你希望单独手动设置每个多级渐远纹理的级别的滑。这里我们添0，也就是基本级别
        *   第三个参数告诉OpenGL我们希望把纹理储存为何种格式。我们的图像只有RGB值，因此我们也把纹理储存为RGB值。
        *   第四个和第五个参数设置为最终的纹理的宽度和高度。我们之前加载图像的时候存储了它们，所以我们使用对应的变量。
        *   下个参数应该总是被设为0（历史遗留的问题）
        *   第七个第八个参数定义了源图的格式和数据类型。我们使用RGB值加载这个图像，并把它们储存为char（byte）数组，我们将会传入应对值。
        *   最后一个参数是真正的图像数据
        */

        /*
        *   当调用glTexImage2D时，当前绑定的纹理对象就会被附加上纹理图像。然而，目前只有基本级别（Base-level）的纹理图像被加载了，如果要使用多级渐远纹理，我们必须手动设置所有不同的图像（不断递增第二个参数）。
        *   或者，直接在生成纹理之后调用glGenerateMipmap。这会为当前绑定的纹理自动生成所有需要的多级渐远纹理。
        */
        glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data);
        /*
        * 手工为每个纹理图像创建一系列多级渐远纹理很麻烦，幸好OpenGL有一个glGenerateMipmaps函数，在创建完一个纹理后调用它OpenGL就会承担接下来的所有工作了。
        */
        glGenerateMipmap(GL_TEXTURE_2D);
    }
    else
    {
        std::cout << "Failed to load texture" << std::endl;
    }
    /*
    *   生成了纹理和相应的多级渐远纹理后，释放图像的内存是一个很好的习惯。
    */
    stbi_image_free(data);
    // 纹理 2
    // ---------
    glGenTextures(1, &texture2);
    glBindTexture(GL_TEXTURE_2D, texture2);
    // set the texture wrapping parameters
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);	// set texture wrapping to GL_REPEAT (default wrapping method)
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
    // set texture filtering parameters
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
    // load image, create texture and generate mipmaps
    data = stbi_load("awesomeface.png", &width, &height, &nrChannels, 0);
    if (data)
    {
        // note that the awesomeface.png has transparency and thus an alpha channel, so make sure to tell OpenGL the data type is of GL_RGBA
        glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, data);
        glGenerateMipmap(GL_TEXTURE_2D);
    }
    else
    {
        std::cout << "Failed to load texture" << std::endl;
    }
    stbi_image_free(data);

    // 告诉opengl每个采样器属于哪个纹理单元（只需执行一次）
    // -------------------------------------------------------------------------------------------
    ourShader.use(); // 在设置uniforms之前，不要忘记激活/使用着色器！
    // 或者手动设置，如下所示:
    glUniform1i(glGetUniformLocation(ourShader.ID, "texture1"), 0);
    // 或者通过纹理类进行设置
    ourShader.setInt("texture2", 1);



    // 渲染循环
    // -----------
    while (!glfwWindowShouldClose(window))
    {
        // 输入
        // -----
        processInput(window);

        // 渲染指令
        // ------
        glClearColor(0.2f, 0.3f, 0.3f, 1.0f);// 设置清空屏幕所用的颜色（此函数是一个状态设置函数）
        glClear(GL_COLOR_BUFFER_BIT);// 清空颜色缓冲（是一个状态使用函数）

        /*
        * 使用glActiveTexture激活纹理单元
        */

        // 在相应的纹理单元上绑定纹理
        glActiveTexture(GL_TEXTURE0); 
        glBindTexture(GL_TEXTURE_2D, texture1);
        glActiveTexture(GL_TEXTURE1);
        glBindTexture(GL_TEXTURE_2D, texture2);

        // 渲染容器
        ourShader.use();
        glBindVertexArray(VAO);
        glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);

        // glfw: 交换缓冲区和轮询IO事件（按键按下/释放、鼠标移动等）
        // -------------------------------------------------------------------------------
        glfwSwapBuffers(window);
        glfwPollEvents();
    }

    // 可选: 一旦资源超出其用途，就取消分配:
    // ------------------------------------------------------------------------
    glDeleteVertexArrays(1, &VAO);
    glDeleteBuffers(1, &VBO);
    glDeleteBuffers(1, &EBO);

    // glfw: 终止，清除所有先前分配的GLFW资源.
    // ------------------------------------------------------------------
    glfwTerminate();
    return 0;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303

参考资料

【1】LearnOpenGL