LearnOpenGL学习笔记4：纹理

来源：互联网发布：空手道自学软件编辑：程序博客网时间：2024/05/20 06:37

一、纹理

1. 基础

纹理
纹理是一个2D图片（甚至也有1D和3D的纹理），它可以用来添加物体的细节。除了图像以外，纹理也可以被用来储存大量的数据，这些数据可以发送到着色器上。
纹理坐标
纹理坐标(Texture Coordinate)，用来标明该从纹理图像的哪个部分采样（译注：采集片段颜色）。纹理坐标在x和y轴上，范围为0到1之间（注意我们使用的是2D纹理图像）。纹理坐标起始于(0, 0)，也就是纹理图片的左下角，终始于(1, 1)，即纹理图片的右上角。
采样
使用纹理坐标获取纹理颜色叫做采样(Sampling)。

2. 纹理环绕方式

对超出坐标范围（0,1）的坐标的处理为纹理环绕方式。OpenGL默认的行为是重复这个纹理图像（我们基本上忽略浮点纹理坐标的整数部分）。

环绕方式(Wrapping)描述GL_REPEAT对纹理的默认行为。重复纹理图像。GL_MIRRORED_REPEAT和GL_REPEAT一样，但每次重复图片是镜像放置的。GL_CLAMP_TO_EDGE纹理坐标会被约束在0到1之间，超出的部分会重复纹理坐标的边缘，产生一种边缘被拉伸的效果。GL_CLAMP_TO_BORDER超出的坐标为用户指定的边缘颜色。

这里写图片描述
前面提到的每个选项都可以使用glTexParameter*函数对单独的一个坐标轴设置（s、t（如果是使用3D纹理那么还有一个r）它们和x、y、z是等价的）：

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_MIRRORED_REPEAT);glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_MIRRORED_REPEAT);1
2
1
2

第一个参数指定了纹理目标；我们使用的是2D纹理，因此纹理目标是GL_TEXTURE_2D。第二个参数需要我们指定设置的选项与应用的纹理轴。我们打算配置的是WRAP选项，并且指定S和T轴。最后一个参数需要我们传递一个环绕方式，在这个例子中OpenGL会给当前激活的纹理设定纹理环绕方式为GL_MIRRORED_REPEAT。
如果我们选择GL_CLAMP_TO_BORDER选项，我们还需要指定一个边缘的颜色。这需要使用glTexParameter函数的fv后缀形式，用GL_TEXTURE_BORDER_COLOR作为它的选项，并且传递一个float数组作为边缘的颜色值：

float borderColor[] = { 1.0f, 1.0f, 0.0f, 1.0f };glTexParameterfv(GL_TEXTURE_2D, GL_TEXTURE_BORDER_COLOR, borderColor);1
2
1
2

3. 纹理过滤

邻近过滤
GL_NEAREST（Nearest Neighbor Filtering）是OpenGL默认的纹理过滤方式。当设置为GL_NEAREST的时候，OpenGL会选择中心点最接近纹理坐标的那个像素。
线性过滤
GL_LINEAR（ (Bi)linear Filtering）它会基于纹理坐标附近的纹理像素，计算出一个插值，近似出这些纹理像素之间的颜色。
这里写图片描述
我们需要使用glTexParameter*函数指定过滤方式。这段代码看起来会和纹理环绕方式的设置很相似：

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);1
2
1
2

4. 多级渐远纹理

多级渐远纹理(Mipmap)简单来说就是一系列的纹理图像，后一个纹理图像是前一个的二分之一。多级渐远纹理背后的理念很简单：距观察者的距离超过一定的阈值，OpenGL会使用不同的多级渐远纹理，即最适合物体的距离的那个。

在渲染中切换多级渐远纹理级别(Level)时，OpenGL在两个不同级别的多级渐远纹理层之间会产生不真实的生硬边界。就像普通的纹理过滤一样，切换多级渐远纹理级别时你也可以在两个不同多级渐远纹理级别之间使用NEAREST和LINEAR过滤。为了指定不同多级渐远纹理级别之间的过滤方式，你可以使用下面四个选项中的一个代替原有的过滤方式：

