【(一)OpenGL入门】5.变换

目录

1.向量和矩阵

1-1.向量

1-2.向量的点乘

1-3.向量的叉乘

1-4.矩阵

1-5.矩阵的乘法

 1-6.矩阵的缩放   

1-7.矩阵的位移

1-8.矩阵的旋转

1-9.矩阵的组合

2.变换的代码实现

2-1.安装GLM库

2-2.代码实现-位移

2-3.代码实现-旋转和缩放

2-4旋转缩放箱子的完整代码

2-5.自动旋转并平移箱子的代码实现

3.课后练习

3-1

3-2


1.向量和矩阵

1-1.向量

        当我们需要改变动画中物体的位置时,就要把物体的顶点全部移动,难道我们要把顶点着色器中的数值一个一个去手动移动?显然不是,我们可以将每一个顶点都用向量表示,使用位移矩阵、缩放矩阵、旋转矩阵 对所有顶点进行操作,这些方法需要我们掌握一些几何学和线性代数的基础知识。

向量:有大小和方向的量,一个三维坐标下的向量表示方法如下:

                                                        

向量在二维坐标系中的表示如下图,每个向量都有自己的原点。

                        ​​​​​​​        ​​​​​​​        

如下图表示向量的加减法。向量的减法在我们想要获取两点的差时会非常有用。

        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        

        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        

向量在三维坐标系中的表示如下

        ​​​​​​​        ​​​​​​​        ​​​​​​​      

1-2.向量的点乘

        两个向量的点乘等于它们的数乘结果乘以两个向量之间夹角的余弦值。我们来看一下公式:

        

        其中模的计算方法(勾股定理):

                

        如果两个都是单位向量,那么就可以通过计算结果推断出两个向量是否垂直或平行(90度的余弦值是0,0度的余弦值是1),使用单位向量上面公式就可以简化为下面的。

        

        单位向量的表示如下:

                

在图形学中,我们主要通过点乘来判断单位向量的夹角,平行or垂直。

如下是向量的点乘例子,计算方法是将对应分量逐个相乘,然后再把所得积相加来。

1-3.向量的叉乘

        

        叉乘只在3D空间中有定义,它需要两个不平行向量作为输入,生成一个正交于两个输入向量的第三个向量。如果输入的两个向量也是正交的,那么叉乘之后将会产生3个互相正交的向量(即得到一个三维空间坐标系),这将会非常有用。

                        ​​​​​​​        ​​​​​​​                

        不同于其他运算,如果你没有钻研过线性代数,可能会觉得叉乘很反直觉,所以只记住公式就没问题啦(记不住也没问题)。下面你会看到两个正交向量A和B叉积: 

        上面等式右边的每一行表达式如何快速记忆?且看以下拆解:

     

1-4.矩阵

        简单来说矩阵就是一个矩形的数字、符号或表达式数组。矩阵中每一项叫做矩阵的元素(Element)。下面是一个2×3矩阵的例子:

                                                

        矩阵可以通过(i, j)进行索引,i是行,j是列,这就是上面的矩阵叫做2×3矩阵的原因(3列2行,也叫做矩阵的维度(Dimension))。这与你在索引2D图像时的(x, y)相反,获取4的索引是(2, 1)(第二行,第一列)(译注:如果是图像索引应该是(1, 2),先算列,再算行)。

        矩阵与标量数据的加减数乘运算如下:

        

            

                

        矩阵与矩阵之间的加减运算如下:

                

1-5.矩阵的乘法

(1)只有当左侧矩阵的列数与右侧矩阵的行数相等,两个矩阵才能相乘。

(2)M×N矩阵 乘以 N×K 得到一个 M×K的矩 阵,如2*3的矩阵乘以3*5的矩阵会得到2*5的矩阵。

(3)矩阵相乘不遵守交换律(Commutative),也就是说A⋅B≠B⋅A。

        矩阵的乘法是一系列乘法和加法组合的结果,它使用到了左侧矩阵的行和右侧矩阵的列。如下是一个两行两列矩阵的算法:

        如下是三行三列矩阵相乘,如果我们只想得出第二行相乘第三列的结果,可以直接这也算:

        矩阵与向量相乘,也可以看做是矩阵与一个N×1列的矩阵相乘,如下就是一个单位矩阵与四分量向量的乘法:

                       

        那么上面的矩阵计算结果还是向量本身,这样做有什么意义呢?

 1-6.矩阵的缩放   

        比如我们要将向量v=(3,2)沿着x轴缩放0.5,沿着y轴缩放2.0那么该怎么做?

        我们的方法是使用缩放矩阵来完成,S1、S2、S3分别是x、y、z轴的缩放倍数,w分量为1。因为在3D空间中缩放w分量是无意义的,w分量另有其他用途。

        ​​​​​​​                

        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        

        OpenGL通常是在3D空间进行操作的,对于2D的情况我们可以把z轴S3缩放1倍,这样z轴的值就不变了。我们刚刚的缩放操作是不均匀(Non-uniform)缩放,因为每个轴的缩放因子(Scaling Factor)都不一样。如果每个轴的缩放因子都一样那么就叫均匀缩放(Uniform Scale)。均匀缩放会保证缩放后的向量方向不会发生变化,而不均匀缩放则可能导致缩放后向量的方向发生变化。

1-7.矩阵的位移

        位移(Translation)是在原始向量的基础上加上另一个向量从而获得一个在不同位置的新向量的过程,从而在位移向量基础上移动了原始向量。

        ​​​​​​​                

        有了位移矩阵后,我们就可以在(x,y,z)三个方向上移动物体。它是一个非常有用的变换矩阵。

齐次坐标(Homogeneous Coordinates)

        向量的w分量也叫齐次坐标。想要从齐次向量得到3D向量,我们可以把x、y和z坐标分别除以w坐标。使用齐次坐标有几点好处:它允许我们在3D向量上进行位移(如果没有w分量我们是不能位移向量的,即w分量至少不为0),而且下一章我们会用w值创建3D视觉效果。如果一个向量的齐次坐标是0,这个坐标就是方向向量,这个向量就不能位移。

