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

person 少陵野老    watch_later 2024-10-18 19:30:01
visibility 59    class InstancedInterleavedBuffer    bookmark 专栏

在 Three.js 中，InstancedInterleavedBuffer 是一个用于存储实例化对象的属性（如位置、颜色、法线等）的高效数据结构。它支持将多个属性打包在一个缓冲区中，从而减少 GPU 的数据传输，提高渲染性能，尤其适合在处理大量实例化对象时使用。本文将深入探讨 InstancedInterleavedBuffer 的使用，涵盖其构造、属性、方法，以及如何与其他 Three.js 组件结合使用的示例。

1. 什么是 InstancedInterleavedBuffer

InstancedInterleavedBuffer 允许我们在一个缓冲区中存储多个属性，每个属性的每个实例都可以在一个交错的格式中存储。这种结构可以大大提高访问效率，因为 GPU 可以更快地访问这些交错数据。

优势

  • 性能优化：通过减少数据传输和提升缓存利用率来提高渲染性能。
  • 灵活性：可以在一个缓冲区中管理多个不同的属性，适用于复杂的几何体和效果。
  • 简化数据结构：对于实例化几何体的管理，提供更简洁的接口。

2. InstancedInterleavedBuffer 的构造

构造函数

new THREE.InstancedInterleavedBuffer(array, stride, meshPerAttribute)
  • array: 存储属性数据的 Float32Array。
  • stride: 表示每个实例占用的字节数（即每个实例中包含多少属性）。
  • meshPerAttribute: 每个属性的实例数量。

主要方法

  • setUsage(usage)：设置缓冲区的使用方式，例如动态更新或静态存储。
  • copyAt(index, array, offset)：将数据复制到缓冲区的指定位置。
  • set(index, item)：设置特定索引的值。

3. InstancedInterleavedBuffer 使用示例

3.1 基本示例：使用 InstancedInterleavedBuffer 创建实例化几何体

以下示例展示了如何使用 InstancedInterleavedBuffer 创建多个实例化的球体，并为每个实例指定不同的颜色和位置。

// 初始化场景、相机和渲染器
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.SphereGeometry(0.5, 32, 32);
const material = new THREE.MeshBasicMaterial({ vertexColors: true });

const count = 100;

// 创建位置和颜色数组
const positions = new Float32Array(count * 3); // 每个实例 3 个分量
const colors = 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

    colors[i * 3] = Math.random(); // r
    colors[i * 3 + 1] = Math.random(); // g
    colors[i * 3 + 2] = Math.random(); // b
}

// 创建 InstancedInterleavedBuffer
const interleavedBuffer = new THREE.InstancedInterleavedBuffer(positions, 3 + 3); // 3 位置 + 3 颜色
interleavedBuffer.setUsage(THREE.DynamicDrawUsage);

// 将数据添加到几何体
geometry.setAttribute('instancePosition', new THREE.InterleavedBufferAttribute(interleavedBuffer, 3, 0, false));
geometry.setAttribute('instanceColor', new THREE.InterleavedBufferAttribute(interleavedBuffer, 3, 3, false));

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

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

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

animate();

在这个示例中，我们创建了 100 个随机位置的球体实例，并为每个实例指定了随机颜色。

3.2 示例：动态更新实例属性

我们可以通过更新 InstancedInterleavedBuffer 中的位置和颜色属性，实现动态效果。

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.SphereGeometry(0.5, 32, 32);
const material = new THREE.MeshBasicMaterial({ vertexColors: true });

const count = 100;

const positions = new Float32Array(count * 3);
const colors = 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;

    colors[i * 3] = Math.random();
    colors[i * 3 + 1] = Math.random();
    colors[i * 3 + 2] = Math.random();
}

const interleavedBuffer = new THREE.InstancedInterleavedBuffer(positions, 3 + 3);
geometry.setAttribute('instancePosition', new THREE.InterleavedBufferAttribute(interleavedBuffer, 3, 0, false));
geometry.setAttribute('instanceColor', new THREE.InterleavedBufferAttribute(interleavedBuffer, 3, 3, false));

const mesh = new THREE.InstancedMesh(geometry, 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;
      
        positions[i * 3] = x;
        positions[i * 3 + 1] = y;
      
        // 更新颜色
        colors[i * 3] = (Math.sin(time + i) + 1) / 2; // r
        colors[i * 3 + 1] = (Math.cos(time + i) + 1) / 2; // g
        colors[i * 3 + 2] = 1 - ((Math.sin(time + i * 2) + 1) / 2); // b
    }

    interleavedBuffer.copyAt(0, positions, 0); // 更新位置
    interleavedBuffer.copyAt(3, colors, 0); // 更新颜色

    renderer.render(scene, camera);
}

animate();

在这个示例中，我们通过 copyAt 方法动态更新了每个实例的位置和颜色，使得球体在场景中持续变化。

3.3 示例：结合 InstancedInterleavedBuffer 使用自定义着色器

可以通过自定义着色器进一步增强效果，以下是结合着色器使用 InstancedInterleavedBuffer 的示例。

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 vertexShader = `
    attribute vec3 instancePosition;
    attribute vec3 instanceColor;
  
    varying vec3 vColor;

    void main() {
        vColor = instanceColor; // 传递颜色
        vec3 pos = position + instancePosition; // 加上实例位置
        gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
        gl_PointSize = 10.0; // 点大小
    }
`;

const fragmentShader = `
    varying vec3 vColor;

    void main() {
        gl_FragColor = vec4(vColor, 1.0); // 使用传递的颜色
    }
`;

const material = new THREE.ShaderMaterial({
    vertexShader: vertexShader,


    fragmentShader: fragmentShader,
    vertexColors: true
});

// 创建 InstancedInterleavedBuffer
const geometry = new THREE.SphereGeometry(0.5, 32, 32);
const interleavedBuffer = new THREE.InstancedInterleavedBuffer(positions, 3 + 3);
geometry.setAttribute('instancePosition', new THREE.InterleavedBufferAttribute(interleavedBuffer, 3, 0, false));
geometry.setAttribute('instanceColor', new THREE.InterleavedBufferAttribute(interleavedBuffer, 3, 3, false));

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

camera.position.z = 5;

function animate() {
    requestAnimationFrame(animate);
  
    // 动态更新实例属性
    // (与之前的示例相同)

    renderer.render(scene, camera);
}

animate();

在这个示例中，我们通过自定义着色器实现了更灵活的渲染效果，使得每个实例都能根据不同的颜色和位置进行渲染。

4. 总结

InstancedInterleavedBuffer 在 Three.js 中是一个强大的工具，适用于需要高性能和灵活性的实例化场景。通过结合自定义着色器，开发者可以进一步优化渲染效果，实现更复杂的视觉效果。

本文涵盖了 InstancedInterleavedBuffer 的基本构造、方法、用法示例及与其他 Three.js 组件的结合，希望对你的 Three.js 项目有所帮助，提升你的开发效率和性能表现。

评论区
评论列表
作者信息

会当凌绝顶，一览众山小。

热门专栏

移动零

LeetCode 热题 100 - 两数之和

盛最多水的容器

三数之和

最长连续序列

在网页中使用 Materialize 实现中文日期选择器

MaterializeCSS轮播组件：构建动态网页内容的利器

在网页中使用 Materialize 实现日期选择器

使用 Materialize 实现图文列表布局

使用 Materialize 实现响应式布局

menu