我听说您可以通过生成纹理并使用 RGB 值（或类似的东西来运行计算）将 WebGL 用于通用计算 (GPGPU)。这怎么可能，有人可以提供一个简单的代码示例吗？
具体来说，我知道您可以使用图像并将它们映射到带有纹理的表面，但我不知道如何在 WebGL 着色器中创建任意 RGB 值的纹理。另外，一旦你生成了一个纹理，你会以什么方式使用 RGB 值来实际进行计算？最后，一旦执行了计算，如何将结果传回 JavaScript，以便以有意义的方式使用它们？
谢谢。
【问题讨论】：
WebGL (OpenGL) 允许您创建着色器程序，从而允许您在 GPU 上运行自己的应用程序代码。通常，这用于计算要显示的位置和颜色。为此，您需要提供 GPU 数据，并使用提供给 GPU 的数据运行自己的代码。可以想象，传入任意数据和运行任意指令的能力 = 通用计算的可能性（在限制范围内）。
您也不必直接渲染到屏幕（后台缓冲区），而是渲染到您选择的纹理。但是限制之一（基本规格）是您只能为每个像素输出一个 4*8 位 RGBA 值。如何计算这个 32 位 RGBA 以及如何解释它完全取决于您。
例如，您可能想要运行许多 sqrt 计算。首先，您创建一个纹理，纹理上的每个“像素”都是您的初始值（浮点数打包到 RGBA 中）；然后在 GPU 上，你指示它对每个像素进行一次 sqrt 计算并输出结果；结果是垃圾作为屏幕颜色，但如果你编写一个将 RGBA 转换回浮点数的解包函数，那么你就有了基于 GPU 的 sqrt 计算器！
此外，纹理只不过是以某种格式打包的一组值。例如尝试canvas.getContext("2d").getImageData(0,0,10,10)。 WebGL 中的等价物是gl.readPixels()。
但是，我没有可运行的示例，WebGL api 非常冗长，需要大量重复才能完成一些简单的事情。
【讨论】：
gl.readPixels() 函数帮助了很多，我不知道它存在用于读取生成的纹理/画布的结果。如果您可以提供有关如何将任意 RGBA 值输入到纹理的每个像素中的更多针对性信息，那将不胜感激。谢谢。
gl.texImage2D 允许您将 TypeArray 指定为数据源。典型的 RGBA 纹理结构为 [R,G,B,A,R,G,B,A...]，因此您可以编写 JS 代码来构建数组并直接对其进行操作。我建议先玩 2d - context 和 .getImageData。也许像初学者的灰度过滤器之类的东西？请记住这一点：stackoverflow.com/questions/7869752/…