当前位置：首页 > news >正文

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

news 2025/7/30 8:25:37

在基于物理的渲染（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;
}