glUseProgram(shaderProgram);

在glUseProgram函數(shù)調(diào)用之后，每個著色器調(diào)用和渲染調(diào)用都會使用這個程序?qū)ο螅ㄒ簿褪侵皩懙闹?了锻霎。

對了著角，在把著色器對象鏈接到程序?qū)ο笠院螅浀脛h除著色器對象旋恼，我們不再需要它們了：

glDeleteShader(vertexShader);
glDeleteShader(fragmentShader);

現(xiàn)在吏口，我們已經(jīng)把輸入頂點數(shù)據(jù)發(fā)送給了GPU，并指示了GPU如何在頂點和片段著色器中處理它冰更。就快要完成了产徊，但還沒結(jié)束，OpenGL還不知道它該如何解釋內(nèi)存中的頂點數(shù)據(jù)蜀细，以及它該如何將頂點數(shù)據(jù)鏈接到頂點著色器的屬性上舟铜。我們需要告訴OpenGL怎么做。

告訴程序如何解釋輸入的頂點數(shù)據(jù)

頂點著色器允許我們指定任何以頂點屬性為形式的輸入奠衔。這使其具有很強(qiáng)的靈活性的同時深滚，它還的確意味著我們必須手動指定輸入數(shù)據(jù)的哪一個部分對應(yīng)頂點著色器的哪一個頂點屬性。所以涣觉，我們必須在渲染前指定OpenGL該如何解釋頂點數(shù)據(jù)。

假設(shè)頂點緩沖數(shù)據(jù)輸入是醬紫：

頂點數(shù)據(jù)

• 位置數(shù)據(jù)被儲存為32位（4字節(jié)）浮點值血柳。
• 每個位置包含3個這樣的值官册。
• 在這3個值之間沒有空隙（或其他值）。這幾個值在數(shù)組中緊密排列难捌。
• 數(shù)據(jù)中第一個值在緩沖開始的位置膝宁。

我們就可以使用glVertexAttribPointer函數(shù)告訴OpenGL該如何解析頂點數(shù)據(jù)（應(yīng)用到逐個頂點屬性上）了：

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

glVertexAttribPointer函數(shù)的參數(shù)非常多鸦难，所以我會逐一介紹它們：

• 第一個參數(shù)指定我們要配置的頂點屬性。對應(yīng)頂點著色器里面的位置值(location)
• 第二個參數(shù)指定頂點屬性的大小员淫。頂點屬性是一個vec3合蔽，它由3個值組成，所以大小是3介返。
• 第三個參數(shù)指定數(shù)據(jù)的類型拴事。
• 下個參數(shù)定義我們是否希望數(shù)據(jù)被標(biāo)準(zhǔn)化(Normalize)。如果我們設(shè)置為GL_TRUE圣蝎，所有數(shù)據(jù)都會被映射到0（對于有符號型signed數(shù)據(jù)是-1）到1之間刃宵。
• 第五個參數(shù)叫做步長，它告訴我們在連續(xù)的頂點屬性組之間的間隔徘公。由于下個組位置數(shù)據(jù)在3個float之后牲证，我們把步長設(shè)置為3 * sizeof(float)。要注意的是由于我們知道這個數(shù)組是緊密排列的（在兩個頂點屬性之間沒有空隙）我們也可以設(shè)置為0來讓OpenGL決定具體步長是多少（只有當(dāng)數(shù)值是緊密排列時才可用）关面。
• 最后一個參數(shù)的類型是void*坦袍，所以需要我們進(jìn)行這個奇怪的強(qiáng)制類型轉(zhuǎn)換。它表示位置數(shù)據(jù)在緩沖中起始位置的偏移量等太。由于位置數(shù)據(jù)在數(shù)組的開頭捂齐，所以這里是0。

