使用HTML5 WebGL着色器进行计算

时间：2022-02-06 04:16:11

It seems to me like one could theoretically use WebGL for computation--such as computing primes or π or something along those lines. However, from what little I've seen, the shader itself isn't written in Javascript, so I have a few questions:

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

  1. What language are the shaders written in?
  2. 着色器用什么语言编写？
  3. Would it even be worthwhile to attempt to do such a thing, taking into account how shaders work?
  4. 考虑到着色器是如何工作的，尝试做这样的事情是否值得？
  5. How does one pass variables back and forth during runtime? Or if not possible, how does one pass information back after the shader finishes executing?
  6. 如何在运行时来回传递变量？或者如果不可能，在着色器完成执行后如何将信息传回？
  7. Since it isn't Javascript, how would one handle very large integers (BigInteger in Java or a ported version in Javascript)?
  8. 由于它不是Javascript，如何处理非常大的整数（Java中的BigInteger或Javascript中的移植版本）？
  9. I would assume this automatically compiles the script so that it runs across all the cores in the graphics card, can I get a confirmation?
  10. 我认为这会自动编译脚本，使其在图形卡中的所有核心上运行，我能得到确认吗？

If relevant, in this specific case, I'm trying to factor fairly large numbers as part of a [very] extended compsci project.

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

EDIT:

编辑：

  1. WebGL shaders are written in GLSL.
  2. WebGL着色器是用GLSL编写的。

3 个解决方案

#1

14  

There's a project currently being worked on to do pretty much exactly what you're doing - WebCL. I don't believe it's live in any browsers yet, though.

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

To answer your questions:

回答你的问题：

  1. Already answered I guess!
  2. 我猜已经回答了！
  3. Probably not worth doing in WebGL. If you want to play around with GPU computation, you'll probably have better luck doing it outside the browser for now, as the toolchains are much more mature there.
  4. 可能不值得在WebGL中做。如果你想玩GPU计算，你现在可能在浏览器之外做得更好，因为工具链在那里更加成熟。
  5. If you're stuck with WebGL, one approach might be to write your results into a texture and read that back.
  6. 如果您坚持使用WebGL，一种方法可能是将结果写入纹理并将其读回。
  7. With difficulty. Much like CPUs, GPUs can only work with certain size values natively, and everything else has to be emulated.
  8. 有困难。与CPU类似，GPU本身只能使用特定大小的值，其他所有内容都必须模拟。
  9. Yep.
  10. 是的。

#2

18  

I've used compute shaders from JavaScript in Chrome using WebGL to solve the travelling salesman problem as a distributed set of smaller optimization problems solved in the fragment shader, and in a few other genetic optimization problems.

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

Problems:

问题：

  1. You can put floats in (r: 1.00, g: 234.24234, b: -22.0) but you can only get integers out (r: 255, g: 255, b: 0). This can be overcome by encoding a single float into 4 integers as an output per fragment. This is actually so heavy an operation that it almost defeats the purpose for 99% of problems. Your better to solve problems with simple integer or boolean sub-solutions.

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

  2. Debugging is a nightmare of epic proportions and the community is at the time of writing this actively.

    调试是一个史无前例的噩梦，社区正在积极地写这个。

  3. Injecting data into the shader as pixel data is VERY slow, reading it out is even slower. To give you an example, reading and writing the data to solve a TSP problem takes 200 and 400 ms respectively, the actual 'draw' or 'compute' time of that data is 14 ms. In order to be usable your data set has to be large enough in the right way.

    将数据注入着色器时，像素数据非常慢，读取它甚至更慢。举个例子，读取和写入数据以解决TSP问题分别需要200和400 ms，该数据的实际“绘制”或“计算”时间为14 ms。为了使用，您的数据集必须以正确的方式足够大。

  4. JavaScript is weakly typed (on the surface...), whereas OpenGL ES is strongly typed. In order to interoperate we have to use things like Int32Array or Float32Array in JavaScript, which feels awkward and constraining in a language normally touted for it's freedoms.

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

  5. Big number support comes down to using 5 or 6 textures of input data, combining all that pixel data into a single number structure (somehow...), then operating on that big number in a meaningful way. Very hacky, not at all recommended.

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

#3

5  

