JavaScript 中 WebGL 怎么做立方体贴图天空盒-js教程-PHP中文网

webgl中实现立方体贴图天空盒，核心是用6张正交图像构建texture_cube_map，并通过相机不动、反向旋转视图矩阵的方式使场景“套”在静止立方体内模拟无限远天空背景。

javascript 中 webgl 怎么做立方体贴图天空盒

WebGL 中实现立方体贴图天空盒，核心是用 6 张正交方向的图像（+X, -X, +Y, -Y, +Z, -Z）构建一个 TEXTURE_CUBE_MAP，再通过相机不动、只旋转视图矩阵反向的方式，让场景“套”在静止的立方体内部，从而模拟无限远的天空背景。

准备六张天空盒图像

确保你有按标准顺序命名或组织的 6 张 2D 图片，通常对应：

right.jpg（+X，右）
left.jpg（-X，左）
top.jpg（+Y，上）
bottom.jpg（-Y，下）
front.jpg（+Z，前，朝摄像机方向）
back.jpg（-Z，后）

注意：WebGL 要求所有 6 面纹理尺寸必须相同（如 1024×1024），且为幂次方尺寸；推荐使用 RGB 或 RGBA 格式，避免压缩格式（如 KTX2）初学时增加复杂度。

创建并加载立方体贴图

不用逐张 bind 到不同纹理单元，而是创建一个 TEXTURE_CUBE_MAP，然后对每个面调用 texImage2D，指定目标为 gl.TEXTURE_CUBE_MAP_POSITIVE_X 等常量：

Gradle 9.8.0

下载

const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
<p>// 对每张图调用一次（伪代码示意）
['right', 'left', 'top', 'bottom', 'front', 'back'].forEach((face, i) => {
const img = document.getElementById(<code>${face}-sky</code>);
gl.texImage2D(
gl.TEXTURE_CUBE_MAP_POSITIVE_X + i, // 目标面
0,                                    // mipmap 层级
gl.RGBA,                              // 内部格式
gl.RGBA,                              // 源格式
gl.UNSIGNED_BYTE,
img
);
});</p><p>// 设置采样参数（重要！立方体贴图必须用 CLAMP_TO_EDGE）
gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_R, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
</p>

编写天空盒着色器（关键逻辑）

顶点着色器只需把顶点位置传给片元着色器，并用 世界空间位置（不是裁剪空间）作为采样方向：

// 顶点着色器
attribute vec3 aPosition;
uniform mat4 uView;   // 注意：只传 view，不传 projection
uniform mat4 uModel;  // 天空盒 model 应为单位矩阵（缩放=1，无平移）
void main() {
  vec4 worldPos = uModel * vec4(aPosition, 1.0);
  gl_Position = uView * worldPos; // 不乘 projection —— 天空盒无限远
}

片元着色器用归一化的世界坐标（即视线方向）直接采样立方体贴图：

// 片元着色器
precision mediump float;
uniform samplerCube uSkybox;
varying vec3 vWorldPos;
<p>void main() {
vec3 dir = normalize(vWorldPos);
gl_FragColor = textureCube(uSkybox, dir);
}
</p>

⚠️ 关键点：
– 天空盒模型应是一个中心在原点、边长为 2 的正方体（顶点范围 [-1,1]）；
– 渲染时禁用深度写入（gl.depthMask(false)），但保留深度测试（gl.enable(gl.DEPTH_TEST)），避免遮挡其他物体；
– 绘制天空盒必须在所有其他物体之前（或用 glDepthFunc(gl.LEQUAL) 兼容 Z=1 边界）。