ok終于來到了立方體貼圖了，在這里面我們可以加入好看的天空包圍盒，這樣的畫我們的背景就不再是黑色的了！

首先，立方體貼圖和前面的sampler2D貼圖一樣，不過是6個2D組成的立方體而已。

那么為什么要把6個組合在一起呢？立方體貼圖可以通過一個方向向量來進行索引（或者說采樣）。什么意思？

我們類比一下，之前在一個2D面上我們通過uv紋理坐標(biāo)來找到對應(yīng)的紋理值對吧。這里也一樣，不過是通過一個方向向量來獲得。

?假設(shè)我們有一個立方體、然后又有一個立方體貼圖，只要立方體中心在原點，我就可以通過立方體表面的位置來確定對應(yīng)的方向向量從而確定對應(yīng)的立方體紋理坐標(biāo)。

創(chuàng)建立方體貼圖

和前面創(chuàng)建貼圖一樣。

unsigned int textureID;
glGenTextures(1, &textureID);
glBindTexture(GL_TEXTURE_CUBE_MAP, textureID);

不過因為有6個面，所以需要貼6次。

int width, height, nrChannels;
unsigned char *data;  
for(unsigned int i = 0; i < textures_faces.size(); i++)
{data = stbi_load(textures_faces[i].c_str(), &width, &height, &nrChannels, 0);glTexImage2D(GL_TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data);
}

這里我們有一個叫做textures_faces的vector，它包含了立方體貼圖所需的所有紋理路徑，并以表中的順序排列。這將為當(dāng)前綁定的立方體貼圖中的每個面生成一個紋理。

然后還需要設(shè)置環(huán)繞和過濾方式

glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_R, GL_CLAMP_TO_EDGE);

可以看到這里出現(xiàn)了個R坐標(biāo)，其實就是紋理的第三個維度，和位置的z一樣。

最后在片段著色器中要使用一個samplerCube就行

天空盒

我們現(xiàn)在下載一個天空盒到我們的項目中。

?加載天空盒

和之前把圖片加載到gpu一樣，現(xiàn)在是加載一個cubemap。

unsigned int LoadCubeMapToGPU(std::vector<std::string> faces) {unsigned int textureID;glGenTextures(1, &textureID);glBindTexture(GL_TEXTURE_CUBE_MAP, textureID);int width, height, nrChannels;for (unsigned int i = 0; i < faces.size(); i++) {unsigned char* data = stbi_load(faces[i].c_str(), &width, &height, &nrChannels, 0);if (data) {glTexImage2D(GL_TEXTURE_CUBE_MAP_POSITIVE_X + i,0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data);stbi_image_free(data);}else {std::cout << "Cubemap texture failed to load at path: " << faces[i] << std::endl;stbi_image_free(data);}}glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MIN_FILTER, GL_LINEAR);glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MAG_FILTER, GL_LINEAR);glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_R, GL_CLAMP_TO_EDGE);return textureID;};

然后需要存一個skybox的圖片vector

float skyboxVertices[] = {// positions          -1.0f,  1.0f, -1.0f,-1.0f, -1.0f, -1.0f,1.0f, -1.0f, -1.0f,1.0f, -1.0f, -1.0f,1.0f,  1.0f, -1.0f,-1.0f,  1.0f, -1.0f,-1.0f, -1.0f,  1.0f,-1.0f, -1.0f, -1.0f,-1.0f,  1.0f, -1.0f,-1.0f,  1.0f, -1.0f,-1.0f,  1.0f,  1.0f,-1.0f, -1.0f,  1.0f,1.0f, -1.0f, -1.0f,1.0f, -1.0f,  1.0f,1.0f,  1.0f,  1.0f,1.0f,  1.0f,  1.0f,1.0f,  1.0f, -1.0f,1.0f, -1.0f, -1.0f,-1.0f, -1.0f,  1.0f,-1.0f,  1.0f,  1.0f,1.0f,  1.0f,  1.0f,1.0f,  1.0f,  1.0f,1.0f, -1.0f,  1.0f,-1.0f, -1.0f,  1.0f,-1.0f,  1.0f, -1.0f,1.0f,  1.0f, -1.0f,1.0f,  1.0f,  1.0f,1.0f,  1.0f,  1.0f,-1.0f,  1.0f,  1.0f,-1.0f,  1.0f, -1.0f,-1.0f, -1.0f, -1.0f,-1.0f, -1.0f,  1.0f,1.0f, -1.0f, -1.0f,1.0f, -1.0f, -1.0f,-1.0f, -1.0f,  1.0f,1.0f, -1.0f,  1.0f
};std::vector<std::string> faces
{"right.jpg","left.jpg","top.jpg","bottom.jpg","front.jpg","back.jpg"
};

