http://blog.csdn.net/huangcanjun187/article/details/52474365

學習總結自：http://learnopengl.com/#!Getting-started/Hello-Triangle?
http://learnopengl.com/#!Getting-started/Shaders?
繼上篇文章中提到，OpenGL是為了在GPU上同時跑成千上萬個程序，在GPU上跑的這些小程序，稱為Shader。

準備

我們在運行GPU程序前，得準備幾樣東西：1）輸入數據。2）數據緩沖區。3）Shader程序。4）GLSL（OpenGL Shade Language）主程序。?
以畫一個三角形為例，?
1）輸入數據包括：a. 三點頂點的坐標。b. 三個頂點的顏色。

GLfloat 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 // 頂點 };

• 1
• 2
• 3
• 4
• 5
• 6

• 1
• 2
• 3
• 4
• 5
• 6

2）數據緩存區包括：a. 數據怎么識別。哪一塊是坐標數據？哪一塊是顏色數據? b. 哪一塊數據是第一個三角形的數據？哪一塊數據是第二個三角形的數據？

GLuint VBO, VAO;glGenVertexArrays(1, &VAO);glGenBuffers(1, &VBO);glBindVertexArray(VAO);// 首先綁定VAO結構。一個VAO對應一個形狀對象，包含了一個形狀的所有屬性，包括顏色、坐標等等。用shader程序調用VAO這個結構，可以畫出對應的圖像來。 glBindBuffer(GL_ARRAY_BUFFER, VBO); glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);//在綁定VAO之后，綁定VBO結構。**這樣VBO就屬于之前被綁定VAO的一部分。**里面包含了預先定義好的數組vertices，vertices就是一個浮點數組，包含具體的坐標、顏色值。 glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(GLfloat), (GLvoid*)0); glEnableVertexAttribArray(0);// 坐標屬性。讓Vertex Shader將這部分數據作為坐標導入。 glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(GLfloat), (GLvoid*)(3 * sizeof(GLfloat))); glEnableVertexAttribArray(1);// 顏色屬性。讓Vertex Shader將這部分數據作為坐標顏色值導入。 glBindVertexArray(0); // Unbind VAO

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

3）Shader 程序。將導入GPU的數據，為對應的坐標點畫上對應的顏色。

// Shaders const GLchar* vertexShaderSource = "#version 330 core\n""layout (location = 0) in vec3 position;\n"//location = 0，與之前綁定VAO步驟中的函數glEnableVertexAttribArray(0)對應，把坐標數據導入到 vec3 position 這個shader中的坐標變量。 "layout (location = 1) in vec3 color;\n"//location = 1，與之前綁定VAO步驟中的函數glEnableVertexAttribArray(1)對應，把坐標數據導入到 vec3 color這個shader中的顏色變量。 "out vec3 ourColor;\n" "void main()\n" "{\n" "gl_Position = vec4(position, 1.0);\n" "ourColor = color;\n"//將顏色值直接賦值給輸出的變量ourColor，在Fragment Shader中也有一個同名的變量，所有最終像素的顏色就是此顏色值。 "}\0"; const GLchar* fragmentShaderSource = "#version 330 core\n" "in vec3 ourColor;\n" //OpenGL Shader程序會直接將同名的變量聯系到一起，這個ourColor就是vertex shader中的輸出的ourColor "out vec4 color;\n" "void main()\n" "{\n" "color = vec4(ourColor, 1.0f);\n" "}\n\0";

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

4）GLSL 主程序

GLuint shaderProgram = glCreateProgram(); //創建一個GLSL主程序glAttachShader(shaderProgram, vertexShader);glAttachShader(shaderProgram, fragmentShader);//將兩個shader掛載到主程序上glLinkProgram(shaderProgram);//鏈接shader程序。編譯shader的步驟在此之前。接下來會詳細介紹

• 1
• 2
• 3
• 4

• 1
• 2
• 3
• 4

步驟

為何要將1）輸入數據。2）數據緩沖區。3）Shader程序。4）GLSL（OpenGL Shade Language）主程序。這個幾個模塊分開介紹呢？?
因為這幾塊相互獨立，這是OpenGL比較明顯的特點。詳細說，就是GLSL主程序可以鏈接任意一個編譯好的shader程序，編譯好的shader程序可以裝載不同的VAO(Vertext Array Object，它是VBO的老大，Shader 調用的時候是直接調VAO，VBO包含了數據，VAO包含了VBO以及如何讓Shader識別這些VBO數據的一些屬性)，VAO又可以用不同的方式裝載不同的數據。?
以這段代碼為例，只粘貼了比較關鍵的代碼，完整源碼請參考：?
http://learnopengl.com/code_viewer.php?code=getting-started/shaders-interpolated?
程序的結果就是對三角形的三個頂點畫上紅、綠、藍三種顏色，三角形中間區域的顏色OpenGL會自動插值出來，這是OpenGL的神奇之處（我也還沒懂原理）。?

