optimization - 解决 WebGL readPixels 缓慢的问题

Question

我正在尝试使用 WebGL 来加速小型量子电路模拟中的计算，就像 Quantum Computing Playground does 那样。 。我遇到的问题是 readPixels 需要大约 10ms，但我想在动画时每帧调用它几次，以便从 gpu-land 获取信息并进入 javascript-land。

作为示例，这是我的确切用例。以下电路动画是通过计算每列门之间的状态来创建的，以显示在线概率图:

按照我现在计算这些东西的方式，我需要为上述电路调用 readPixels 八次(在每列门之后调用一次)。目前waaaaay太慢了，当我分析它时很容易花费50毫秒(bleh)。

在这种用例中，有哪些加速 readPixels 的技巧？

• 是否有配置选项会显着影响 readPixels 的速度？ (例如像素格式、大小、没有深度缓冲区)
• 在完成所有渲染调用之后(也许允许一些管道操作)，我是否应该尝试使 readPixel 调用全部发生？
• 我是否应该尝试将正在读取的所有纹理聚合到一个大型纹理中，并在一次大读取后将内容整理出来？
• 我应该使用不同的方法从纹理中获取信息吗？
• 我是否应该完全避免获取信息，并在 GPU 端进行所有布局和渲染(呃……)？

Answer 1

Should I try to make the readPixel calls all happen at once, after all the render calls have been made (maybe allows some pipelining)?

是的，是的，是的。 readPixels 从根本上来说是一种阻塞、管道停顿操作，无论它发生在什么地方，它总是会降低你的性能，因为它会向 GPU 发送数据请求，然后等待它响应，正常的绘制调用不必这样做。

尽可能少地读取像素(使用单个组合缓冲区进行读取)。尽可能晚地做。其他一切都不重要。

Should I be avoiding getting the information out at all, and doing all the layout and rendering gpu-side (urgh...)?

这将为您带来更好的性能。

如果你的图形都像上面显示的那样，那么你根本不需要做任何“布局”(这很好，因为实现起来会很尴尬)——除了文本之外的所有内容都是某种颜色或边界动画可以在着色器中轻松完成，并且所有布局都可以只是一个静态顶点缓冲区(每个顶点都有它应该依赖的模拟状态纹理元素的属性)。

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