最近找實習有一丟丟蛋疼，沉迷鬼泣5，四周目通關，又不想寫代碼，寫篇筆記復習一下，要好好學圖形學啊
用OpenGL畫一個三角形
項目的簡介
記錄一下跟着learnOpenGL學習的過程
筆記里的代碼放在github上，依賴都用相對路徑配好了，直接下載就能用，IDE是VS2017,代碼
選擇Triangle項目作為啟動項可以測試這個代碼
使用的庫是glad和glfw，感覺用glad和glfw開發OpenGL的方式和DX挺像的，也有可能是我見識少, 感覺很多教材用來教學的庫都是GLUT, 嘛，學圖形學的話也不必糾結這些(大概
項目的架構
1.窗口初始化
2.渲染
int main()
{
BaseInit();//窗口初始化，鍵盤、鼠標等事件的綁定
MainLoop();//渲染相關
return 0;
}
要測試某個代碼，比如說畫三角形的，畫正方體的，在MainLoop里實現
void MainLoop()
{
NormalTriangle();
}
渲染管線
learnOpenGL里的渲染管線的抽象描述是這樣的
我們如果要畫三角形的畫，其實只要關注頂點着色器和片段着色器部分就好，其他操作管線會幫我們完成
從代碼的層面理解畫一個三角形的邏輯的話大概是
- 創建一個9個元素的float數組，代表三角形的坐標
- 編譯着色器
- 創建頂點數組對象(Vertex Array Object)VAO並綁定
- 創建頂點緩存數組(Vertex Buffer Object)VBO並綁定
- 使用圖元為三角形的繪圖方法畫三角形
當然不要忘記使用着色器程序，在我的理解里，VAO是在OpenGL里用來識別渲染對象的一個標識，在使用glad和glfw的情況下，OpenGL的對象都是用無符號整形數據來存儲。如果想要同時畫兩個物體，那么只要在兩個VAO之間切換綁定即可
窗口初始化
//窗口初始化
void BaseInit()
{
glfwInit();//初始化
glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);//配置GLFW
glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);//配置GLFW
glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);//
glfwWindowHint(GLFW_RESIZABLE, GL_TRUE);
screenWidth = 800.0f;
screenHeight = 600.0f;
//創建窗口
glWindow = glfwCreateWindow(screenWidth, screenHeight, "LearnOpenGL", nullptr, nullptr);
if (glWindow == nullptr)
{
cout << "Failed to create GLFW window" << endl;
glfwTerminate();
return;
}
glfwMakeContextCurrent(glWindow);
if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress))
{
std::cout << "Failed to initialize GLAD" << std::endl;
return;
}
}
這段代碼沒什么好說的，做一些窗口和庫的初始化
畫三角形
void NormalTriangle()
{
float Triangle[] = {
-0.9f, -0.5f, 0.0f, // left
-0.0f, -0.5f, 0.0f, // right
-0.45f, 0.5f, 0.0f, // top
};
//編譯着色器
Shader ourShader("vertex_1.vs", "fragment_1.fs");//編譯着色器
ourShader.use();//使用着色器
unsigned int VBO, VAO;
glGenVertexArrays(1, &VAO); //生成頂點數組對象
glGenBuffers(1, &VBO);//生成頂點緩沖區
glBindVertexArray(VAO);// 綁定頂點數組對象
glBindBuffer(GL_ARRAY_BUFFER, VBO);//綁定頂點緩沖區
glBufferData(GL_ARRAY_BUFFER, sizeof(Triangle), Triangle, GL_STATIC_DRAW);//設置緩沖區中的數據
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0); // 設置對緩沖區訪問的步長為3以及相位為0，告訴着色器，這個數據輸入到着色器的第一個(索引為0)輸入變量，數據的長度是3個float
glEnableVertexAttribArray(0);
while (!glfwWindowShouldClose(glWindow))
{
glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
//畫三角形
glBindVertexArray(VAO);//綁定頂點數組對象
glDrawArrays(GL_TRIANGLES, 0, 3);
glfwPollEvents();
glfwSwapBuffers(glWindow);
}
}
將編譯着色器的部分封裝起來代碼容易理解多了，頂點着色器和片段着色器的代碼都比較簡單
//vertex_1.vs 頂點着色器
#version 330 core
layout (location = 0) in vec3 aPos;//輸入的變量的位置為0，所以glVertexAttribPointer的第一個參數為0
void main()
{
gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);//輸出的變量叫gl_Position
}
//fragment_1.fs 片段着色器
#version 330 core
out vec4 FragColor;//輸出一個顏色
void main()
{
FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);
}
最終的效果
畫一個彩色的三角形
void ColourfulTriangle()
{
//顏色會在光柵化階段被硬件進行插值計算
float vertices[] = {
// 位置 // 顏色
0.5f, -0.5f, 0.0f, 1.0f, 0.0f, 0.0f, // 右下
-0.5f, -0.5f, 0.0f, 0.0f, 1.0f, 0.0f, // 左下
0.0f, 0.5f, 0.0f, 0.0f, 0.0f, 1.0f // 頂部
};
//編譯着色器
Shader ourShader("vertex_4.vs", "fragment_4.fs");
ourShader.use();//glUseProgram(shaderProgram);
unsigned int VBO, VAO;
//頂點數組
glGenVertexArrays(1, &VAO);
glBindVertexArray(VAO);
//綁定頂點數組緩存
glGenBuffers(1, &VBO);
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
// 位置屬性
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)0);//設置數據訪問的指針
glEnableVertexAttribArray(0);
// 顏色屬性
glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)(3 * sizeof(float)));//設置數據訪問的指針
glEnableVertexAttribArray(1);
while (!glfwWindowShouldClose(glWindow))
{
glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
//draw
glBindVertexArray(VAO);
glDrawArrays(GL_TRIANGLES, 0, 6);
glBindVertexArray(0);
glfwPollEvents();
glfwSwapBuffers(glWindow);
}
}
在數組里加入了顏色的屬性，要把屬性傳入着色器，設置數據訪問的指針的步長和相位就好，步長是6，相位是3
着色器的代碼
//vertex_4.vs
#version 330 core
layout (location = 0) in vec3 aPos; // 位置變量的屬性位置值為 0
layout (location = 1) in vec3 aColor; // 顏色變量的屬性位置值為 1
out vec3 ourColor; // 向片段着色器輸出一個顏色
void main()
{
gl_Position = vec4(aPos, 1.0);
ourColor = aColor; // 將ourColor設置為我們從頂點數據那里得到的輸入顏色
}
//fragment_4.fs
#version 330 core
out vec4 FragColor;
in vec3 ourColor;
void main()
{
FragColor = vec4(ourColor, 1.0);
}
最終的效果
編譯着色器這里省了很多代碼，貼上Shader.cpp和Shader.h，其實只是抄learnOpenGL給的源碼
#include "Shader.h"
#include <string>
void Shader::use()
{
glUseProgram(ID);
}
void Shader::setBool(const std::string & name, bool value) const
{
glUniform1i(glGetUniformLocation(ID, name.c_str()), (int)value);
}
void Shader::setInt(const std::string & name, int value) const
{
glUniform1i(glGetUniformLocation(ID, name.c_str()), value);
}
void Shader::setFloat(const std::string & name, float value) const
{
glUniform1f(glGetUniformLocation(ID, name.c_str()), value);
}
#ifndef SHADER_H
#define SHADER_H
#include "glfw3.h"
#include "glad.h"; // 包含glad來獲取所有的必須OpenGL頭文件
#include <string>
#include <fstream>
#include <sstream>
#include <iostream>
#define TEXTURE_PATH (std::string("Resources/Texture/")) //紋理的路徑
#define SHADER_PATH (std::string("Resources/Shader/")) //Shader的路徑
//檢查Shader是否編譯正確
inline void assertShader(unsigned int shaderObj, std::string&& shaderName)
{
int success = 0;
char infoLog[512];
glGetShaderiv(shaderObj, GL_COMPILE_STATUS, &success);
if (!success)
{
glGetShaderInfoLog(shaderObj, 512, NULL, infoLog);
std::cout << "ERROR::SHADER" << shaderName << "::COMPILATION_FAILED\n" << infoLog << std::endl;
}
}
//檢查着色器程序是否編譯正確
inline void assertProgram(unsigned int programObj, std::string&& programName)
{
int success = 0;
char infoLog[512];
glGetProgramiv(programObj, GL_LINK_STATUS, &success);
if (!success)
{
glGetShaderInfoLog(programObj, 512, NULL, infoLog);
std::cout << "ERROR::PROGRAM::" << programName << "::COMPILATION_FAILED\n" << infoLog << std::endl;
}
}
class Shader
{
public:
// 程序ID
unsigned int ID;
Shader() : ID(-1)
{
};
// 構造器讀取並構建着色器
template <typename S1, typename S2 = std::string>
Shader(S1&& vertexPath, S2&& fragmentPath)
{
// 1. 從文件路徑中獲取頂點/片段着色器
std::string vertexCode;
std::string fragmentCode;
std::ifstream vShaderFile;
std::ifstream fShaderFile;
// 保證ifstream對象可以拋出異常：
vShaderFile.exceptions(std::ifstream::failbit | std::ifstream::badbit);
fShaderFile.exceptions(std::ifstream::failbit | std::ifstream::badbit);
try
{
// 打開文件
vShaderFile.open(SHADER_PATH + std::forward<S1>(vertexPath));
fShaderFile.open(SHADER_PATH + std::forward<S2>(fragmentPath));
std::stringstream vShaderStream, fShaderStream;
// 讀取文件的緩沖內容到數據流中
vShaderStream << vShaderFile.rdbuf();
fShaderStream << fShaderFile.rdbuf();
// 關閉文件處理器
vShaderFile.close();
fShaderFile.close();
// 轉換數據流到string
vertexCode = vShaderStream.str();
fragmentCode = fShaderStream.str();
}
catch (std::ifstream::failure e)
{
std::cout << "ERROR::SHADER::FILE_NOT_SUCCESFULLY_READ" << std::endl;
}
const char* vShaderCode = vertexCode.c_str();
const char* fShaderCode = fragmentCode.c_str();
unsigned int vertex, fragment;
vertex = glCreateShader(GL_VERTEX_SHADER);
glShaderSource(vertex, 1, &vShaderCode, NULL);
glCompileShader(vertex);
assertShader(vertex, "VertexShader");
fragment = glCreateShader(GL_FRAGMENT_SHADER);
glShaderSource(fragment, 1, &fShaderCode, NULL);
glCompileShader(fragment);
assertShader(fragment, "FragmentShader");
ID = glCreateProgram();
glAttachShader(ID, vertex);
glAttachShader(ID, fragment);
glLinkProgram(ID);
assertProgram(ID, "ShaderProgram");
// 刪除着色器，它們已經鏈接到我們的程序中了，已經不再需要了
glDeleteShader(vertex);
glDeleteShader(fragment);
}
// 使用/激活程序
void use();
// uniform工具函數
void setBool(const std::string &name, bool value) const;
void setInt(const std::string &name, int value) const;
void setFloat(const std::string &name, float value) const;
};
#endif