将单个纹理的子集渲染到 WebGL 画布上的最快方法是什么？

Question

如果您有一个宽度/高度的单一幂次方纹理（例如 2048），并且您希望将其缩放和平移的子集（例如缩小的 64x92 大小的图块）尽可能快地移到另一个纹理上（作为缓冲区）所以它可以在不脏时被缓存），然后将该纹理绘制到 webgl 画布上，并且您没有更多要求 - 最快的策略是什么？

它是首先加载源纹理，将空纹理绑定到帧缓冲区，将源渲染drawElementsInstancedANGLE到帧缓冲区，然后解除绑定帧缓冲区并渲染到画布？

我对 WebGL 不太了解，我正在尝试编写一个非状态版本的 https://github.com/kutuluk/js13k-2d（它只使用 draw() 调用而不是维持状态的精灵，因为我会有数百万个精灵）。在我深入杂草之前，我希望得到一些反馈。

Answer 1

没有通用的最快方法。最快的方式因 GPU 而异，也因具体情况而异。

• 你要画很多一样大小的东西吗？
• 纹理图集的部分大小是否相同？
• 您会轮换或缩放每个实例吗？
• 他们的运动能否仅基于时间？
• 他们的绘图顺序会改变吗？
• 纹理是否具有透明度？
• 透明度是 100% 还是不是（0 或 1），还是介于两者之间的各种值？

我敢肯定还有很多其他考虑因素。对于每一个考虑，我可能会选择不同的方法。

一般来说，您的想法是否使用drawElementsAngleInstanced看起来不错，但不知道您正在尝试做什么以及很难知道在哪个设备上。

这里有一些绘制大量东西的测试。