OpenGL--纹理

最新推荐文章于 2023-04-02 16:23:10 发布
最新推荐文章于 2023-04-02 16:23:10 发布
阅读量445 收藏
点赞数
分类专栏： OpenGL 文章标签： OpenGL 纹理

目录(?)[+]

一、 纹理

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

第一个参数指定了纹理目标；我们使用的是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
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
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

二、 加载与创建纹理

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

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

2. 生成纹理

创建纹理ID

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

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

glBindTexture(GL_TEXTURE_2D, texture);
   
   
  • 1

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

glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, image);
   
   
  • 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

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

SOIL_free_image_data(image);
glBindTexture(GL_TEXTURE_2D, 0);
   
   
  • 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

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

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

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

#version 330 core
layout(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

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

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

#version 330 core
in 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

我们使用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
4. 纹理单元

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

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

glActiveTexture(GL_TEXTURE0); //在绑定纹理之前先激活纹理单元
glBindTexture(GL_TEXTURE_2D, texture);
   
   
  • 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

最终输出颜色现在是两个纹理的结合。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

注意，我们使用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);

// Shaders
const 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;//两种shader
GLuint texContainer, texAwesomeface;//纹理id
float 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

效果： 
注意按上下方向键可以看到长方形的笑脸和木箱的混合比例不一样。木箱居中，边缘向上下左右拉伸。 
这里写图片描述

