【OpenGL/入门】LearnOpenGL第一章代码实现——Transformations

简介

本文为 LearnOpenGL 教程的代码实现，此篇根据第一章《入门》写得。
关键步骤写有注释，请放心食用。
LearnOpenGL文章地址

Transformations

Transformations 文章地址
GLM 头文件下载地址

代码

main.cpp

#define GLEW_STATIC
#define STB_IMAGE_IMPLEMENTATION
#include <GL/glew.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>

using namespace std;

// 顶点数据
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, 2, 1,
	3, 2, 0
};

// 检测输入
void processInput(GLFWwindow* window)
{
	if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS) // 如果 ESC 键被按住
	{
		glfwSetWindowShouldClose(window, true); // 通过把WindowShouldClose属性设置为 true
	}
}

int main()
{
	// ---------------------------------------------------------------
	// 初始化GLFW
	// ---------------------------------------------------------------
	glfwInit();
	glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3); // OpenGL主版本号是3，确保用户在没有适当的OpenGL版本支持的情况下无法运行
	glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3); // OpenGL次版本号是3
	glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE); // 告诉GLFW我们使用的是核心模式,即只能使用OpenGL功能的一个子集，不再需要向后兼容特性

	// Open GLFW Window
	GLFWwindow* window = glfwCreateWindow(800, 600, "Transformations", NULL, NULL); // 造窗（宽，高，名称）
	if (window == NULL)
	{
		cout << "Create Window Failed." << endl;
		glfwTerminate(); // 终止glfw
		return -1; // 失败
	}
	glfwMakeContextCurrent(window); // 通知GLFW将我们窗口的上下文设置为当前线程的主上下文了

	// Init GLFW
	glewExperimental = true;
	if (glewInit() != GLEW_OK)
	{
		cout << "Init GLEW failed." << endl;
		glfwTerminate(); // 终止glfw
		return -1; // 失败
	}
	// ---------------------------------------------------------------


	// 渲染窗口及线条设置
	glViewport(0, 0, 800, 600); // 渲染窗口Viewport的左下角坐标和宽高（像素）
	//glPolygonMode(GL_FRONT_AND_BACK, GL_LINE); // 以线框模式绘制三角形
	glEnable(GL_CULL_FACE); // 去除掉某一面
	glCullFace(GL_BACK); // 去除背面

	// 生成着色器
	Shader* myShader = new Shader(".\\src\\Transformations\\vertexSource.c", ".\\src\\Transformations\\fragmentSource.c");


	// ---------------------------------------------------------------
	// ..:: 初始化代码 ::..
	// ---------------------------------------------------------------
	// 1.绑定VAO
	unsigned int VAO;
	glGenVertexArrays(1, &VAO); // 创建1个vao后，返还id给VAO
	glBindVertexArray(VAO); // 绑定VAO
	// unsigned int VAO[10];
	// glGenVertexArrays(10, VAO); // 创建10个vao后，返还id给VAO

	// 2.把顶点数组复制到缓冲中供OpenGL使用,将顶点数据存入VBO中
	unsigned int VBO; // 声明顶点缓冲对象,用于存放大量顶点属性
	glGenBuffers(1, &VBO); // 生成一个缓冲，把缓区的id给赋值给VBO,即通过VBO控制该缓冲
	glBindBuffer(GL_ARRAY_BUFFER, VBO); // 顶点缓冲对象的缓冲类型是GL_ARRAY_BUFFER,把新创建的缓冲绑定到GL_ARRAY_BUFFER目标上,自此对于GL_ARRAY_BUFFER的操作会做用到VBO上
	glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW); // 把用户定义的数据复制到当前绑定缓冲的函数:(目标缓冲类型，传输数据大小，实际数据，显卡管理模式：GL_STATIC_DRAW 数据不会或几乎不会改变；GL_DYNAMIC_DRAW 数据会被改变很多；GL_STREAM_DRAW 数据每次绘制时都会改变）

	// 3.复制索引数组到一个索引缓冲中，供OpenGL使用
	unsigned int EBO;
	glGenBuffers(1, &EBO);
	glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
	glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);

	// 4.设置顶点属性指针,告诉OpenGL该如何解析顶点数据
	// 位置属性
	glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)0); // (要解析顶点位置：与layout(location = 0)一致，顶点属性大小：xyz 3个值，数据类型，是否归一化，步长，位置数据在缓冲中起始位置的偏移量)
	glEnableVertexAttribArray(0); // 以顶点属性位置值作为参数，启用顶点属性，与上面第一个参数同步
	// 颜色属性
	glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(3 * sizeof(float)));
	glEnableVertexAttribArray(1);
	// 纹理属性
	glVertexAttribPointer(2, 2, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(6 * sizeof(float)));
	glEnableVertexAttribArray(2);

	// 5.加载并生成纹理
	int width, height, nrChannel;
	stbi_set_flip_vertically_on_load(true); // 颠倒图像

	// 纹理A
	unsigned int TexBufferA;
	glGenTextures(1, &TexBufferA); // 生成纹理对象
	glActiveTexture(GL_TEXTURE0); // 变换槽位
	glBindTexture(GL_TEXTURE_2D, TexBufferA); // 把TexBufferA绑到GL_TEXTURE_2D上
	unsigned char *data = stbi_load(".\\src\\Transformations\\container.jpg", &width, &height, &nrChannel, 0); // 载入图像(宽度,高度,颜色通道的个数)
	if (data)
	{
		// 为当前绑定的纹理对象附加纹理图像
		glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data);
		glGenerateMipmap(GL_TEXTURE_2D); // 生成纹理(纹理目标,多级渐远纹理的级别,纹理储存格式,宽,高,源图格式,数据类型,图像数据)
	}
	else
	{
		cout << "load image_container failed" << endl;
	}
	stbi_image_free(data); // 释放图像内存

	// 纹理B
	unsigned int TexBufferB;
	glGenTextures(1, &TexBufferB);
	glActiveTexture(GL_TEXTURE3);
	glBindTexture(GL_TEXTURE_2D, TexBufferB);
	unsigned char *data2 = stbi_load(".\\src\\Transformations\\awesomeface.png", &width, &height, &nrChannel, 0);
	if (data2)
	{
		glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, data2);
		glGenerateMipmap(GL_TEXTURE_2D);
	}
	else
	{
		cout << "load image_awesomeface failed" << endl;
	}
	stbi_image_free(data2);
	// ---------------------------------------------------------------

	
	// ---------------------------------------------------------------
	// ..:: 循环渲染 ::..
	// ---------------------------------------------------------------
	
	//trans = glm::translate(trans, glm::vec3(-0.01f, 0, 0)); // 平移
	//trans = glm::rotate(trans, glm::radians(10.0f), glm::vec3(0, 0, 1.0f)); // 旋转
	//trans = glm::scale(trans, glm::vec3(2.0f, 2.0f, 2.0f)); // 缩放
	// 先缩放,再旋转,再位移: 新顶点位置 = 位移 * 旋转 * 缩放 * 顶点位置
	
	while (!glfwWindowShouldClose(window)) // 检查GLFW是否被要求退出
	{
		glm::mat4 trans;
		trans = glm::translate(trans, glm::vec3(0.5f, -0.5f, 0));
		trans = glm::rotate(trans, (float)glfwGetTime(), glm::vec3(0, 0, 1.0f));
		// 输入,检查是否需要退出
		processInput(window); // 放在开始更稳健

		// .: 渲染指令 :.
		// 1.清除颜色缓冲
		glClearColor(0.2f, 0.3f, 0.5f, 1.0f); // 设置清空屏幕所用的颜色(rgb, 不透明度)
		glClear(GL_COLOR_BUFFER_BIT); // 清空颜色缓冲

		// 2.激活着色器
		myShader->use();

		// 3.把纹理赋值给片段着色器的采样器
		glActiveTexture(GL_TEXTURE0); // 在绑定纹理之前激活纹理单元,纹理单元GL_TEXTURE0默认总是被激活
		glBindTexture(GL_TEXTURE_2D, TexBufferA);
		glActiveTexture(GL_TEXTURE3);
		glBindTexture(GL_TEXTURE_2D, TexBufferB);
		glUniform1i(glGetUniformLocation(myShader->ID, "ourTexture"), 0); // 设置每个着色器采样器属于哪个纹理单元
		glUniform1i(glGetUniformLocation(myShader->ID, "ourFace"), 3);
		
		glUniformMatrix4fv(glGetUniformLocation(myShader->ID, "transform"), 1, GL_FALSE, glm::value_ptr(trans));


		// 4.绘制三角形
		glBindVertexArray(VAO);
		glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
		glDrawElements(GL_TRIANGLES, 3 * 2, GL_UNSIGNED_INT, 0); // 绘制物体

		// 5.交换缓冲并查询IO事件
		glfwPollEvents(); // 检查出发事件、更新窗口状态，调用回调函数
		glfwSwapBuffers(window); // 使用双缓冲交换颜色渲染窗口，防止图像闪烁
	}
	// ---------------------------------------------------------------

	glfwTerminate(); // 终止glfw，释放资源
	return 0;
}

vertexSource.c

#version 330 core
layout(location = 0) in vec3 aPos;
layout(location = 1) in vec3 aColor;
layout(location = 2) in vec2 aTexCoord;
uniform mat4 transform;
out vec4 vertexColor;
out vec2 TexCoord; // uv坐标
void main() {
	gl_Position = transform * vec4(aPos, 1.0);
	vertexColor = vec4(aColor.x, aColor.y, aColor.z, 1.0);
	TexCoord = aTexCoord;
}

运行结果

获得成就：旋风rgb笑脸箱