cube map叫作纹理盒

最新推荐文章于 2025-07-22 14:56:59 发布

liudahai777

最新推荐文章于 2025-07-22 14:56:59 发布

阅读量502

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/li123128/article/details/89880300

本文介绍了WebGL中的立方体纹理（cube map），包括其六个面的定义以及如何加载和使用立方体贴图。立方体纹理常用于环境贴图，例如3D街景。示例展示了如何将6张图片填充到立方体的每个面，并通过法向量选取对应面的纹理。最后，文章提到了如何在3D场景中应用环境贴图，实现物体的反射效果。

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