配列の加算¶
最初に以下のような配列の加算をGPUでしてみます。
以下はプログラムの流れです。
- 頂点シェーダのプログラムを文字列で記述します。
- 入力( in )と出力( out )の変数を宣言します。
- main 関数で計算式を書きます。
- 入力と出力の変数の値を Float32Array の配列で定義します。
- GPGPUのオブジェクトを作ります。
- 計算のパラメータを作ります。
- パラメータを使い計算します。
以下はコードです。
// 頂点シェーダのプログラムを文字列で記述します。
var vertex_shader =
`// 入力変数A
in vec3 A;
// 入力変数B
in vec3 B;
// 出力変数C
out vec3 C;
// 要素ごとに呼ばれる関数。
void main(void ) {
C = A + B;
}`;
// 入力変数AをFloat32Arrayの配列で作ります。
var A = new Float32Array([ 1, 2, 3, 4, 5, 6 ]);
// 同様に入力変数Bを作ります。
var B = new Float32Array([10, 20, 30, 40, 50, 60]);
// 出力変数Cは配列のサイズ(6)を指定して作ります。
var C = new Float32Array(6);
// 計算のパラメータ
var param = {
// idはプログラム内でユニークであれば何でも構いません。
id: "AddVec",
// 頂点シェーダの文字列を指定します。
vertexShader: vertex_shader,
// 頂点シェーダ内の入力と出力の変数名に値を割り当てます。
args: {
"A": A,
"B": B,
"C": C,
}
};
// GPGPUのオブジェクトを作ります。
var gpgpu = CreateGPGPU();
// パラメータを使い計算します。
gpgpu.compute(param);
// 計算結果を表示します。
document.body.insertAdjacentHTML("beforeend", "<p>C = " + C.join(' ') + "</p>");