Как использовать WebGL для общих вычислений (GPGPU)?

Question

Я слышал, что вы можете использовать WebGL для общих вычислений (GPGPU), создавая текстуры и используя значения RGB (или что-то в этом роде для выполнения вычислений). Как это возможно, и может ли кто-нибудь, пожалуйста, представить простой пример с кодом?

В частности, я знаю, что вы можете использовать изображения и отображать их на поверхности с текстурами, но я не знаю, как создать произвольную текстуру значений RGB в шейдерах WebGL. Кроме того, как только вы сгенерировали текстуру, каким образом вы могли бы использовать значения RGB для фактических вычислений? Наконец, как только вычисления были выполнены, как вы передаете результаты обратно на JavaScript, чтобы их можно было использовать значимым образом?

спасибо.

Answer 1

WebGL (OpenGL) позволяет создавать шейдерные программы, которые позволяют запускать собственный код приложения на графическом процессоре. Обычно это используется для расчета позиции и цвета для отображения. Для этого вы загружаете данные GPU и запускаете свой собственный код, используя данные, которые вы загружали на GPU. Как вы можете себе представить, возможность передавать произвольные данные и выполнять произвольные команды = возможность общего вычисления (в пределах).

Вы также не обязаны визуализировать экран непосредственно (задний буфер), но по текстуре по вашему выбору. Но одно из ограничений (базовая спецификация) заключается в том, что вы можете выводить только 4 * 8-битное значение RGBA для каждого пикселя. Как вы вычисляете этот 32-битный RGBA и как вы его интерпретируете, это зависит от вас.

В качестве примера, возможно, вы хотите запустить множество вычислений sqrt. Сначала вы создаете текстуру с каждым «пикселем» на текстуре, являющейся вашим начальным значением (поплавок, упакованный в RGBA); то на GPU вы поручаете ему делать вычисления sqrt для каждого пикселя и выводить результаты; результатом является мусор в качестве цвета экрана, но если вы напишете функцию распаковки, которая конвертирует RGBA обратно в float, то у вас есть калькулятор sqrt на вашем GPU!

Кроме того, текстура представляет собой не что иное, как массив значений, упакованных в определенном формате. Например, попробуйте canvas.getContext("2d").getImageData(0,0,10,10). Эквивалент в WebGL равен gl.readPixels().

Отсутствие примера из меня, однако, WebGL api очень многословный, и для его выполнения требуется много повторений.