预过滤环境光贴图制作教程：第二步 - 生成环境贴图图集
核心目标
本步骤的核心是生成一张包含 6 级分辨率的环境贴图图集（envAtlas），实现：
- 将第一步的立方体贴图（
sourceCube）重新映射为等矩形投影（适合存储和采样）； - 生成 6 级不同分辨率的等矩形数据（0 级最高清，5 级最模糊）；
- 用 RGBP 编码压缩 HDR 数据（平衡精度与存储）；
- 处理立方体贴图接缝问题（减少边缘 artifacts）。
关键设计：这 6 个级别并非仅对应粗糙度，而是：
- 对高光滑表面（
gloss接近 1.0）：作为距离相关的 LOD（细节层次）（近处用 0 级，远处用 5 级）；
准备工作
- 前置条件：已完成第一步（HDR 转立方体贴图），获得
sourceCube（THREE.CubeTexture）； - 输出目标：
envAtlas（THREE.WebGLRenderTarget，建议格式RGBAFormat，UnsignedByteType，因 RGBP 编码后数据在 [0,1] 范围）； - 工具依赖：Three.js 环境（
renderer、scene、camera，相机需为正交相机，参数left=-1, right=1, top=1, bottom=-1）； - 基础知识：了解等矩形投影（2:1 宽高比）、立方体贴图采样原理、LOD（细节层次）概念。
实现步骤详解
步骤 1：明确多级图集的结构与用途
图集的 6 个级别按 “分辨率从高到低” 排列，布局如下（以 512x512 图集为例）：
| 级别（Level） | 分辨率（宽 x 高） | 图集内位置（x,y） | 双重用途 |
|---|---|---|---|
| 0 | 512x256 | (0, 0) | ① 高光滑表面（近距离）；② 低粗糙度（如 gloss=0.9） |
| 1 | 256x128 | (256, 256) | ① 高光滑表面（中距离）；② 中低粗糙度（如 gloss=0.7） |
| 2 | 128x64 | (384, 384) | ① 高光滑表面（中远距离）；② 中粗糙度（如 gloss=0.5） |
| 3 | 64x32 | (448, 448) | ① 高光滑表面（远距离）；② 中高粗糙度（如 gloss=0.3） |
| 4 | 32x16 | (480, 480) | ① 高光滑表面（极远距离）；② 高粗糙度（如 gloss=0.1） |
| 5 | 16x8 | (496, 496) | ① 高光滑表面（超远距离）；② 极高粗糙度（如 gloss=0.0） |
步骤 2：编写顶点着色器（UV 坐标处理）
顶点着色器的核心是传递经过调整的 UV 坐标，支持 “扩展 UV 范围以包含接缝像素”，避免边缘采样误差。
uniform vec4 uvMod; // UV调整参数：(scaleU, scaleV, offsetU, offsetV)
varying vec2 vUv; // 传递给片段着色器的UVvoid main() {// 标准顶点变换：将顶点投影到裁剪空间gl_Position = projectionMatrix * modelView