Matarialize中文社区-Three.js 框架中的 `InstancedBufferGeometry` 使用详解

Three.js 框架中的 `InstancedBufferGeometry` 使用详解

少陵野老 2024-10-18 19:28:01

76 InstancedBufferGeometry 专栏

在 Three.js 中，InstancedBufferGeometry 是一种用于高效渲染多个相似对象的几何体。这种几何体允许在 GPU 端对大量实例进行管理，显著提升性能，尤其在渲染复杂场景（如大规模粒子系统或场景中的重复对象）时尤为重要。

本文将详细探讨 InstancedBufferGeometry 的使用，包括其构造方法、属性、方法，并通过多个示例展示如何有效利用这一强大功能。

1. 什么是 `InstancedBufferGeometry`

InstancedBufferGeometry 是 BufferGeometry 的一种变体，旨在支持实例化渲染。与传统的几何体不同，InstancedBufferGeometry 可以在单个几何体上实现多个实例，每个实例可以拥有不同的属性（如位置、旋转、缩放、颜色等），而不需要为每个实例创建单独的几何体。

优势

性能提升：减少 CPU 和 GPU 之间的数据传输，提高渲染效率。
内存节省：在内存中存储单个几何体而不是多个重复几何体。
灵活性：允许每个实例有不同的属性，适合动态场景。

2. `InstancedBufferGeometry` 的构造

InstancedBufferGeometry 的构造方法和 BufferGeometry 相似，使用 copy 方法来复制现有几何体，并可以添加实例属性。

构造函数

new THREE.InstancedBufferGeometry()

主要方法

copy(geometry)：复制其他 BufferGeometry。
setAttribute(name, attribute)：为几何体设置属性，例如位置、颜色等。
setIndex(index)：设置索引属性，以支持索引缓冲区。
addGroup(start, count, materialIndex)：将几何体的不同部分分配给不同的材料。

3. `InstancedBufferGeometry` 使用示例

3.1 基本示例：实例化立方体

以下是一个简单的示例，展示如何使用 InstancedBufferGeometry 创建多个实例化的立方体。

// 初始化场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建基本几何体和材质
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// 创建 InstancedBufferGeometry
const instancedGeometry = new THREE.InstancedBufferGeometry();
instancedGeometry.copy(geometry);

// 设置实例数量
const count = 100;

// 创建位置属性
const positions = new Float32Array(count * 3); // 每个实例 3 个分量
for (let i = 0; i < count; i++) {
    positions[i * 3] = (Math.random() - 0.5) * 10; // x
    positions[i * 3 + 1] = (Math.random() - 0.5) * 10; // y
    positions[i * 3 + 2] = (Math.random() - 0.5) * 10; // z
}

// 创建 InstancedBufferAttribute 并设置到几何体
const instancedPositionAttribute = new THREE.InstancedBufferAttribute(positions, 3);
instancedGeometry.setAttribute('instancePosition', instancedPositionAttribute);

// 创建 Mesh
const mesh = new THREE.InstancedMesh(instancedGeometry, material, count);
scene.add(mesh);

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

// 渲染函数
function animate() {
    requestAnimationFrame(animate);
    mesh.rotation.x += 0.01; // 旋转
    mesh.rotation.y += 0.01; // 旋转
    renderer.render(scene, camera);
}

animate();

在这个示例中，我们创建了 100 个随机位置的立方体实例。使用 InstancedMesh 可以显著提高性能，同时避免了单独创建每个立方体的开销。

3.2 示例：动态更新实例位置

我们可以通过更新实例的位置属性来实现动态效果。

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

const count = 100;

const instancedGeometry = new THREE.InstancedBufferGeometry();
instancedGeometry.copy(geometry);

const positions = new Float32Array(count * 3);
for (let i = 0; i < count; i++) {
    positions[i * 3] = (Math.random() - 0.5) * 10;
    positions[i * 3 + 1] = (Math.random() - 0.5) * 10;
    positions[i * 3 + 2] = (Math.random() - 0.5) * 10;
}

const instancedPositionAttribute = new THREE.InstancedBufferAttribute(positions, 3);
instancedGeometry.setAttribute('instancePosition', instancedPositionAttribute);

const mesh = new THREE.InstancedMesh(instancedGeometry, material, count);
scene.add(mesh);

camera.position.z = 5;

function animate() {
    requestAnimationFrame(animate);
  
    // 动态更新实例位置
    for (let i = 0; i < count; i++) {
        const time = Date.now() * 0.001;
        const x = Math.sin(time + i) * 2;
        const y = Math.cos(time + i) * 2;
        instancedPositionAttribute.setXYZ(i, x, y, positions[i * 3 + 2]); // 保持 z 坐标不变
    }
  
    instancedPositionAttribute.needsUpdate = true; // 通知 Three.js 更新数据

    renderer.render(scene, camera);
}

animate();

在这个示例中，我们通过 setXYZ 方法动态更新每个实例的 x 和 y 坐标，创造了一个动态的动画效果。

3.3 示例：结合 `InstancedBufferGeometry` 使用不同属性

我们还可以为每个实例添加其他属性，例如颜色、缩放等。以下示例展示了如何为实例添加颜色属性。

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ vertexColors: true });

const count = 100;

const instancedGeometry = new THREE.InstancedBufferGeometry();
instancedGeometry.copy(geometry);

// 创建实例位置属性
const positions = new Float32Array(count * 3);
for (let i = 0; i < count; i++) {
    positions[i * 3] = (Math.random() - 0.5) * 10;
    positions[i * 3 + 1] = (Math.random() - 0.5) * 10;
    positions[i * 3 + 2] = (Math.random() - 0.5) * 10;
}

const instancedPositionAttribute = new THREE.InstancedBufferAttribute(positions, 3);
instancedGeometry.setAttribute('instancePosition', instancedPositionAttribute);

// 创建实例颜色属性
const colors = new Float32Array(count * 3);
for (let i = 0; i < count; i++) {
    colors[i * 3] = Math.random(); // r
    colors[i * 3 + 1] = Math.random(); // g
    colors[i * 3 + 2] = Math.random(); // b
}

const instancedColorAttribute = new THREE.InstancedBufferAttribute(colors, 3);
instancedGeometry.setAttribute('instanceColor', instancedColorAttribute);

const mesh = new THREE.InstancedMesh(instancedGeometry, material, count);
scene.add(mesh);

camera.position.z = 5;

function animate() {
    requestAnimationFrame(animate);
  
    // 动态更新实例颜色
    for (let i = 0; i < count; i++) {
        const time = Date.now() * 0.001;
        const r = Math.sin(time + i) * 0.5 + 0.5; // 变化的红色分量
        const g = Math.cos(time + i) * 0.5 + 0.5; // 变化的绿色分量
        const b = Math.sin(time + i * 2) * 0.

5 + 0.5; // 变化的蓝色分量
        instancedColorAttribute.setXYZ(i, r, g, b);
    }

    instancedColorAttribute.needsUpdate = true; // 通知 Three.js 更新数据

    renderer.render(scene, camera);
}

animate();

在这个示例中，我们为每个实例指定了随机颜色，并通过时间的变化动态更新了颜色。