1-8.矩阵的旋转

        首先我们来定义一个向量的旋转到底是什么。2D或3D空间中的旋转用角(Angle)来表示。角可以是角度制或弧度制的,周角是360角度或2 PI弧度。

        在3D空间中旋转需要定义一个角一个旋转轴(Rotation Axis)。物体会沿着给定的旋转轴旋转特定角度。转半圈会旋转360/2 = 180度,向右旋转1/5圈表示向右旋转360/5 = 72度。下图中展示的2D向量𝑣¯是由𝑘¯向右旋转72度所得的:

        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​      

        旋转向量的算法,如下图分别是绕x、y、z轴旋转后的向量,通过旋转矩阵来实现。想探索旋转矩阵,得去好好研究线性代数的知识。

        其实上面的公式推导并不难,我们来解释下沿z轴旋转的等式左边的表达式是怎么得到的,沿其它两个轴的原理和它都是一样的。其本质就是利用了三角函数推导:

        以上是沿着某个坐标轴进行旋转,对于3D空间中的旋转,一个更好的模型是沿着任意的一个轴,比如单位向量$(0.662, 0.2, 0.7222)$旋转,而不是对一系列旋转矩阵进行复合(先向某个轴旋转再向某个轴旋转),会出现万向节锁死的问题。这样的一个(超级麻烦的)矩阵是存在的,见下面这个公式,其中(Rx,Ry,Rz)(𝑅𝑥,𝑅𝑦,𝑅𝑧)代表任意旋转轴:

其中RxRyRz的表达式如下,就是绕固定轴旋转的矩阵。

        ​​​​​​​        ​​​​​​​        ​​​​​​​        

1-9.矩阵的组合

        假设我们有一个顶点(x, y, z),我们希望将其缩放2倍,然后位移(1, 2, 3)个单位,我们可以直接将缩放和位移的矩阵相乘。

        ​​​​​​​       

        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        

        注意,当矩阵相乘时我们先写位移再写缩放变换的。矩阵乘法是不遵守交换律的,这意味着它们的顺序很重要。当矩阵相乘时,在最右边的矩阵是第一个与向量相乘的,所以你应该从右向左读这个乘法。建议您在组合矩阵时,先进行缩放操作,然后是旋转,最后才是位移,否则它们会(消极地)互相影响。比如,如果你先位移再缩放,位移的向量也会同样被缩放(译注:比如向某方向移动2米,2米也许会被缩放成1米)!

2.变换的代码实现

2-1.安装GLM库

        opengl里面没有对矩阵的封装,所以使用glm库

        官网下载:https://glm.g-truc.net/0.9.8/index.html

        解压到任意位置,只复制glm目录,然后在解决方案的属性里包含一下路径就可以用了。

        如果完成了上面的步骤,在引入头文件后报错,那就要去检查下你的路径和头文件名是否写正确了,比如下面我的路径就写错了,因为我从别人那复制的代码。

修改了路径后就好了。

2-2.代码实现-位移

        我们来看看是否可以利用我们刚学的变换知识把一个向量(1, 0, 0)位移(1, 1, 0)个单位(注意,我们把它定义为一个glm::vec4类型的值,齐次坐标设定为1.0)

glm::vec4 vec(1.0f, 0.0f, 0.0f, 1.0f);
// 译注:下面就是矩阵初始化的一个例子,如果使用的是0.9.9及以上版本
// 下面这行代码就需要改为:
// glm::mat4 trans = glm::mat4(1.0f)
// 之后将不再进行提示
glm::mat4 trans;
trans = glm::translate(trans, glm::vec3(1.0f, 1.0f, 0.0f));
vec = trans * vec;
std::cout << vec.x << vec.y << vec.z << std::endl;

        上面向量位移后我们就得到新的向量 (2,1,0)。具体计算如下:

        ​​​​​​​        

2-3.代码实现-旋转和缩放

        假设我们要将上节课的箱子旋转90°再缩放0.5倍,使它变为原来的一半大该如何做?首先创建变换矩阵:

//定义一个单位矩阵
glm::mat4 trans = glm::mat4(1.0f); 
//绕z轴旋转90°  后旋转
trans = glm::rotate(trans, glm::radians(90.0f), glm::vec3(0.0, 0.0, 1.0)); //glm::radians:转换为弧度制
//缩放0.5倍    先缩放(谁先谁在下面)
trans = glm::scale(trans, glm::vec3(0.5, 0.5, 0.5)); //glm会自动将定义的矩阵相乘,最后输出变换矩阵

        然后如何把变换矩阵传递给顶点着色器?我们需要先找到shader中transform变量,然后通过glUniformMatrix4fv函数把矩阵发送给顶点着色器。

unsigned int transformLoc = glGetUniformLocation(ourShader.ID, "transform"); 
glUniformMatrix4fv(transformLoc, 1, GL_FALSE, glm::value_ptr(trans));
//参数1:uniform的位置值
//参数2:发送多少个矩阵
//参数3:是否需要交换行和列
//参数4:传入真正的矩阵数据,使用value_ptr转换glm格式的trans数据,使得opengl认识它们。

        最后在shader中将以前的顶点与变换矩阵相乘,得到变换后的位置值。我们在前面简单提到过GLSL里也有一个mat4类型。所以我们将修改顶点着色器让其接收一个mat4的uniform变量(前面我们讲过uniform变量就是cpu端通过代码指令传入的变量),然后再用矩阵uniform乘以位置向量: 

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

out vec2 TexCoord;
uniform mat4 transform;

void main()
{
    gl_Position = transform * vec4(aPos, 1.0f); //apos是原本xyz的坐标
    TexCoord = vec2(aTexCoord.x, 1.0 - aTexCoord.y);
}

        修改代码后运行,将出现缩放并旋转90°的箱子。

        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        

2-4旋转缩放箱子的完整代码

shader.vs(新增transform变量并与之前vec4相乘)

#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;
uniform float offsetx;
uniform mat4 transform; 

void main()
{
    gl_Position = transform * vec4(aPos, 1.0);
    ourColor = aColor;
    TexCoord = aTexCoord; 
}

shader.fs(未修改)

#version 330 core
out vec4 FragColor;

in vec3 ourColor;
in vec2 TexCoord;

uniform sampler2D ourTexture1;
uniform sampler2D ourTexture2;
uniform float mixValue;

void main()
{
    //FragColor = texture(ourTexture1, TexCoord);  //使用1号纹理进行采样
  
    FragColor = mix(texture(ourTexture1, TexCoord), texture(ourTexture2, vec2(1.0 - TexCoord.x, TexCoord.y)), mixValue); //纹理混合采样
    //参数3:0.2代表第二个纹理图像透明度为20%
}