过滤方式描述GL_NEAREST_MIPMAP_NEAREST使用最邻近的多级渐远纹理来匹配像素大小，并使用邻近插值进行纹理采样GL_LINEAR_MIPMAP_NEAREST使用最邻近的多级渐远纹理级别，并使用线性插值进行采样GL_NEAREST_MIPMAP_LINEAR在两个最匹配像素大小的多级渐远纹理之间进行线性插值，使用邻近插值进行采样GL_LINEAR_MIPMAP_LINEAR在两个邻近的多级渐远纹理之间使用线性插值，并使用线性插值进行采样

我们使用glTexParameteri将过滤方式设置为前面四种提到的方法之一：

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR);glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);1
2
1
2

二、加载与创建纹理

写自己的图像加载器虽然不难，但仍然挺麻烦的，而且如果要支持更多文件格式呢？你就不得不为每种你希望支持的格式写加载器了。
另一个解决方案也许是一种更好的选择，使用一个支持多种流行格式的图像加载库来为我们解决这个问题。比如说我们要用的SOIL库。

1. SOIL

到这里下载最新的http://www.lonesock.net/soil.html
通过工程文件生成你自己VS对应版本的的.lib文件。你还要添加src文件夹里面的文件到你的includes文件夹。

要使用SOIL加载图片，我们需要使用它的SOIL_load_image函数：

int width, height;unsigned char* image = SOIL_load_image("container.jpg", &width, &height, 0, SOIL_LOAD_RGB);1
2
1
2

函数首先需要输入图片文件的路径。然后需要两个int指针作为第二个和第三个参数，SOIL会分别返回图片的宽度和高度到其中。后面我们在生成纹理的时候会用图像的宽度和高度。第四个参数指定图片的通道(Channel)数量，但是这里我们只需留为0。最后一个参数告诉SOIL如何来加载图片：我们只关注图片的RGB值。结果会储存为一个很大的char/byte数组。

2. 生成纹理

创建纹理ID

GLuint texture;glGenTextures(1, &texture);1
2
1
2

glGenTextures函数首先需要输入生成纹理的数量，然后把它们储存在第二个参数的GLuint数组中（我们的例子中只是一个单独的GLuint）。
绑定纹理

glBindTexture(GL_TEXTURE_2D, texture);1
1

生成纹理
纹理可以通过glTexImage2D来生成：

glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, image);1
1

第一个参数指定了纹理目标(Target)。设置为GL_TEXTURE_2D意味着会生成与当前绑定的纹理对象在同一个目标上的纹理（任何绑定到GL_TEXTURE_1D和GL_TEXTURE_3D的纹理不会受到影响）。
第二个参数为纹理指定多级渐远纹理的级别，如果你希望单独手动设置每个多级渐远纹理的级别的话。这里我们填0，也就是基本级别。
第三个参数告诉OpenGL我们希望把纹理储存为何种格式。我们的图像只有RGB值，因此我们也把纹理储存为RGB值。
第四个和第五个参数设置最终的纹理的宽度和高度。我们之前加载图像的时候储存了它们，所以我们使用对应的变量。
下个参数应该总是被设为0（历史遗留问题）。
第七第八个参数定义了源图的格式和数据类型。我们使用RGB值加载这个图像，并把它们储存为char(byte)数组，我们将会传入对应值。
最后一个参数是真正的图像数据。

当调用glTexImage2D时，当前绑定的纹理对象就会被附加上纹理图像。然而，目前只有基本级别(Base-level)的纹理图像被加载了，如果要使用多级渐远纹理，我们必须手动设置所有不同的图像（不断递增第二个参数）。或者，直接在生成纹理之后调用glGenerateMipmap。这会为当前绑定的纹理自动生成所有需要的多级渐远纹理。

glGenerateMipmap(GL_TEXTURE_2D);1
1

释放图像的内存并解绑纹理对象

SOIL_free_image_data(image);glBindTexture(GL_TEXTURE_2D, 0);1
2
1
2

3. 应用纹理

我们需要告知OpenGL如何采样纹理，所以我们必须使用纹理坐标更新顶点数据：

