Matarialize中文社区-深入了解 Three.js 中的 PMREMGenerator

深入了解 Three.js 中的 PMREMGenerator

少陵野老 2024-10-25 22:46:56

108 PMREMGenerator 专栏

在 Three.js 中，PMREMGenerator 是一个用于生成预过滤的反射环境图（PMREM, Pre-Filtered Mipmapped Environment Map）的工具。它是高质量光照效果的重要组成部分，特别是在使用基于物理的渲染（PBR, Physically-Based Rendering）时，可以显著提高光照的质量和性能。

本文将详细介绍 PMREMGenerator 的使用方法、属性和方法，并提供示例代码，展示如何在 Three.js 中结合使用它和其他组件。

1. 什么是 PMREMGenerator？

PMREMGenerator 通过将环境贴图进行预过滤和生成 Mipmap 纹理，使得反射光照效果更加自然和真实。它能使得材质在不同角度的反射效果更佳，同时也能减少渲染时的计算负担。

2. 如何使用 PMREMGenerator

2.1 初始化 PMREMGenerator

使用 PMREMGenerator 非常简单。首先，你需要创建一个 THREE.PMREMGenerator 实例，并传入一个 WebGL 渲染器。

基本语法：

const pmremGenerator = new THREE.PMREMGenerator(renderer);

2.2 生成 PMREM

使用 PMREMGenerator 的 fromEquirectangular 方法可以从一个等距圆柱图像生成 PMREM。这个方法会返回一个包含预过滤结果的纹理。

基本语法：

const pmremTexture = pmremGenerator.fromEquirectangular(envMap);

参数说明：

envMap: 要生成 PMREM 的环境贴图，通常是一个 THREE.Texture 对象。

2.3 使用生成的 PMREM

生成的 PMREM 纹理可以直接用于材质的环境反射贴图。常用的 PBR 材质，如 THREE.MeshStandardMaterial 和 THREE.MeshPhysicalMaterial，都可以使用这种纹理。

3. PMREMGenerator 的属性和方法

3.1 属性

renderer: 关联的 WebGL 渲染器。
output: 输出格式，通常是 THREE.RGBAFormat。
texture: 最终生成的 PMREM 纹理。

3.2 方法

fromEquirectangular(envMap): 从等距圆柱图像生成 PMREM。
dispose(): 释放 PMREMGenerator 生成的纹理资源。

4. 示例代码

以下是一个完整的示例，展示如何使用 PMREMGenerator 生成和应用预过滤的环境图。

4.1 基本示例

// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建 PMREMGenerator
const pmremGenerator = new THREE.PMREMGenerator(renderer);

// 加载环境贴图
const textureLoader = new THREE.TextureLoader();
textureLoader.load('path/to/your/equirectangular_texture.jpg', (envMap) => {
    // 生成 PMREM
    const pmremTexture = pmremGenerator.fromEquirectangular(envMap);

    // 创建一个 PBR 材质的球体
    const material = new THREE.MeshStandardMaterial({
        metalness: 0.5,
        roughness: 0.1,
        envMap: pmremTexture
    });
  
    const geometry = new THREE.SphereGeometry(1, 32, 32);
    const sphere = new THREE.Mesh(geometry, material);
    scene.add(sphere);

    // 设置相机位置
    camera.position.z = 3;

    // 渲染循环
    const animate = function () {
        requestAnimationFrame(animate);
        sphere.rotation.y += 0.01;  // 旋转球体
        renderer.render(scene, camera);
    };

    animate();
});

// 清理资源
window.addEventListener('unload', () => {
    pmremGenerator.dispose();
});

在这个例子中，我们首先创建了一个场景和渲染器，然后使用 PMREMGenerator 生成了 PMREM 纹理，并将其应用到了一个球体的 MeshStandardMaterial 材质上。

4.2 结合 HDR 环境图

PMREMGenerator 最常用于 HDR 图像，以生成更好的反射效果。下面的示例使用 HDR 环境图生成 PMREM。

// 加载 HDR 环境贴图
const hdrLoader = new THREE.RGBELoader();
hdrLoader.load('path/to/your/hdr_texture.hdr', (hdrTexture) => {
    hdrTexture.mapping = THREE.EquirectangularRefractionMapping;  // 使用反射映射

    const pmremTexture = pmremGenerator.fromEquirectangular(hdrTexture);

    // 创建 PBR 材质
    const material = new THREE.MeshPhysicalMaterial({
        color: 0xffffff,
        metalness: 1,
        roughness: 0,
        clearcoat: 1,
        clearcoatRoughness: 0,
        envMap: pmremTexture
    });

    const geometry = new THREE.SphereGeometry(1, 32, 32);
    const sphere = new THREE.Mesh(geometry, material);
    scene.add(sphere);

    animate();
});

在这个示例中，我们使用 RGBELoader 加载了一个 HDR 环境图，然后使用 PMREMGenerator 生成了 PMREM，最终将其应用到 PBR 材质上。