【OpenGL】繪製四邊形

EBO、VBO和VAO的簡介

思路

畫一個四邊形，可以有兩種方法

1、通過2個三角形拼接而成，這就和前一個實驗畫三角形類似，利用VAO和VBO實驗，我們要做的只是需要把給出的頂點增加爲6個即可。

2、但是我們會發現使用上述方式，會有兩個頂點我們使用了兩次，一個矩形只有四個頂點，如果是大量的複雜模型計算就會產生很大浪費。如何解決這個問題呢？其實我們只要存儲矩形的四個頂點，然後指定繪製順序就好了，EBO幫助我們實現了這個功能。這種方式我們可以稱之爲索引繪製。

定義不重複的頂點及索引數據如下：

//四邊形的頂點數據
float vertices[] = {
	0.5f,0.5f,0.0f,//右上
	0.5f,-0.5f,0.0f,//右下
	-0.5f,-0.5f,0.0f,//左下
	-0.5f,0.5f,0.0f//左上
};
//索引數據（注意這裏是從0開始的）
unsigned int indices[] = {
	0,1,3,//第一個三角形
	1,2,3//第二個三角形
};

創建索引緩衝對象如下：

	//生成並綁定EBO
	GLuint element_buffer_object;//EBO
	glGenBuffers(1, &element_buffer_object);
	glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, element_buffer_object);
	//將索引數據綁定至EBO中
	glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);

下面介紹通過VAO+VBO+EBO的形式畫一個四邊形，VAO+VBO的方法同該過程，兩種方法的代碼都將在後面貼出

步驟

1-初始化：

初始化GLFW，創建窗口，初始化GLAD，創建視口

2-數據處理：

給定頂點數據，生成並綁定VAO、VBO、EBO（準備在GPU中進行處理），設置頂點屬性指針（本質上就是告訴OpenGL如何處理數據）。

3-着色器：

給出頂點和片段着色器，然後鏈接爲着色器程序，渲染時使用着色器程序。

4-渲染：

清空緩衝，使用着色器程序，繪製三角形，交換緩衝區並檢查觸發事件（比如鍵盤移動、鼠標移動）

5-釋放資源：

刪除VAO、VBO、EBO，調用GLFW的函數來清理所有的資源並退出程序

結果

開啓線框模式的效果

代碼

在配置好基本的OpenGL環境下，可直接運行

VAO+VBO+EBO