shader.h  添加glm头文件并新封装了一些函数

#ifndef SHADER_H
#define SHADER_H

#include <glad.h>
#include <string>
#include <fstream>
#include <sstream>
#include <iostream>

#include <glm.hpp>
#include <gtc/matrix_transform.hpp>
#include <gtc/type_ptr.hpp>

class Shader
{
public:
    unsigned int ID;//着色器程序ID,即流水线ID

    // 构造函数生成着色器对象
    Shader(const char* vertexPath, const char* fragmentPath, const char* geometryPath = nullptr)
    {
        // 1.从文件路径中获取顶点/片段源代码
        std::string vertexCode;
        std::string fragmentCode;
        std::string geometryCode;
        std::ifstream vShaderFile;
        std::ifstream fShaderFile;
        std::ifstream gShaderFile;
        
        // 确保ifstream对象可以引发异常:
        vShaderFile.exceptions(std::ifstream::failbit | std::ifstream::badbit);
        fShaderFile.exceptions(std::ifstream::failbit | std::ifstream::badbit);
        gShaderFile.exceptions(std::ifstream::failbit | std::ifstream::badbit);
        try
        {
            // 打开文件
            vShaderFile.open(vertexPath);         
            fShaderFile.open(fragmentPath);
            std::stringstream vShaderStream, fShaderStream;
            // 将文件的缓冲区内容读入流
            vShaderStream << vShaderFile.rdbuf();
            fShaderStream << fShaderFile.rdbuf();
            // 关闭文件
            vShaderFile.close();
            fShaderFile.close();
            // 将流转换为字符串
            vertexCode = vShaderStream.str();
            fragmentCode = fShaderStream.str();
            // 如果存在几何体着色器路径,请同时加载几何体着色器
            if (geometryPath != nullptr)
            {
                gShaderFile.open(geometryPath);
                std::stringstream gShaderStream;
                gShaderStream << gShaderFile.rdbuf();
                gShaderFile.close();
                geometryCode = gShaderStream.str();
            }
        }
        catch (std::ifstream::failure& e)
        {
            std::cout << "ERROR::SHADER::FILE_NOT_SUCCESFULLY_READ: " << e.what() << std::endl;
        }
        //将字符串转换为C风格字符串
        const char* vShaderCode = vertexCode.c_str();
        const char* fShaderCode = fragmentCode.c_str();
        // 2. 编译着色器
        unsigned int vertex, fragment;
        // 创建并编译顶点着色器
        vertex = glCreateShader(GL_VERTEX_SHADER);
        glShaderSource(vertex, 1, &vShaderCode, NULL);
        glCompileShader(vertex);
        checkCompileErrors(vertex, "VERTEX");
        // 创建并编译片段着色器
        fragment = glCreateShader(GL_FRAGMENT_SHADER);
        glShaderSource(fragment, 1, &fShaderCode, NULL);
        glCompileShader(fragment);
        checkCompileErrors(fragment, "FRAGMENT");
        // 如果给定了几何体着色器,请编译几何体着色器
        unsigned int geometry;
        if (geometryPath != nullptr)
        {
            const char* gShaderCode = geometryCode.c_str();
            geometry = glCreateShader(GL_GEOMETRY_SHADER);
            glShaderSource(geometry, 1, &gShaderCode, NULL);
            glCompileShader(geometry);
            checkCompileErrors(geometry, "GEOMETRY");
        }
        // 链接着色器程序
        ID = glCreateProgram();
        glAttachShader(ID, vertex);
        glAttachShader(ID, fragment);
        if (geometryPath != nullptr)
            glAttachShader(ID, geometry);
        glLinkProgram(ID);
        checkCompileErrors(ID, "PROGRAM");
        // 删除着色器,因为它们现在链接到着色器程序中,不再需要了
        glDeleteShader(vertex);
        glDeleteShader(fragment);
        if (geometryPath != nullptr)
            glDeleteShader(geometry);
    }
    
    // 选择着色器程序
    void use()
    {
        glUseProgram(ID);
    } 
    
    // uniform的实用函数 
    void setBool(const std::string& name, bool value) const
    {
        glUniform1i(glGetUniformLocation(ID, name.c_str()), (int)value);
    }
    
    void setInt(const std::string& name, int value) const
    {
        glUniform1i(glGetUniformLocation(ID, name.c_str()), value);
    }
   
    void setFloat(const std::string& name, float value) const
    {
        glUniform1f(glGetUniformLocation(ID, name.c_str()), value);
    }

    void setVec2(const std::string& name, const glm::vec2& value) const
    {
        glUniform2fv(glGetUniformLocation(ID, name.c_str()), 1, &value[0]);
    }
    void setVec2(const std::string& name, float x, float y) const
    {
        glUniform2f(glGetUniformLocation(ID, name.c_str()), x, y);
    }
    // ------------------------------------------------------------------------
    void setVec3(const std::string& name, const glm::vec3& value) const
    {
        glUniform3fv(glGetUniformLocation(ID, name.c_str()), 1, &value[0]);
    }
    void setVec3(const std::string& name, float x, float y, float z) const
    {
        glUniform3f(glGetUniformLocation(ID, name.c_str()), x, y, z);
    }
    // ------------------------------------------------------------------------
    void setVec4(const std::string& name, const glm::vec4& value) const
    {
        glUniform4fv(glGetUniformLocation(ID, name.c_str()), 1, &value[0]);
    }
    void setVec4(const std::string& name, float x, float y, float z, float w)
    {
        glUniform4f(glGetUniformLocation(ID, name.c_str()), x, y, z, w);
    }
    // ------------------------------------------------------------------------
    void setMat2(const std::string& name, const glm::mat2& mat) const
    {
        glUniformMatrix2fv(glGetUniformLocation(ID, name.c_str()), 1, GL_FALSE, &mat[0][0]);
    }
    // ------------------------------------------------------------------------
    void setMat3(const std::string& name, const glm::mat3& mat) const
    {
        glUniformMatrix3fv(glGetUniformLocation(ID, name.c_str()), 1, GL_FALSE, &mat[0][0]);
    }
    // ------------------------------------------------------------------------
    void setMat4(const std::string& name, const glm::mat4& mat) const
    {
        glUniformMatrix4fv(glGetUniformLocation(ID, name.c_str()), 1, GL_FALSE, &mat[0][0]);
    }

private:
    // 用于检查着色器编译/链接错误的实用函数。
    void checkCompileErrors(GLuint shader, std::string type)
    {
        GLint success;
        GLchar infoLog[1024];
        if (type != "PROGRAM")
        {
            glGetShaderiv(shader, GL_COMPILE_STATUS, &success);
            if (!success)
            {
                glGetShaderInfoLog(shader, 1024, NULL, infoLog);
                std::cout << "ERROR::SHADER_COMPILATION_ERROR of type: " << type << "\n" << infoLog << "\n -- --------------------------------------------------- -- " << std::endl;
            }
        }
        else
        {
            glGetProgramiv(shader, GL_LINK_STATUS, &success);
            if (!success)
            {
                glGetProgramInfoLog(shader, 1024, NULL, infoLog);
                std::cout << "ERROR::PROGRAM_LINKING_ERROR of type: " << type << "\n" << infoLog << "\n -- --------------------------------------------------- -- " << std::endl;
            }
        }
    }
};
#endif

