解决WebGL readPixels的问题很慢

Question

我正在尝试使用WebGL来加速小量子电路仿真中的计算，就像Quantum Computing Playground does一样。我遇到的问题是readPixels需要大约10毫秒，但我希望每帧调用几次，同时为了从gpu-land和javascript-land获取信息而动画。

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

我现在计算这些东西的方式，我需要为上述电路调用readPixels八次（在每列门之后一次）。这个 waaaaay 目前太慢了，当我描述它（bleh）时很容易花费50ms。

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

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

Answer 1

  

我是否应该在完成所有渲染调用之后尝试使readPixel调用全部发生（可能允许一些流水线操作）？

是的，是的，是的。 readPixels基本上是一个阻塞，管道停止操作，它总是会在任何地方发生性能，因为它向GPU 发送数据请求，然后等待它回复，正常的绘制调用不必这样做。

尽可能少地执行readPixels（使用单个组合缓冲区进行读取）。尽可能晚做。其他一切都不重要。

  

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

这会让你获得更好的表现。

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

文本将更加繁琐仅仅因为您需要将所有数字加载到纹理中以用作spritesheet并对其进行查找，但这是一种标准技术。 （哦，除以/ modulo得到数字。）

Answer 2

我对你的用例知之甚少但只是猜测，为什么你需要阅读像素？

首先，您不需要在WebGL中绘制文本或图表的静态部分。将另一个canvas或svg或img放在WebGL画布上，设置css使它们重叠。让浏览器合成它们。那你就不必这样做了。

其次，让我们假设您的纹理具有计算结果。你能不能制作一些与图中需要颜色的地方相匹配的几何图形，并使用纹理坐标从结果纹理中的正确位置查找结果？那么你根本不需要调用readPixels。该着色器可以使用渐变纹理查找或任何其他技术将结果转换为其他颜色以遮蔽图表的动画部分。

如果你想根据结果绘制数字，可以使用a technique like this，这样你就可以在引用结果着色器时设置着色器来查看结果值，然后根据另一个纹理对字形进行索引。这一点。

我有意义吗？