GLfloat vertices[] = {    //     ---- 位置 ----       ---- 颜色 ----     - 纹理坐标 -    0.5f,  0.5f, 0.0f,   1.0f, 0.0f, 0.0f,   1.0f, 1.0f,   // 右上    0.5f, -0.5f, 0.0f,   0.0f, 1.0f, 0.0f,   1.0f, 0.0f,   // 右下    -0.5f, -0.5f, 0.0f,   0.0f, 0.0f, 1.0f,   0.0f, 0.0f,   // 左下    -0.5f,  0.5f, 0.0f,   1.0f, 1.0f, 0.0f,   0.0f, 1.0f    // 左上};1
2
3
4
5
6
7
1
2
3
4
5
6
7

由于我们添加了一个额外的顶点属性，我们必须告诉OpenGL我们新的顶点格式：
这里写图片描述

glVertexAttribPointer(2, 2, GL_FLOAT, GL_FALSE, 8 * sizeof(GLfloat), (GLvoid*)(6 * sizeof(GLfloat))); glEnableVertexAttribArray(2);1
1

接着我们需要调整顶点着色器使其能够接受顶点坐标为一个顶点属性，并把坐标传给片段着色器：

#version 330 corelayout(location = 0) in vec3 position;layout(location = 1) in vec3 color;layout(location = 2) in vec2 texCoord;out vec3 ourColor;out vec2 TexCoord;void main(){    gl_Position = vec4(position, 1.0f);    ourColor = color;    TexCoord = texCoord;}1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
5
6
7
8
9
10
11
12
13
14

片段着色器应该把输出变量TexCoord作为输入变量。

片段着色器也应该能访问纹理对象，但是我们怎样能把纹理对象传给片段着色器呢？GLSL有一个供纹理对象使用的内建数据类型，叫做采样器(Sampler)，它以纹理类型作为后缀，比如sampler1D、sampler3D，或在我们的例子中的sampler2D。我们可以简单声明一个uniform sampler2D把一个纹理添加到片段着色器中，稍后我们会把纹理赋值给这个uniform。

#version 330 corein vec3 ourColor;in vec2 TexCoord;out vec4 color;uniform sampler2D ourTexture;void main(){    color = texture(ourTexture, TexCoord);}1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12

我们使用GLSL内建的texture函数来采样纹理的颜色，它第一个参数是纹理采样器，第二个参数是对应的纹理坐标。texture函数会使用之前设置的纹理参数对相应的颜色值进行采样。这个片段着色器的输出就是纹理的（插值）纹理坐标上的(过滤后的)颜色。

现在只剩下在调用glDrawElements之前绑定纹理了，它会自动把纹理赋值给片段着色器的采样器：

glBindTexture(GL_TEXTURE_2D, texture);glBindVertexArray(VAO);glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);glBindVertexArray(0);1
2
3
4
1
2
3
4

4. 纹理单元

使用glUniform1i，我们可以给纹理采样器分配一个位置值，这样的话我们能够在一个片段着色器中设置多个纹理。一个纹理的位置值通常称为一个纹理单元(Texture Unit)。一个纹理的默认纹理单元是0，它是默认的激活纹理单元，所以教程前面部分我们没有分配一个位置值。

纹理单元的主要目的是让我们在着色器中可以使用多于一个的纹理。通过把纹理单元赋值给采样器，我们可以一次绑定多个纹理，只要我们首先激活对应的纹理单元。就像glBindTexture一样，我们可以使用glActiveTexture激活纹理单元，传入我们需要使用的纹理单元：

glActiveTexture(GL_TEXTURE0); //在绑定纹理之前先激活纹理单元glBindTexture(GL_TEXTURE_2D, texture);1
2
1
2

激活纹理单元之后，接下来的glBindTexture函数调用会绑定这个纹理到当前激活的纹理单元，纹理单元GL_TEXTURE0默认总是被激活，所以我们在前面的例子里当我们使用glBindTexture的时候，无需激活任何纹理单元。

OpenGL至少保证有16个纹理单元供你使用，也就是说你可以激活从GL_TEXTURE0到GL_TEXTRUE15。它们都是按顺序定义的，所以我们也可以通过GL_TEXTURE0 + 8的方式获得GL_TEXTURE8，这在当我们需要循环一些纹理单元的时候会很有用。
我们仍然需要编辑片段着色器来接收另一个采样器。这应该相对来说非常直接了：

#version 330 core...uniform sampler2D ourTexture1;uniform sampler2D ourTexture2;void main(){    color = mix(texture(ourTexture1, TexCoord), texture(ourTexture2, TexCoord), 0.2);}1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10