man.cpp(新增缩放旋转代码并把纹理代码移动到渲染线程之外,另外注意我代码中的shader对象不叫ourShader)

#include <glad.h>   //glad.h需要在glfw.h之前
#include <glfw3.h>
#include <iostream>
#include <cmath> 
#include "shader.h"
#include "stb_image.h"

float 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  // 左上 
};

unsigned int indices[] = {  //两个三角形拼接成一个长方形
    0, 1, 3,
    1, 2, 3
};

float mixValue = 0.2f;  //初次运行就是0.2的混合值

void framebuffer_size_callback(GLFWwindow* window, int width, int height);
void processInput(GLFWwindow* window);

int main()
{
    //初始化glfw:选择opengl 3.3~4.2核心模式,取决于你的显卡驱动
    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);
#endif

    GLFWwindow* window = glfwCreateWindow(800, 600, "LearnOpenGL", NULL, NULL); //创建窗体对象:参数1:opengl窗口大小;参数2:窗口标题
    if (window == NULL)
    {
        std::cout << "Failed to create GLFW window" << std::endl;
        glfwTerminate();
        return -1;
    }
    glfwMakeContextCurrent(window);                                     //设置当前窗口上下文设置为当前线程的上下文,之后才能在窗口进行绘制

    if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress))            //glad:加载所有OpenGL函数指针,固定写法就这一行
    {
        std::cout << "Failed to initialize GLAD" << std::endl;
        return -1;
    }
    glViewport(0, 0, 600, 400);                                         //设置opengl实际渲染的区域大小;0,0为左下角坐标

    glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);  //注册窗口大小改变回调函数

    Shader shaderobject("shaders/shader.vs", "shaders/shader.fs");

    //2.创建VBO和VAO、EBO对象并赋予ID值
    unsigned int VBO, VAO, EBO;
    glGenVertexArrays(1, &VAO);
    glGenBuffers(1, &VBO);
    glGenBuffers(1, &EBO);

    //3.绑定VBO,VAO、EBO对象
    glBindVertexArray(VAO);
    glBindBuffer(GL_ARRAY_BUFFER, VBO);
    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
    //填充EBO缓冲
    glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);

    //4.开辟并填充数据
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

    //5.告知Shader如何解析缓冲里的属性值
    glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)0);

    //6.开启VAO管理的第一个属性值,第一个VAO编号为0
    glEnableVertexAttribArray(0);

    //新增VAO颜色属性
    glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(3*sizeof(float))); //颜色属性开始偏移3个顶点属性
    glEnableVertexAttribArray(1);

    //新增VAO纹理坐标属性
    glVertexAttribPointer(2, 2, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(6 * sizeof(float))); //纹理坐标属性开始偏移了6个顶点属性
    glEnableVertexAttribArray(2);

    //7.解绑VBO,VAO,EBO
    glBindBuffer(GL_ARRAY_BUFFER, 0);
    glBindVertexArray(0);
    glBindBuffer(GL_ARRAY_BUFFER, 0);

    //创建纹理对象1和2
    unsigned int texture1, texture2;
    glGenTextures(1, &texture1);
    glGenTextures(1, &texture2);
    glBindTexture(GL_TEXTURE_2D, texture1);

    stbi_set_flip_vertically_on_load(true);//放于纹理加载之前,防止颠倒

    // 加载并生成纹理texture1
    int width, height, nrChannels;
    unsigned char* data = stbi_load("./pics/container.jpg", &width, &height, &nrChannels, 0);
    if (data)
    {
        glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data);//把data的纹理数据加载到GL_TEXTURE_2D
        glGenerateMipmap(GL_TEXTURE_2D);//自动生成多级渐远纹理
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_BORDER);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_BORDER);
        float borderColor[] = { 1.0f, 1.0f, 0.0f, 1.0f };
        glTexParameterfv(GL_TEXTURE_2D, GL_TEXTURE_BORDER_COLOR, borderColor);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
    }
    else
    {
        std::cout << "Failed to load texture" << std::endl;
    }
    stbi_image_free(data);//data已经加载进缓冲了就可以释放

    glBindTexture(GL_TEXTURE_2D, texture2);
    // 加载并生成纹理texture2
    data = stbi_load("./pics/awesomeface.png", &width, &height, &nrChannels, 0);
    if (data)
    {
        glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, data);//把data的纹理数据加载到GL_TEXTURE_2D
        glGenerateMipmap(GL_TEXTURE_2D);//自动生成多级渐远纹理
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_BORDER);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_BORDER);
        float borderColor[] = { 1.0f, 1.0f, 0.0f, 1.0f };
        glTexParameterfv(GL_TEXTURE_2D, GL_TEXTURE_BORDER_COLOR, borderColor);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
    }
    else
    {
        std::cout << "Failed to load texture" << std::endl;
    }
    stbi_image_free(data);//data已经加载进缓冲了就可以释放

    //激活纹理单元
    glActiveTexture(GL_TEXTURE0);           //注意宏是从0号纹理开始
    glBindTexture(GL_TEXTURE_2D, texture1);
    glActiveTexture(GL_TEXTURE1);
    glBindTexture(GL_TEXTURE_2D, texture2);
    shaderobject.use();//没有这一句箱子上不显示纹理
    shaderobject.setInt("ourTexture1", 0); //使用自己封装好的setInt,里面还是实现了glUniform1i函数
    shaderobject.setInt("ourTexture2", 1);
    shaderobject.setFloat("mixValue", mixValue);

    //定义一个单位矩阵
    glm::mat4 trans = glm::mat4(1.0f);
    //绕z轴旋转90°  后旋转
    trans = glm::rotate(trans, glm::radians(90.0f), glm::vec3(0.0, 0.0, 1.0)); //glm::radians:转换为弧度制
    //缩放0.5倍    先缩放(谁先谁在下面)
    trans = glm::scale(trans, glm::vec3(0.5, 0.5, 0.5)); //glm会自动将定义的矩阵相乘,最后输出变换矩阵
    
    unsigned int transformLoc = glGetUniformLocation(shaderobject.ID, "transform");
    glUniformMatrix4fv(transformLoc, 1, GL_FALSE, glm::value_ptr(trans));
    //参数1:uniform的位置值
    //参数2:发送多少个矩阵
    //参数3:是否需要交换行和列
    //参数4:传入真正的矩阵数据,使用value_ptr转换glm格式的trans数据,使得opengl认识它们。

    while (!glfwWindowShouldClose(window))                              //检查一次GLFW是否被要求退出,循环一次就是刷新一帧
    {
        processInput(window);

        glClearColor(0.2f, 0.3f, 0.3f, 1.0f);                           //设置颜色:深绿色
        glClear(GL_COLOR_BUFFER_BIT);                                   //刷新屏幕,使用设置的颜色

        // set the texture mix value in the shader
        shaderobject.setFloat("mixValue", mixValue);

        //d.选择使用着色器给三角形上色,即上面创建链接好的流水线
        shaderobject.use(); //设置uniform变量之前激活着色器程序

        //9.上面把VAO解绑了,这里必须重新绑定否则绘制不出来三角形
        glBindVertexArray(VAO);

        //11.绑定EBO,注意在绑定VAO之后才绑定EBO
        glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);

        //10.绘制元素
        glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);

        glfwSwapBuffers(window);                                        //交换颜色缓冲(双缓冲):储存着GLFW窗口每一个像素颜色值作为输出显示在屏幕上
        glfwPollEvents();                                               //轮训检查输入设备触发事件
    }
    //e.渲染结束后把VAO,VBO和着色器都释放掉
    glDeleteVertexArrays(1, &VAO);
    glDeleteBuffers(1, &VBO);
    glDeleteBuffers(1, &EBO);//销毁的顺序没有规定
    glDeleteProgram(shaderobject.ID);

    glfwTerminate();                                                    //释放分配的所有glfw资源
    return 0;
}

