原文地址：WebGL學習之紋理盒
我們之前已經學習過二維紋理 gl.TEXTURE_2D，而且還使用它實現(xiàn)了各種效果。但還有一種立方體紋理 gl.TEXTURE_CUBE_MAP刑然，它包含了6個紋理代表立方體的6個面鄙煤。不像常規(guī)的紋理坐標有2個緯度班缰，立方體紋理使用法向量，換句話說三維方向。本節(jié)實現(xiàn)的demo請看 天空盒

3D box

根據(jù)法向量的朝向選取立方體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//前

環(huán)境貼圖

其實我們更應該把cube map叫作紋理盒眨补，通常紋理盒不是給立方體設置紋理用的管削，設置立方體紋理的標準用法其實是使用二維貼圖，那么紋理盒用來做什么的呢撑螺？紋理盒最常見的用法是用來做環(huán)境貼圖含思。在百度和google地圖中的3D街景就是環(huán)境貼圖應用的一個例子。

紋理

下面是6張紅色峽谷圖片

canyon

將以上尺寸為512x512的圖片填充到立方體的每個面，以下就是紋理的創(chuàng)建加載過程

// 創(chuàng)建紋理含潘。
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);

法向量

標準立方體法向量和紋理盒法向量的區(qū)別

立方體向量

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

實現(xiàn)

運行后得到如下的效果，很明顯就能看出是個立方體咒彤，并不是我們想要的360度環(huán)繞的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);

環(huán)境紋理映射

環(huán)境貼圖還有個更通俗的叫法-天空盒。接著我們還要實現(xiàn)一個非常帥氣的效果贯溅，在天空盒三維場景中拄氯，讓其中的物體反射場景周圍的著色。這個操作就叫做環(huán)境紋理映射（environment mapping）盗迟。

反射

如果物體的表面像光滑的鏡子，那么我們就能看到物體反射出天空和周圍的景色熙含。反射的原理非常簡單罚缕，那就是使用反射公式映射紋理盒對應的紋素：

紋理映射

相機位置(觀察點)和物體頂點的位置，頂點位置又包含著法線信息怎静，通過GLSL的reflect函數(shù)就可以非常容易的計算反射向量R邮弹，進而確定看到的是哪一塊表面的著色黔衡。

實現(xiàn)

我們就在天空盒下面增加一個鏡面立方體，那就需要增加一對著色器腌乡，首先頂點著色器需要增加法線盟劫，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);
}

最后實現(xiàn)如下效果与纽，demo情況 天空盒

sky box

后記

其實紋理盒除了可以做環(huán)境貼圖侣签，還可以結合光照，陰影貼圖作出很多酷炫的效果急迂。