TWaver3D特效系列之環境映射

隨着TWaver3D的快速發展,越來越多的各種功能都在不斷加強,包括性能的極大提升(可以參考這裏),3D編輯器的易用性和功能持續增強(歡迎大家申請試用),各種特效的增加,特效是本文的主角。

對於UI技術的不斷髮展和越來越挑剔的用戶,各種特殊的效果已經變成了一種必不可少的需求了;或許你正在爲客戶提出的需求而苦惱,不過不用擔心,用TWaver3D正好可以解決這些苦惱。
用時下流行的一句話說:有TWaver3D,就是這麼任性。

本文要講的是環境映射。

如果你不理解什麼是環境映射,也沒有關係,其實你就可以把這個效果想象成現實世界中得鏡子,鏡子可以把周邊的環境映射出來,而且隨着觀察角度的不同,映射的內容也不同。

在TWaver3D中,實現並不難,幾行代碼即可。如下,我們先放一個天空盒,代碼很簡單,用cube加六張貼圖即可:

然後在天空盒裏面增加一個小的cube,並設置環境映射

把skybox和cube都增加到場景中,最終的效果如下:

twaver_envmap_1
(gif圖片較大,剛開始加載的時候有點卡,請耐心等待)
在實際應用中,這種技術可以實現鏡子,有反射效果的地面,牆面等。

當然在很多情況下,真實的物體的表面並不是完全光滑的,而是粗糙的,比如一些建築物外面的粗糙的毛玻璃等,在TWaver3D裏面要實現這種效果,只需要對表面的法線向量加上擾動即可,實現也很簡單,準備一張擾動的圖,一句代碼即可:

最終的效果圖:

twaver_envmap_2

當然,如果你覺得上面的擾動比較大,可以通過下面的參數調整:

改動後的效果圖:
twaver_envmap_3

最後來個實際例子:
twaver-skybox-glass-building

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