每個頂點屬性從一個VBO管理的內(nèi)存中獲得它的數(shù)據(jù)澈驼，而具體是從哪個VBO（程序中可以有多&個VBO）獲取則是通過在調(diào)用glVertexAttribPointer的VBO決定的辛燥。由于在調(diào)用glVertexAttribPointer之前綁定的是先前定義的VBO對象，頂點屬性0現(xiàn)在會鏈接到它的頂點數(shù)據(jù)缝其。

現(xiàn)在我們已經(jīng)定義了OpenGL該如何解釋頂點數(shù)據(jù)挎塌，我們現(xiàn)在應(yīng)該使用glEnableVertexAttribArray，以頂點屬性位置值作為參數(shù)内边，啟用頂點屬性榴都；頂點屬性默認(rèn)是禁用的。

自此漠其，所有東西都已經(jīng)設(shè)置好了：我們使用一個頂點緩沖對象將頂點數(shù)據(jù)初始化至緩沖中嘴高，建立了一個頂點和一個片段著色器，并告訴了OpenGL如何把頂點數(shù)據(jù)鏈接到頂點著色器的頂點屬性上和屎。在OpenGL中繪制一個物體拴驮，代碼會像是這樣：

// 0\. 復(fù)制頂點數(shù)組到緩沖中供OpenGL使用
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
// 1\. 設(shè)置頂點屬性指針
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);
// 2\. 當(dāng)我們渲染一個物體時要使用著色器程序
glUseProgram(shaderProgram);
// 3\. 繪制物體
someOpenGLFunctionThatDrawsOurTriangle();

每當(dāng)我們繪制一個物體的時候都必須重復(fù)這一過程。這看起來可能不多柴信，但是如果有超過5個頂點屬性套啤，上百個不同物體呢（這其實并不罕見）。有沒有一些方法可以使我們把所有這些狀態(tài)配置儲存在一個對象中随常，并且可以通過綁定這個對象來恢復(fù)狀態(tài)呢潜沦？

頂點數(shù)組對象

頂點數(shù)組對象(Vertex Array Object, VAO)可以像頂點緩沖對象那樣被綁定萄涯，任何隨后的頂點屬性調(diào)用都會儲存在這個VAO中。這樣的好處就是唆鸡，當(dāng)配置頂點屬性指針時涝影，你只需要將那些調(diào)用執(zhí)行一次，之后再繪制物體的時候只需要綁定相應(yīng)的VAO就行了争占。如果我們綁定VAO失敗燃逻，OpenGL會拒絕繪制任何東西。

image.png

一個頂點數(shù)組對象會儲存以下這些內(nèi)容：

• glEnableVertexAttribArray和glDisableVertexAttribArray的調(diào)用燃乍。
• 通過glVertexAttribPointer設(shè)置的頂點屬性配置唆樊。
• 通過glVertexAttribPointer調(diào)用與頂點屬性關(guān)聯(lián)的頂點緩沖對象。

創(chuàng)建一個VAO和創(chuàng)建一個VBO很類似：

unsigned int VAO;
glGenVertexArrays(1, &VAO);

要想使用VAO刻蟹，要做的只是使用glBindVertexArray綁定VAO逗旁。從綁定之后起，我們應(yīng)該綁定和配置對應(yīng)的VBO和屬性指針舆瘪，之后解綁VAO供之后使用片效。

// ..:: 初始化代碼（只運(yùn)行一次 (除非你的物體頻繁改變)） :: ..
// 1. 綁定VAO
glBindVertexArray(VAO);
// 2. 把頂點數(shù)組復(fù)制到緩沖中供OpenGL使用
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
// 3. 設(shè)置頂點屬性指針
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);

[...]

// ..:: 繪制代碼（渲染循環(huán)中） :: ..
// 4. 繪制物體
glUseProgram(shaderProgram);
glBindVertexArray(VAO);
glDrawArrays(GL_TRIANGLES, 0, 3); // someOpenGLFunctionThatDrawsOurTriangle();

當(dāng)我們打算繪制物體的時候就拿出相應(yīng)的VAO，綁定它英古，繪制完物體后淀衣，再解綁VAO。