然后需要給這cube給一個VAO VBO

	unsigned int cubemapTexture = LoadCubeMapToGPU(faces);unsigned int skyboxVAO, skyboxVBO;glGenBuffers(1, &skyboxVBO);glBindBuffer(GL_ARRAY_BUFFER, skyboxVBO);glBufferData(GL_ARRAY_BUFFER, sizeof(skyboxVertices), &skyboxVertices, GL_STATIC_DRAW);glGenVertexArrays(1, &skyboxVAO);glBindVertexArray(skyboxVAO);glEnableVertexAttribArray(0);glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);

最后寫一個skybox的shader就好。

#version 330 corelayout(location = 0) in vec3 aPos;out vec3 TexCoords;uniform mat4 projMat;
uniform mat4 viewMat;void main(){gl_Position = projMat*viewMat*vec4(aPos,1.0f);TexCoords = aPos;
}#version 330 core
out vec4 FragColor;
in vec3 TexCoords;uniform samplerCube skybox;void main(){FragColor =	 texture(skybox,TexCoords);
}

可以看到在頂點著色器里面我們把坐標(biāo)信息作為紋理信息傳給了片段著色器，這是因為cubemap的紋理坐標(biāo)就是一個向量，所以我們直接把原點在世界中心的立方體的各點坐標(biāo)當(dāng)作紋理向量給片段著色器就好。

最后是loop中，我們要記住，畫天空盒，我們得先畫，而且畫的時候需要把深度測試關(guān)了，這樣的畫，之后的物體就是畫在背景之前了。

loop中這么寫。

//第一階段
...
//clear screen
...
//skybox
glDepthMask(GL_FALSE);
skyboxShader->use();iewMat = camera.GetViewMatrix();
projMat = glm::perspective(glm::radians(fov), 800.0f / 600.0f, 0.1f, 100.0f);
glUniformMatrix4fv(glGetUniformLocation(skyboxShader->ID, "viewMat"), 1, GL_FALSE, glm::value_ptr(viewMat));
glUniformMatrix4fv(glGetUniformLocation(skyboxShader->ID, "projMat"), 1, GL_FALSE, glm::value_ptr(projMat));glBindVertexArray(skyboxVAO);
glBindTexture(GL_TEXTURE_CUBE_MAP, cubemapTexture);
glDrawArrays(GL_TRIANGLES, 0, 36);
glDepthMask(GL_TRUE);
...
//木塊 機器人 其他

不過結(jié)果不對，我們希望天空盒是以玩家為中心的，這樣不論玩家移動了多遠，天空盒都不會變近，讓玩家產(chǎn)生周圍環(huán)境非常大的印象。然而，當(dāng)前的觀察矩陣會旋轉(zhuǎn)、縮放和位移來變換天空盒的所有位置，所以當(dāng)玩家移動的時候，立方體貼圖也會移動！我們希望移除觀察矩陣中的位移部分，讓移動不會影響天空盒的位置向量。

在基礎(chǔ)光照小節(jié)中，我們通過取4x4矩陣左上角的3x3矩陣來移除變換矩陣的位移部分。我們可以將觀察矩陣轉(zhuǎn)換為3x3矩陣（移除位移），再將其轉(zhuǎn)換回4x4矩陣，來達到類似的效果。

修改viewMat

glm::mat4 view = glm::mat4(glm::mat3(camera.GetViewMatrix()));

