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