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