void framebuffer_size_callback(GLFWwindow* window, int width, int height)   //窗口大小被改变就重新设置渲染区域大小
{
    glViewport(0, 0, width, height);
}

void processInput(GLFWwindow* window)
{
    if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS)              //按Esc键关闭界面
        glfwSetWindowShouldClose(window, true);
    if (glfwGetKey(window, GLFW_KEY_UP) == GLFW_PRESS)
    {
        mixValue += 0.001f; // change this value accordingly (might be too slow or too fast based on system hardware)
        if (mixValue >= 1.0f)
            mixValue = 1.0f;
    }
    if (glfwGetKey(window, GLFW_KEY_DOWN) == GLFW_PRESS)
    {
        mixValue -= 0.001f; // change this value accordingly (might be too slow or too fast based on system hardware)
        if (mixValue <= 0.0f)
            mixValue = 0.0f;
    }
}

2-5.自动旋转并平移箱子的代码实现

        接下来我们需要把箱子移动到右下角,然后再让箱子随着时间旋转,只需要把下面代码放到渲染循环中即可实现

glm::mat4 trans = glm::mat4(1.0f);
trans = glm::translate(trans, glm::vec3(0.5f, -0.5f, 0.0f)); //向右并向下平移0.5
trans = glm::rotate(trans, (float)glfwGetTime(), glm::vec3(0.0f, 0.0f, 1.0f)); //按时间绕z轴旋转

unsigned int transformLoc = glGetUniformLocation(shaderobject.ID, "transform");
glUniformMatrix4fv(transformLoc, 1, GL_FALSE, glm::value_ptr(trans));

运行结果:

                                        

完整main.cpp(放置位置有问题程序运行会崩溃,所以进行修改)


#include <glad.h>   //glad.h需要在glfw.h之前
#include <glfw3.h>
#include <iostream>
#include <cmath> 
#include "shader.h"
#include "stb_image.h"

float 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  // 左上 
};

unsigned int indices[] = {  //两个三角形拼接成一个长方形
    0, 1, 3,
    1, 2, 3
};

float mixValue = 0.2f;  //初次运行就是0.2的混合值

void framebuffer_size_callback(GLFWwindow* window, int width, int height);
void processInput(GLFWwindow* window);

int main()
{
    //初始化glfw:选择opengl 3.3~4.2核心模式,取决于你的显卡驱动
    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);
