使用 WebGL API 进行数学运算

Question

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

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

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

Answer 1

仅仅将 2 个数字相乘不会是你想要在 WebGL 中做的事情。仅乘以 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是将ivec22 个整数索引表示为 2d 数组，我们可以计算从 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 中，尽管在计算完所有答案之前，您无法访问任何先前的答案。当然，一旦您计算了所有这些答案，您就可以将这些答案传递回另一个计算中。基本上是在一个巨大的“批量计算”中，答案不能相互引用。

正如基里尔指出的那样，也有一些限制。WebGL 1.0 具有浮点纹理，因此很容易获取数据。获取数据需要做更多的工作，将答案编码为 8 位 4 通道纹理，读取结果，然后将它们解码回答案，但有很多人这样做。WebGL 2 将不再需要进行编码/解码步骤。