glDrawArrays函數(shù)第一個參數(shù)是我們打算繪制的OpenGL圖元的類型召调。由于我們在一開始時說過膨桥，我們希望繪制的是一個三角形，這里傳遞GL_TRIANGLES給它唠叛。第二個參數(shù)指定了頂點數(shù)組的起始索引只嚣，我們這里填0。最后一個參數(shù)指定我們打算繪制多少個頂點艺沼，這里是3（我們只從我們的數(shù)據(jù)中渲染一個三角形册舞，它只有3個頂點長）。

索引緩沖對象

索引緩沖對象(Element Buffer Object障般，EBO调鲸，也叫Index Buffer Object，IBO)挽荡。要解釋索引緩沖對象的工作方式最好還是舉個例子：假設(shè)我們不再繪制一個三角形而是繪制一個矩形藐石。我們可以繪制兩個三角形來組成一個矩形（OpenGL主要處理三角形）。這會生成下面的頂點的集合：

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,  // 右下角
    -0.5f, -0.5f, 0.0f, // 左下角
    -0.5f, 0.5f, 0.0f   // 左上角
};

可以看到定拟，有幾個頂點疊加了贯钩。我們指定了右下角和左上角兩次！一個矩形只有4個而不是6個頂點，這樣就產(chǎn)生50%的額外開銷角雷。當(dāng)我們有包括上千個三角形的模型之后這個問題會更糟糕，這會產(chǎn)生一大堆浪費性穿。更好的解決方案是只儲存不同的頂點勺三，并設(shè)定繪制這些頂點的順序。

很幸運(yùn)需曾，索引緩沖對象的工作方式正是這樣的吗坚。和頂點緩沖對象一樣，EBO也是一個緩沖呆万，它專門儲存索引商源，OpenGL調(diào)用這些頂點的索引來決定該繪制哪個頂點。首先谋减，我們先要定義（不重復(fù)的）頂點牡彻，和繪制出矩形所需的索引：

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開始! 
    0, 1, 3, // 第一個三角形
    1, 2, 3  // 第二個三角形
};

當(dāng)時用索引的時候，我們只定義了4個頂點出爹，而不是6個庄吼。下一步我們需要創(chuàng)建索引緩沖對象：

unsigned int EBO;
glGenBuffers(1, &EBO);

與VBO類似，我們先綁定EBO然后用glBufferData把索引復(fù)制到緩沖里严就。同樣总寻，和VBO類似，我們會把這些函數(shù)調(diào)用放在綁定和解綁函數(shù)調(diào)用之間梢为，只不過這次我們把緩沖的類型定義為·渐行、GL_ELEMENT_ARRAY_BUFFER。

glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);

要注意的是铸董，我們傳遞了GL_ELEMENT_ARRAY_BUFFER當(dāng)作緩沖目標(biāo)祟印。最后一件要做的事是用glDrawElements來替換glDrawArrays函數(shù)，來指明我們從索引緩沖渲染袒炉。使用glDrawElements時旁理，我們會使用當(dāng)前綁定的索引緩沖對象中的索引進(jìn)行繪制：

glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);

第一個參數(shù)指定了我們繪制的模式，這個和glDrawArrays的一樣我磁。第二個參數(shù)是我們打算繪制頂點的個數(shù)孽文，這里填6，也就是說我們一共需要繪制6個頂點夺艰。第三個參數(shù)是索引的類型芋哭，這里是GL_UNSIGNED_INT。最后一個參數(shù)里我們可以指定EBO中的偏移量（或者傳遞一個索引數(shù)組郁副，但是這是當(dāng)你不在使用索引緩沖對象的時候）减牺，但是我們會在這里填寫0。

不過VAO同樣可以保存索引緩沖對象的綁定狀態(tài)。VAO綁定時正在綁定的索引緩沖對象會被保存為VAO的元素緩沖對象拔疚。綁定VAO的同時也會自動綁定EBO肥隆。

VAO & VBO & EBO

