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

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

少陵野老 2024-10-18 19:24:33

131 GLBufferAttribute 专栏

在 Three.js 中，GLBufferAttribute 是一种特殊的缓冲属性，主要用于与 WebGL 底层交互。与常见的 BufferAttribute 类似，GLBufferAttribute 用于存储几何体的顶点数据，但它更多地聚焦于与底层 WebGL 缓冲区的直接绑定与交互。通过 GLBufferAttribute，我们可以以更高效的方式处理大规模的几何体数据。

在本文中，我们将深入探讨 GLBufferAttribute 的作用、使用场景、属性与方法，并结合多个详细示例演示如何将其应用于 Three.js 项目中，确保你能够掌握如何高效处理几何体数据。

1. 什么是 `GLBufferAttribute`

GLBufferAttribute 是 BufferAttribute 的一个派生类，它与 WebGL 缓冲区对象 (WebGLBuffer) 直接交互。它允许你将顶点数据直接上传到 GPU，从而提高渲染效率。相比于 BufferAttribute，GLBufferAttribute 更加底层，但也更高效，适用于需要频繁操作大量顶点数据的场景。

GLBufferAttribute 适合用于复杂的大型几何体渲染，例如动态生成的几何体、大规模点云、以及对性能有极高要求的场景。

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

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

2.1 构造函数

new THREE.GLBufferAttribute(buffer, itemSize, normalized)

buffer：WebGLBuffer 对象。它是一个 GPU 缓冲区，用于存储几何体的顶点数据。
itemSize：表示每个顶点属性的数据量。例如，3 代表顶点位置（x, y, z 三个分量）。
normalized：是否将数据归一化（通常为 false）。当数据为整型（如 Int16Array 等）时，设置为 true 将把数据转换到 0-1 范围。

2.2 `count`

表示缓冲区中包含的顶点属性数量（即数组的长度除以 itemSize）。

2.3 `setUsage(usage)`

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

attribute.setUsage(THREE.DynamicDrawUsage);

2.4 `onUpload(callback)`

当顶点数据上传到 GPU 时触发。你可以通过回调函数来执行额外的操作，例如释放 CPU 缓存等。

attribute.onUpload(function() {
  console.log('Data uploaded to GPU');
});

2.5 `needsUpdate`

设置为 true 时，Three.js 将会自动更新顶点数据到 GPU。

attribute.needsUpdate = true;

3. `GLBufferAttribute` 使用示例

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

3.1 示例：创建自定义几何体

// 创建 WebGL 缓冲区
const gl = renderer.getContext();
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

// 顶点数据 (一个正方形的四个顶点)
const vertices = new Float32Array([
    -1.0, -1.0, 0.0,
     1.0, -1.0, 0.0,
     1.0,  1.0, 0.0,
    -1.0,  1.0, 0.0
]);

gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

// 创建 GLBufferAttribute
const positionAttribute = new THREE.GLBufferAttribute(buffer, 3);

// 创建自定义几何体
const geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', positionAttribute);

// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });

// 创建网格对象并添加到场景
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

在这个示例中，我们手动创建了一个 WebGL 缓冲区，并通过 GLBufferAttribute 将该缓冲区的数据绑定到几何体上。该例子展示了如何直接使用 WebGL 缓冲区来定义自定义几何体，进而提高渲染效率。

3.2 示例：动态更新顶点数据

const gl = renderer.getContext();
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

const vertices = new Float32Array(12); // 4 个顶点，每个顶点 3 个分量
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.DYNAMIC_DRAW);

const positionAttribute = new THREE.GLBufferAttribute(buffer, 3);
positionAttribute.setUsage(THREE.DynamicDrawUsage);

// 创建自定义几何体
const geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', positionAttribute);

// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// 动态更新顶点数据
function updateVertices() {
    vertices[0] = Math.random() * 2 - 1;
    vertices[1] = Math.random() * 2 - 1;
    vertices[2] = Math.random() * 2 - 1;
    gl.bufferSubData(gl.ARRAY_BUFFER, 0, vertices);
    positionAttribute.needsUpdate = true;
}

// 每一帧动态更新顶点
function animate() {
    requestAnimationFrame(animate);
    updateVertices();
    renderer.render(scene, camera);
}

animate();

这个示例展示了如何使用 GLBufferAttribute 动态更新顶点数据。通过 THREE.DynamicDrawUsage 设置顶点缓冲区为动态模式，并在每一帧手动更新顶点数据，实现实时更新几何体的效果。

3.3 示例：结合 `BufferGeometry` 的高级应用

在复杂场景中，GLBufferAttribute 可以与 BufferGeometry 配合使用，管理不同的顶点属性（如法线、颜色等），从而实现更复杂的效果。

const gl = renderer.getContext();

// 创建顶点和颜色数据
const vertices = new Float32Array([
    -1.0, -1.0, 0.0,
     1.0, -1.0, 0.0,
     1.0,  1.0, 0.0,
    -1.0,  1.0, 0.0
]);

const colors = new Float32Array([
    1.0, 0.0, 0.0,  // 红色
    0.0, 1.0, 0.0,  // 绿色
    0.0, 0.0, 1.0,  // 蓝色
    1.0, 1.0, 0.0   // 黄色
]);

const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

const colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);

// 创建 GLBufferAttribute
const positionAttribute = new THREE.GLBufferAttribute(vertexBuffer, 3);
const colorAttribute = new THREE.GLBufferAttribute(colorBuffer, 3);

// 创建几何体并设置顶点和颜色属性
const geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', positionAttribute);
geometry.setAttribute('color', colorAttribute);

// 创建材质并启用顶点颜色
const material = new THREE.MeshBasicMaterial({ vertexColors: true, wireframe: true });

// 创建网格对象
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// 渲染
renderer.render(scene, camera);