//--------------這不是完整源碼，著重介紹重要的幾個步驟------------------////---------編寫shader 程序----------// const GLchar* vertexShaderSource = "#version 330 core\n""layout (location = 0) in vec3 position;\n" "layout (location = 1) in vec3 color;\n" "out vec3 ourColor;\n" "void main()\n" "{\n" "gl_Position = vec4(position, 1.0);\n" "ourColor = color;\n" "}\0"; const GLchar* fragmentShaderSource = "#version 330 core\n" "in vec3 ourColor;\n" "out vec4 color;\n" "void main()\n" "{\n" "color = vec4(ourColor, 1.0f);\n" "}\n\0";//簡單易懂的Shader源碼 //---------編譯和鏈接shader程序----------// GLuint vertexShader = glCreateShader(GL_VERTEX_SHADER); glShaderSource(vertexShader, 1, &vertexShaderSource, NULL); glCompileShader(vertexShader); //因為shader程序是在GPU上跑，所以不是和CPP文件一起編譯。Shader程序如果有BUG，在編譯CPP的時候不會出錯，而是在運行CPP工程的時候報錯。 GLuint fragmentShader = glCreateShader(GL_FRAGMENT_SHADER); glShaderSource(fragmentShader, 1, &fragmentShaderSource, NULL); glCompileShader(fragmentShader); GLuint shaderProgram = glCreateProgram(); glAttachShader(shaderProgram, vertexShader); glAttachShader(shaderProgram, fragmentShader); glLinkProgram(shaderProgram); //將shader程序與GLSL主程序鏈接到一起 //---------編寫VAO，VBO以及具體導入的數據----------// GLfloat vertices[] = { // Positions // Colors 0.5f, -0.5f, 0.0f, 1.0f, 0.0f, 0.0f, // Bottom Right -0.5f, -0.5f, 0.0f, 0.0f, 1.0f, 0.0f, // Bottom Left 0.0f, 0.5f, 0.0f, 0.0f, 0.0f, 1.0f // Top };//三個頂點的坐標和顏色值 GLuint VBO, VAO; glGenVertexArrays(1, &VAO); glGenBuffers(1, &VBO);//可以生成多個VAO和多個VBO。一個只能對應一個VBO。畫多個圖形，就得用不同的VAO包含不同的VBO glBindVertexArray(VAO);//綁定VAO之后，接下來的所有操作都被記錄到此VAO當中，直到這個VAO被解除綁定為止。VAO就是畫一個圖形所需要的所有屬性。綁定完這個VAO之后，可以接著綁定其它的VAO。 glBindBuffer(GL_ARRAY_BUFFER, VBO);//綁定VBO到當前VAO中，注意GL_ARRAY_BUFFER這個類型只能綁定一個VBO glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);//綁定數據到VBO對象當中 // Position attribute glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(GLfloat), (GLvoid*)0);//坐標位置在vertices數組中起始點為0，步長為6個FLOAT數據的長度 glEnableVertexAttribArray(0);//用vertex shader中的Location0來導入數據，Location0就是坐標數據 // Color attribute glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(GLfloat), (GLvoid*)(3 * sizeof(GLfloat)));//坐標位置在vertices數組中起始點為3，步長為6個FLOAT數據的長度 glEnableVertexAttribArray(1);//用vertex shader中的Location1來導入數據，Location0就是顏色標數據 glBindVertexArray(0); // 解除綁定VAO，對這個VAO的所有操作到此為止，之前的操作被全部保存 // 循環畫圖 while (!glfwWindowShouldClose(window)) { // 檢測是否有鍵盤觸發事件 glfwPollEvents(); // Render // Clear the colorbuffer glClearColor(0.2f, 0.3f, 0.3f, 1.0f);//設置背景顏色 glClear(GL_COLOR_BUFFER_BIT); // Draw the triangle glUseProgram(shaderProgram);//導入一個GLSL主程序 glBindVertexArray(VAO);//導入其中一個VAO,一個主程序可以鏈接多個VAO，在畫完這個VAO之后，可以接著畫另外一個VAO代表的圖形。這是OpenGL比較明顯的特征 glDrawArrays(GL_TRIANGLES, 0, 3);//畫三角形 glBindVertexArray(0); //glBindVertexArray(）將VAO屬性復位，也就是不綁定任意一個VAO // Swap the screen buffers glfwSwapBuffers(window); }

轉載于:https://www.cnblogs.com/jukan/p/6999890.html

總結

以上是生活随笔為你收集整理的OpenGL中的Shader的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。