解决WebGL readPixels的问题很慢

Question

我正在尝试使用WebGL来加速小量子电路仿真中的计算,就像量子计算游乐场所做的那样.我readPixels遇到的问题是需要大约10毫秒,但我希望每帧调用几次,同时动画以便从gpu-land和javascript-land获取信息.

举个例子,这是我的确切用例.下面的电路动画是通过计算每列门之间的状态来创建的,以显示内联线上图形的概率:

我现在计算这些东西的方式,我需要为上述电路调用readPixels八次(在每列门之后一次).这是waaaaay太慢的那一刻,很容易采取50ms的时候我就配置文件(的Bleh).

在这种用例中加快readPixels的一些技巧是什么？

• 是否存在显着影响readPixels速度的配置选项？(例如像素格式,大小,没有深度缓冲区)
• 我是否应该尝试readPixel在所有渲染调用完成之后立即进行调用(可能允许一些流水线操作)？
• 我是否应该尝试将我正在阅读的所有纹理聚合成单个大型纹理并在单次读取后对其进行排序？
• 我应该使用不同的方法从纹理中取回信息吗？
• 我是否应该避免获取信息,并进行所有布局和渲染gpu-side(urgh ...)？

Answer 1

在完成所有渲染调用之后（也许允许一些流水线处理），我是否应该尝试使所有的readPixel调用同时发生？

对对对。readPixels从根本上讲是一项阻塞性的，管道过时的操作，无论发生在哪里，它总是会破坏您的性能，因为它会向GPU发送数据请求，然后等待其响应，而普通的绘制调用没有去做。

尽可能少地执行readPixels（使用单个组合缓冲区进行读取）。尽你所能。其他所有事情都不重要。

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

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

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

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