WebGL Cubemap 立方体贴图是什么？有哪些应用场景？

Cubemap 是 6 张正方形图片拼成的纹理盒子，用 3D 方向向量采样——GPU 根据向量哪个分量绝对值最大决定落在哪个面上，再换算成 2D 坐标取色。核心用途：天空盒、环境反射（reflect）、环境折射（refract）、菲涅尔效果。6 张图必须同尺寸且为 2 的幂次方，采样前务必设 CLAMP_TO_EDGE 防接缝。

追问

天空盒为什么必须去掉视图矩阵的平移分量？

天空盒模拟无限远的环境，如果跟着相机平移，走两步就穿帮了。只保留旋转：mat4 rotOnly = mat4(mat3(viewMatrix))。

reflect 和 refract 的区别？

reflect(I, N) 计算反射方向——入射光弹回来，用于镜面/金属。refract(I, N, eta) 计算折射方向——光穿过透明介质弯折，用于玻璃/水。真实材质两者同时存在，用菲涅尔公式混合：正面看折射为主，侧面看反射为主。

动态环境映射性能开销大怎么办？

每帧渲染 6 个面代价太高。常用优化：降低分辨率（64×64 够了，反射本身就模糊）、降低更新频率（每 5-10 帧更新一次）、只给关键物体开动态反射。静态场景用预过滤环境贴图（Prefiltered Env Map），运行时零计算。

Cubemap 接缝怎么处理？

99% 是忘了设 CLAMP_TO_EDGE。设了还有缝，检查 6 张图边缘像素是否连续——很多在线生成工具会在接缝处偏移 1 像素。+Y 面图片经常上下颠倒，用 gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true) 翻转。

Cubemap 和 Equirectangular（经纬度贴图）怎么选？

Cubemap 6 张图，GPU 采样效率高，PBR 管线原生支持。Equirectangular 一张图，存储方便但两极有拉伸畸变，采样需要三角函数计算，性能差。实际工作流：用 Equirectangular 存储/传输，运行时转换为 Cubemap 使用。