#include <iostream>
#include <glad/glad.h>
#include <GLFW/glfw3.h>
//四邊形的頂點數據
float vertices[] = {
	0.5f,0.5f,0.0f,//右上
	0.5f,-0.5f,0.0f,//右下
	-0.5f,-0.5f,0.0f,//左下
	-0.5f,0.5f,0.0f//左上
};
//索引數據（注意這裏是從0開始的）
unsigned int indices[] = {
	0,1,3,//第一個三角形
	1,2,3//第二個三角形
};
//屏幕寬、高
int screen_width = 1280;
int screen_height = 720;
int main()
{
	/*初始化*/
	glfwInit();//初始化glfw
	glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);//OpenGl版本爲3.3，主次版本號均爲3
	glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
	glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);//使用核心模式（無需向後兼容性）
	glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GL_TRUE);//如果使用的是Mac OS X系統，需加上這行
	glfwWindowHint(GLFW_RESIZABLE,false);//不可改變窗口大小

	//創建窗口（寬，高，窗口名稱）
	auto window = glfwCreateWindow(screen_width, screen_height, "Quad", nullptr, nullptr);
	if (window==nullptr)//如果窗口創建失敗，輸出報錯信息
	{
		std::cout << "Failed to Create OpenGL Context" << std::endl;
		glfwTerminate();
		return -1;
	}
	glfwMakeContextCurrent(window);//將窗口的上下文設置爲當前線程的上下文

	//初始化GLAD,加載OpenGL函數指針地址的函數
	if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress))
	{
		std::cout << "Failed to initialize GLAD" << std::endl;
		return -1;
	}

	//指定當前視口尺寸（前兩個參數爲左下角位置，後兩個參數是渲染窗口寬、高）
	glViewport(0, 0, screen_width, screen_height);

	/*數據處理*/
	//生成並綁定VAO和VBO
	GLuint vertex_array_object;//VAO
	glGenVertexArrays(1, &vertex_array_object);
	glBindVertexArray(vertex_array_object);

	GLuint vertex_buffer_object;//VBO
	glGenBuffers(1, &vertex_buffer_object);
	glBindBuffer(GL_ARRAY_BUFFER,vertex_buffer_object);

	//將頂點數據綁定至VBO中
	glBufferData(GL_ARRAY_BUFFER, sizeof(vertices),vertices, GL_STATIC_DRAW);

	//生成並綁定EBO
	GLuint element_buffer_object;//EBO
	glGenBuffers(1, &element_buffer_object);
	glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, element_buffer_object);

	//將索引數據綁定至EBO中
	glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);

	//設置頂點屬性指針
	glVertexAttribPointer(0, 3, GL_FLOAT,GL_FALSE, 3 * sizeof(float),(void*)0);
	glEnableVertexAttribArray(0);//開啓0通道，默認不開啓

	//解綁VAO和VBO
	glBindVertexArray(0);
	glBindBuffer(GL_ARRAY_BUFFER, 0);

	/*着色器*/
	//頂點着色器和片段着色器源碼
	const char* vertex_shader_source =
		"#version 330 core\n"
		"layout (location=0) in vec3 aPos;\n"//位置變量的屬性位置值爲0
		"void main()\n"
		"{\n"
		"	gl_Position=vec4(aPos,1.0);\n"
		"}\n\0";
	const char* fragment_shader_source =
		"#version 330 core\n"
		"out vec4 FragColor;\n"//輸出的顏色向量
		"void main()\n"
		"{\n"
		"  FragColor=vec4(1.0f,0.5f,0.2f,1.0f);\n"
		"}\n\0";

	//生成並編譯着色器
	//頂點着色器
	int vertex_shader = glCreateShader(GL_VERTEX_SHADER);
	glShaderSource(vertex_shader, 1, &vertex_shader_source, nullptr);
	glCompileShader(vertex_shader);
	int success;
	char info_log[512];
	//檢查着色器是否成功編譯，如果編譯失敗，打印錯誤信息
	glGetShaderiv(vertex_shader, GL_COMPILE_STATUS, &success);
	if (!success)
	{
		glGetShaderInfoLog(vertex_shader, 512, nullptr, info_log);
		std::cout << "ERROR::SHADER::VERTEX::COMPILATION_FAILED\n" << info_log << std::endl;
	}
	//片段着色器
	int fragment_shader = glCreateShader(GL_FRAGMENT_SHADER);
	glShaderSource(fragment_shader, 1, &fragment_shader_source, nullptr);
	glCompileShader(fragment_shader);
	//檢查着色器是否成功編譯，如果編譯失敗，打印錯誤信息
	glGetShaderiv(fragment_shader, GL_COMPILE_STATUS, &success);
	if (!success)
	{
		glGetShaderInfoLog(vertex_shader, 512, nullptr, info_log);
		std::cout << "ERROR::SHADER::FRAGMENT::COMPILATION_FAILED\n" << info_log << std::endl;
	}
	//鏈接頂點和片段着色器至一個着色器程序
	int shader_program = glCreateProgram();
	glAttachShader(shader_program, vertex_shader);
	glAttachShader(shader_program, fragment_shader);
	glLinkProgram(shader_program);
	//檢查着色器是否成功鏈接，如果鏈接失敗，打印錯誤信息
	glGetProgramiv(shader_program, GL_LINK_STATUS, &success);
	if (!success)
	{
		glGetProgramInfoLog(shader_program, 512, nullptr, info_log);
		std::cout << "ERROR::SHADER::PROGRAM::LINKING_FAILED\n" << info_log << std::endl;
	}
	//刪除着色器
	glDeleteShader(vertex_shader);
	glDeleteShader(fragment_shader);
	//線框模式-可選（GL-LINE爲線框模式，GL_FILL爲填充模式（無下面該語句默認該模式）
	//glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);

	/*渲染*/
	while (!glfwWindowShouldClose((window)))
	{
		//清空顏色緩衝
		glClearColor(0.0f, 0.34f, 0.57f, 1.0f);
		glClear(GL_COLOR_BUFFER_BIT);

		//使用着色器程序
		glUseProgram(shader_program);
		
		//繪製四邊形
		glBindVertexArray(vertex_array_object);//綁定VAO
		glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);//EBO繪製四邊形
		glBindVertexArray(0);//解除綁定VAO

		//交換緩衝並且檢查是否有觸發時間（比如鍵盤輸入，鼠標移動等）
		glfwSwapBuffers(window);
		glfwPollEvents();
	}

	/*釋放資源*/
	//刪除VAO/VBO/EBO
	glDeleteVertexArrays(1, &vertex_array_object);
	glDeleteBuffers(1, &vertex_buffer_object);
	glDeleteBuffers(1, &vertex_buffer_object);
	//清理所有資源並正確退出程序
	glfwTerminate();
	return 0;
}

