使用 WebGL API 做数学

Question

标题说明了一切，但我的问题是，是否可以在浏览器（例如 Google Chrome）中使用 WebGL API 来解决一些数学问题？

假设我想使用 WebGL API 将两个数字相乘，这通常可行吗？如果可以，我该怎么做？

请原谅我没有分享任何代码，因为我没有找到任何答案。

Answer 1

在 WebGL 中，您不会想只将 2 个数字相乘。仅将 2 个数字相乘就需要 50-70 次设置调用。

如果您想将 200 万个数字乘以 200 万个其他数字，那么这更适合 WebGL。有很多使用 GPU 进行数学计算的示例。首先，GPU 所做的就是数学。人们要求它做的最常见的数学运算恰好是渲染 3D 或 2D 图形。

您需要搜索的术语是GPGPU。

弄清楚如何调整解决方案以适应 GPU 的工作方式是有一定技巧的。

WebGL从纹理读取数据并将数据写入纹理的基本点。什么是纹理？它们实际上只是二维值数组。因此，您将数据放入这些 2D 数组（纹理）中，然后使用 WebGL 从这些 2D 数组（纹理）中读取数据并将数据写入其他 2D 数组（纹理）。

与普通计算最大的区别是

1. 至少在 WebGL 1 中，从纹理读取数据是通过每个方向上的值 0.0 到 1.0 来寻址的。要从二维数组（纹理）中获取特定值，您必须计算其标准化坐标值（纹理坐标）。

   假设

   xy

   是一个

   ivec2

   ，表示 2d 数组中的 2 个整数索引，我们可以使用
   计算从 2d 数组（纹理）中获取值所需的归一化坐标

   vec2 uv = (vec2(xy) + 0.5) / textureDimensions;
   vec4 value = texture2D(2dArrayOfValuesTexture, uv);
   

   在 WebGL 2 中我们不必这样做。我们只能做

   vec4 value = textureFetch(2dArrayOfValuesTexture, xy, 0);
   

2. 您没有随机写入权限

   一般来说，WebGL 会按顺序写入目标二维数组（纹理），这可能会妨碍您的操作。有时会有创意、解决方法。

3. 您无法立即访问以前的结果。

   一般来说，如果您要计算 10000 个答案，那么您可以随时参考以前的答案。换句话说，当您计算答案 3766 时，您可以引用答案 0 到 3765。

   在 WebGL 中，在计算完所有答案之前，您无法访问之前的任何答案。当然，一旦计算完所有这些，您就可以将这些答案传递回另一个计算中。基本上，在一次巨大的“批量计算”过程中，答案不能互相引用。

您可能会发现这些示例很有用。

• WebGL1
• WebGL2

Answer 2

嗯，我认为对你的问题最准确的答案是是和否。一方面，整个 GPGPU（图形处理器上的计算）源于使用着色器和一些技巧来解决一些模拟和数学问题。另一方面，整个“黑客”部分使得这有些困难，并且只对一小部分问题真正有价值。特别是对于那些受益于大规模并行计算的问题。

据我所知，最常见的模式是使用片段着色器来计算纹理的一些值。然而，也有局限性。首先，如果没有扩展，您可以从 WebGL 获得的最佳效果是 RGBA8 纹理，这极大地限制了计算精度。但是有一个扩展提供带有浮动颜色通道的纹理（如果我没记错的话，还有渲染缓冲区）。此外，将结果复制回 JS 的成本可能会很高。

即将推出的 WebGL2 具有更强大的设施，可以以变换反馈、几何着色器以及更多纹理和缓冲区格式的形式在 GPU 上进行计算。