優(yōu)化

?在剛剛的過程中，是先畫天空盒，在這中間關(guān)閉了深度測試。是因為我們想讓其他物體畫在天空盒上。不過這樣不過高效，是因為在畫天空盒的時候會對每個像素都跑一次片段著色器。

所以我們要最后渲染天空盒。但是怎么做呢？提前深度測試可以做到，我們先渲染其他東西，然后再提前深度測試通過的地方渲染天空盒就行了。

不過要知道的我們的天空盒只有1x1x1，其他東西很容易就在天空盒上，所以我們需要欺騙深度緩沖，或者說讓他認為天空盒的深度值有最大，要讓天空盒最深。

在坐標(biāo)系統(tǒng)小節(jié)中我們說過，透視除法是在頂點著色器運行之后執(zhí)行的，將gl_Position的xyz坐標(biāo)除以w分量。我們又從深度測試小節(jié)中知道，相除結(jié)果的z分量等于頂點的深度值。使用這些信息，我們可以將輸出位置的z分量等于它的w分量，讓z分量永遠等于1.0，這樣子的話，當(dāng)透視除法執(zhí)行之后，z分量會變?yōu)?code>w / w = 1.0。

修改頂點著色器

void main(){vec4 pos = projMat*viewMat*vec4(aPos,1.0);gl_Position = pos.xyww;TexCoords = aPos;
}

修改main中的順序，把天空盒放在其他物體之后，但是是再透明物體之前。

我們還要改變一下深度函數(shù)，將它從默認的GL_LESS改為GL_LEQUAL。

深度緩沖將會填充上天空盒的1.0值，所以我們需要保證天空盒在值小于或等于深度緩沖而不是小于時通過深度測試。

結(jié)果和之前一樣

環(huán)境映射

現(xiàn)在我們可以通過這個環(huán)境紋理來給物體一些反射折射的屬性了

反射

?這里灰色向量是我們的觀察方向向量、紅色是法向方向，綠色是反射方向，可以通過reflect()來獲得，之后把這個綠色的向量作為天空盒的紋理方向坐標(biāo)就可以獲得立方體貼圖了。

所以重新寫一個反射天空盒的箱子著色器。

#version 330 corelayout(location = 0) in vec3 aPos;
layout(location =1) in vec3 aNormal;out vec3 Position;
out vec3 Normal;uniform mat4 modelMat;
uniform mat4 viewMat;
uniform mat4 projMat;void main(){Normal = mat3(transpose(inverse(modelMat)))*aNormal;Position = vec3(modelMat* vec4(aPos,1.0f));gl_Position = projMat * viewMat * modelMat*vec4(aPos,1.0f);
}#version 330 corein vec3 Position;
in vec3 Normal;out vec4 FragColor;uniform vec3 cameraPos;
uniform samplerCube skybox;void main(){vec3 viewDir = normalize(Position-cameraPos);vec3 refDir = reflect(viewDir,normalize(Normal));FragColor = vec4(texture(skybox,refDir).rgb,1.0f);
}

這里注意看下，因為片段著色器需要法向量信息，所以需要通過頂點著色器傳個normal過去，但是這里是需要經(jīng)過model變換的，也不能直接變換。所以需要通過

Normal = mat3(transpose(inverse(model))) * aNormal;

這樣才能得到正確的法向量。

然后在main中 建立新的shader，綁定VAOVBO，之后再loop中畫一個這樣的cube，記得要把camera的position傳進去。

