我们之前已经学习过二维纹理 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 heigh