javascript - 如何有效地从 webgl 属性缓冲区的中间删除三 Angular 形

Question

我想知道如何有效地从 webgl 属性缓冲区中间删除一个三 Angular 形。
想到的第一个解决方案是重新缓冲从中间到结尾的所有数据，将所有数据移回一个。对于只想删除单个三 Angular 形来说，这似乎效率很低。
我想到的第二个解决方案是添加一个附加属性来跟踪是否删除了三 Angular 形，如果是，则将其移动到顶点着色器中的截锥体之外以被剔除。这会增加内存开销，我想您可能希望跟踪已删除的三 Angular 形以重用这些内存块。
我想第三种方法是获取缓冲区中的最后一个三 Angular 形并将其移动到要删除的三 Angular 形的位置，然后减少要绘制的三 Angular 形的数量。
有没有解决这个问题的通用方法？

Answer 1

最简单且可能最常见的解决方案是操纵缓冲区。将缓冲区的最后一个三 Angular 形移动到要删除的三 Angular 形的位置并减少渲染 1 个三 Angular 形可能是最有效的解决方案。或者，只需将三 Angular 形的第 2 和第 3 点的顶点坐标更改为等于第 1 点。
一个 Triangle primitives其中 2 个(或所有 3 个)点相等时根本不会渲染。您不必更新整个缓冲区，因为您可以使用 bufferSubData 仅更改这两个顶点属性。如果一个顶点由 3 个浮点数组成，这意味着只更改 24 个字节。
如果您使用索引缓冲区 ( ELEMENT_ARRAY_BUFFER )，则解决方案更加简单。您只需使三 Angular 形的 3 个索引相等或将索引替换为最后一个三 Angular 形的索引。
无论您决定什么，您始终必须确保您只需执行一次。更改一次缓冲区并每帧渲染更新的缓冲区。这对性能的影响最小。