//反射天空盒cubeskyboxReflectShader->use();modelMat = glm::translate(glm::mat4(1.0f), glm::vec3(0, 0, 5.0f));viewMat = camera.GetViewMatrix();projMat = projMat = glm::perspective(glm::radians(fov), 800.0f / 600.0f, 0.1f, 100.0f);glUniformMatrix4fv(glGetUniformLocation(skyboxReflectShader->ID, "modelMat"), 1, GL_FALSE, glm::value_ptr(modelMat));glUniformMatrix4fv(glGetUniformLocation(skyboxReflectShader->ID, "viewMat"), 1, GL_FALSE, glm::value_ptr(viewMat));glUniformMatrix4fv(glGetUniformLocation(skyboxReflectShader->ID, "projMat"), 1, GL_FALSE, glm::value_ptr(projMat));glUniform3f(glGetUniformLocation(skyboxReflectShader->ID, "cameraPos"), camera.Position.x, camera.Position.y, camera.Position.z);glBindVertexArray(skyBoxReflectionVAO);glBindTexture(GL_TEXTURE_CUBE_MAP, cubemapTexture);glDrawArrays(GL_TRIANGLES, 0, 36);

記得再畫之前綁定一下天空盒的材質(zhì)。

這是怎么少一個面呢，是因為面剔除的原因，這里的頂點坐標(biāo)沒有按照逆時針的順序排列。

修改一下，在畫的時候把面剔除關(guān)了。

?

OK了?。

如果直接另外畫一個機器人模型，但是用這里的reflectShader的話

?這看起來非常棒，但在現(xiàn)實中大部分的模型都不具有完全反射性。我們可以引入反射貼圖(Reflection Map)，來給模型更多的細節(jié)。與漫反射和鏡面光貼圖一樣，反射貼圖也是可以采樣的紋理圖像，它決定這片段的反射性。通過使用反射貼圖，我們可以知道模型的哪些部分該以什么強度顯示反射。在本節(jié)的練習(xí)中，將由你來為我們之前創(chuàng)建的模型加載器中引入反射貼圖，顯著提升納米裝模型的細節(jié)。

折射

折射通過refract函數(shù)實現(xiàn)。需要一個法向量，一個觀察方向，兩個材質(zhì)之間的折射率。

現(xiàn)在修改下片段著色器就好。

void main()
{             float ratio = 1.00 / 1.52;vec3 I = normalize(Position - cameraPos);vec3 R = refract(I, normalize(Normal), ratio);FragColor = vec4(texture(skybox, R).rgb, 1.0);
}

?它不太能顯示折射的效果，現(xiàn)在看起來只是有點像一個放大鏡。對納米裝使用相同的著色器卻能夠展現(xiàn)出了我們期待的效果：一個類玻璃的物體。

你可以想象出有了光照、反射、折射和頂點移動的正確組合，你可以創(chuàng)建出非常漂亮的水。注意，如果要想獲得物理上精確的結(jié)果，我們還需要在光線離開物體的時候再次折射，現(xiàn)在我們使用的只是單面折射(Single-side Refraction)，但它對大部分場合都是沒問題的。

動態(tài)環(huán)境貼圖

現(xiàn)在我們使用的都是靜態(tài)圖像的組合來作為天空盒，看起來很不錯，但它沒有在場景中包括可移動的物體。我們一直都沒有注意到這一點，因為我們只使用了一個物體。如果我們有一個鏡子一樣的物體，周圍還有多個物體，鏡子中可見的只有天空盒，看起來就像它是場景中唯一一個物體一樣。

通過使用幀緩沖，我們能夠為物體的6個不同角度創(chuàng)建出場景的紋理，并在每個渲染迭代中將它們儲存到一個立方體貼圖中。之后我們就可以使用這個（動態(tài)生成的）立方體貼圖來創(chuàng)建出更真實的，包含其它物體的，反射和折射表面了。這就叫做動態(tài)環(huán)境映射(Dynamic Environment Mapping)，因為我們動態(tài)創(chuàng)建了物體周圍的立方體貼圖，并將其用作環(huán)境貼圖。

雖然它看起來很棒，但它有一個很大的缺點：我們需要為使用環(huán)境貼圖的物體渲染場景6次，這是對程序是非常大的性能開銷?，F(xiàn)代的程序通常會盡可能使用天空盒，并在可能的時候使用預(yù)編譯的立方體貼圖，只要它們能產(chǎn)生一點動態(tài)環(huán)境貼圖的效果。雖然動態(tài)環(huán)境貼圖是一個很棒的技術(shù)，但是要想在不降低性能的情況下讓它工作還是需要非常多的技巧的。