#endif

    GLFWwindow* window = glfwCreateWindow(800, 600, "LearnOpenGL", NULL, NULL); //创建窗体对象:参数1:opengl窗口大小;参数2:窗口标题
    if (window == NULL)
    {
        std::cout << "Failed to create GLFW window" << std::endl;
        glfwTerminate();
        return -1;
    }
    glfwMakeContextCurrent(window);                                     //设置当前窗口上下文设置为当前线程的上下文,之后才能在窗口进行绘制

    if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress))            //glad:加载所有OpenGL函数指针,固定写法就这一行
    {
        std::cout << "Failed to initialize GLAD" << std::endl;
        return -1;
    }
    glViewport(0, 0, 600, 400);                                         //设置opengl实际渲染的区域大小;0,0为左下角坐标

    glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);  //注册窗口大小改变回调函数

    Shader shaderobject("shaders/shader.vs", "shaders/shader.fs");

    //2.创建VBO和VAO、EBO对象并赋予ID值
    unsigned int VBO, VAO, EBO;
    glGenVertexArrays(1, &VAO);
    glGenBuffers(1, &VBO);
    glGenBuffers(1, &EBO);

    //3.绑定VBO,VAO、EBO对象
    glBindVertexArray(VAO);
    glBindBuffer(GL_ARRAY_BUFFER, VBO);
    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
    //填充EBO缓冲
    glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);

    //4.开辟并填充数据
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

    //5.告知Shader如何解析缓冲里的属性值
    glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)0);

    //6.开启VAO管理的第一个属性值,第一个VAO编号为0
    glEnableVertexAttribArray(0);

    //新增VAO颜色属性
    glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(3*sizeof(float))); //颜色属性开始偏移3个顶点属性
    glEnableVertexAttribArray(1);

    //新增VAO纹理坐标属性
    glVertexAttribPointer(2, 2, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(6 * sizeof(float))); //纹理坐标属性开始偏移了6个顶点属性
    glEnableVertexAttribArray(2);

    //7.解绑VBO,VAO,EBO
    glBindBuffer(GL_ARRAY_BUFFER, 0);
    glBindVertexArray(0);
    glBindBuffer(GL_ARRAY_BUFFER, 0);

    //创建纹理对象1和2
    unsigned int texture1, texture2;
    glGenTextures(1, &texture1);
    glGenTextures(1, &texture2);
    glBindTexture(GL_TEXTURE_2D, texture1);

    stbi_set_flip_vertically_on_load(true);//放于纹理加载之前,防止颠倒

    // 加载并生成纹理texture1
    int width, height, nrChannels;
    unsigned char* data = stbi_load("./pics/container.jpg", &width, &height, &nrChannels, 0);
    if (data)
    {
        glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data);//把data的纹理数据加载到GL_TEXTURE_2D
        glGenerateMipmap(GL_TEXTURE_2D);//自动生成多级渐远纹理
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_BORDER);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_BORDER);
        float borderColor[] = { 1.0f, 1.0f, 0.0f, 1.0f };
        glTexParameterfv(GL_TEXTURE_2D, GL_TEXTURE_BORDER_COLOR, borderColor);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
    }
    else
    {
        std::cout << "Failed to load texture" << std::endl;
    }
    stbi_image_free(data);//data已经加载进缓冲了就可以释放

    glBindTexture(GL_TEXTURE_2D, texture2);
    // 加载并生成纹理texture2
    data = stbi_load("./pics/awesomeface.png", &width, &height, &nrChannels, 0);
    if (data)
    {
        glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, data);//把data的纹理数据加载到GL_TEXTURE_2D
        glGenerateMipmap(GL_TEXTURE_2D);//自动生成多级渐远纹理
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_BORDER);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_BORDER);
        float borderColor[] = { 1.0f, 1.0f, 0.0f, 1.0f };
        glTexParameterfv(GL_TEXTURE_2D, GL_TEXTURE_BORDER_COLOR, borderColor);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
    }
    else
    {
        std::cout << "Failed to load texture" << std::endl;
    }
    stbi_image_free(data);//data已经加载进缓冲了就可以释放

    //激活纹理单元
    glActiveTexture(GL_TEXTURE0);           //注意宏是从0号纹理开始
    glBindTexture(GL_TEXTURE_2D, texture1);
    glActiveTexture(GL_TEXTURE1);
    glBindTexture(GL_TEXTURE_2D, texture2);
    shaderobject.use();//没有这一句箱子上不显示纹理
    shaderobject.setInt("ourTexture1", 0); //使用自己封装好的setInt,里面还是实现了glUniform1i函数
    shaderobject.setInt("ourTexture2", 1);
    shaderobject.setFloat("mixValue", mixValue);

    //定义一个单位矩阵
    //glm::mat4 trans = glm::mat4(1.0f);
    //绕z轴旋转90°  后旋转
    //trans = glm::rotate(trans, glm::radians(90.0f), glm::vec3(0.0, 0.0, 1.0)); //glm::radians:转换为弧度制
    //缩放0.5倍    先缩放(谁先谁在下面)
    //trans = glm::scale(trans, glm::vec3(0.5, 0.5, 0.5)); //glm会自动将定义的矩阵相乘,最后输出变换矩阵

    //trans = glm::translate(trans, glm::vec3(0.5f, -0.5f, 0.0f)); //向右并向下平移0.5
    //trans = glm::rotate(trans, (float)glfwGetTime(), glm::vec3(0.0f, 0.0f, 1.0f)); //按时间绕z轴旋转
    //unsigned int transformLoc = glGetUniformLocation(shaderobject.ID, "transform");
    //glUniformMatrix4fv(transformLoc, 1, GL_FALSE, glm::value_ptr(trans));
    //参数1:uniform的位置值
    //参数2:发送多少个矩阵
    //参数3:是否需要交换行和列
    //参数4:传入真正的矩阵数据,使用value_ptr转换glm格式的trans数据,使得opengl认识它们。
    while (!glfwWindowShouldClose(window))                              //检查一次GLFW是否被要求退出,循环一次就是刷新一帧
    {
        processInput(window);

        glClearColor(0.2f, 0.3f, 0.3f, 1.0f);                           //设置颜色:深绿色
        glClear(GL_COLOR_BUFFER_BIT);                                   //刷新屏幕,使用设置的颜色

        // set the texture mix value in the shader
        /*shaderobject.setFloat("mixValue", mixValue);*/

        //d.选择使用着色器给三角形上色,即上面创建链接好的流水线
        shaderobject.use(); //设置uniform变量之前激活着色器程序

        //9.上面把VAO解绑了,这里必须重新绑定否则绘制不出来三角形
        glBindVertexArray(VAO);

        //11.绑定EBO,注意在绑定VAO之后才绑定EBO
        glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);

        //10.绘制元素:长方形
        glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);


        glm::mat4 trans = glm::mat4(1.0f);
        trans = glm::translate(trans, glm::vec3(0.5f, -0.5f, 0.0f)); //向右并向下平移0.5
        trans = glm::rotate(trans, (float)glfwGetTime(), glm::vec3(0.0f, 0.0f, 1.0f)); //按时间绕z轴旋转

        unsigned int transformLoc = glGetUniformLocation(shaderobject.ID, "transform");
        glUniformMatrix4fv(transformLoc, 1, GL_FALSE, glm::value_ptr(trans));

        glfwSwapBuffers(window);                                        //交换颜色缓冲(双缓冲):储存着GLFW窗口每一个像素颜色值作为输出显示在屏幕上
        glfwPollEvents();                                               //轮训检查输入设备触发事件
    }
    //e.渲染结束后把VAO,VBO和着色器都释放掉
    glDeleteVertexArrays(1, &VAO);
    glDeleteBuffers(1, &VBO);
    glDeleteBuffers(1, &EBO);//销毁的顺序没有规定
    glDeleteProgram(shaderobject.ID);

    glfwTerminate();                                                    //释放分配的所有glfw资源
    return 0;
}