最终输出颜色现在是两个纹理的结合。GLSL内建的mix函数需要接受两个值作为参数，并对它们根据第三个参数进行线性插值。。如果第三个值是0.0，它会返回第一个输入；如果是1.0，会返回第二个输入值。0.2会返回80%的第一个输入颜色和20%的第二个输入颜色，即返回两个纹理的混合色。

我们现在需要载入并创建另一个纹理，方法和载入第一个纹理一样。
为了使用第二个纹理（以及第一个），我们必须改变一点渲染流程，先绑定两个纹理到对应的纹理单元，然后定义哪个uniform采样器对应哪个纹理单元：

glActiveTexture(GL_TEXTURE0);glBindTexture(GL_TEXTURE_2D, texture1);glUniform1i(glGetUniformLocation(ourShader.Program, "ourTexture1"), 0);glActiveTexture(GL_TEXTURE1);glBindTexture(GL_TEXTURE_2D, texture2);glUniform1i(glGetUniformLocation(ourShader.Program, "ourTexture2"), 1);glBindVertexArray(VAO);glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);glBindVertexArray(0);1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10

注意，我们使用glUniform1i设置uniform采样器的位置值，或者说纹理单元。通过glUniform1i的设置，我们保证每个uniform采样器对应着正确的纹理单元。
转载请注明出处：http://blog.csdn.net/ylbs110/article/details/52198578

三、实例

代码：

