javascript - 使用 WebGL API 进行数学运算

Question

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

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

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

Answer 1

只是将 2 个数字相乘并不是您想要在 WebGL 中做的事情。将 2 个数字相乘需要 50-70 次设置调用。

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

您需要搜索的词是GPGPU .

弄清楚如何调整您的解决方案以适应 how GPUs work 是一门艺术。 .

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

与普通计算的最大区别是

1. 至少在 WebGL 1 中，从纹理读取数据的每个方向都由 0.0 到 1.0 的值寻址。要从二维数组(纹理)中获取特定值，您必须计算其归一化坐标值(纹理坐标)。

   假设 xy 是一个 ivec2 表示二维数组中的 2 个整数索引，我们可以计算从二维数组(纹理)中获取值所需的归一化坐标

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

   在 WebGL 2 中，我们不必这样做。我们可以做到

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

2. 您没有随机的写作权限

   一般来说，WebGL 按顺序写入目标二维数组(纹理)，这可能会妨碍您的操作。有时有creative , workarounds .

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

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

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

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