圖形渲染管線
在OpenGL中梁剔，任何事物都在3D空間中虽画，而屏幕和窗口卻是2D像素?cái)?shù)組舞蔽，這導(dǎo)致OpenGL的大部分工作都是關(guān)于把3D坐標(biāo)轉(zhuǎn)變?yōu)檫m應(yīng)屏幕的2D像素荣病。3D坐標(biāo)轉(zhuǎn)為2D坐標(biāo)的處理過(guò)程是由OpenGL的圖形渲染管線管理的，實(shí)際上是一堆原始圖形數(shù)據(jù)途經(jīng)一個(gè)輸送管道渗柿，期間經(jīng)過(guò)各種變化處理最終出現(xiàn)在屏幕的過(guò)程个盆。
圖形渲染管線可以被劃分為兩個(gè)主要部分：第一部分把你的3D坐標(biāo)轉(zhuǎn)換為2D坐標(biāo)，第二部分是把2D坐標(biāo)轉(zhuǎn)變?yōu)閷?shí)際的有顏色的像素朵栖。2D坐標(biāo)和像素是不同的颊亮，2D坐標(biāo)精確表示一個(gè)點(diǎn)在2D空間中的位置，而2D像素是這個(gè)點(diǎn)的近似值陨溅，2D像素受到你的屏幕/窗口分辨率的限制终惑。
圖形渲染管線接受一組3D坐標(biāo)，然后把它們轉(zhuǎn)變?yōu)槟闫聊簧系挠猩?D像素輸出门扇。圖形渲染管線可以被劃分為幾個(gè)階段雹有，每個(gè)階段將會(huì)把前一個(gè)階段的輸出作為輸入。所有這些階段都是高度專門(mén)化的（它們都有一個(gè)特定的函數(shù)）臼寄，并且很容易并行執(zhí)行霸奕。正是由于它們具有并行執(zhí)行的特性，當(dāng)今大多數(shù)顯卡都有成千上萬(wàn)的小處理核心吉拳，它們?cè)贕PU上為每一個(gè)（渲染管線）階段運(yùn)行各自的小程序质帅，從而在圖形渲染管線中快速處理你的數(shù)據(jù)。這些小程序叫做著色器(Shader)。
image.png
- 圖形渲染管線的第一個(gè)部分是頂點(diǎn)著色器(Vertex Shader)煤惩，它把一個(gè)單獨(dú)的頂點(diǎn)作為輸入嫉嘀。頂點(diǎn)著色器主要的目的是把3D坐標(biāo)轉(zhuǎn)為標(biāo)準(zhǔn)化設(shè)備坐標(biāo)(Normalized Device Coordinates, NDC)，同時(shí)頂點(diǎn)著色器允許我們對(duì)頂點(diǎn)屬性進(jìn)行一些基本處理魄揉。
標(biāo)準(zhǔn)化設(shè)備坐標(biāo)是一個(gè)x吃沪、y和z值在-1.0到1.0的一小段空間。任何落在范圍外的坐標(biāo)都會(huì)被丟棄/裁剪什猖，不會(huì)顯示在屏幕上票彪。標(biāo)準(zhǔn)化設(shè)備坐標(biāo)接著會(huì)變換為屏幕空間坐標(biāo)(Screen-space Coordinates)，這是使用通過(guò)glViewport函數(shù)提供的數(shù)據(jù)不狮，進(jìn)行視口變換(Viewport Transform)完成的降铸。所得的屏幕空間坐標(biāo)又會(huì)被變換為片段輸入到片段著色器中。 - 圖元裝配(Primitive Assembly)階段將頂點(diǎn)著色器輸出的所有頂點(diǎn)作為輸入（如果是GL_POINTS摇零，那么就是一個(gè)頂點(diǎn)）推掸，并所有的點(diǎn)裝配成指定圖元的形狀。
- 圖元裝配階段的輸出會(huì)傳遞給幾何著色器(Geometry Shader)驻仅。幾何著色器把圖元形式的一系列頂點(diǎn)的集合作為輸入谅畅，它可以通過(guò)產(chǎn)生新頂點(diǎn)構(gòu)造出新的（或是其它的）圖元來(lái)生成其他形狀。
- 幾何著色器的輸出會(huì)被傳入光柵化階段(Rasterization Stage)噪服，這里它會(huì)把圖元映射為最終屏幕上相應(yīng)的像素毡泻，生成供片段著色器(Fragment Shader)使用的片段(Fragment)。在片段著色器運(yùn)行之前會(huì)執(zhí)行裁切(Clipping)粘优。裁切會(huì)丟棄超出你的視圖以外的所有像素仇味，用來(lái)提升執(zhí)行效率。OpenGL中的一個(gè)片段是OpenGL渲染一個(gè)像素所需的所有數(shù)據(jù)雹顺。
- 片段著色器的主要目的是計(jì)算一個(gè)像素的最終顏色丹墨，這也是所有OpenGL高級(jí)效果產(chǎn)生的地方。通常嬉愧，片段著色器包含3D場(chǎng)景的數(shù)據(jù)（比如光照贩挣、陰影、光的顏色等等）没酣，這些數(shù)據(jù)可以被用來(lái)計(jì)算最終像素的顏色王财。
- 在所有對(duì)應(yīng)顏色值確定以后，最終的對(duì)象將會(huì)被傳到最后一個(gè)階段四康，叫做Alpha測(cè)試和混合(Blending)階段搪搏。這個(gè)階段檢測(cè)片段的對(duì)應(yīng)的深度（和模板(Stencil)）值（后面會(huì)講），用它們來(lái)判斷這個(gè)像素是其它物體的前面還是后面闪金，決定是否應(yīng)該丟棄疯溺。這個(gè)階段也會(huì)檢查alpha值（alpha值定義了一個(gè)物體的透明度）并對(duì)物體進(jìn)行混合(Blend)论颅。所以牛曹，即使在片段著色器中計(jì)算出來(lái)了一個(gè)像素輸出的顏色乙嘀，在渲染多個(gè)三角形的時(shí)候最后的像素顏色也可能完全不同。
著色器
現(xiàn)代OpenGL需要我們至少設(shè)置一個(gè)頂點(diǎn)和一個(gè)片段著色器（因?yàn)镚PU中沒(méi)有默認(rèn)的頂點(diǎn)/片段著色器）荚坞。幾何著色器是可選的墨闲，通常使用它默認(rèn)的著色器就行了今妄。OpenGL著色器是用OpenGL著色器語(yǔ)言(OpenGL Shading Language, GLSL)寫(xiě)成的，對(duì)于C++來(lái)說(shuō)鸳碧，就是一組字符串盾鳞。
const char *vertexShaderSource = "#version 330 core\n"
"layout (location = 0) in vec3 aPox;\n"
"void main()\n"
"{\n"
" gl_Position = vec4(aPox.x, aPox.y, aPox.z, 1.0);\n"
"}\0";
const char *fragmentShaderSource = "#version 330 core\n"
"out vec4 fragColor;\n"
"void main()\n"
"{\n"
" fragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);\n"
"}\0";
從著色器源碼到使用，中間有一系列步驟
// vertex shader
int 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);
cout << "ERROR::SHADER::VERTEX::COMPILATION_FAILED\n" << infoLog << endl;
}
// fragment shader
int 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);
cout << "ERROR::SHADER::FRAGMENT::COMPILATION_FAILED\n" << infoLog << endl;
}
int shaderProgram = glCreateProgram();
glAttachShader(shaderProgram, vertexShader);
glAttachShader(shaderProgram, fragmentShader);
glLinkProgram(shaderProgram);
glGetProgramiv(shaderProgram, GL_LINK_STATUS, &success);
if (!success) {
glGetProgramInfoLog(shaderProgram, 512, NULL, infoLog);
cout << "ERROR::SHADER::PROGRAM::LINKING_FAILED\n" << infoLog << endl;
}
glDeleteShader(vertexShader);
glDeleteShader(fragmentShader);
VAO瞻离、VBO腾仅、和EBO
- 頂點(diǎn)緩沖對(duì)象(Vertex Buffer Objects, VBO)管理輸入的頂點(diǎn)數(shù)據(jù)，它會(huì)在GPU內(nèi)存（通常被稱為顯存）中儲(chǔ)存大量頂點(diǎn)套利。使用這些緩沖對(duì)象的好處是我們可以一次性的發(fā)送一大批數(shù)據(jù)到顯卡上推励，而不是每個(gè)頂點(diǎn)發(fā)送一次。從CPU把數(shù)據(jù)發(fā)送到顯卡相對(duì)較慢肉迫，所以只要可能我們都要嘗試盡量一次性發(fā)送盡可能多的數(shù)據(jù)验辞。當(dāng)數(shù)據(jù)發(fā)送至顯卡的內(nèi)存中后，頂點(diǎn)著色器幾乎能立即訪問(wèn)頂點(diǎn)喊衫，這是個(gè)非车欤快的過(guò)程。
- 索引緩沖對(duì)象(Element Buffer Object格侯，EBO鼻听，也叫Index Buffer Object财著，IBO)用繪制頂點(diǎn)的順序解決頂點(diǎn)重復(fù)的問(wèn)題联四。
- 頂點(diǎn)數(shù)組對(duì)象(Vertex Array Object, VAO)使在不同頂點(diǎn)數(shù)據(jù)和屬性配置之間切換變得非常簡(jiǎn)單，只需要綁定不同的VAO就行了撑教。剛剛設(shè)置的所有狀態(tài)都將存儲(chǔ)在VAO中朝墩。OpenGL的核心模式要求我們使用VAO，所以它知道該如何處理我們的頂點(diǎn)輸入伟姐。如果我們綁定VAO失敗收苏，OpenGL會(huì)拒絕繪制任何東西。
float vertices[] = {
0.5f, 0.5f, 0.0f, // top right
0.5f, -0.5f, 0.0f, // bottom right
-0.5f, -0.5f, 0.0f, // bottom left
-0.5f, 0.5f, 0.0f // top left
};
unsigned int indices[] = { // 注意索引從0開(kāi)始!
0, 1, 3, // 第一個(gè)三角形
1, 2, 3 // 第二個(gè)三角形
};
unsigned int VAO, VBO, EBO;
glGenVertexArrays(1, &VAO);
glGenBuffers(1, &VBO);
glGenBuffers(1, &EBO);
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, 3 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);
glVertexAttribPointer函數(shù)告訴OpenGL該如何解析頂點(diǎn)數(shù)據(jù)愤兵，glEnableVertexAttribArray以頂點(diǎn)屬性位置值作為參數(shù)鹿霸，啟用頂點(diǎn)屬性。頂點(diǎn)位置即layout (location = 0)秆乳。
完整代碼
#include <iostream>
#include <glad/glad.h>
#include <GLFW/glfw3.h>
using namespace std;
void framebuffer_size_callback(GLFWwindow* window, int width, int height)
{
glViewport(0, 0, width, height);
}
void processInput(GLFWwindow *window)
{
if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS)
glfwSetWindowShouldClose(window, true);
}
const char *vertexShaderSource = "#version 330 core\n"
"layout (location = 0) in vec3 aPox;\n"
"void main()\n"
"{\n"
" gl_Position = vec4(aPox.x, aPox.y, aPox.z, 1.0);\n"
"}\0";
const char *fragmentShaderSource = "#version 330 core\n"
"out vec4 fragColor;\n"
"void main()\n"
"{\n"
" fragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);\n"
"}\0";
int main()
{
// glfw: initialize and configure
glfwInit();
glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);
// glfw window creation
GLFWwindow* window = glfwCreateWindow(800, 600, "LearnOpenGL", NULL, NULL);
if (window == NULL)
{
cout << "Filed to create GLFW window" << endl;
glfwTerminate();
return -1;
}
glfwMakeContextCurrent(window);
glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);
// glad: load all OpenGL function pointers
if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress))
{
cout << "Filed to initialize GLAD" << endl;
return -1;
}
// vertex shader
int 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);
cout << "ERROR::SHADER::VERTEX::COMPILATION_FAILED\n" << infoLog << endl;
}
// fragment shader
int 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);
cout << "ERROR::SHADER::FRAGMENT::COMPILATION_FAILED\n" << infoLog << endl;
}
int shaderProgram = glCreateProgram();
glAttachShader(shaderProgram, vertexShader);
glAttachShader(shaderProgram, fragmentShader);
glLinkProgram(shaderProgram);
glGetProgramiv(shaderProgram, GL_LINK_STATUS, &success);
if (!success) {
glGetProgramInfoLog(shaderProgram, 512, NULL, infoLog);
cout << "ERROR::SHADER::PROGRAM::LINKING_FAILED\n" << infoLog << endl;
}
glDeleteShader(vertexShader);
glDeleteShader(fragmentShader);
float vertices[] = {
0.5f, 0.5f, 0.0f, // top right
0.5f, -0.5f, 0.0f, // bottom right
-0.5f, -0.5f, 0.0f, // bottom left
-0.5f, 0.5f, 0.0f // top left
};
unsigned int indices[] = { // 注意索引從0開(kāi)始!
0, 1, 3, // 第一個(gè)三角形
1, 2, 3 // 第二個(gè)三角形
};
unsigned int VAO, VBO, EBO;
glGenVertexArrays(1, &VAO);
glGenBuffers(1, &VBO);
glGenBuffers(1, &EBO);
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, 3 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);
// render loop
while (!glfwWindowShouldClose(window))
{
// input
processInput(window);
// render
glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
glUseProgram(shaderProgram);
glBindVertexArray(VAO);
glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);
// glfw: swap buffers and poll IO events (keys pressed/released, mouse moved etc.)
glfwSwapBuffers(window);
glfwPollEvents();
}
glDeleteVertexArrays(1, &VAO);
glDeleteBuffers(1, &VBO);
glDeleteBuffers(1, &EBO);
glDeleteProgram(shaderProgram);
glfwTerminate();
return 0;
}
可以通過(guò)glPolygonMode(GL_FRONT_AND_BACK, GL_LINE)函數(shù)配置OpenGL如何繪制圖元懦鼠。第一個(gè)參數(shù)表示我們打算將其應(yīng)用到所有的三角形的正面和背面钻哩，第二個(gè)參數(shù)告訴我們用線來(lái)繪制。之后的繪制調(diào)用會(huì)一直以線框模式繪制三角形肛冶，直到我們用glPolygonMode(GL_FRONT_AND_BACK, GL_FILL)將其設(shè)置回默認(rèn)模式街氢。
