本文主要解決一個(gè)問(wèn)題：
如何使用光照貼圖給材質(zhì)添加更多的靈活性？
引言
在上一篇文章中中敢茁，我們?yōu)檎麄€(gè)物體定義了一個(gè)整體的材質(zhì)宅荤，但是現(xiàn)實(shí)世界中的對(duì)象通常不只一種材質(zhì)嘴高，而是有多種材質(zhì)組成。 想象一輛汽車(chē)：車(chē)框架是鋼制的娘摔，還噴了漆窄坦，看上去閃亮閃亮的，窗戶(hù)的部分能照出周?chē)木拔锏仕拢喬ナ窍鹉z不那么閃鸭津，里面的骨架是鋼就亮很多（前提是你洗了車(chē)） 。由此可見(jiàn)读第，物體有很大可能是由不同材質(zhì)組成的一個(gè)整體曙博。難道我們還對(duì)物體的每個(gè)部分都設(shè)置一個(gè)材質(zhì)嗎？
當(dāng)然不是怜瞒，我們有光照貼圖父泳！嚴(yán)格來(lái)說(shuō)，有三種光照貼圖：環(huán)境光貼圖吴汪、漫反射光貼圖惠窄、鏡面高光貼圖。但是環(huán)境光和漫反射光的顏色相似漾橙，只是稍微暗淡點(diǎn)杆融，所以我們可以把漫反射光的貼圖用到環(huán)境光上。剩下的就只有兩種貼圖了：漫反射光貼圖和鏡面高光貼圖霜运。
漫反射光貼圖
還記得我們講紋理的章節(jié)嗎脾歇？在紋理章節(jié)里，我們直接把片元的顏色設(shè)置成從紋理種采樣的顏色值淘捡，而在這章中藕各，我們會(huì)對(duì)采樣后的顏色值再進(jìn)行一系列的計(jì)算，這就是光照貼圖（不管是漫反射還是鏡面高光）的原理焦除。
由于是對(duì)漫反射顏色產(chǎn)生影響激况，所以我們稱(chēng)之為漫反射光貼圖。但是膘魄，使用的方法還是類(lèi)似的乌逐。本次我們使用下面的圖來(lái)進(jìn)行操作：
這是一個(gè)帶金屬邊的木盒子，至于為什么要金屬邊创葡，你往下看就知道了浙踢。
要使用這張圖，我們需要把材質(zhì)結(jié)構(gòu)中的環(huán)境光和漫反射屬性去掉灿渴，替換成2D紋理圖洛波。
struct Material {
sampler2D diffuse;
vec3 specular;
float shininess;
};
...
in vec2 TexCoords;
記啄沤妗：sampler2D是OpenGL中的隱含類(lèi)型，我們不能去設(shè)置它奋岁，只能將它暴露出來(lái)讓OpenGL自己去設(shè)置思瘟。如果你強(qiáng)行設(shè)置，OpenGL會(huì)爆出一大堆亂七八糟的Error闻伶，煩都煩死了滨攻。
改了材質(zhì)結(jié)構(gòu)之后，引用的方式自然也得改蓝翰，從單純的一個(gè)變量引用光绕，現(xiàn)在需要對(duì)紋理進(jìn)行采樣了。
vec3 ambient = light.ambient * vec3(texture(material.diffuse, TexCoords));
vec3 diffuse = light.diffuse * (diff * vec3(texture(material.diffuse, TexCoords)));
環(huán)境光也用一樣的紋理（如果你非得要用別的紋理畜份，也沒(méi)什么問(wèn)題诞帐，用同樣的方法搞一張就行了。）爆雹，替換掉material.diffuse和material.ambient之后停蕉，就是這樣了。
當(dāng)然钙态，如果你現(xiàn)在就編譯運(yùn)行慧起，是絕對(duì)看不到什么效果滴，為啥册倒？因?yàn)槲覀冞€沒(méi)有把紋理坐標(biāo)傳遞給片元著色器膀炯贰！使用紋理當(dāng)然要為頂點(diǎn)指定紋理坐標(biāo)驻子，然后將紋理坐標(biāo)傳遞給頂點(diǎn)著色器灿意，讓頂點(diǎn)著色器將紋理坐標(biāo)傳遞給片元著色器。頂點(diǎn)屬性已經(jīng)準(zhǔn)備好了崇呵，就是這樣：
float vertices[] = {
// 位置 // 法線(xiàn) // 紋理坐標(biāo)
-0.5f, -0.5f, -0.5f, 0.0f, 0.0f, -1.0f, 0.0f, 0.0f,
0.5f, -0.5f, -0.5f, 0.0f, 0.0f, -1.0f, 1.0f, 0.0f,
0.5f, 0.5f, -0.5f, 0.0f, 0.0f, -1.0f, 1.0f, 1.0f,
0.5f, 0.5f, -0.5f, 0.0f, 0.0f, -1.0f, 1.0f, 1.0f,
-0.5f, 0.5f, -0.5f, 0.0f, 0.0f, -1.0f, 0.0f, 1.0f,
-0.5f, -0.5f, -0.5f, 0.0f, 0.0f, -1.0f, 0.0f, 0.0f,
-0.5f, -0.5f, 0.5f, 0.0f, 0.0f, 1.0f, 0.0f, 0.0f,
0.5f, -0.5f, 0.5f, 0.0f, 0.0f, 1.0f, 1.0f, 0.0f,
0.5f, 0.5f, 0.5f, 0.0f, 0.0f, 1.0f, 1.0f, 1.0f,
0.5f, 0.5f, 0.5f, 0.0f, 0.0f, 1.0f, 1.0f, 1.0f,
-0.5f, 0.5f, 0.5f, 0.0f, 0.0f, 1.0f, 0.0f, 1.0f,
-0.5f, -0.5f, 0.5f, 0.0f, 0.0f, 1.0f, 0.0f, 0.0f,
-0.5f, 0.5f, 0.5f, -1.0f, 0.0f, 0.0f, 1.0f, 0.0f,
-0.5f, 0.5f, -0.5f, -1.0f, 0.0f, 0.0f, 1.0f, 1.0f,
-0.5f, -0.5f, -0.5f, -1.0f, 0.0f, 0.0f, 0.0f, 1.0f,
-0.5f, -0.5f, -0.5f, -1.0f, 0.0f, 0.0f, 0.0f, 1.0f,
-0.5f, -0.5f, 0.5f, -1.0f, 0.0f, 0.0f, 0.0f, 0.0f,
-0.5f, 0.5f, 0.5f, -1.0f, 0.0f, 0.0f, 1.0f, 0.0f,
0.5f, 0.5f, 0.5f, 1.0f, 0.0f, 0.0f, 1.0f, 0.0f,
0.5f, 0.5f, -0.5f, 1.0f, 0.0f, 0.0f, 1.0f, 1.0f,
0.5f, -0.5f, -0.5f, 1.0f, 0.0f, 0.0f, 0.0f, 1.0f,
0.5f, -0.5f, -0.5f, 1.0f, 0.0f, 0.0f, 0.0f, 1.0f,
0.5f, -0.5f, 0.5f, 1.0f, 0.0f, 0.0f, 0.0f, 0.0f,
0.5f, 0.5f, 0.5f, 1.0f, 0.0f, 0.0f, 1.0f, 0.0f,
-0.5f, -0.5f, -0.5f, 0.0f, -1.0f, 0.0f, 0.0f, 1.0f,
0.5f, -0.5f, -0.5f, 0.0f, -1.0f, 0.0f, 1.0f, 1.0f,
0.5f, -0.5f, 0.5f, 0.0f, -1.0f, 0.0f, 1.0f, 0.0f,
0.5f, -0.5f, 0.5f, 0.0f, -1.0f, 0.0f, 1.0f, 0.0f,
-0.5f, -0.5f, 0.5f, 0.0f, -1.0f, 0.0f, 0.0f, 0.0f,
-0.5f, -0.5f, -0.5f, 0.0f, -1.0f, 0.0f, 0.0f, 1.0f,
-0.5f, 0.5f, -0.5f, 0.0f, 1.0f, 0.0f, 0.0f, 1.0f,
0.5f, 0.5f, -0.5f, 0.0f, 1.0f, 0.0f, 1.0f, 1.0f,
0.5f, 0.5f, 0.5f, 0.0f, 1.0f, 0.0f, 1.0f, 0.0f,
0.5f, 0.5f, 0.5f, 0.0f, 1.0f, 0.0f, 1.0f, 0.0f,
-0.5f, 0.5f, 0.5f, 0.0f, 1.0f, 0.0f, 0.0f, 0.0f,
-0.5f, 0.5f, -0.5f, 0.0f, 1.0f, 0.0f, 0.0f, 1.0f
};
替換之后缤剧，在頂點(diǎn)著色器中添加屬性的輸入：
layout (location = 2) in vec2 aTexCoords;
...
out vec2 TexCoords;
void main()
{
...
TexCoords = aTexCoords;
}
別忘了添加頂點(diǎn)的紋理屬性，然后將一眾的屬性跨度改成8*sizeof(float)演熟。
// 紋理屬性
glVertexAttribPointer(2, 2, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(6 * sizeof(float)));
glEnableVertexAttribArray(2);
因?yàn)槲覀兊捻?xiàng)目是開(kāi)始了光照之后的新鮮貨鞭执，之前紋理章節(jié)中加載圖片的代碼已經(jīng)沒(méi)了司顿，正好我們把這部分的功能封裝成一個(gè)函數(shù)芒粹，用起來(lái)就簡(jiǎn)單了。代碼已經(jīng)封裝好了大溜，請(qǐng)看：
//加載紋理
unsigned int loadTexture(char const * path){
unsigned int textureID;
glGenTextures(1, &textureID);
int width, height, nrComponents;
unsigned char * data = stbi_load(path, &width, &height, &nrComponents, 0);
if (data) {
GLenum format;
if (nrComponents == 1)
format = GL_RED;
else if (nrComponents == 3)
format = GL_RGB;
else if (nrComponents == 4)
format = GL_RGBA;
glBindTexture(GL_TEXTURE_2D, textureID);
glTexImage2D(GL_TEXTURE_2D, 0, format, width, height, 0, format, GL_UNSIGNED_BYTE, data);
glGenerateMipmap(GL_TEXTURE_2D);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
stbi_image_free(data);
}
else {
std::cout << "紋理加載失敗化漆，路徑是:" << path << std::endl;
stbi_image_free(data);
}
return textureID;
}
最后，我們需要加載之前的圖片做紋理钦奋，設(shè)置漫反射紋理圖座云，啟用這張紋理圖：
unsigned int diffuseMap = loadTexture("container2.png");
...
lightingShader.setInt("material.diffuse", 0);
...
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, diffuseMap);
編譯運(yùn)行疙赠，不出意外的話(huà)，效果應(yīng)該像這樣：
如果效果有差朦拖，參考這里的完整代碼圃阳。
鏡面高光貼圖
乍一看效果倒是不錯(cuò)，可是總感覺(jué)怪怪璧帝，為啥一個(gè)木頭箱子會(huì)有這么亮的反光呢捍岳？我們來(lái)修復(fù)這個(gè)問(wèn)題，將木頭的部分反光效果去除睬隶，邊框金屬部分的反光效果保留锣夹。這個(gè)過(guò)程看上去和漫反射貼圖一樣，巧合苏潜？我想不是。
用一張紋理圖來(lái)充當(dāng)鏡面高光的效果圖。我們需要生成一張黑白的紋理圖（當(dāng)然你想用彩色的也沒(méi)問(wèn)題）站绪，這張圖已經(jīng)準(zhǔn)備好了稚失，就是下面這張：
木頭的部分沒(méi)有鏡面高光效果，所以是黑色的飞袋，外面的金屬框有鏡面高光效果滤蝠，所以其顏色為灰色。
嚴(yán)格來(lái)說(shuō)授嘀，木頭也是有高光效果的物咳，只是非常微弱，大部分都被散射掉了蹄皱。我們出于學(xué)習(xí)的目的览闰，將高光效果設(shè)置成了0。
用神器PS或者其他的軟件就能做出一張合格的紋理圖巷折，所以压鉴，是不是考慮一下學(xué)個(gè)PS:)？
用法和之前幾乎沒(méi)有區(qū)別锻拘。先來(lái)把片元著色器中的代碼改一改：
struct Material{
sampler2D diffuse;
sampler2D specular;
float shininess;
};
vec3 specular = light.specular * (spec * vec3(texture(material.specular, TexCoords)));
將材質(zhì)中的鏡面高光改成紋理采樣油吭，計(jì)算鏡面高光的時(shí)候也改成紋理采樣。
緊接著署拟，在主函數(shù)中加載紋理圖婉宰，設(shè)置鏡面高光紋理圖，將紋理圖綁定到紋理單元1上推穷。
unsigned int specularMap = loadTexture("container2_specular.png");
lightingShader.setInt("material.specular", 1);
...
glActiveTexture(GL_TEXTURE1);
glBindTexture(GL_TEXTURE_2D, specularMap);
改完之后心包，編譯運(yùn)行，你會(huì)看到類(lèi)似下面的效果：
如果你看到的場(chǎng)景不正確馒铃，請(qǐng)查看這里的代碼比對(duì)蟹腾。
總結(jié)
在本文中痕惋，我們學(xué)習(xí)了如何用光照貼圖代替材質(zhì)的單一反射屬性，在同一個(gè)物體的不同部分應(yīng)用不同的材質(zhì)娃殖。使用的方式很簡(jiǎn)單值戳，對(duì)貼圖進(jìn)行采樣，然后和光照進(jìn)行計(jì)算炉爆。這種方式述寡，和之前紋理章節(jié)介紹的內(nèi)容十分相似，對(duì)比之前紋理章節(jié)的片元著色器代碼叶洞，你會(huì)有更深的理解鲫凶。
參考資料
www.learningopengl.com（非常好的網(wǎng)站，建議學(xué)習(xí)）