#include <iostream>using namespace std;// GLEW#define GLEW_STATIC#include <GL/glew.h>// GLFW#include <GLFW/glfw3.h>// SOIL#include <SOIL\SOIL.h>#include "Shader.h"const GLuint WIDTH = 800, HEIGHT = 600;void key_callback(GLFWwindow* window, int key, int scancode, int action, int mode);GLuint loadTexture(string fileName, GLint REPEAT, GLint FILTER);// Shadersconst GLchar* vertexShaderSource = "#version 330 core\n""layout (location = 0) in vec3 position;\n"//顶点数据传入的坐标"layout (location = 1) in vec3 color;\n"//顶点数据传入的颜色"layout (location = 2) in vec2 texCoord;\n"//顶点数据传入的颜色"uniform vec4 offset;\n""uniform float mixPar;\n""out vec3 Color;\n""out vec2 TexCoord;\n""out vec4 vertexColor;\n"//将顶点坐标作为颜色传入片段着色器，测试所得效果"out float MixPar;\n""void main()\n""{\n""gl_Position = vec4(position.x, position.y, position.z, 1.0)+offset;\n""vertexColor=gl_Position;\n""Color=color;\n""TexCoord=texCoord;\n""MixPar=mixPar;\n""}\0";const GLchar* fragmentShaderSourceOrange = "#version 330 core\n""out vec4 color;\n""in vec4 vertexColor;\n""in vec3 Color;\n""in vec2 TexCoord;\n""uniform sampler2D ourTexture;\n""void main()\n""{\n""color =texture(ourTexture, TexCoord)+vertexColor;\n"//将顶点颜色和坐标转换的颜色进行混合"}\n\0";const GLchar* fragmentShaderSourceYellow = "#version 330 core\n""out vec4 color;\n""in vec4 vertexColor;\n""in vec3 Color;\n""in vec2 TexCoord;\n""in float MixPar;\n""uniform sampler2D ourTexture1;\n""uniform sampler2D ourTexture2;\n""void main()\n""{\n""color =mix(texture(ourTexture1, TexCoord),texture(ourTexture2, vec2(TexCoord.x,1-TexCoord.y)),MixPar)+vec4(Color, 1.0f)+vertexColor;\n"//合成两张纹理并对第二张纹理进行翻转操作,混合比例由上下键控制"}\n\0";Shader yellowShader,orangeShader;//两种shaderGLuint texContainer, texAwesomeface;//纹理idfloat key_UD=0.5f;//混合比例GLuint VBO1, VAO1;GLuint VBO2, VAO2, EBO2;void shaderInit() {    yellowShader = Shader(vertexShaderSource, fragmentShaderSourceYellow);    orangeShader = Shader(vertexShaderSource, fragmentShaderSourceOrange);}void textureInit() {    texContainer = loadTexture("container.jpg", GL_CLAMP_TO_EDGE, GL_LINEAR);    texAwesomeface = loadTexture("awesomeface.png", GL_MIRRORED_REPEAT, GL_NEAREST);}GLuint loadTexture(string fileName,GLint REPEAT, GLint FILTER) {    //创建纹理    GLuint texture;    glGenTextures(1, &texture);    //绑定纹理    glBindTexture(GL_TEXTURE_2D, texture);    // 为当前绑定的纹理对象设置环绕、过滤方式    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, REPEAT);    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, REPEAT);    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, FILTER);    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, FILTER);    //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;    unsigned char* image = SOIL_load_image(fileName.c_str(), &width, &height, 0, SOIL_LOAD_RGB);    // 生成纹理    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, image);    glGenerateMipmap(GL_TEXTURE_2D);    //释放图像的内存并解绑纹理对象    SOIL_free_image_data(image);    glBindTexture(GL_TEXTURE_2D, 0);    return texture;}void vertexObjectInit() {    //不使用索引缓冲对象用两个三角形绘制一个梯形    // 设置顶点缓存和属性指针    GLfloat vertices1[] = {        //位置                    //颜色：黄色        -0.5f, 0.2f, 0.0f,      1.0f, 1.0f, 0.0f,       0.0f, 0.0f,// BottomLeft          0.5f, 0.2f, 0.0f,       1.0f, 1.0f, 0.0f,       2.0f, 0.0f,// BottomRight         -0.2f,  0.5f, 0.0f,     1.0f, 1.0f, 0.0f,       0.0f, 2.0f,// TopLeft         0.5f, 0.2f, 0.0f,       1.0f, 1.0f, 0.0f,       2.0f, 0.0f,// BottomRight         -0.2f,  0.5f, 0.0f,     1.0f, 1.0f, 0.0f,       0.0f, 2.0f,// TopLeft        0.2f,  0.5f, 0.0f,      1.0f, 1.0f, 0.0f,       2.0f, 2.0f// TopRight    };    //创建索引缓冲对象    glGenBuffers(1, &VBO1);    glGenVertexArrays(1, &VAO1);    glBindVertexArray(VAO1);    // 把顶点数组复制到缓冲中供OpenGL使用    glBindBuffer(GL_ARRAY_BUFFER, VBO1);    glBufferData(GL_ARRAY_BUFFER, sizeof(vertices1), vertices1, GL_STATIC_DRAW);    // 位置属性    glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(GLfloat), (GLvoid*)0);    glEnableVertexAttribArray(0);    // 颜色属性    glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(GLfloat), (GLvoid*)(3 * sizeof(GLfloat)));    glEnableVertexAttribArray(1);    glVertexAttribPointer(2, 2, GL_FLOAT, GL_FALSE, 8 * sizeof(GLfloat), (GLvoid*)(6 * sizeof(GLfloat)));    glEnableVertexAttribArray(2);    glBindBuffer(GL_ARRAY_BUFFER, 0);// 这个方法将顶点属性指针注册到VBO作为当前绑定顶点对象，然后我们就可以安全的解绑    glBindVertexArray(0);// 解绑 VAO (这通常是一个很好的用来解绑任何缓存/数组并防止奇怪错误的方法)                         // 使用索引缓冲对象用两个三角形绘制一个长方形    GLfloat vertices[] = {        //位置                    //颜色：橙色        -0.5f, 0.2f, 0.0f,      0.5f, 0.25f, 0.1f,      -1.0f, 2.0f,// TopLeft          0.5f, 0.2f, 0.0f,       0.5f, 0.25f, 0.1f,      2.0f, 2.0f,// TopRight         -0.5f,  -0.5f, 0.0f,    0.5f, 0.25f, 0.1f,      -1.0f, -1.0f,// BottomLeft           0.5f,  -0.5f, 0.0f,     0.5f, 0.25f, 0.1f,      2.0f, -1.0f// BottomRight     };    GLuint indices[] = {        0,1,2,        1,2,3    };    glGenBuffers(1, &VBO2);    glGenBuffers(1, &EBO2);    glGenVertexArrays(1, &VAO2);    glBindVertexArray(VAO2);    glBindBuffer(GL_ARRAY_BUFFER, VBO2);    glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO2);    glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);    glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(GLfloat), (GLvoid*)0);    glEnableVertexAttribArray(0);    glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(GLfloat), (GLvoid*)(3 * sizeof(GLfloat)));    glEnableVertexAttribArray(1);    glVertexAttribPointer(2, 2, GL_FLOAT, GL_FALSE, 8 * sizeof(GLfloat), (GLvoid*)(6 * sizeof(GLfloat)));    glEnableVertexAttribArray(2);    glBindBuffer(GL_ARRAY_BUFFER, 0);    glBindVertexArray(0);}int main(){    //初始化GLFW    glfwInit();    glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);    glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);    glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);    glfwWindowHint(GLFW_RESIZABLE, GL_FALSE);    //创建窗口对象    GLFWwindow* window = glfwCreateWindow(WIDTH, HEIGHT, "LearnOpenGL", nullptr, nullptr);    if (window == nullptr)    {        std::cout << "Failed to create GLFW window" << std::endl;        glfwTerminate();        return -1;    }    glfwMakeContextCurrent(window);    //注册键盘回调    glfwSetKeyCallback(window, key_callback);    //初始化GLEW    glewExperimental = GL_TRUE;    if (glewInit() != GLEW_OK)    {        std::cout << "Failed to initialize GLEW" << std::endl;        return -1;    }    //告诉OpenGL渲染窗口尺寸大小    int width, height;    glfwGetFramebufferSize(window, &width, &height);    glViewport(0, 0, width, height);    //初始化并绑定shaders    shaderInit();    //初始化textures    textureInit();    //初始化顶点对象数据    vertexObjectInit();    //让窗口接受输入并保持运行    while (!glfwWindowShouldClose(window))    {        //检查事件        glfwPollEvents();        //渲染指令        glClearColor(0.2f, 0.3f, 0.3f, 1.0f);        glClear(GL_COLOR_BUFFER_BIT);        //设置根据时间变换的x，y偏移值，最终效果为圆周运动        GLfloat timeValue = glfwGetTime();        GLfloat offsetx = (sin(timeValue) / 2) + 0.5;        GLfloat offsety = (cos(timeValue) / 2) + 0.5;        glBindTexture(GL_TEXTURE_2D, texContainer);        //绘制梯形        orangeShader.Use();        // 更新uniform值        GLint vertexColorLocation = glGetUniformLocation(orangeShader.Program, "offset");        glUniform4f(vertexColorLocation, offsetx, offsety, 0.0f, 1.0f);        glBindVertexArray(VAO1);        glDrawArrays(GL_TRIANGLES, 0, 6);        glBindVertexArray(0);        //绘制长方形             yellowShader.Use();        //绑定两张贴图        glActiveTexture(GL_TEXTURE0);        glBindTexture(GL_TEXTURE_2D, texContainer);        glUniform1i(glGetUniformLocation(yellowShader.Program, "ourTexture1"), 0);        glActiveTexture(GL_TEXTURE1);        glBindTexture(GL_TEXTURE_2D, texAwesomeface);        glUniform1i(glGetUniformLocation(yellowShader.Program, "ourTexture2"), 1);        // 更新uniform值        //设置运动轨迹        GLint vertexorangeLocation = glGetUniformLocation(yellowShader.Program, "offset");        glUniform4f(vertexorangeLocation, offsetx, offsety, 0.0f, 1.0f);        //设置混合比例        GLint mixPar = glGetUniformLocation(yellowShader.Program, "mixPar");        glUniform1f(mixPar, key_UD);        glBindVertexArray(VAO2);        glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);        glBindVertexArray(0);        //交换缓冲        glfwSwapBuffers(window);    }    // Properly de-allocate all resources once they've outlived their purpose    glDeleteVertexArrays(1, &VAO1);    glDeleteBuffers(1, &VBO1);    glDeleteVertexArrays(1, &VAO2);    glDeleteBuffers(1, &VBO2);    //释放资源    glfwTerminate();    return 0;}void key_callback(GLFWwindow* window, int key, int scancode, int action, int mode){    // 当用户按下ESC键,我们设置window窗口的WindowShouldClose属性为true    // 关闭应用程序    if (key == GLFW_KEY_ESCAPE && action == GLFW_PRESS)        glfwSetWindowShouldClose(window, GL_TRUE);    if (key == GLFW_KEY_UP&& action == GLFW_PRESS)//按下UP键增加混合比例        key_UD = key_UD + 0.1f;    if (key == GLFW_KEY_DOWN&& action == GLFW_PRESS)//按下DOWN减小混合比例        key_UD = key_UD - 0.1f;}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
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