通过前面的学习,已经可以创建一个物体、着色、加入纹理,但它们都还是静态的物体,如何才能动起来?

我们知道所看到的图象都是在渲染循环的while中,不停的绘制图象,才得以显示,所以我们就可以在每次绘图前,改变物体相关的属性,比如改变坐标位置,以达到让物体动起来。

比如要实现物体移动,如何实现?先看一下下面这个式子,物体在3维空间中都是由坐标点构成,假设其中一个点P为(x, y, z),如果让P向空间坐标系三个方向分别依次移动Tx, Ty, Tz个距离,我们就可以构造下面这个矩阵等式,而且式子右边的结果,刚好是我们P点移动后的坐标位置,也就完成了位移。根据这个方式,我们就可以利用矩阵乘法,对物体的每个点做变化,以达到位移、旋转、缩放等效果

android openGL 图像显示移动 opengl控制物体移动_加载



记住下面这几个单词:

  • 矩阵(Matrix) 对象变换(Transform) 四元数(Quaternion)
  • 位移(Translation) 旋转(Rotate) 缩放(Scale)

让上一篇博客的效果图(地址:)中的图片,随着时间旋转,并且把图片放在窗口的右下角

android openGL 图像显示移动 opengl控制物体移动_#include_02


效果图如下(不停的旋转):

android openGL 图像显示移动 opengl控制物体移动_着色器_03


渲染流程:

  • 添加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);
}