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
• （DirectGeometry）

Geometry存储几何参数（顶点，法线，色彩，.. ）以一种用户友好的方式。 BufferGeometry将BufferAttribute中的几何存储起来，它们只是缓冲区的包装（或typed arrays），其中包含通常使用gl.bufferData()发送的数据。
（DirectGeometry仅用于转换从Geometry到BufferGeometry）

基本上，公共three.js所渲染器，WebGLRenderer，与BufferGeometry而用Geometry用户的交易的交易。

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

为了防止引擎使用WebGL特定的东西（如缓冲区）污染用户空间，Three.js实现了一些包含在渲染器中的包装。其中两种包装是：

• WebGLGeometries其中存储所有的BufferGeometry s;
• WebGLAttributes它存储所有的WebGL缓冲区。

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

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

这就是事情变得有趣，因为这是一个对象的Geometry转换为BufferGeometry的WebGLGeometries包装内部与BufferGeometry使用您列出的功能转化为一个或多个WebGLBuffer的WebGLAttributes包装内：

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

查询此file找到实际的电话。

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

最后，当一个对象被添加到一个包装，一个监听器，使得当一个对象被删除的呈示得到通知，从而可以配置被包装的对象连接到它。