Matarialize中文社区-three.js专栏

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

InstancedBufferAttribute

在 Three.js 中，InstancedBufferAttribute 是一种特殊的缓冲属性，用于在同一个几何体上实例化多个对象，以达到高效渲染的目的。这种技术尤其适用于需要渲染大量相同或相似对象的场景，例如树木、建筑、粒子等。通过使用 InstancedBufferAttribute，可以显著减少 GPU 的负担，提高渲染性能。

本文将深入探讨 InstancedBufferAttribute 的作用、使用场景、属性与方法，并结合详细示例演示如何将其应用于 Three.js 项目中，确保你能够掌握如何高效渲染实例化对象。

1. 什么是 `InstancedBufferAttribute`

InstancedBufferAttribute 是 BufferAttribute 的一个派生类，专门设计用于支持实例化渲染。它允许你为每个实例提供不同的属性（如位置、旋转、缩放等），而不需要为每个实例创建独立的几何体。这样可以在 GPU 中使用较少的内存，并减少 CPU 和 GPU 之间的数据传输，从而提升性能。

2. `InstancedBufferAttribute` 的核心方法和属性

在使用 InstancedBufferAttribute 之前，我们先来了解它的核心方法和属性。

2.1 构造函数

new THREE.InstancedBufferAttribute(array, itemSize, normalized)

array：Float32Array 或其他类型的数组。用于存储每个实例的属性数据。
itemSize：每个实例的属性数量，例如位置属性通常为 3（x, y, z）。
normalized：是否将数据归一化（通常为 false）。

2.2 `count`

表示实例的数量，与数组长度和 itemSize 相关。

2.3 `setUsage(usage)`

用于设置缓冲区的使用模式，例如 THREE.DynamicDrawUsage 用于动态更新，THREE.StaticDrawUsage 用于静态数据。

instancedBufferAttribute.setUsage(THREE.DynamicDrawUsage);

2.4 `needsUpdate`

当实例的属性数据更新后，设置为 true，Three.js 会自动更新 GPU 中的数据。

instancedBufferAttribute.needsUpdate = true;

2.5 `setXYZ(index, x, y, z)`

设置特定实例的 x, y, z 值。适用于需要动态更新特定实例属性的场景。

instancedBufferAttribute.setXYZ(instanceIndex, x, y, z);

3. `InstancedBufferAttribute` 使用示例

下面我们通过几个实际的代码示例来讲解 InstancedBufferAttribute 的使用场景。

3.1 示例：创建简单的实例化几何体

在这个示例中，我们将创建多个实例化的立方体。

// 初始化场景、相机和渲染器
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;

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

// 创建位置属性
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 示例：结合 `InstancedBufferAttribute` 使用不同属性

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

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();

在这个示例中，我们为每个实例添加了随机颜色并动态更新了它们，实现了一个多彩的动画效果。

4. 适用场景

InstancedBufferAttribute 在以下场景中尤为适用：

粒子系统：用于创建大量小粒子，例如烟雾、火焰、雨滴等。
场景中的大量相似对象：如树木、建筑、敌人等。
动态效果：如变化的颜色、形状、位置等。

5. 总结

InstancedBufferAttribute 是 Three.js 中非常强大且高效的工具，特别适合处理需要渲染大量实例的场景。通过使用实例化几何体，可以大幅提升性能，并为每个实例提供独立的属性，从而实现更复杂的效果。

在本文中，我们详细介绍了 InstancedBufferAttribute 的核心属性与方法，并通过多个示例展示了它在实际项目中的应用。希望这篇博客能够帮助你更好地理解和使用 InstancedBufferAttribute，提升你的 Three.js 项目性能。

评论区

评论列表

{{ rItem.user.nickname || rItem.user.username }} @ {{ rItem.toUser.nickname || rItem.toUser.username }}

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

1. 什么是 InstancedBufferAttribute

2. InstancedBufferAttribute 的核心方法和属性

2.1 构造函数

2.2 count

2.3 setUsage(usage)

2.4 needsUpdate

2.5 setXYZ(index, x, y, z)

3. InstancedBufferAttribute 使用示例