3D賽瓦號——整裝待發!

隨着歲末將至,twaver開發團隊依舊馬不停蹄,3d產品功能持續更新,新特效和功能目不暇接。現在,我們就利用一些新功能,製作一個全新“賽瓦號”飛船,大家看一下仿真程度是否有質的不同?

385

網頁3d技術正在快速發展,3d可視化技術目前大熱,不但是目前整個IT業中的技術熱點,也是互聯網、投資界的熱門話題。各種3d虛擬仿真技術紛紛出現,對twaver這類底層3d展示引擎產品需求量也迅速加大,要求也不斷上升。網頁3d應用要求開發更加簡單方便、效果更加逼真,twaver也在不斷滿足開發者這一需求。

要讓3d場景更加真實,一個核心技術就是處理好“光線”。光線直接將外接實物的各種信息帶入眼睛,模擬好光線的處理,3d場景就會更加真實。光線的處理一般有透視、反射、折射等。

386

讓美工或程序員準備大量的高清貼圖,並不現實,也不能完全解決真實度的問題。對於光線的反射,還需要直接用算法和一些輔助貼圖進行實時計算和模擬。下面介紹幾種常見的用法。

環境貼圖

環境貼圖,是指一個物體在一個環境中,對四周環境貼圖的反射。例如,下面的一個球在一個完全空白的空間,它只是發出或反射一些燈光照射來的白光而已:
387

我們如果設置合理的材質和反光強度,會讓它看上去更生動一些:
388

但是它依舊沒有對環境的場景有什麼更細緻的反應。例如一個光鮮亮麗的汽車放在站臺上,它會對頭頂的燈光和俯身觸摸油漆的看客有清晰的反射。這時我們可以使用環境貼圖:

var envmap=['posx.jpg','negx.jpg','posy.jpg','negy.jpg','posz.jpg','negz.jpg'];
node.setStyle('m.envmap.image',envmap);

上面準備了6張環境貼圖,分別對應環境立方體中的6個面,並設置給這個node對象。這樣,node就會把這個環境給反射出來。
389
這看上去像一個剝了皮的皮蛋。通過下面的參數,可以進一步控制環境貼圖的反射比例:

node.s({        
  'm.reflectRatio': 0.4,
});



390
折射,還可以配合透明來疊加投射效果。兩者結合,可以做出既反射、又投射的“氣泡”效果。當然這種情況要有背景參照物才能把“透明”觀察的更清楚。爲此我們添加一個天空盒環境。例如:

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);


391
合理利用環境反光,可以讓物體顯得更加精緻、逼真,有光澤。

高光反射

接下來再看高光反射的問題。我們假設一個物體有貼圖、有紋理,但是沒有高光反射。那麼它看上去將是這樣的:
392
是不是顯得很“呆”?因爲材質是’basic’,沒有反光效果,就沒有光澤變化,就像一張平面上的畫,沒有立體感。可以修改材質的類型爲’phong’增加反光:

node.s({
  'm.type': 'phong',
});


這樣就有了反光:
393
生動多了。不過還是沒有“高光”,材質感覺不是很“光亮、精緻”。可以進一步設置白色高光:

node.s({
  'm.specular': 'white',
});


一些局部位置對光有了更強烈的反應,更加真實了:
394
更進一步,如果我們希望物體外表一些特定區域有高光反光,其他區域暗淡,該如何處理?我們可以使用specular map貼圖進行控制。例如我們把上面模型中的藍色區域作爲“玻璃窗戶讓它有更強烈的反光,設置了specular map後的效果會有進一步變化:

node.s({
  'm.specularmap.image': 'specularmap.jpg',
});


395
現在的效果是,“該亮的地方亮、不該亮的地方不亮”。“哪裏亮、怎麼亮、亮不亮”,我們都可以通過上述手段進行精確的控制。

法線貼圖

光滑沒有一絲雜質的油漆,看上去有點假。有一些雜質、紋理的效果更加真實。利用貼圖紋理可以實現這樣的效果,例如皮革材質。但它比較呆板:不會隨着光線的移動而改變對環境的光線反射變化。現在我們用normal map這一技術來代替圖片紋理,看是否更簡單、效果更好。

node.s({
  'm.normalmap.image': 'normalmap.jpg',
});


396
怎麼樣,“皮革”一樣的紋理效果立刻就出來了,而且比美工製圖更加簡單方便。

如果覺得皮革紋理波動有點大,可以通過控制法向干擾的比例進行調節。下面我們把干擾調節低一點:

node.s({
  'm.normalScale': new mono.Vec2(0.1,0.1),
});


干擾只啓動10%。看看效果:
398
皮革會平滑、柔和一些,不粗糙,但紋理依舊清晰可見。如果是我們買LV的包包,一定會選擇這種材質而不是前面的粗糙材質。

即使不用任何貼圖,也可以產生效果不錯的紋理,如下圖中的帶雕刻效果的金屬圓柱:
402

哦對了,差點忘記了將以上環境映射、高光、貼圖幾個伎倆同時並用,看看效果。
403

最後再加上玻璃頭盔、天空盒,整個場景就完整了:
386

最後,大家就跟着我們這趟賽瓦號,出發踏上3d探索之旅吧!
386

408

發佈了111 篇原創文章 · 獲贊 24 · 訪問量 26萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章