void framebuffer_size_callback(GLFWwindow* window, int width, int height)   //窗口大小被改变就重新设置渲染区域大小
{
    glViewport(0, 0, width, height);
}

void processInput(GLFWwindow* window)
{
    if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS)              //按Esc键关闭界面
        glfwSetWindowShouldClose(window, true);
    if (glfwGetKey(window, GLFW_KEY_UP) == GLFW_PRESS)
    {
        mixValue += 0.001f; // change this value accordingly (might be too slow or too fast based on system hardware)
        if (mixValue >= 1.0f)
            mixValue = 1.0f;
    }
    if (glfwGetKey(window, GLFW_KEY_DOWN) == GLFW_PRESS)
    {
        mixValue -= 0.001f; // change this value accordingly (might be too slow or too fast based on system hardware)
        if (mixValue <= 0.0f)
            mixValue = 0.0f;
    }
}

3.课后练习

3-1

        使用应用在箱子上的最后一个变换,尝试将其改变为先旋转,后位移。看看发生了什么,试着想想为什么会发生这样的事情。

解析:就是将上面程序的旋转和位移顺序对调,由于opengl中认为后面的先执行,所以变换顺序就变成了先位移后旋转,那么不是我们之前想要的在右下角自转了,而是以笑脸左上角为圆心旋转。

glm::mat4 trans = glm::mat4(1.0f);    
trans = glm::rotate(trans, (float)glfwGetTime(), glm::vec3(0.0f, 0.0f, 1.0f)); //按时间绕z轴旋转
trans = glm::translate(trans, glm::vec3(0.5f, -0.5f, 0.0f)); //向右并向下平移0.5

unsigned int transformLoc = glGetUniformLocation(shaderobject.ID, "transform");
glUniformMatrix4fv(transformLoc, 1, GL_FALSE, glm::value_ptr(trans));

运行结果:

                                

3-2

        尝试再次调用glDrawElements画出第二个箱子,使用变换将其摆放在不同的位置。让这个箱子被摆放在窗口的左上角,并且会不断的缩放(而不是旋转)。(sin函数在这里会很有用,不过注意使用sin函数时应用负值会导致物体被翻转)

解析:再创建一个长方形箱子,让其旋转和缩放即可,代码就添加到3-1下面就行。

//再画一个箱子
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);

trans = glm::mat4(1.0f);
trans = glm::translate(trans, glm::vec3(-0.5f, 0.5f, 0.0f)); //向左并向上平移0.5
float scaleValue = sin(glfwGetTime());
trans = glm::scale(trans, glm::vec3(scaleValue, scaleValue, scaleValue));
glUniformMatrix4fv(transformLoc, 1, GL_FALSE, glm::value_ptr(trans));

运行结果:

        ​​​​​​​                

main.cpp完整代码(其余没改)


#include <glad.h>   //glad.h需要在glfw.h之前
#include <glfw3.h>
#include <iostream>
#include <cmath> 
#include "shader.h"
#include "stb_image.h"

float 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  // 左上 
};

unsigned int indices[] = {  //两个三角形拼接成一个长方形
    0, 1, 3,
    1, 2, 3
};

float mixValue = 0.2f;  //初次运行就是0.2的混合值

void framebuffer_size_callback(GLFWwindow* window, int width, int height);
void processInput(GLFWwindow* window);

int main()
{
    //初始化glfw:选择opengl 3.3~4.2核心模式,取决于你的显卡驱动
    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);