VAO+VBO

/*
步驟：
1-初始化：GLFW窗口，GLAD
2-數據處理：給定頂點數據，生成並綁定VAO&VBO（準備再GPU中進行處理），設置頂點屬性指針（本質上就是告訴OpenGL如何處理數據）。
3-着色器：給出頂點和片段着色器，然後鏈接爲着色器程序，渲染時使用着色器程序。
4-渲染：清空緩衝，綁定紋理，使用着色器程序，繪製三角形，交換緩衝區檢查觸發時間後釋放資源
*/
//使用VAO、VBO的方式形成四邊形
#include <iostream>
#include <glad/glad.h>
#include <GLFW/glfw3.h>
//using namespace std;
//三角形頂點數據
//const float triangle[] = {
//     //位置
//     -0.5,-0.5,0.0,//左下
//     0.5f,-0.5f,0.0f,//右下
//     0.0f,0.5f,0.0f//正上
//};
const float triangle[] = {
	//第一個三角形66
	0.5f,0.5f,0.0f,//右上
	0.5f,-0.5f,0.0f,//右下
	-0.5f,-0.5f,0.0f,//左下
	//第二個三角形
	-0.5f,-0.5f,0.0f,//左下
	0.5f,0.5f,0.0f,//右上
	-0.5f,0.5f,0.0f//左上
};
//屏幕寬，高
int screen_width = 1280;
int screen_height = 720;
int main() {
	//初始化GLFW
	glfwInit();
	//OpenGL版本爲3.3，主次版本號均設爲3
	glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
	glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
	glfwWindowHint(GLFW_OPENGL_ANY_PROFILE, GLFW_OPENGL_CORE_PROFILE);//使用核心模式，無需向後兼容
	glfwWindowHint(GLFW_RELEASE, false);
	//創建窗口（寬、高、窗口名稱）
	auto window = glfwCreateWindow(screen_width, screen_height, "Triangle", nullptr, nullptr);
	if (window == nullptr)//如果窗口創建失敗
	{
		std::cout << "Failed to Create OpenGL ConText" << std::endl;
		glfwTerminate();
		return -1;
	}
	glfwMakeContextCurrent(window);//將窗口的上下文設置爲當前線程的主上下文

	//初始化GLAD,加載OpenGL函數指針地址的函數
	if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress))
	{
		std::cout << "Failed to initialize GLAD" << std::endl;
	}
	//指定當前視口尺寸(前兩個參數爲左下角位置，後兩個參數是渲染窗口寬、高)
	glViewport(0, 0, screen_width, screen_height);

	//生成並綁定VAO和VBO
	GLuint vertex_array_object;//VAO
	glGenVertexArrays(1, &vertex_array_object);
	glBindVertexArray(vertex_array_object);
	GLuint vertex_buffer_object;//VBO
	glGenBuffers(1, &vertex_buffer_object);
	glBindBuffer(GL_ARRAY_BUFFER, vertex_buffer_object);
	//將頂點數據綁定至當前默認的緩存中
	glBufferData(GL_ARRAY_BUFFER, sizeof(triangle), triangle, GL_STATIC_DRAW);
	//設置頂點屬性指針
	glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
	glEnableVertexAttribArray(0);
	//解綁VAO和VBO
	glBindVertexArray(0);
	glBindBuffer(GL_ARRAY_BUFFER, 0);
	//頂點着色器和片段着色器源碼
	const char* vertex_shader_source =
		"#version 330 core\n"
		"layout (location=0) in vec3 aPos;\n"
		"void main()\n"
		"{\n"
		"      gl_Position=vec4(aPos,1.0);\n"
		"}\n\0";
	const char* fragment_shader_source =
		"#version 330 core\n"
		"out vec4 FragColor;\n"
		"void main()\n"
		"{\n"
		"      FragColor=vec4(0.5f,1.5f,0.2f,1.0f);\n"//三角形的顏色
		"}\n\0";
	//生成並編譯着色器
	//頂點着色器
	int vertex_shader = glCreateShader(GL_VERTEX_SHADER);
	glShaderSource(vertex_shader, 1, &vertex_shader_source, NULL);
	glCompileShader(vertex_shader);
	int success;
	char info_log[512];
	//檢查着色器是否編譯成功，如果編譯失敗，打印錯誤信息
	glGetShaderiv(vertex_shader, GL_COMPILE_STATUS, &success);
	if (!success)
	{
		glGetShaderInfoLog(vertex_shader, 512, nullptr, info_log);
		std::cout << "ERROR::SHADER::VERTEX::COMPILATION_FAILED\n" << info_log << std::endl;
	}
	//片段着色器
	int fragment_shader = glCreateShader(GL_FRAGMENT_SHADER);
	glShaderSource(fragment_shader, 1, &fragment_shader_source, nullptr);
	glCompileShader(fragment_shader);
	//檢查着色器是否成功編譯，如果編譯失敗，打印錯誤信息
	glGetShaderiv(fragment_shader, GL_COMPILE_STATUS, &success);
	if (!success)
	{
		glGetShaderInfoLog(fragment_shader, 512, nullptr, info_log);
		std::cout << "ERROR::SHADER::FRAGMENT::COMPILATION_FAILED\n" << info_log << std::endl;
	}
	//鏈接頂點和片段着色器至一個着色器程序
	int shader_program = glCreateProgram();
	glAttachShader(shader_program, vertex_shader);
	glAttachShader(shader_program, fragment_shader);
	glLinkProgram(shader_program);
	//檢查着色器是否成功鏈接，如果鏈接失敗，打印錯誤信息
	glGetProgramiv(shader_program, GL_LINK_STATUS, &success);
	if (!success)
	{
		glGetProgramInfoLog(shader_program, 512, nullptr, info_log);
		std::cout << "ERROR::SHADER::PROGRAM::LINKING_FAILED\n" << info_log << std::endl;
	}
	//刪除着色器
	glDeleteShader(vertex_shader);
	glDeleteShader(fragment_shader);
	//線框模式
	//glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);
	//渲染循環4
	while (!glfwWindowShouldClose((window)))
	{
		//清空顏色緩衝
		glClearColor(1.0f, 0.34f, 0.57f, 1.0f);//背景色
		glClear(GL_COLOR_BUFFER_BIT);

		//使用着色器程序
		glUseProgram(shader_program);

		//繪製三角形
		glBindVertexArray(vertex_array_object);//綁定VAO
		glDrawArrays(GL_TRIANGLES, 0, 6);//綁定三角形
		glBindVertexArray(0);//解除綁定
		//交換緩衝並且檢查是否有觸發事件(比如鍵盤輸入、鼠標移動等)
		glfwSwapBuffers(window);
		glfwPollEvents();
	}
	//刪除VAO和VBO
	glDeleteVertexArrays(1, &vertex_array_object);
	glDeleteBuffers(1, &vertex_buffer_object);
	//清理所有的資源並正確退出程序
	glfwTerminate();
	return 0;
}

參考資料

LearnOpenGL
中國大學MOOC《計算機圖形學》——華中科技大學

【OpenGL】繪製四邊形

EBO、VBO和VAO的簡介

思路

步驟

1-初始化：

2-數據處理：

3-着色器：

4-渲染：

5-釋放資源：

結果

代碼

VAO+VBO+EBO

VAO+VBO

參考資料

Kafka存儲機制

aws語音呼叫調用，告警電話

【轉】[C#] WebAPI 防止併發調用二（冥等性）

HTTP URL 詳解

【劍指offer】21. 調整數組順序使奇數位於偶數前面

【OpenGL】太陽星系的實現

【LeetCode】面試題 16.17. 連續數列

【LeetCode】409. 最長迴文串

【LeetCode】300. 最長上升子序列

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結