javascript - WebGL 中高效的 VBO 分配

Question

我正在编写一个通过算法生成几何图形的 WebGL 应用程序。几何将由 4-150 个对象组成，每个对象由 16 到 2048 个点组成，通过 drawElements 绘制为 TRIANGLE_STRIP。大多数帧的几何图形都是静态的，但需要根据用户输入进行动画处理。在这些框架中，当更新几何时，可以添加或删除点/三 Angular 形。在程序的生命周期中，还需要添加/删除对象。

在此上下文中分配/更新 VBO 的最有效方法是什么？我很确定我应该使用 DYNAMIC_DRAW 和 bufferSubData 来更新每个对象，但是我是否想过度分配一些巨大的 VBO(假设每个对象的点数是最坏的情况)并将每个对象定义为偏移量(对象编号 * 每个对象的最大大小)，然后在最好的情况下分配大量未使用的 VBO 内存？或者我应该尝试另一种方法吗？或者就内存占用而言，这是否足够小以至于我想多了？

Answer 1

What's the most efficient way to allocate/update VBOs in this context? I'm pretty sure I should be using DYNAMIC_DRAW and bufferSubData to update each object.

这确实是要走的路。实际上你想为你的对象使用双倍甚至三倍缓冲，即有一个 VBO 用于绘图，而你用新数据更新另一个的内容。在 glMapBuffer 之后，可以从进程中的所有线程访问内存映射，因此您可以让工作线程更新“后”顶点缓冲区，而渲染线程则忙于绘制当前帧。

Or is this small enough in terms of memory footprint that I'm over-thinking?

您是否评估了您正在处理的最坏情况下的内存占用？根据您的数字，我敢打赌它会低于 16MiB(150 个对象 * 2048 个点 * 每个点 3 个 double float * 每个 double 8 个字节 = 7.4 MiB，如果使用单精度 float 则只有 3.7MiB)。与现代显卡提供的数百 MiB RAM 相比(我的 2006 GeForce 8800GTX 有 768MiB RAM，我的 Radeon HD6570 有 1024MiB(=1GiB)。