OpenGL渲染管道，Shader簡介，VAO&VBO&EBO

OpenGL渲染管線

(也就是)OpenGL渲染一幀圖形的流程

• 以下列舉 [渲染一個三角形的流程]，它包含OpenGL最基本最核心的渲染流程  你可以將它視為 [精簡版OpenGL渲染管線]

• 而更復雜的流程也僅僅就是：在此基礎上的各個流程中 添加額外的內容，而這些會在后續補充。

• • CPU將三角形的  [點坐標，及其索引信息]  傳入GPU可訪問的位置

• • CPU調用 gl函數 [掛載] shader

• • • shader是使用  類C語言： glsl 編寫的可執行程序 

• • • GPU會  執行shader中的內容，並根據shader程序進行繪圖。

• • • GPU會  匯總shader提供的數據&CPU提供的數據，並根據他們進行繪圖。

• • CPU調用 gl函數激活GPU > 執行shader並繪制圖

• • 以下是相關代碼：

 // build and compile our shader program
 // ------------------------------------
    // vertex shader
    unsigned int vertexShader = glCreateShader(GL_VERTEX_SHADER);
    glShaderSource(vertexShader, 1, &vertexShaderSource, NULL);
    glCompileShader(vertexShader);
    // check for shader compile errors
    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;
    }
    // fragment shader
    unsigned int fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
    glShaderSource(fragmentShader, 1, &fragmentShaderSource, NULL);
    glCompileShader(fragmentShader);
    // check for shader compile errors
    glGetShaderiv(fragmentShader, GL_COMPILE_STATUS, &success);
    if (!success)
    {
        glGetShaderInfoLog(fragmentShader, 512, NULL, infoLog);
        std::cout << "ERROR::SHADER::FRAGMENT::COMPILATION_FAILED\n" << infoLog << std::endl;
    }
    // link shaders
    unsigned int shaderProgram = glCreateProgram();
    glAttachShader(shaderProgram, vertexShader);
    glAttachShader(shaderProgram, fragmentShader);
    glLinkProgram(shaderProgram);
    // check for linking errors
    glGetProgramiv(shaderProgram, GL_LINK_STATUS, &success);
    if (!success) {
        glGetProgramInfoLog(shaderProgram, 512, NULL, infoLog);
        std::cout << "ERROR::SHADER::PROGRAM::LINKING_FAILED\n" << infoLog << std::endl;
    }
    glDeleteShader(vertexShader);
    glDeleteShader(fragmentShader);
// -----------------------------以上：Shader編譯，編譯檢查，鏈接，鏈接檢查-----------------------------


// set up vertex data (and buffer(s)) and configure vertex attributes
// ------------------------------------------------------------------
   //三角形頂點，及其索引信息： 
　　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[] = {  // note that we start from 0!
        0, 1, 3,  // first Triangle
        1, 2, 3   // second Triangle
    };
    //向GPU傳入相關數據
    unsigned int VBO, VAO, EBO;
    glGenVertexArrays(1, &VAO);
    glGenBuffers(1, &VBO);
    glGenBuffers(1, &EBO);

    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);

　　 glBindVertexArray(VAOID)
    glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
    glEnableVertexAttribArray(0);

    // note that this is allowed, the call to glVertexAttribPointer registered VBO as the vertex attribute's bound vertex buffer object so afterwards we can safely unbind
    glBindBuffer(GL_ARRAY_BUFFER, 0); //解除當前VBO的Bind

    // remember: do NOT unbind the EBO while a VAO is active as the bound element buffer object IS stored in the VAO; keep the EBO bound.
    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, 0); //解除當前EBO的Bind

    // You can unbind the VAO afterwards so other VAO calls won't accidentally modify this VAO, but this rarely happens. Modifying other
    // VAOs requires a call to glBindVertexArray anyways so we generally don't unbind VAOs (nor VBOs) when it's not directly necessary.
    glBindVertexArray(0); //解除當前VAO的Bind

　　 //繪制循環，每一循環繪制一幀
　　 while (!glfwWindowShouldClose(window)) {
　　 // input 
　　 // ----- 
　　 　　processInput(window); 
　　 
　　 // render 
    // ------ 
　　 　　glClearColor(0.2f, 0.3f, 0.3f, 1.0f); 
　　 　　glClear(GL_COLOR_BUFFER_BIT); 
　　 
　　 // draw our first triangle 
　　 　　glUseProgram(shaderProgram); 
　　 　　glBindVertexArray(VAO); //將繪制當前Bind的VAO，VAO是什么具體詳見下面內容

　　 // seeing as we only have a single VAO there's no need to bind it every time, but we'll do so to keep things a bit more organized 
　　 // glDrawArrays(GL_TRIANGLES, 0, 6); 
　　 　　glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);
　　　　 glBindVertexArray(0);  //解除當前VAO的Bind

　　 // glfw: swap buffers and poll IO events (keys pressed/released, mouse moved etc.) 
　　 // ------------------------------------------------------------------------------- 
　　 　　glfwSwapBuffers(window); 
　　 　　glfwPollEvents(); 
　　} 
// optional: de-allocate all resources once they've outlived their purpose: 
// ------------------------------------------------------------------------ 
　　glDeleteVertexArrays(1, &VAO); 
　　glDeleteBuffers(1, &VBO); 
　　glDeleteBuffers(1, &EBO); 
　　glDeleteProgram(shaderProgram);

 

 

 

VAO&VBO&EBO

