预过滤环境光贴图制作教程：第一步 - HDR 转立方体贴图

在基于物理的渲染（PBR）中，环境光贴图是实现真实光照效果的核心组件之一。而将 HDR 全景图转换为立方体贴图，是制作预过滤环境光贴图的基础步骤。本教程将详细讲解如何实现这一转换过程。

什么是 HDR 转立方体贴图？

HDR（高动态范围）全景图通常以等矩形投影（Equirectangular Projection）的形式存在，看起来像一张横向拉伸的长方形图片。而立方体贴图则由 6 个正方形面组成，分别对应空间中的 ±X、±Y、±Z 六个方向，更适合实时渲染中计算光线反射。

转换的核心是将等矩形投影上的每个像素，正确映射到立方体贴图的 6 个面上，同时保持 HDR 数据的完整性。

准备工作

在开始前，请确保你已具备：

• 基本的 Three.js 知识
• 一张 HDR 全景图（.hdr 或.exr 格式）
• 配置好的 Three.js 环境（包含渲染器、场景、相机）

实现步骤

步骤 1：创建立方体贴图渲染目标

首先，我们需要创建一个立方体贴图渲染目标（WebGLCubeRenderTarget），用于存储转换后的立方体贴图数据：

const cubeTarget = new THREE.WebGLCubeRenderTarget(size, {
    format: THREE.RGBAFormat,  // 使用RGBA格式
    type: THREE.HalfFloatType,  // 半浮点数类型，平衡精度和性能
    generateMipmaps: true,      // 生成多级渐远纹理
    minFilter: THREE.LinearMipmapLinearFilter,  // 缩小过滤方式
    magFilter: THREE.LinearFilter,  // 放大过滤方式
    wrapS: THREE.ClampToEdgeWrapping,  // S轴纹理包裹方式
    wrapT: THREE.ClampToEdgeWrapping,  // T轴纹理包裹方式
    flipY: false  // 不翻转Y轴
});

参数说明：

• size：立方体贴图每个面的尺寸（如 256、512）
• HalfFloatType：保留 HDR 的高动态范围信息，避免精度损失
• 过滤方式选择线性过滤，确保采样平滑

步骤 2：编写顶点着色器

顶点着色器的主要作用是传递 UV 坐标，并进行适当调整：

varying vec2 vUv0;
uniform vec4 uvMod;
void main() {
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    // 计算UV坐标，支持缩放和偏移
    vUv0 =  (position.xy * 0.5 + 0.5) * uvMod.xy + uvMod.zw;
}

• vUv0： varying 变量，用于向片段着色器传递 UV 坐标
• uvMod：用于调整 UV 的缩放和偏移，增加灵活性

步骤 3：编写片段着色器（核心逻辑）

片段着色