當(dāng)目標(biāo)是GL_ELEMENT_ARRAY_BUFFER的時候，VAO會儲存glBindBuffer的函數(shù)調(diào)用稚失。這也意味著它也會儲存解綁調(diào)用栋艳，所以確保你沒有在解綁VAO之前解綁索引數(shù)組緩沖，否則它就沒有這個EBO配置了句各。注意哦吸占，如果是正常的VBO的glBindBuffer是不存儲的，只存儲GL_ELEMENT_ARRAY_BUFFER也就是EBO的

來畫正方形啦：

// ..:: 初始化代碼 :: ..
// 1. 綁定頂點數(shù)組對象
glBindVertexArray(VAO);
// 2. 把我們的頂點數(shù)組復(fù)制到一個頂點緩沖中凿宾，供OpenGL使用
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
// 3. 復(fù)制我們的索引數(shù)組到一個索引緩沖中矾屯，供OpenGL使用
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);
// 4. 設(shè)定頂點屬性指針
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);

[...]

// ..:: 繪制代碼（渲染循環(huán)中） :: ..
glUseProgram(shaderProgram);
glBindVertexArray(VAO);
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0)
glBindVertexArray(0);

• 線框模式(Wireframe Mode)
  要想用線框模式繪制你的三角形，你可以通過glPolygonMode(GL_FRONT_AND_BACK, GL_LINE)函數(shù)配置OpenGL如何繪制圖元初厚。第一個參數(shù)表示我們打算將其應(yīng)用到所有的三角形的正面和背面件蚕，第二個參數(shù)告訴我們用線來繪制。之后的繪制調(diào)用會一直以線框模式繪制三角形惧所，直到我們用glPolygonMode(GL_FRONT_AND_BACK, GL_FILL)將其設(shè)置回默認(rèn)模式骤坐。

bind到0就是解綁哦~

Homework

1. 畫個漸變?nèi)切?/h5>

這里要說一下就是如果你給三個頂點賦值顏色，會自動插值填充漸變哈~ 以及顏色的輸入也是要和頂點數(shù)據(jù)放在一起噠下愈，都輸入給頂點shader纽绍，然后頂點把顏色輸出給著色shader醬紫~

這是在片段著色器中進(jìn)行的所謂片段插值(Fragment Interpolation)的結(jié)果。當(dāng)渲染一個三角形時势似，光柵化(Rasterization)階段通常會造成比原指定頂點更多的片段拌夏。光柵會根據(jù)每個片段在三角形形狀上所處相對位置決定這些片段的位置。

基于這些位置履因，它會插值(Interpolate)所有片段著色器的輸入變量障簿。比如說，我們有一個線段栅迄，上面的端點是綠色的站故，下面的端點是藍(lán)色的。如果一個片段著色器在線段的70%的位置運(yùn)行毅舆，它的顏色輸入屬性就會是一個綠色和藍(lán)色的線性結(jié)合西篓；更精確地說就是30%藍(lán) + 70%綠。

這正是在這個三角形中發(fā)生了什么憋活。我們有3個頂點岂津，和相應(yīng)的3個顏色，從這個三角形的像素來看它可能包含50000左右的片段悦即，片段著色器為這些像素進(jìn)行插值顏色吮成。如果你仔細(xì)看這些顏色就應(yīng)該能明白了：紅首先變成到紫再變?yōu)樗{(lán)色橱乱。片段插值會被應(yīng)用到片段著色器的所有輸入屬性上。

漸變?nèi)切?/div>

來來來上代碼了~

const char *vertexShaderSource = "#version 330 core\n"
    "layout (location = 0) in vec3 aPos;\n"
    "layout (location = 1) in vec3 inColor;\n"
    "out vec3 outColor;\n"
    "void main()\n"
    "{\n"
    "   gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);\n"
    "   outColor = inColor;\n"
    "}\0";