抽象對象，OpenGL沒有固定它們的實現，根據硬件廠商的硬件實現，軟件實現也許會產生差異

 

　　  1. VBO：OpenGL用來管理  來自CPU數據的 一種工具，

• • 使用 glVertexAttribPointer() 可以序列化   [當前與Flag:GL_ARRAY_BUFFFER] 綁定的VBO  中的數據，並指向當前綁定的VAO。  

　　  2. VAO：OpenGL序列化數據的  一種工具。

• • 使用 glVertexAttribPointer() 后，可以向 [VAO的指定欄位] 發送一個 序列化后的數據包。

• • glVertexAttribPointer(
    • index                        >  此數據包使用的  VAO欄位
    • size                          >  每個分量的數據單位的個數 [如：若該欄位存放的分量是三維頂點，則他有三個數據單位]。
    • type                          >  數據單位的類型。
    • normalized               >  是否需要歸一化這組數據。
    • stride                        >  每個分量之間的間隔，如果是0，則該欄位存放的數據  在VBO中緊密排列[連續線性]
    • pointer                      >  該組數據的起始位置
  • )　

　　  3. EBO：為頂點提供索引，這樣面對重復數據時，可以使用索引來節省空間。

• • 函數glDrawArrays(GL_TRIANGLES, 0, 6）
    • 會以繪制三角形 [GL_TRIANGLES] 的形式   按序繪制 [6個]  [VAO的0號欄位]  提供的頂點，當多個三角形有重復頂點時，你將不得不重復輸入這些數據
    • glDrawArrays(
      • mode               >  primitive，也就是基元類型，OpenGL以圖元的形式分組繪制 > VAO提供的頂點。
      • first                  >  繪制起始點，也就是要使用的VAO欄位
      • count               >  要繪制的 [分量數]
    • )
  • 函數glDrawElements()
    • 會以三角形的形式按序繪制頂點，但是繪制頂點的依據是頂點索引，OpenGL根據索引尋找頂點數據，這樣保證數據無需重復輸入。

 　　  4. 以下是  [CPU，GPU數據交互的]  部分代碼的解析

 

//三角形頂點，及其索引信息： 
　　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[] = {  // note that we start from 0!
        0, 1, 3,  // first Triangle
        1, 2, 3   // second Triangle
    };
　　 unsigned int VBOID, VAOID, EBOID;
    //申請三個整形值，用以存放 申請的VBO,VAB,EBO的ID    
    
    glGenBuffers(1, &VBOID);
    glGenVertexArrays(1, &VAOID);
    glGenBuffers(1, &EBOID);
    //向OpenGL申請: 1*VBO, 1*VAO, 1*EBO  並將其ID傳入各自的 地址
　  //[gl函數要求：此地址可以是連續數組空間的首地址，也可以是單一的一個數據]


    glBindBuffer(GL_ARRAY_BUFFER, VBOID);
    //將VBOID指向的VBO 與flag:GL_ARRAY_BUFFER綁定，
　　 //函數glVertexAttribPointer，將會從綁定 [此flag] 的VBO中取值。
　　 glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
　　 //將數據裝填到與flag:GL_ARRAY_BUFFER綁定的VBO中。

　　 glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBOID);
　　 //將EBOID指向的EBO 與flag:GL_ELEMENT_ARRAY_BUFFER綁定
　　 glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);
　　 //將索引裝填到與GL_ELEMENT_ARRAY_BUFFER綁定的EBO中。

    glBindVertexArray(VAOID);
    //在操作VAO之前，要綁定VAO擁有的VAOID
　　 glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0); 
　　 glEnableVertexAttribArray(0); 
　　 //裝填數據，激活當前綁定的VAO的0號欄位。

　　 glBindVertexArray(0);
　　 //解除綁定，稍后可以綁定其他的VAO，並考慮使用相同VBO進行初始化。

 

　　   2. 以下是對繪制循環代碼的部分解析:

　　 //繪制循環，每一循環繪制一幀
　　 while (!glfwWindowShouldClose(window)) {
　　 // input 
　　 // ----- 
　　 　　processInput(window); 
　　　　 //讀取輸入
　　 
　　 // clear Frame 
    // ------ 
　　 　　glClearColor(0.2f, 0.3f, 0.3f, 1.0f); 
　　 　　glClear(GL_COLOR_BUFFER_BIT); 
　　 
　　 // draw our first triangle 
　　 　　glUseProgram(shaderProgram); //掛載GPU要使用的shader.
　　 　　glBindVertexArray(VAO); //綁定需要繪制的VAO

　　 // seeing as we only have a single VAO there's no need to bind it every time, but we'll do so to keep things a bit more organized 
　　 // glDrawArrays(GL_TRIANGLES, 0, 6); 
　　 　　glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);
　　　　 //CPU調用此函數激活GPU工作。
　　　　 //以上兩個函數，只需存在一個即可
　　　　 glBindVertexArray(0);  //解除當前VAO的Bind，以便繪制其他VAO

　　 // glfw: swap buffers and poll IO events (keys pressed/released, mouse moved etc.) 
　　 // ------------------------------------------------------------------------------- 
　　 　　glfwSwapBuffers(window); 
　　　　 //額外多繪制一幀，可以解決因[兩幀之間 繪制時間間隔過長]導致的 頻閃問題。
　　 　　glfwPollEvents(); 
　　　　 //清除 此循環間發生的事件 到processInput。
　　}