Three.js 缓冲区管理

Question

我正在努力提高我的 webgl 技能，我认为最好的学习方法是查看 three.js Three.js。我了解如何创建和绑定缓冲区、着色器 etc.But 我正在寻找的是 three.js 如何管理绑定缓冲区的过程，例如

gl.createBuffer
gl.bindBuffer
gl.bufferData

有人可以解释一下 Three.js 是如何工作的吗？

Answer 1

此答案适用于Three.js r84。

Three.js 使用 3 种几何类型：

Geometry 以用户友好的方式存储几何参数（顶点、法线、颜色...）。 BufferGeometry 将几何存储在 BufferAttribute, which are simply wrappers for buffers (or typed arrays) 中，其中包含您通常使用 gl.bufferData().
发送的数据（DirectGeometry 仅用于从 Geometry 转换为 BufferGeometry。）

基本上，常见的 Three.js 渲染器 WebGLRenderer 处理 BufferGeometry 而用户处理 Geometry。

但是，只要您不渲染场景，就不会进行任何几何转换，也不会向 GPU 发送任何内容。（未创建缓冲区。）

为了防止引擎使用特定于 WebGL 的内容（例如缓冲区）污染用户 space，Three.js 实现了渲染器中包含的某种包装器。其中两个包装器是：

WebGLGeometries 存储所有 BufferGeometrys ;
WebGLAttributes 存储所有 WebGL 缓冲区。

用户对象和包装器内部对象之间的映射是通过 uuid 属性.

完成的

当请求渲染时，渲染器浏览场景中的所有对象。如果对象 uuid 不存在于其中一个包装器中，则会完成一些处理并存储转换后的对象。

这就是事情变得有趣的地方，因为这是在 WebGLGeometries 包装器内将对象的 Geometry 转换为 BufferGeometry 并将 BufferGeometry 转换为一个或更多 WebGLBuffer 在 WebGLAttributes 包装器中使用您列出的函数：

gl.createBuffer();
gl.bindBuffer();
gl.bufferData();

检查此 file 以查找实际调用。

此外，当像 Geometry 这样的对象更新时，它的 version 计数器会增加，因此它不再与包装器中写入的 version 匹配。然后渲染器知道它应该更新包装的对象。

最后，当一个对象被添加到包装器时，一个侦听器会附加到它，以便渲染器在对象被移除时得到通知，从而可以处理包装的对象。

Three.js 缓冲区管理

Three.js Buffer Management

javascript

webgl

three.js