optimization - 解决WebGL readPixels速度很慢

我正在尝试使用WebGL来加快小型量子电路(如Quantum Computing Playground does)的仿真速度。我遇到的问题是readPixels大约需要10毫秒，但我想在动画时每帧调用几次，以使信息从gpu-land进入javascript-land。

例如，这是我的确切用例。下面的电路动画是通过计算与门的每一列之间的状态有关的东西而创建的，以显示线内在线出现概率图:

我现在计算这些东西的方式，我需要为上述电路调用readPixels八次(每排门之后一次)。此刻waaaaay太慢了，我剖析它时很容易花50ms(安静)。

在这种用例中，有哪些技巧可以提高readPixels的速度？

是否有会显着影响readPixels速度的配置选项？ (例如，像素格式，大小，没有深度缓冲区)

是否应该尝试在完成所有render调用后立即进行readPixel调用(可能允许一些流水线处理)？

我是否应该尝试将正在读取的所有纹理汇总到单个megatexture中，并在一次较大读取后将其分类？

是否应该使用其他方法从纹理中获取信息？

我是否应该完全避免获取信息，而是进行所有布局并渲染gpu端(urgh ...)？

最佳答案

对对对。 readPixels从根本上说是一种阻塞，流水线操作，它是，它总是会在任何地方破坏性能，因为它会向GPU发送数据请求，然后等待它响应，而普通的绘图调用不会这样做。不必做。

尽可能少地执行readPixels(使用单个组合缓冲区进行读取)。尽你所能。其他一切都无关紧要。



这将使您获得更好的性能。

如果您的图形与上面显示的一样，您根本不需要做任何``布局''(这很好，因为实现起来很尴尬)-文本之外的所有东西都是某种颜色或边界可以在着色器中轻松完成的动画，并且所有布局都可以只是一个静态顶点缓冲区(每个顶点的属性都指向应该依赖于哪个模拟状态纹理)。

仅因为您需要将所有数字加载到纹理中以用作Spritesheet并对其进行查找，文本才会变得更加乏味，但这是一种标准技术。 (哦，然后进行除法/取模以得到数字。)