i mucked around with this kind of stuff once. In answer to your 3rd question I passed vars back n forth with 'uniforms'

我曾经用这种东西搞砸了。在回答你的第三个问题时，我通过'制服'传递了vars

*edit - looking back now also used vector 'attributes' to pass data in from outside.

*编辑 - 回顾现在也使用矢量'属性'从外部传递数据。

you'll need to run mamp or something for this to work locally... https://github.com/byteface/GTP/tree/master/play/simplified

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

I used pixels to represent letters of the alphabet and did string searching with shaders. It was amazingly fast. faster than CPU based native search programs. i.e. searching an entire book for instances of a single word is faster in browser on GPU than in a lightweight program like textedit. and i was only using a single texture.

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

#1

14  

There's a project currently being worked on to do pretty much exactly what you're doing - WebCL. I don't believe it's live in any browsers yet, though.

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

To answer your questions:

回答你的问题：

  1. Already answered I guess!
  2. 我猜已经回答了！
  3. Probably not worth doing in WebGL. If you want to play around with GPU computation, you'll probably have better luck doing it outside the browser for now, as the toolchains are much more mature there.
  4. 可能不值得在WebGL中做。如果你想玩GPU计算，你现在可能在浏览器之外做得更好，因为工具链在那里更加成熟。
  5. If you're stuck with WebGL, one approach might be to write your results into a texture and read that back.
  6. 如果您坚持使用WebGL，一种方法可能是将结果写入纹理并将其读回。
  7. With difficulty. Much like CPUs, GPUs can only work with certain size values natively, and everything else has to be emulated.
  8. 有困难。与CPU类似，GPU本身只能使用特定大小的值，其他所有内容都必须模拟。
  9. Yep.
  10. 是的。

#2

18  

I've used compute shaders from JavaScript in Chrome using WebGL to solve the travelling salesman problem as a distributed set of smaller optimization problems solved in the fragment shader, and in a few other genetic optimization problems.

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

Problems:

问题：

  1. You can put floats in (r: 1.00, g: 234.24234, b: -22.0) but you can only get integers out (r: 255, g: 255, b: 0). This can be overcome by encoding a single float into 4 integers as an output per fragment. This is actually so heavy an operation that it almost defeats the purpose for 99% of problems. Your better to solve problems with simple integer or boolean sub-solutions.

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

  2. Debugging is a nightmare of epic proportions and the community is at the time of writing this actively.

    调试是一个史无前例的噩梦，社区正在积极地写这个。

  3. Injecting data into the shader as pixel data is VERY slow, reading it out is even slower. To give you an example, reading and writing the data to solve a TSP problem takes 200 and 400 ms respectively, the actual 'draw' or 'compute' time of that data is 14 ms. In order to be usable your data set has to be large enough in the right way.

    将数据注入着色器时，像素数据非常慢，读取它甚至更慢。举个例子，读取和写入数据以解决TSP问题分别需要200和400 ms，该数据的实际“绘制”或“计算”时间为14 ms。为了使用，您的数据集必须以正确的方式足够大。

  4. JavaScript is weakly typed (on the surface...), whereas OpenGL ES is strongly typed. In order to interoperate we have to use things like Int32Array or Float32Array in JavaScript, which feels awkward and constraining in a language normally touted for it's freedoms.

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

  5. Big number support comes down to using 5 or 6 textures of input data, combining all that pixel data into a single number structure (somehow...), then operating on that big number in a meaningful way. Very hacky, not at all recommended.

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

#3

5  

i mucked around with this kind of stuff once. In answer to your 3rd question I passed vars back n forth with 'uniforms'

我曾经用这种东西搞砸了。在回答你的第三个问题时，我通过'制服'传递了vars

*edit - looking back now also used vector 'attributes' to pass data in from outside.

*编辑 - 回顾现在也使用矢量'属性'从外部传递数据。

you'll need to run mamp or something for this to work locally... https://github.com/byteface/GTP/tree/master/play/simplified

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

I used pixels to represent letters of the alphabet and did string searching with shaders. It was amazingly fast. faster than CPU based native search programs. i.e. searching an entire book for instances of a single word is faster in browser on GPU than in a lightweight program like textedit. and i was only using a single texture.

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

标签：

相关文章