WYN的养生之道
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
OpenGL纹理详解
水上漂的专栏
05-08 5880
OpenGL纹理详解 现实生活中，纹理最通常的作用是装饰我们的物体模型，它就像是贴纸一样贴在物体表面，使得物体表面拥有图案。但实际上在OpenGL中，纹理的作用不仅限于此，它可以用来存储大量的数据，一个典型的例子就是利用纹理存储地形信息。 纹理对象和参数 现代OpenGL中，纹理对象和顶点数组对象（VAO）及缓存对象（VBO）一样，需要调用glGenTextures函数生成。 生成纹理对象 同样的，纹理对象需要进行绑定。OpenGL中纹理可以分为1D，2...
OpenGL：纹理基础总结
yangchuankai's blog
12-15 1688
当前光栅位置：     当前光栅位置就是开始绘制下一幅位图/图像的屏幕位置。  //左下角 glRasterPos2f(GLfloat x, GLfloat y); glRasterPos3f(GLfloat x, GLfloat y, GLfloat z);     1、4版本中，glWindowsPos*()作为glRasterPos*()的替代品，它用窗口坐标指定当前光栅位置，不必把
【OpenGL学习】texture
miyazono_的博客
01-18 2158
学习纹理的使用
LearnOpenGL学习笔记4：纹理
键盘春秋的博客
08-13 1524
一、 纹理1. 基础纹理 纹理是一个2D图片（甚至也有1D和3D的纹理），它可以用来添加物体的细节。除了图像以外，纹理也可以被用来储存大量的数据，这些数据可以发送到着色器上。 纹理坐标 纹理坐标(Texture Coordinate)，用来标明该从纹理图像的哪个部分采样（译注：采集片段颜色）。纹理坐标在x和y轴上，范围为0到1之间（注意我们使用的是2D纹理图像）。纹理坐标起始于(0,
OpenGl ES---纹理
liyaoliy的博客
08-23 1576
opengl es
【OpenGL】OpenGL入门之纹理（Texture）
YangMax1的博客
03-04 9736
目录   在此之前，我们已经可以为每个顶点添加颜色来增加图形的细节，从而创建出有趣的图像。但是，如果想让图形看起来更真实，我们就必须有足够多的顶点，从而指定足够多的颜色。这将会产生很多额外开销，因为每个模型都会需求更多的顶点，每个顶点又需求一个颜色属性。   由此我们使用纹理(Texture) 进行处理。纹理是一个2D图片（甚至也有1D和3D的纹理），它可以用来添加物体的细节。因为我们可以在一张图片上插入非常多的细节，这样就可以让物体非常精细而不用指定额外的顶点。 ...
opengl-terrain
04-01
建造Linux git clone https://github.com/vigdail/opengl-terrain cd opengl-terrain mkdir build cmake ../ && make 路线图 基于Perlin噪声的景观生成 使用高度图纹理在计算着色器中进行法线计算 在计算着色器中...
opengl编程glsl-纹理
12-12
opengl编程入门，glsl语言的hello world，着色器，glsl语言简介
OpenGL-SkyBox.zip
05-19
在Visual Studio 2015上基于OpenGL实现颜色纹理贴图和天空盒。 这次实验我们主要学习如何绘制带有平面纹理的立方体，以及运用立方体贴图实现的天空盒。实验要求： 1. 平面纹理（之前实验的基础上，在立方体贴上纹理...
python-opengl-tutorial：基于PyOpenGL的Python opengl-tutorial
02-03
tu_02_texture_without_normal：带纹理的基本渲染。 原始教程=> tu_03_loadobj：从wavefont obj文件加载网格信息： 原始教程=> tu_04_vbo：使用VBO 原始教程=> tu_05_input：使用键盘和鼠标添加视口控件原始...
texture-opengl.rar_OPENGL 纹理
09-23
windows 环境下vc++平台编写的opengl纹理贴图源码
OpenGL:纹理
肖云鹤的博客
04-02 1688
OpenGL:纹理
第四课，OpenGL的纹理
Elsa的迷弟
07-21 935
头文件 #include "stb_image.h" 用于对不同格式图片的读取。 添加纹理坐标数据 纹理坐标为载入纹理的范围位置，即图片的宽高范围都在0~1之间，根据填入的小数来确定纹理载入的位置 GLfloat vertices[] = { //location（顶点坐标） color texture coords(纹理坐标) -1.0f, 0.0f, 0.0f, 1.0f, 0.0f, 0.0f, 0.0f, 1.0f, //左
《OpenGL宝典》--纹理
Elsa的迷弟
03-07 1184
正常情况，我们只会在0.0~1.0之间指定纹理坐标，如果纹理坐标在此范围外，OpenGL会根据采样器对象中指定的当前纹理环绕模式方式进行设置。使用的是未归一化的坐标直接访问纹理中的纹素，不执行任何形式的过滤和插值操作，坐标范围为实际载入纹理图像的宽和高。使用如下函数开辟纹理空间时，设置levels的值将确定该纹理有多少层。每个纹理都有一个默认采样参数，当没有采样器对象绑定到相应纹理时，则将使用默认采样参数。2D数组纹理的层之间不能进行过滤操作（线性过滤等），但2D数组纹理拥有比3D纹理更大的空间。
LearnOpenGL 入门—纹理
xiji333的博客
01-22 803
文章目录写在前面纹理纹理环绕方式纹理过滤多级渐远纹理stb_image.h生成纹理应用纹理纹理单元总结练习 写在前面   原文链接。原文应该是github上的一个项目，本文主要用来记录一些知识点和自己遇到的问题。 纹理   我们已经了解到，我们可以为每个顶点添加颜色来增加图形的细节，从而创建出有趣的图像。但是，如果想让图形看起来更真实，我们就必须有足够多的顶点，从而指定足够多的颜色。这将会产生很多额外开销，因为每个模型都会需求更多的顶点，每个顶点又需求一个颜色属性。   艺术家和程序员更喜欢使用纹理(Tex
opengl纹理
weixin_30287169的博客
11-12 381
6月10日 OpenGL红宝书【纹理映射】（2） 9.4 纹理对象使用纹理对象来存储纹理数据的步骤:1) 生成纹理对象名称2) 将纹理对象绑定到纹理数据(包括图像数据数组和纹理属性), 即创建纹理对象.3) 如果OpenGL实现高性能纹理工作集, 应检查是否有足够的空间来存储所有的纹理对象. 如没有足够空间, 应设置每个纹理对象的优先级, 以确保最常用的纹理留在工作集中...
LearnOpenGL - 纹理
shuan9999的博客
04-19 324
纹理 ©shuan9999 1. 了解纹理 简而言之就是一张图，把他附着在一个物体上，让这个物体看起来更逼真。说白了，OpenGL不就是为了渲染更真实的物体，让虚拟的物体在屏幕上看起来更像一个真实的物件，但是前面说了，计算机绘制就会画点线三角形，而那些特别复杂的形状无非就是成千上万的三角形组成的，完了我们在这每一个三角形上上一上色，贴上贴纸让这个物体看起来更真实，而这些贴纸就是纹理。其实就是让...
OpenGL入门（四）之纹理Texture
苦逼的程序猿☺
09-02 2634
纹理是一个2D图片（甚至也有1D和3D的纹理），它可以用来添加物体的细节！我们可以在一张图片上插入非常多的细节，这样就可以让物体非常精细而不用指定额外的顶点，来减小开销！为了能够把纹理映射(Map)到三角形上，我们需要指定三角形的每个顶点各自对应纹理的哪个部分。这样每个顶点就会关联着一个纹理坐标(Texture Coordinate)，用来标明该从纹理图像的哪个部分采样（采集片段颜色）。之后在图形的其它片段上进行片段插值(Fragment Interpolation)。
第二十四章 opengl之高级OpenGL（抗锯齿）
Re_view的博客
03-23 765
第二十四章 opengl之高级OpenGL（抗锯齿）
计算机图形学-OpenGL-绘制国旗
最新发布
06-09
可以使用OpenGL的绘制多边形功能来绘制五角星，也可以使用纹理映射来贴上五角星的图案。 6. 交换前后缓冲区，显示绘制结果。 以下是一个简单的OpenGL绘制国旗的示例代码： ``` #include void display() { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值