上接: https://blog.csdn.net/weixin_44506615/article/details/149861824
完整代碼：https://gitee.com/Duo1J/learn-open-gl
一、渲染管線
在開始之前，我們先簡單了解一下圖形渲染管線
在渲染3D物體時，我們常用到的一種幾何結構為網格模型 (Mesh)，其為一系列點的集合，各點相連組成三角面
首先CPU會進行一些前置操作(數據處理、緩沖綁定等)后將產生數據提交 (DrawCall) 到GPU，GPU在接收到數據后會執行一系列操作來將3D場景數據轉換為2D圖像，這個過程就稱作渲染管線
一個最簡單的渲染管線通常有以下步驟:
圖片來源LearnOpenGL
1. 頂點著色器 (Vertex Shader)
對傳入的頂點數據進行操作，如位移等，此外還會進行一系列的坐標變換(MVP變換)，返回操作后的頂點坐標及其他屬性
2. 光柵化
將三維幾何圖元轉換為屏幕上的二維像素片元，通常會在這個環節進行視口變換，片元生成，裁剪等
3. 片元(片段、像素)著色器 (Fragment Shader/Pixel Shader)
處理光柵化生成的每個片元，進行光照模型計算、紋理采樣等操作，返回片元的顏色值及其他屬性
最后進行深度測試、模板測試、混合后寫入幀緩沖區
如今大多數顯卡都有成千上萬個小處理核心，它們運行著各自的小程序，從而在渲染管線中快速并行的處理渲染數據，這些小程序就是上述的著色器(Shader)
二、繪制三角形
我們先定義一下輸入的頂點數據
這段數據表示三個點，為三角形的三個頂點
這些點的坐標值范圍在[-1,1]之間，稱為標準化設備坐標(NDC)
float vertices[] = {-0.5f, -0.5f, 0.0f,0.5f, -0.5f, 0.0f,0.0f, 0.5f, 0.0f
};
1. 頂點緩沖對象(Vertex Buffer Objects - VBO)
VBO為顯存中的一塊緩沖區，其用來存儲大量的頂點數據，在渲染前由CPU將數據發送到VBO中
我們可以通過以下代碼來對VBO進行創建、綁定、設置數據
// 創建緩沖
unsigned int VBO;
glGenBuffers(1, &VBO);
// 綁定創建的緩沖到VBO
glBindBuffer(GL_ARRAY_BUFFER, VBO);
// 寫入數據到VBO
// 這里第四個參數表示我們希望顯卡如何管理給定的數據
// GL_STATIC_DRAW 數據不會或幾乎不會改變
// GL_DYNAMIC_DRAW 數據會被改變很多
// GL_STREAM_DRAW 數據每次繪制時都會改變
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
2. 頂點屬性
我們已經將頂點數據傳入到了VBO中，但是GPU還不知道要怎么去解析這些頂點數據，所以接下來我們要配置頂點解析的方式
// 設置頂點屬性
// 參數1: 設置位置值為0，對于頂點著色器中的layout(location = 0)
// 參數2: 頂點屬性的大小，vec3，所以大小是3
// 參數3: 數據類型, float
// 參數4: 是否需要將數據標準化，會將數據映射到[-1,1]或是[0,1](取決于是否unsigned)
// 參數5: 步長
// 參數6: 數據偏移量
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);
3. 頂點數組對象(Vertex Array Object - VAO)
我們可以將頂點數據VBO以及頂點屬性都存儲在一塊特定的緩沖區中，在之后的繪制中我們就只需要切換這塊特定的緩沖區即可，這塊緩沖區就叫做VAO
接下來我們來創建、綁定VAO，請注意，綁定VAO需要在VBO之前進行
// 創建VAO
unsigned int VAO;
glGenVertexArrays(1, &VAO);
// 綁定VAO
glBindVertexArray(VAO);// ...VBO和頂點屬性相關// 解綁VBO
glBindBuffer(GL_ARRAY_BUFFER, 0);
// 解綁VAO
glBindVertexArray(0);
4. 頂點著色器(Vertex Shader)
接下來我們需要編寫頂點著色器的代碼
在OpenGL中使用名為GLSL(OpenGL Shading Language)語言來編寫
我們會先使用硬編碼的方式進行編寫，之后會拆分到一個獨立的文件中
// 版本號
#version 330 core
// 聲明輸入坐標，從位置0
layout (location = 0) in vec3 aPos;void main()
{// 設置頂點著色器的輸出gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);
}
接下來我們需要創建著色器對象，傳入我們編寫的代碼并且編譯它以供GPU使用
// 頂點著色器代碼
const char* vertexShaderSource = "#version 330 core\n"
"layout (location = 0) in vec3 aPos;\n"
"void main()\n"
"{\n"
" gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);\n"
"}\0";// 創建頂點著色器
unsigned int vertexShader;
vertexShader = glCreateShader(GL_VERTEX_SHADER);
// 設置著色器代碼，第二個參數為傳入的源碼字符串數量
glShaderSource(vertexShader, 1, &vertexShaderSource, NULL);
// 編譯
glCompileShader(vertexShader);// 可選，判斷著色器是否編譯成功
int success;
char infoLog[512];
glGetShaderiv(vertexShader, GL_COMPILE_STATUS, &success);
if (!success)
{glGetShaderInfoLog(vertexShader, 512, NULL, infoLog);std::cout << "ERROR::SHADER::VERTEX::COMPILATION_FAILED\n" << infoLog << std::endl;glfwTerminate();return -1;
}
5. 片元(片段、像素)著色器(Fragment Shader/Pixel Shader)
接下來我們通過片元著色器計算像素最后的顏色輸出
#version 330 core
// 輸出顏色 vec4(r,g,b,a)
out vec4 FragColor;void main()
{// 固定輸出橘黃色FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);
}
同樣，我們需要創建并編譯片元著色器
// 片元著色器代碼
const char* fragmentShaderSource = "#version 330 core\n"
"layout (location = 0) out vec4 FragColor;\n"
"void main()\n"
"{\n"
" FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);\n"
"}\0";// 創建片元著色器
unsigned int fragmentShader;
fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
glShaderSource(fragmentShader, 1, &fragmentShaderSource, NULL);
glCompileShader(fragmentShader);glGetShaderiv(fragmentShader, GL_COMPILE_STATUS, &success);
if (!success)
{glGetShaderInfoLog(fragmentShader, 512, NULL, infoLog);std::cout << "ERROR::SHADER::FRAGMENT::COMPILATION_FAILED\n" << infoLog << std::endl;glfwTerminate();return -1;
}
6. 著色器程序
著色器程序對象是多個著色器鏈接后的結果
// 創建著色器程序
unsigned int shaderProgram;
shaderProgram = glCreateProgram();
// 添加著色器
glAttachShader(shaderProgram, vertexShader);
glAttachShader(shaderProgram, fragmentShader);
// 鏈接
glLinkProgram(shaderProgram);glGetProgramiv(shaderProgram, GL_LINK_STATUS, &success);
if (!success)
{glGetShaderInfoLog(fragmentShader, 512, NULL, infoLog);std::cout << "[Error] Shader program link failed!\n" << infoLog << std::endl;glfwTerminate();return -1;
}// 鏈接完成后即可刪除著色器對象
glDeleteShader(vertexShader);
glDeleteShader(fragmentShader);
7. 繪制三角形
準備就緒! 接下來開始繪制三角形，在我們的主循環中，輸入處理之后
// 使用著色器程序
glUseProgram(shaderProgram);
// 綁定接下來要使用的VAO
glBindVertexArray(VAO);
// 繪制
glDrawArrays(GL_TRIANGLES, 0, 3);
編譯執行，順利的話可以看到
三、繪制矩形
1. 元素(索引)緩沖對象(Element(Index) Buffer Object - EBO)
接下來我們來了解第三種緩沖對象，EBO
EBO中存儲的實際上是一系列成組的索引，這些索引表示我們應該用VBO中的那些頂點來繪制一個三角形
現在我們修改一下我們的vertices數據，并增加indices數據
// 頂點數據，基于標準化設備坐標(NDC)
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 // 左上角
};// 索引數據
unsigned int indices[] = {0, 1, 3, // 第一個三角形1, 2, 3 // 第二個三角形
};
現在我們頂點數據中有四個點，來表示矩形的四個角的坐標
而indices中有六個索引數據，每三個一組，共兩組
第一組：0, 1, 3 表示GPU應該使用VBO中的第0個，第1個和第3個頂點來組成一個三角形
第二組：1, 2, 3 則表示GPU應該使用VBO中的第1個，第2個和第3個頂點來組成一個三角形
EBO的創建綁定與VBO類似
// VAO、VBO創建、綁定、設置// 創建EBO
unsigned int EBO;
glGenBuffers(1, &EBO);
// 綁定EBO
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
// 設置EBO數據
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);//解綁VAO、VBO
//請注意這里不解綁EBO，在VAO中依然會使用到
然后修改繪制調用的指令
// 繪制// glDrawArrays(GL_TRIANGLES, 0, 3);// 通過EBO繪制// 參數2: 繪制頂點的個數// 參數3: 索引的數據類型// 偏移量glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);
編譯運行，順利的話可以看到
我們還可以啟用線框模式來查看繪制的兩個三角形
glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);
全部代碼
#include <iostream>#include <glad/glad.h>
#include <GLFW/glfw3.h>// 頂點數據，基于標準化設備坐標(NDC)
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 // 左上角
};// 索引數據
unsigned int indices[] = {0, 1, 3, // 第一個三角形1, 2, 3 // 第二個三角形
};// 頂點著色器代碼
const char* vertexShaderSource = "#version 330 core\n"
"layout (location = 0) in vec3 aPos;\n"
"void main()\n"
"{\n"
" gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);\n"
"}\0";// 片元著色器代碼
const char* fragmentShaderSource = "#version 330 core\n"
"layout (location = 0) out vec4 FragColor;\n"
"void main()\n"
"{\n"
" FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);\n"
"}\0";void ProcessInput(GLFWwindow* window)
{if (glfwGetKey(window, GLFW_KEY_ESCAPE)){glfwSetWindowShouldClose(window, true);}
}void OnSetFrameBufferSize(GLFWwindow* window, int width, int height)
{glViewport(0, 0, width, height);
}int main()
{glfwInit();glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);GLFWwindow* window = glfwCreateWindow(1280, 720, "OpenGLRenderer", NULL, NULL);if (window == NULL){std::cout << "Failed to create GLFW window" << std::endl;glfwTerminate();return -1;}glfwMakeContextCurrent(window);if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress)){std::cout << "Failed to initialize GLAD" << std::endl;return -1;}glfwSetFramebufferSizeCallback(window, OnSetFrameBufferSize);// 創建VAOunsigned int VAO;glGenVertexArrays(1, &VAO);// 綁定VAOglBindVertexArray(VAO);// 創建緩沖unsigned int VBO;glGenBuffers(1, &VBO);// 綁定創建的緩沖到VBOglBindBuffer(GL_ARRAY_BUFFER, VBO);// 寫入數據到VBO// 這里第四個參數表示我們希望顯卡如何管理給定的數據// GL_STATIC_DRAW 數據不會或幾乎不會改變// GL_DYNAMIC_DRAW 數據會被改變很多// GL_STREAM_DRAW 數據每次繪制時都會改變glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);// 設置頂點屬性// 參數1: 設置位置值為0，對于頂點著色器中的layout(location = 0)// 參數2: 頂點屬性的大小，vec3，所以大小是3// 參數3: 數據類型, float// 參數4: 是否需要將數據標準化，會將數據映射到[-1,1]或是[0,1](取決于是否unsigned)// 參數5: 步長// 參數6: 數據偏移量glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);glEnableVertexAttribArray(0);// 創建EBOunsigned int EBO;glGenBuffers(1, &EBO);// 綁定EBOglBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);// 設置EBO數據glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);// 解綁VBOglBindBuffer(GL_ARRAY_BUFFER, 0);// 解綁VAOglBindVertexArray(0);// 創建頂點著色器unsigned int vertexShader;vertexShader = glCreateShader(GL_VERTEX_SHADER);// 設置著色器代碼，第二個參數為傳入的源碼字符串數量glShaderSource(vertexShader, 1, &vertexShaderSource, NULL);// 編譯glCompileShader(vertexShader);// 可選，判斷著色器是否編譯成功int success;char infoLog[512];glGetShaderiv(vertexShader, GL_COMPILE_STATUS, &success);if (!success){glGetShaderInfoLog(vertexShader, 512, NULL, infoLog);std::cout << "[Error] Vertex shader compile failed!\n" << infoLog << std::endl;glfwTerminate();return -1;}// 創建片元著色器unsigned int fragmentShader;fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);glShaderSource(fragmentShader, 1, &fragmentShaderSource, NULL);glCompileShader(fragmentShader);glGetShaderiv(fragmentShader, GL_COMPILE_STATUS, &success);if (!success){glGetShaderInfoLog(fragmentShader, 512, NULL, infoLog);std::cout << "[Error] Fragment shader compile failed!\n" << infoLog << std::endl;glfwTerminate();return -1;}// 創建著色器程序unsigned int shaderProgram;shaderProgram = glCreateProgram();// 添加著色器glAttachShader(shaderProgram, vertexShader);glAttachShader(shaderProgram, fragmentShader);// 鏈接glLinkProgram(shaderProgram);glGetProgramiv(shaderProgram, GL_LINK_STATUS, &success);if (!success){glGetShaderInfoLog(fragmentShader, 512, NULL, infoLog);std::cout << "[Error] Shader program link failed!\n" << infoLog << std::endl;glfwTerminate();return -1;}// 鏈接完成后即可刪除著色器對象glDeleteShader(vertexShader);glDeleteShader(fragmentShader);while (!glfwWindowShouldClose(window)){glClearColor(0.2f, 0.3f, 0.3f, 1.0f);glClear(GL_COLOR_BUFFER_BIT);ProcessInput(window);// 使用著色器程序glUseProgram(shaderProgram);// 綁定接下來要使用的VAOglBindVertexArray(VAO);// 線框模式//glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);// 繪制// glDrawArrays(GL_TRIANGLES, 0, 3);// 通過EBO繪制// 參數2: 繪制頂點的個數// 參數3: 索引的數據類型// 偏移量glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);glfwSwapBuffers(window);glfwPollEvents();}glfwTerminate();return 0;
}
下接：https://blog.csdn.net/weixin_44506615/article/details/149894322?spm=1001.2014.3001.5502
![[硬件電路-123]：模擬電路 - 信號處理電路 - 常見的高速運放芯片、典型電路、電路實施注意事項](http://pic.xiahunao.cn/[硬件電路-123]：模擬電路 - 信號處理電路 - 常見的高速運放芯片、典型電路、電路實施注意事項)
