在 WebGL 中排序实例
Ordering instances in WebGL
我画了很多矩形，因此我使用了 WebGL2RenderingContext.drawArraysInstanced()。我还使用大量缓冲区来控制每个实例的着色器（包含位置、颜色、状态等数据）。我现在想影响绘制我的实例的顺序（例如，将用户单击的实例放在前面），我正在寻找类似 INSTANCE_ARRAY_BUFFER 的东西，类似于 [=11] 的东西=]，但对于实例而不是顶点。可以让我告诉“按以下顺序绘制实例：3,1,2,0，......”的东西。有没有什么 API 可以让我在不修改所有数据缓冲区的元素顺序的情况下控制绘制实例的顺序？
根据我目前的研究，我怀疑答案是否定的，但也许我错过了一些隐藏的 WebGL API。此外，作为一个额外的问题——在最近的 OpenGL 版本或 WebGPU 中是否引入了类似的东西？
你唯一的实际问题是
Is there any API which would allow me to control the order of the drawn instances without modifying the order of elements of all the data buffers?
是的，将数据放入纹理中，在缓冲区中传入一个 id 数组
一些示例，不仅仅是四边形 and here
我不知道这会快多少或慢多少。我的直觉是它会更慢，但我还没有测试过。
令我感到奇怪的是，您唯一优化的是绘制顺序，而您不需要定位所有四边形并更改它们的 UV。如果您确实需要定位所有四边形并更改它们的 UV，那么只需首先以正确的顺序写入它们即可。
根据评论的其他评论
实例是绘制大量四边形的最佳方式吗？
我认为这里的结论不是很清楚。 10 年前，我的经验是实例化比为所有四边形创建数据慢 30%。我的测试表明这不再是真的，至少在我拥有的任何 GPU 上都不是，在 WebGL 中也不是。
每个四边形写入 4 或 6 个顶点到缓冲区是一个好的解决方案吗？
通常只将所有数据写入缓冲区以用于 UI 的每一帧。几乎每个 ImGUI library
都会看到
我画了很多矩形，因此我使用了 WebGL2RenderingContext.drawArraysInstanced()。我还使用大量缓冲区来控制每个实例的着色器（包含位置、颜色、状态等数据）。我现在想影响绘制我的实例的顺序（例如，将用户单击的实例放在前面），我正在寻找类似 INSTANCE_ARRAY_BUFFER 的东西，类似于 [=11] 的东西=]，但对于实例而不是顶点。可以让我告诉“按以下顺序绘制实例：3,1,2,0，......”的东西。有没有什么 API 可以让我在不修改所有数据缓冲区的元素顺序的情况下控制绘制实例的顺序？
根据我目前的研究，我怀疑答案是否定的，但也许我错过了一些隐藏的 WebGL API。此外，作为一个额外的问题——在最近的 OpenGL 版本或 WebGPU 中是否引入了类似的东西？
你唯一的实际问题是
Is there any API which would allow me to control the order of the drawn instances without modifying the order of elements of all the data buffers?
是的，将数据放入纹理中，在缓冲区中传入一个 id 数组
一些示例，不仅仅是四边形
我不知道这会快多少或慢多少。我的直觉是它会更慢，但我还没有测试过。
令我感到奇怪的是，您唯一优化的是绘制顺序，而您不需要定位所有四边形并更改它们的 UV。如果您确实需要定位所有四边形并更改它们的 UV，那么只需首先以正确的顺序写入它们即可。
根据评论的其他评论
实例是绘制大量四边形的最佳方式吗？
我认为这里的结论不是很清楚。 10 年前，我的经验是实例化比为所有四边形创建数据慢 30%。我的测试表明这不再是真的，至少在我拥有的任何 GPU 上都不是，在 WebGL 中也不是。
每个四边形写入 4 或 6 个顶点到缓冲区是一个好的解决方案吗？
通常只将所有数据写入缓冲区以用于 UI 的每一帧。几乎每个 ImGUI library
都会看到