使用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毫秒，該數據的實際“繪制”或“計算”時間為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

我曾經用這種東西搞砸了。 在回答你的第三個問題時，我通過'制服'傳遞了vars

*編輯 - 回顧現在也使用矢量'屬性'從外部傳遞數據。

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

我使用像素來表示字母表的字母，並使用着色器進行字符串搜索。 它的速度非常快。 比基於CPU的本機搜索程序更快。 即在整個書中搜索單個單詞的實例在GPU上的瀏覽器中比在像textedit這樣的輕量級程序中更快。 我只使用一個紋理。