通过前面的学习,已经可以创建一个物体、着色、加入纹理,但它们都还是静态的物体,如何才能动起来?
我们知道所看到的图象都是在渲染循环的while中,不停的绘制图象,才得以显示,所以我们就可以在每次绘图前,改变物体相关的属性,比如改变坐标位置,以达到让物体动起来。
比如要实现物体移动,如何实现?先看一下下面这个式子,物体在3维空间中都是由坐标点构成,假设其中一个点P为(x, y, z),如果让P向空间坐标系三个方向分别依次移动Tx, Ty, Tz个距离,我们就可以构造下面这个矩阵等式,而且式子右边的结果,刚好是我们P点移动后的坐标位置,也就完成了位移。根据这个方式,我们就可以利用矩阵乘法,对物体的每个点做变化,以达到位移、旋转、缩放等效果
记住下面这几个单词:
- 矩阵(Matrix) 对象变换(Transform) 四元数(Quaternion)
- 位移(Translation) 旋转(Rotate) 缩放(Scale)
让上一篇博客的效果图(地址:…)中的图片,随着时间旋转,并且把图片放在窗口的右下角
效果图如下(不停的旋转):
渲染流程:
- 添加GLM库
- 设置顶点着色器
- 在渲染循环中变换矩阵
源码:
// shader.vs
#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);
TexCoord = aTexCoord;
}
// shader.fs
#version 330 core
out vec4 FragColor;
in vec2 TexCoord;
uniform sampler2D ourTexture;
void main()
{
FragColor = texture(ourTexture, TexCoord);
}
// main.fs
#include <glad/glad.h>
#include <GLFW/glfw3.h>
#include <iostream>
#include "shader.h"
#include "stb_image.h"
#include <glm/glm.hpp>
#include <glm/gtc/matrix_transform.hpp>
#include <glm/gtc/type_ptr.hpp>
// 定义回调函数
void framebuffer_size_callback(GLFWwindow* window, int width, int height);
void processInput(GLFWwindow* window);
// 宽高
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);
// 创建glfw窗口
GLFWwindow* window = glfwCreateWindow(SCR_WIDTH, SCR_HEIGHT, "Hello world", NULL, NULL);
if (window == NULL)
{
std::cout << "Failed to create GLFW window" << std::endl;
glfwTerminate();
return -1;
}
glfwMakeContextCurrent(window);
// 使用glad加载OpenGL函数指针
if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress))
{
std::cout << "Failed to inittalize GLAD" << std::endl;
return -1;
}
// 确定视口(Viewport)的大小
glViewport(0, 0, SCR_WIDTH, SCR_HEIGHT);
glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);
// 设置两个必须的着色器:顶点和片段着色器
Shader ourShader("shader.vs", "shader.fs");
// 定义正方形坐标
float vertices[] = {
// 位置 // 纹理坐标
0.5f, 0.5f, 0.0f, 1.0f, 1.0f, // 右上
0.5f, -0.5f, 0.0f, 1.0f, 0.0f, // 右下
-0.5f, -0.5f, 0.0f, 0.0f, 0.0f, // 左下
-0.5f, 0.5f, 0.0f, 0.0f, 1.0f // 左上
};
unsigned int indices[] = {
0, 1, 3, // first triangle
1, 2, 3 // second triangle
};
// 设置顶点缓冲对象(Vertex Buffer Objects, VBO)管理内存(坐标点数据)与 VAO
unsigned int VAO, VBO, EBO;
glGenVertexArrays(1, &VAO); // 使用glGenVertexArrays函数和一个缓冲ID生成一个VAO对象
glGenBuffers(1, &VBO); // 使用glGenBuffers函数和一个缓冲ID生成一个VBO对象
glGenBuffers(1, &EBO);
// 绑定: 先VAO 再VBO
glBindVertexArray(VAO);
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);
// 位置属性
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0); // 使用glEnableVertexAttribArray,以顶点属性位置值作为参数,启用顶点属性,顶点属性默认是禁用的
// 纹理属性
glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)(3 * sizeof(float)));
glEnableVertexAttribArray(1);
// 生成纹理
unsigned int texture;
// glGenTextures先输入要生成纹理的数量,然后把它们储存在第二个参数的`unsigned int`数组中
glGenTextures(1, &texture);
// 绑定
glBindTexture(GL_TEXTURE_2D, texture);
// 为当前绑定的纹理对象设置环绕、过滤方式
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
// 加载并生成纹理
int width, height, nrChannels;
unsigned char* data = stbi_load("wall.jpg", &width, &height, &nrChannels, 0);
if (data)
{
// 生成纹理
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data);
// 注:不需要手动更改我们在片段着色器定义的uniform sampler2D ourTexture,它会自动把纹理赋值给片段着色器的采样器ourTexture
// 为当前绑定的纹理自动生成所有需要的多级渐远纹理
glGenerateMipmap(GL_TEXTURE_2D);
}
else
{
std::cout << "Failed to load texture" << std::endl;
}
// 释放图像的内存
stbi_image_free(data);
// 开启渲染循环(Render Loop)
while (!glfwWindowShouldClose(window))
{
// 输入控制:
processInput(window);
// 渲染指令
// 修改背景颜色
glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
// 变换矩阵
glm::mat4 trans = glm::mat4(1.0f);
trans = glm::translate(trans, glm::vec3(0.5f, -0.5f, 0.0f));
trans = glm::rotate(trans, (float)glfwGetTime(), glm::vec3(0.0f, 0.0f, 1.0f));
// 绘图
ourShader.use(); // 激活着色器
ourShader.setMat4("transform", trans);
glActiveTexture(GL_TEXTURE0); // 激活纹理单元
glBindTexture(GL_TEXTURE_2D, texture); // 绑定纹理
glBindVertexArray(VAO); // 启动VAO
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);
// 检查调用事件,并交换缓冲
glfwPollEvents();
glfwSwapBuffers(window);
}
// 回收资源
glDeleteVertexArrays(1, &VAO);
glDeleteBuffers(1, &VBO);
glDeleteBuffers(1, &EBO);
glfwTerminate();
return 0;
}
// 窗口改变回调函数
void framebuffer_size_callback(GLFWwindow* window, int width, int height)
{
glViewport(0, 0, width, height);
}
// 窗口按键输入
void processInput(GLFWwindow* window)
{
// 按下esc按键,退出程序
if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS)
glfwSetWindowShouldClose(window, true);
}