const char *fragmentShaderSource = "#version 330 core\n"
    "in vec3 outColor;\n"
    "out vec4 FragColor;\n"
    "void main()\n"
    "{\n"
    "   FragColor = vec4(outColor, 1.0);\n"
    "}\0";

void drawGradientTriangle()
{
    // draw triangle
    float vertices[] = {
        -0.5f, -0.5f, 0.0f, 1.f, 0.f, 0.f,
         0.5f, -0.5f, 0.0f, 0.f, 1.f, 0.f,
         0.0f,  0.5f, 0.0f, 0.f, 0.f, 1.f,
    };
    
    unsigned int VBO;
    glGenBuffers(1, &VBO);
    
    unsigned int VAO;
    glGenVertexArrays(1, &VAO);
    
    glBindVertexArray(VAO);
    
    glBindBuffer(GL_ARRAY_BUFFER, VBO);
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
    
    // read vertex
    glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)0);
    glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)(3 * sizeof(float)));
    glEnableVertexAttribArray(0);
    glEnableVertexAttribArray(1);
    
    // unbind VBO
    glBindBuffer(GL_ARRAY_BUFFER, 0);
    
    // unbind VAO
    glBindVertexArray(0);
    
    // create vertices shader
    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;
    }
    
    // color shader
    unsigned int fragmentShader;
    fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
    glShaderSource(fragmentShader, 1, &fragmentShaderSource, NULL);
    glCompileShader(fragmentShader);
    
    // program
    unsigned int shaderProgram;
    shaderProgram = glCreateProgram();
    
    glAttachShader(shaderProgram, vertexShader);
    glAttachShader(shaderProgram, fragmentShader);
    glLinkProgram(shaderProgram);
    
    // use this program
    glUseProgram(shaderProgram);
    glBindVertexArray(VAO);
    // draw
    glDrawArrays(GL_TRIANGLES, 0, 3);
    
    // delete shader
    glDeleteShader(vertexShader);
    glDeleteShader(fragmentShader);
}

需要注意的點是頂點shader輸出的值和著色器shader輸入的值的變量名都必須一樣哈~粱甫，以及我們這次終于懂了location的用法了泳叠，也就是第幾個參數(shù)的意義了。另外后面的參數(shù)的偏移記得需要??float的size哈~

漸變?nèi)堑淖⒁馐马?/div>

---

2. 繪制兩個彼此相連的三角形

相連三角形

這里其實就是傳入6個頂點茶宵，然后指定要畫六個頂點即可析二，其他沒區(qū)別~ 他會自動3個頂點一組去繪制噠~ 那可能會疑惑，如果我想把這6個點彼此相連节预，搞成3個三角形呢，那你就要用EBO了哦~~

float vertices[] = {
    -0.5f, -0.5f, 0.0f, 1.f, 0.f, 0.f,
    0.0f, -0.5f, 0.0f, 0.f, 1.f, 0.f,
    -0.25f,  0.5f, 0.0f, 0.f, 0.f, 1.f,
    0.5f, -0.5f, 0.0f, 1.f, 0.f, 0.f,
    0.0f, -0.5f, 0.0f, 0.f, 1.f, 0.f,
    0.25f,  0.5f, 0.0f, 0.f, 0.f, 1.f,
};

// draw
glDrawArrays(GL_TRIANGLES, 0, 6);

---

3. 使用不同的VAO和VBO創(chuàng)建兩個三角形

當(dāng)我想用不同著色shader來渲染兩個三角形的時候属韧，那就不能用同一份頂點了哈安拟，也就不是同一個program了，那么如果用兩個VAO / VBO嘞宵喂？

// draw triangle
float vertices[] = {
    -0.5f, -0.5f, 0.0f, 1.f, 0.f, 0.f,
    0.0f, -0.5f, 0.0f, 0.f, 1.f, 0.f,
    -0.25f,  0.5f, 0.0f, 0.f, 0.f, 1.f,
};

