使用HTML5 WebGL着色器进行计算

Question

在我看来，理论上可以使用WebGL进行计算 - 例如计算质数或π或沿着这些线的某些东西。但是，从我看到的很少，着色器本身不是用Javascript编写的，所以我有几个问题：

1. 用什么语言 写入着色器？
2. 考虑到着色器是如何工作的，尝试做这样的事情是否值得？
3. 如何在运行时来回传递变量？或者，如果不可能，在着色器完成执行后如何将信息传回？
4. 由于它不是Javascript，如何处理非常大的整数（Java中的BigInteger或Javascript中的移植版本）？
5. 我认为这会自动编译脚本，使其在图形卡中的所有核心上运行，我可以得到确认吗？

如果相关，在这个特定的情况下，我试图将相当大的数字作为[非常]扩展的compsci项目的一部分。

修改

1. WebGL着色器是用GLSL编写的。

Answer 1

我在Chrome中使用JavaScript中的计算着色器，使用WebGL解决旅行商问题，解决了片段着色器中解决的分布式小优化问题集以及其他一些遗传优化问题。

问题：

1. 您可以将浮点数放入（r：1.00，g：234.24234，b：-22.0），但只能输出整数（r：255，g：255，b：0）。这可以通过将单个浮点数编码为4个整数作为每个片段的输出来克服。这实际上是一项非常繁重的操作，几乎无法解决99％的问题。您可以使用简单的整数或布尔子解决方案解决问题。

2. 调试是一场史无前例的噩梦，社区正在积极地写这篇文章。

3. 将数据注入着色器时像素数据非常慢，读出来的速度更慢。举个例子，读取和写入数据以解决TSP问题分别需要200和400毫秒，实际的＆＃39;绘制＆＃39;或者＆＃39;计算＆＃39;该数据的时间是14毫秒。为了使用，您的数据集必须以正确的方式足够大。

4. JavaScript是弱类型的（在表面上......），而OpenGL ES是强类型的。为了实现互操作，我们必须在JavaScript中使用像Int32Array或Float32Array这样的东西，这种东西感觉很尴尬并且限制在通常用它自由吹捧的语言中。

5. 大数字支持归结为使用5或6个输入数据纹理，将所有像素数据组合成单个数字结构（不知何故......），然后以有意义的方式对该大数字进行操作。非常hacky，完全没有推荐。

Answer 2

目前有一个项目正在努力完成你正在做的事情 - WebCL。不过，我不相信它现在已经存在于任何浏览器中。

回答你的问题：

1. 我猜已经回答了！
2. 可能不值得在WebGL中做。如果你想玩GPU计算，你现在可能会有更好的运气在浏览器之外，因为工具链在那里更加成熟。
3. 如果您坚持使用WebGL，一种方法可能是将结果写入纹理并将其读回。
4. 有困难。与CPU类似，GPU本身只能使用特定大小的值，其他一切都必须模拟。
5. 是的。

Answer 3

我曾经用这种东西四处乱逛。在回答你的第三个问题时，我通过制服＆＃39;制服传递了vars。

*编辑 - 回顾现在还使用了矢量＆＃39;属性＆＃39;从外部传递数据。

你需要运行mamp或其他东西才能在本地工作...... https://github.com/byteface/GTP/tree/master/play/simplified

我使用像素来表示字母表的字母，并使用着色器进行字符串搜索。它的速度非常快。比基于CPU的本机搜索程序更快。即在整个书中搜索单个单词的实例在GPU上的浏览器中比在像textedit这样的轻量级程序中更快。我只使用一种纹理。