javascript - Three.js 缓冲区管理

Question

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

gl.createBuffer
gl.bindBuffer
gl.bufferData

谁能解释一下 Three.js 的幕后工作原理？

Answer 1

此答案适用于 Three.js r84。

Three.js 使用 3 种类型的几何图形:

• Geometry
• BufferGeometry
• ( DirectGeometry )

Geometry 以用户友好的方式存储几何参数(顶点、法线、颜色...)。BufferGeometry 将几何存储在 BufferAttribute 中，它们只是缓冲区(或 typed arrays)的包装器，其中包含您通常使用 gl.bufferData() 发送的数据。
(DirectGeometry 仅用于将Geometry 转换为BufferGeometry。)

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

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

为了防止引擎使用特定于 WebGL 的东西(例如缓冲区)污染用户空间，Three.js 实现了某种包含在渲染器中的包装器。其中两个包装器是:

• WebGLGeometries它存储所有 BufferGeometry；
• WebGLAttributes它存储所有 WebGL 缓冲区。

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

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

这就是事情变得有趣的地方，因为这是一个对象的 Geometry 被转换为 WebGLGeometry 包装器和 内部的 BufferGeometry 的地方BufferGeometry 使用您列出的函数在 WebGLAttributes 包装器内转换为一个或多个 WebGLBuffer :

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

检查这个file找到实际调用。

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

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