float vertices2[] = {
    0.5f, -0.5f, 0.0f, 1.f, 0.f, 0.f,
    0.0f, -0.5f, 0.0f, 0.f, 1.f, 0.f,
    0.25f,  0.5f, 0.0f, 0.f, 0.f, 1.f,
};

unsigned int VBO[2];
glGenBuffers(2, VBO);

unsigned int VAO[2];
glGenVertexArrays(2, VAO);

glBindVertexArray(VAO[0]);

glBindBuffer(GL_ARRAY_BUFFER, VBO[0]);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

// read vertex
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)0);
glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)(3 * sizeof(float)));
glEnableVertexAttribArray(0);
glEnableVertexAttribArray(1);

// unbind VBO
glBindBuffer(GL_ARRAY_BUFFER, 0);

// unbind VAO
glBindVertexArray(0);

// -------------- next VAO & VBO ---------------

glBindVertexArray(VAO[1]);

glBindBuffer(GL_ARRAY_BUFFER, VBO[1]);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices2, GL_STATIC_DRAW);

// read vertex
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)0);
glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)(3 * sizeof(float)));
glEnableVertexAttribArray(0);
glEnableVertexAttribArray(1);

// unbind VBO
glBindBuffer(GL_ARRAY_BUFFER, 0);

// unbind VAO
glBindVertexArray(0);

這里需要注意的是創(chuàng)建的是數(shù)組哈糠赦，以及因為數(shù)據(jù)本身就是地址（第一個元素的地址），所以無需使用&啦：

unsigned int VBO[2];
glGenBuffers(2, VBO);

然后就是繪制啦~

// use this program
glUseProgram(shaderProgram);
glBindVertexArray(VAO[0]);
// draw
glDrawArrays(GL_TRIANGLES, 0, 3);

// next
glBindVertexArray(VAO[1]);
// draw
glDrawArrays(GL_TRIANGLES, 0, 3);

最后畫出來的效果和上面的其實是一樣的锅棕。

---

4. 創(chuàng)建兩個著色器程序繪制兩個顏色不同的三角形

現(xiàn)在就要用上面的兩套頂點來用不同的program啦~

截屏2021-02-04 下午11.37.35.png

需要新增一個著色器shader：

const char *fixedFragmentShaderSource = "#version 330 core\n"
    "out vec4 FragColor;\n"
    "void main()\n"
    "{\n"
    "   FragColor = vec4(1.0, 1.0, 0.0, 1.0);\n"
    "}\0";

然后創(chuàng)建兩個program分別用不同的VAO~

// color shader
unsigned int fragmentShader;
fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
glShaderSource(fragmentShader, 1, &fragmentShaderSource, NULL);
glCompileShader(fragmentShader);


unsigned int fragmentShader2;
fragmentShader2 = glCreateShader(GL_FRAGMENT_SHADER);
glShaderSource(fragmentShader2, 1, &fixedFragmentShaderSource, NULL);
glCompileShader(fragmentShader2);

// program
unsigned int shaderProgram;
shaderProgram = glCreateProgram();

glAttachShader(shaderProgram, vertexShader);
glAttachShader(shaderProgram, fragmentShader);
glLinkProgram(shaderProgram);

// program
unsigned int shaderProgram2;
shaderProgram2 = glCreateProgram();

glAttachShader(shaderProgram2, vertexShader);
glAttachShader(shaderProgram2, fragmentShader2);
glLinkProgram(shaderProgram2);

// use this program
glUseProgram(shaderProgram);
glBindVertexArray(VAO[0]);
// draw
glDrawArrays(GL_TRIANGLES, 0, 3);

glUseProgram(shaderProgram2);
// next
glBindVertexArray(VAO[1]);
// draw
glDrawArrays(GL_TRIANGLES, 0, 3);

好啦大功告成~ 睡啦睡啦~

refer to : https://learnopengl-cn.github.io/01%20Getting%20started/04%20Hello%20Triangle/
debug: https://learnopengl.com/In-Practice/Debugging
https://www.cnblogs.com/icyhusky/p/10686294.html