在〈立方體映射〉中,傳給片段著色器 normal
的 cubeMapPositon
座標,其實並不會因立方體轉動而改變,會改變的是 vertexPosition
,如果將 vertexPosition
會怎樣呢?
你會發現立方體轉動過程中,面上的圖樣會因為方向向量轉動而不斷地變化,當然,如果使用地球貼圖看來會有點詭異,若是使用 Human 上 Yokohama 2 的貼圖呢?
這就看到這樣的結果:
上頭的擷圖只能看出像鏡子的效果,你可以按一下範例網頁,立方體在轉動時真的像面鏡子,隨時反射出週遭環境的影像般的效果,要做這樣的修改並不難,詳細程式碼就自行看網頁內容。
既然實際上像素取樣時,是依方向向量,而上頭可以令立方體呈現出動態反射(Dynamic reflection)效果,那能不能套用在其他模型上呢?當然!基本上都可以,例如作個正四面體的範例:
同樣地,程式碼不難,自己看看範例網頁的原始碼就可以理解了。
其實 Human 上的立方體映射貼圖,有提供預覽效果,例如 Human 上 Yokohama 2 的預覽,你可以像是身置其中般,720 度地轉動觀看景像,這也是立方體映射的應用之一,稱之為天空盒(Skybox),原理不難,就是把自己置於立方體映射的原點:
因為六個面都包裹了圖片,因此轉動你自身,就會看到景像在變換,當然,轉換為 WebGL 的話,實際上在轉動的是裁剪空間中的一個矩形:
矩形在裁剪空間中的頂點,決定了可以看到哪些景像範圍,著色時插值的每個方向向量,就決定了要上哪個顏色,只要轉動矩形,方向向量不同,上色的來源就不同,你就會看到環景圖了,例如這個網頁的效果,原始碼不難,一樣自行察看頁面內容:
它一開始將矩形設在裁剪空間整個 -Z 平面:
const n = 1.0;
const verteices = [
-n, n, -n,
-n, -n, -n,
n, -n, -n,
-n, n, -n,
n, -n, -n,
n, n, -n
];
你的 x、y 決定了畫布中哪些部份要用來繪製,而 z 值決定了遠近感,z 越靠近原點,景像看起來會越遠,簡單來說,改變 z 就可以做到拉遠、拉近的效果,不過,過於靠近原點,使得方向向量取樣時跨到旁邊的平面,照片會呈放射狀,例如將 z 全部除 4 的話會像是: