核心目標

本步驟的核心是生成一張包含 6 級分辨率的環境貼圖圖集（envAtlas），實現：

1. 將第一步的立方體貼圖（sourceCube）重新映射為等矩形投影（適合存儲和采樣）；
2. 生成 6 級不同分辨率的等矩形數據（0 級最高清，5 級最模糊）；
3. 用 RGBP 編碼壓縮 HDR 數據（平衡精度與存儲）；
4. 處理立方體貼圖接縫問題（減少邊緣 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