WebGL學習之紋理盒
我們之前已經學習過二維紋理 gl.TEXTURE_2D,而且還使用它實現了各種效果。但還有一種立方體紋理 gl.TEXTURE_CUBE_MAP,它包含了6個紋理代表立方體的6個面。不像常規的紋理座標有2個緯度,立方體紋理使用法向量,換句話說三維方向。本節實現的demo請看 天空盒
根據法向量的朝向選取立方體6個面中的一個,這個面的畫素用來取樣生成顏色。這六個面通過他們相對於立方體中心的方向被引用。它們是分別是
gl.TEXTURE_CUBE_MAP_POSITIVE_X//右 gl.TEXTURE_CUBE_MAP_NEGATIVE_X//左 gl.TEXTURE_CUBE_MAP_POSITIVE_Y//上 gl.TEXTURE_CUBE_MAP_NEGATIVE_Y//下 gl.TEXTURE_CUBE_MAP_POSITIVE_Z//後 gl.TEXTURE_CUBE_MAP_NEGATIVE_Z//前
環境貼圖
其實我們更應該把cube map叫作紋理盒,通常紋理盒不是給立方體設定紋理用的,設定立方體紋理的標準用法其實是使用二維貼圖,那麼紋理盒用來做什麼的呢?紋理盒最常見的用法是用來做環境貼圖。在百度和google地圖中的3D街景就是環境貼圖應用的一個例子。
紋理
下面是6張紅色峽谷圖片
將以上尺寸為512x512的圖片填充到立方體的每個面,以下就是紋理的建立載入過程
// 建立紋理。 var texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture); const faceInfos = [ { target: gl.TEXTURE_CUBE_MAP_POSITIVE_X, url: '/img/sorbin_rt.jpg', }, { target: gl.TEXTURE_CUBE_MAP_NEGATIVE_X, url: '/img/sorbin_lf.jpg', }, { target: gl.TEXTURE_CUBE_MAP_POSITIVE_Y, url: '/img/sorbin_up.jpg', }, { target: gl.TEXTURE_CUBE_MAP_NEGATIVE_Y, url: '/img/sorbin_dn.jpg', }, { target: gl.TEXTURE_CUBE_MAP_POSITIVE_Z, url: '/img/sorbin_bk.jpg', }, { target: gl.TEXTURE_CUBE_MAP_NEGATIVE_Z, url: '/img/sorbin_ft.jpg', }, ]; faceInfos.forEach((faceInfo) => { const {target, url} = faceInfo; // 上傳畫布到立方體貼圖的每個面 const level = 0; const format = gl.RGBA; const width = 512; const height = 512; const type = gl.UNSIGNED_BYTE; // 設定每個面,使其立即可渲染 gl.texImage2D(target, level, format, width, height, 0, format, type, null); // 非同步載入圖片 const image = new Image(); image.src = url; image.onload = function() { // 圖片載入完成將其拷貝到紋理 gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture); gl.texImage2D(target, level, internalFormat, format, type, image); gl.generateMipmap(gl.TEXTURE_CUBE_MAP); }; }); gl.generateMipmap(gl.TEXTURE_CUBE_MAP); gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
法向量
標準立方體法向量 和 紋理盒法向量的區別
3D立方體使用紋理盒有一個巨大的好處就是不需要額外指定紋理座標。只要盒子是被放置在世界座標系的原點,盒子本身的座標就可以作為紋理座標使用,因為在3D世界中位置本身就是一個向量,表示一個方向,我們要的就是這個方向。
所以頂點著色器非常簡單
attribute vec4 a_position; uniform mat4 u_vpMatrix; varying vec3 v_normal; void main() { gl_Position = u_vpMatrix * a_position; //因為位置是以幾何中心為原點的,可以用頂點座標作為法向量 v_normal = normalize(a_position.xyz); }
片段著色器中我們需要用samplerCube
代替 sampler2D
用 textureCube
代替texture2D
。textureCube
需要vec3型別的向量。 法向量從頂點著色器傳遞過來經過了插值處理,需要重新單位化。
precision mediump float; // 從頂點著色器傳入。
varying vec3 v_normal; // 紋理。
uniform samplerCube u_texture;
void main() {
gl_FragColor = textureCube(u_texture, normalize(v_normal));
}
實現
執行後得到如下的效果,很明顯就能看出是個立方體,並不是我們想要的360度環繞的3D場景。
其實我們只需要將相機位置置於原點(0,0,0),同時lookAt向其中的一個面就可以了。但是在原點有個問題,如果要旋轉檢視場景怎麼辦?我們可以通過旋轉相機的位置,這其實就相當於立方體旋轉,同時我們不需要矩陣位移相關的資訊,只需要方向相關的資訊就好了。同時還可以禁止寫入深度快取,造成背景在很遠的假象,讓效果更加真實。
const viewPosition = new Vector3([0,0,1]);//相機位置
const lookAt = [0, 0, 0];//原點
//相機繞y軸旋轉
cameraMatrix.rotate(0.2,0,1,0);
viewPoint = cameraMatrix.multiplyVector3(viewPosition);
vpMatrix.setPerspective( 30, canvas.width / canvas.height, 0.1, 5 );
vpMatrix.lookAt(...viewPoint.elements, ...lookAt, 0, 1, 0);
//重置位移
vpMatrix.elements[12] = 0;
vpMatrix.elements[13] = 0;
vpMatrix.elements[14] = 0;
// 禁止寫入深度快取,造成背景在很遠的假象
gl.depthMask(false);
環境紋理對映
環境貼圖還有個更通俗的叫法-天空盒。接著我們還要實現一個非常帥氣的效果,在天空盒三維場景中,讓其中的物體反射場景周圍的著色。這個操作就叫做環境紋理對映(environment mapping)。
反射
如果物體的表面像光滑的鏡子,那麼我們就能看到物體反射出天空和周圍的景色。反射的原理非常簡單,那就是使用反射公式對映紋理盒對應的紋素:
相機位置(觀察點)和 物體頂點的位置,頂點位置又包含著法線資訊,通過GLSL的reflect函式就可以非常容易的計算反射向量R,進而確定看到的是哪一塊表面的著色。
實現
我們就在天空盒下面增加一個鏡面立方體,那就需要增加一對著色器,首先頂點著色器需要增加法線,mvp矩陣
attribute vec4 a_position;
attribute vec4 a_normal;
uniform mat4 u_vpMatrix;
uniform mat4 u_modelMatrix;
varying vec3 v_position;
varying vec3 v_normal;
void main() {
v_position = (u_modelMatrix * a_position).xyz;
v_normal = vec3(u_modelMatrix * a_normal);
gl_Position = u_vpMatrix * u_modelMatrix * a_position;
}
片元著色器則需要新增相機位置,紋理以及頂點著色器傳遞過來的法線和頂點位置
precision highp float;
varying vec3 v_position;
varying vec3 v_normal;
uniform samplerCube u_texture;
uniform vec3 u_viewPosition;
void main() {
vec3 normal = normalize(v_normal);
vec3 eyeToSurfaceDir = normalize(v_position - u_viewPosition);
vec3 direction = reflect(eyeToSurfaceDir,normal);
gl_FragColor = textureCube(u_texture, direction);
}
這樣我們繪製的時候就要輪流切換著色器program
function draw(){
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
//天空盒
gl.useProgram(program.program);
//繪製天空盒
//...
//立方體
gl.useProgram(cProgram.program);
//繪製立方體
//...
requestAnimationFrame(draw);
}
最後實現如下效果,demo情況 天空盒
後記
其實紋理盒除了可以做環境貼圖,還可以結合光照,陰影貼圖作出很多酷炫的效果