#endif

    GLFWwindow* window = glfwCreateWindow(800, 600, "LearnOpenGL", NULL, NULL); //创建窗体对象:参数1:opengl窗口大小;参数2:窗口标题
    if (window == NULL)
    {
        std::cout << "Failed to create GLFW window" << std::endl;
        glfwTerminate();
        return -1;
    }
    glfwMakeContextCurrent(window);                                     //设置当前窗口上下文设置为当前线程的上下文,之后才能在窗口进行绘制

    if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress))            //glad:加载所有OpenGL函数指针,固定写法就这一行
    {
        std::cout << "Failed to initialize GLAD" << std::endl;
        return -1;
    }
    glViewport(0, 0, 600, 400);                                         //设置opengl实际渲染的区域大小;0,0为左下角坐标

    glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);  //注册窗口大小改变回调函数

    Shader shaderobject("shaders/shader.vs", "shaders/shader.fs");

    //2.创建VBO和VAO、EBO对象并赋予ID值
    unsigned int VBO, VAO, EBO;
    glGenVertexArrays(1, &VAO);
    glGenBuffers(1, &VBO);
    glGenBuffers(1, &EBO);

    //3.绑定VBO,VAO、EBO对象
    glBindVertexArray(VAO);
    glBindBuffer(GL_ARRAY_BUFFER, VBO);
    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
    //填充EBO缓冲
    glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);

    //4.开辟并填充数据
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

    //5.告知Shader如何解析缓冲里的属性值
    glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)0);

    //6.开启VAO管理的第一个属性值,第一个VAO编号为0
    glEnableVertexAttribArray(0);

    //新增VAO颜色属性
    glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(3*sizeof(float))); //颜色属性开始偏移3个顶点属性
    glEnableVertexAttribArray(1);

    //新增VAO纹理坐标属性
    glVertexAttribPointer(2, 2, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(6 * sizeof(float))); //纹理坐标属性开始偏移了6个顶点属性
    glEnableVertexAttribArray(2);

    //7.解绑VBO,VAO,EBO
    glBindBuffer(GL_ARRAY_BUFFER, 0);
    glBindVertexArray(0);
    glBindBuffer(GL_ARRAY_BUFFER, 0);

    //创建纹理对象1和2
    unsigned int texture1, texture2;
    glGenTextures(1, &texture1);
    glGenTextures(1, &texture2);
    glBindTexture(GL_TEXTURE_2D, texture1);

    stbi_set_flip_vertically_on_load(true);//放于纹理加载之前,防止颠倒

    // 加载并生成纹理texture1
    int width, height, nrChannels;
    unsigned char* data = stbi_load("./pics/container.jpg", &width, &height, &nrChannels, 0);
    if (data)
    {
        glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data);//把data的纹理数据加载到GL_TEXTURE_2D
        glGenerateMipmap(GL_TEXTURE_2D);//自动生成多级渐远纹理
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_BORDER);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_BORDER);
        float borderColor[] = { 1.0f, 1.0f, 0.0f, 1.0f };
        glTexParameterfv(GL_TEXTURE_2D, GL_TEXTURE_BORDER_COLOR, borderColor);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
    }
    else
    {
        std::cout << "Failed to load texture" << std::endl;
    }
    stbi_image_free(data);//data已经加载进缓冲了就可以释放

    glBindTexture(GL_TEXTURE_2D, texture2);
    // 加载并生成纹理texture2
    data = stbi_load("./pics/awesomeface.png", &width, &height, &nrChannels, 0);
    if (data)
    {
        glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, data);//把data的纹理数据加载到GL_TEXTURE_2D
        glGenerateMipmap(GL_TEXTURE_2D);//自动生成多级渐远纹理
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_BORDER);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_BORDER);
        float borderColor[] = { 1.0f, 1.0f, 0.0f, 1.0f };
        glTexParameterfv(GL_TEXTURE_2D, GL_TEXTURE_BORDER_COLOR, borderColor);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
    }
    else
    {
        std::cout << "Failed to load texture" << std::endl;
    }
    stbi_image_free(data);//data已经加载进缓冲了就可以释放

    //激活纹理单元
    glActiveTexture(GL_TEXTURE0);           //注意宏是从0号纹理开始
    glBindTexture(GL_TEXTURE_2D, texture1);
    glActiveTexture(GL_TEXTURE1);
    glBindTexture(GL_TEXTURE_2D, texture2);
    shaderobject.use();//没有这一句箱子上不显示纹理
    shaderobject.setInt("ourTexture1", 0); //使用自己封装好的setInt,里面还是实现了glUniform1i函数
    shaderobject.setInt("ourTexture2", 1);
    shaderobject.setFloat("mixValue", mixValue);

    //定义一个单位矩阵
    //glm::mat4 trans = glm::mat4(1.0f);
    //绕z轴旋转90°  后旋转
    //trans = glm::rotate(trans, glm::radians(90.0f), glm::vec3(0.0, 0.0, 1.0)); //glm::radians:转换为弧度制
    //缩放0.5倍    先缩放(谁先谁在下面)
    //trans = glm::scale(trans, glm::vec3(0.5, 0.5, 0.5)); //glm会自动将定义的矩阵相乘,最后输出变换矩阵

    //trans = glm::translate(trans, glm::vec3(0.5f, -0.5f, 0.0f)); //向右并向下平移0.5
    //trans = glm::rotate(trans, (float)glfwGetTime(), glm::vec3(0.0f, 0.0f, 1.0f)); //按时间绕z轴旋转
    //unsigned int transformLoc = glGetUniformLocation(shaderobject.ID, "transform");
    //glUniformMatrix4fv(transformLoc, 1, GL_FALSE, glm::value_ptr(trans));
    //参数1:uniform的位置值
    //参数2:发送多少个矩阵
    //参数3:是否需要交换行和列
    //参数4:传入真正的矩阵数据,使用value_ptr转换glm格式的trans数据,使得opengl认识它们。
    while (!glfwWindowShouldClose(window))                              //检查一次GLFW是否被要求退出,循环一次就是刷新一帧
    {
        processInput(window);

        glClearColor(0.2f, 0.3f, 0.3f, 1.0f);                           //设置颜色:深绿色
        glClear(GL_COLOR_BUFFER_BIT);                                   //刷新屏幕,使用设置的颜色

        // set the texture mix value in the shader
        /*shaderobject.setFloat("mixValue", mixValue);*/

        //d.选择使用着色器给三角形上色,即上面创建链接好的流水线
        shaderobject.use(); //设置uniform变量之前激活着色器程序

        //9.上面把VAO解绑了,这里必须重新绑定否则绘制不出来三角形
        glBindVertexArray(VAO);

        //11.绑定EBO,注意在绑定VAO之后才绑定EBO
        glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);

        //10.绘制元素:长方形
        glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);


        glm::mat4 trans = glm::mat4(1.0f);
        trans = glm::translate(trans, glm::vec3(0.5f, -0.5f, 0.0f)); //向右并向下平移0.5
        trans = glm::rotate(trans, (float)glfwGetTime(), glm::vec3(0.0f, 0.0f, 1.0f)); //按时间绕z轴旋转

        unsigned int transformLoc = glGetUniformLocation(shaderobject.ID, "transform");
        glUniformMatrix4fv(transformLoc, 1, GL_FALSE, glm::value_ptr(trans));

        //再画一个箱子
        glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);

        trans = glm::mat4(1.0f);
        trans = glm::translate(trans, glm::vec3(-0.5f, 0.5f, 0.0f)); //向左并向上平移0.5
        float scaleValue = sin(glfwGetTime());
        trans = glm::scale(trans, glm::vec3(scaleValue, scaleValue, scaleValue));
        glUniformMatrix4fv(transformLoc, 1, GL_FALSE, glm::value_ptr(trans));

        glfwSwapBuffers(window);                                        //交换颜色缓冲(双缓冲):储存着GLFW窗口每一个像素颜色值作为输出显示在屏幕上
        glfwPollEvents();                                               //轮训检查输入设备触发事件
    }
    //e.渲染结束后把VAO,VBO和着色器都释放掉
    glDeleteVertexArrays(1, &VAO);
    glDeleteBuffers(1, &VBO);
    glDeleteBuffers(1, &EBO);//销毁的顺序没有规定
    glDeleteProgram(shaderobject.ID);

    glfwTerminate();                                                    //释放分配的所有glfw资源
    return 0;
}

void framebuffer_size_callback(GLFWwindow* window, int width, int height)   //窗口大小被改变就重新设置渲染区域大小
{
    glViewport(0, 0, width, height);
}

void processInput(GLFWwindow* window)
{
    if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS)              //按Esc键关闭界面
        glfwSetWindowShouldClose(window, true);
    if (glfwGetKey(window, GLFW_KEY_UP) == GLFW_PRESS)
    {
        mixValue += 0.001f; // change this value accordingly (might be too slow or too fast based on system hardware)
        if (mixValue >= 1.0f)
            mixValue = 1.0f;
    }
    if (glfwGetKey(window, GLFW_KEY_DOWN) == GLFW_PRESS)
    {
        mixValue -= 0.001f; // change this value accordingly (might be too slow or too fast based on system hardware)
        if (mixValue <= 0.0f)
            mixValue = 0.0f;
    }
}

原作:变换 - LearnOpenGL

  • 23
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值