隨著歲末將至，twaver開(kāi)發(fā)團(tuán)隊(duì)依舊馬不停蹄，3d產(chǎn)品功能持續(xù)更新，新特效和功能目不暇接。現(xiàn)在，我們就利用一些新功能，制作一個(gè)全新“賽瓦號(hào)”飛船，大家看一下仿真程度是否有質(zhì)的不同？
網(wǎng)頁(yè)3d技術(shù)正在快速發(fā)展，3d可視化技術(shù)目前大熱，不但是目前整個(gè)IT業(yè)中的技術(shù)熱點(diǎn)，也是互聯(lián)網(wǎng)、投資界的熱門話題。各種3d虛擬仿真技術(shù)紛紛出現(xiàn)，對(duì)twaver這類底層3d展示引擎產(chǎn)品需求量也迅速加大，要求也不斷上升。網(wǎng)頁(yè)3d應(yīng)用要求開(kāi)發(fā)更加簡(jiǎn)單方便、效果更加逼真，twaver也在不斷滿足開(kāi)發(fā)者這一需求。
要讓3d場(chǎng)景更加真實(shí)，一個(gè)核心技術(shù)就是處理好“光線”。光線直接將外接實(shí)物的各種信息帶入眼睛，模擬好光線的處理，3d場(chǎng)景就會(huì)更加真實(shí)。光線的處理一般有透視、反射、折射等。
讓美工或程序員準(zhǔn)備大量的高清貼圖，并不現(xiàn)實(shí)，也不能完全解決真實(shí)度的問(wèn)題。對(duì)于光線的反射，還需要直接用算法和一些輔助貼圖進(jìn)行實(shí)時(shí)計(jì)算和模擬。下面介紹幾種常見(jiàn)的用法。
環(huán)境貼圖
環(huán)境貼圖，是指一個(gè)物體在一個(gè)環(huán)境中，對(duì)四周環(huán)境貼圖的反射。例如，下面的一個(gè)球在一個(gè)完全空白的空間，它只是發(fā)出或反射一些燈光照射來(lái)的白光而已：
我們?nèi)绻O(shè)置合理的材質(zhì)和反光強(qiáng)度，會(huì)讓它看上去更生動(dòng)一些：
但是它依舊沒(méi)有對(duì)環(huán)境的場(chǎng)景有什么更細(xì)致的反應(yīng)。例如一個(gè)光鮮亮麗的汽車放在站臺(tái)上，它會(huì)對(duì)頭頂?shù)臒艄夂透┥碛|摸油漆的看客有清晰的反射。這時(shí)我們可以使用環(huán)境貼圖：
1 2 | var envmap=['posx.jpg','negx.jpg','posy.jpg','negy.jpg','posz.jpg','negz.jpg'];
node.setStyle('m.envmap.image',envmap);
|
上面準(zhǔn)備了6張環(huán)境貼圖，分別對(duì)應(yīng)環(huán)境立方體中的6個(gè)面，并設(shè)置給這個(gè)node對(duì)象。這樣，node就會(huì)把這個(gè)環(huán)境給反射出來(lái)。
這看上去像一個(gè)剝了皮的皮蛋。通過(guò)下面的參數(shù)，可以進(jìn)一步控制環(huán)境貼圖的反射比例：
1 2 3 | node.s({
'm.reflectRatio': 0.4,
});
|
折射，還可以配合透明來(lái)疊加投射效果。兩者結(jié)合，可以做出既反射、又投射的“氣泡”效果。當(dāng)然這種情況要有背景參照物才能把“透明”觀察的更清楚。為此我們添加一個(gè)天空盒環(huán)境。例如：
1 2 3 | var skybox = new mono.Cube(10000,10000,10000);
skybox.setStyle('m.texture.image',['posx.jpg','negx.jpg','posy.jpg','negy.jpg','posz.jpg','negz.jpg']);
box.add(skybox);
|
合理利用環(huán)境反光，可以讓物體顯得更加精致、逼真，有光澤。
高光反射
接下來(lái)再看高光反射的問(wèn)題。我們假設(shè)一個(gè)物體有貼圖、有紋理，但是沒(méi)有高光反射。那么它看上去將是這樣的：
是不是顯得很“呆”？因?yàn)椴馁|(zhì)是’basic’，沒(méi)有反光效果，就沒(méi)有光澤變化，就像一張平面上的畫，沒(méi)有立體感。可以修改材質(zhì)的類型為’phong’增加反光：
1 2 3 | node.s({
'm.type': 'phong',
});
|
這樣就有了反光：
生動(dòng)多了。不過(guò)還是沒(méi)有“高光”，材質(zhì)感覺(jué)不是很“光亮、精致”。可以進(jìn)一步設(shè)置白色高光：
1 2 3 | node.s({
'm.specular': 'white',
});
|
一些局部位置對(duì)光有了更強(qiáng)烈的反應(yīng)，更加真實(shí)了：
更進(jìn)一步，如果我們希望物體外表一些特定區(qū)域有高光反光，其他區(qū)域暗淡，該如何處理？我們可以使用specular map貼圖進(jìn)行控制。例如我們把上面模型中的藍(lán)色區(qū)域作為“玻璃窗戶讓它有更強(qiáng)烈的反光，設(shè)置了specular map后的效果會(huì)有進(jìn)一步變化：
1 2 3 | node.s({
'm.specularmap.image': 'specularmap.jpg',
});
|
現(xiàn)在的效果是，“該亮的地方亮、不該亮的地方不亮”。“哪里亮、怎么亮、亮不亮”，我們都可以通過(guò)上述手段進(jìn)行精確的控制。
法線貼圖
光滑沒(méi)有一絲雜質(zhì)的油漆，看上去有點(diǎn)假。有一些雜質(zhì)、紋理的效果更加真實(shí)。利用貼圖紋理可以實(shí)現(xiàn)這樣的效果，例如皮革材質(zhì)。但它比較呆板：不會(huì)隨著光線的移動(dòng)而改變對(duì)環(huán)境的光線反射變化。現(xiàn)在我們用normal map這一技術(shù)來(lái)代替圖片紋理，看是否更簡(jiǎn)單、效果更好。
1 2 3 | node.s({
'm.normalmap.image': 'normalmap.jpg',
});
|
怎么樣，“皮革”一樣的紋理效果立刻就出來(lái)了，而且比美工制圖更加簡(jiǎn)單方便。
如果覺(jué)得皮革紋理波動(dòng)有點(diǎn)大，可以通過(guò)控制法向干擾的比例進(jìn)行調(diào)節(jié)。下面我們把干擾調(diào)節(jié)低一點(diǎn)：
1 2 3 | node.s({
'm.normalScale': new mono.Vec2(0.1,0.1),
});
|
干擾只啟動(dòng)10%。看看效果：
皮革會(huì)平滑、柔和一些，不粗糙，但紋理依舊清晰可見(jiàn)。如果是我們買LV的包包，一定會(huì)選擇這種材質(zhì)而不是前面的粗糙材質(zhì)。
即使不用任何貼圖，也可以產(chǎn)生效果不錯(cuò)的紋理，如下圖中的帶雕刻效果的金屬圓柱：
哦對(duì)了，差點(diǎn)忘記了將以上環(huán)境映射、高光、貼圖幾個(gè)伎倆同時(shí)并用，看看效果。
最后再加上玻璃頭盔、天空盒，整個(gè)場(chǎng)景就完整了：
最后，大家就跟著我們這趟賽瓦號(hào)，出發(fā)踏上3d探索之旅吧！
