WebGL学习之纹理盒

原文地址：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状况 天空盒

后记

其实纹理盒除了能够作环境贴图，还能够结合光照，阴影贴图做出不少酷炫的效果。