WebGLProgram

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

* Some parts of this feature may have varying levels of support.

WebGLProgram は WebGL API の一部で、は、頂点シェーダーとフラグメントシェーダー（どちらも GLSL で書かれています）の 2 つのコンパイル済み WebGLShader の組み合わせです。

WebGLProgram を作成するには、 GL コンテキストの createProgram() 関数を呼び出します。 attachShader() を使用してシェーダープログラムを割り当てた後、使用可能なプログラムにリンクします。以下のコードに示します。

const program = gl.createProgram();

// 既存のシェーダーを取り付ける
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

gl.linkProgram(program);

if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
  const info = gl.getProgramInfoLog(program);
  throw `WebGL プログラムをコンパイルできませんでした。\n\n${info}`;
}

上の例の vertexShader と fragmentShader の作成については WebGLShader を参照してください。

例

プログラムの使用

プログラムを使って実際に作業を行うには、 GPU にプログラムを使用するように指示し、適切なデータと設定オプションをバインドし、最後に画面に何かを描画します。

// プログラムを使用
gl.useProgram(program);

// 既存の属性データをバインド
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.enableVertexAttribArray(attributeLocation);
gl.vertexAttribPointer(attributeLocation, 3, gl.FLOAT, false, 0, 0);

// 単一の三角形を描画
gl.drawArrays(gl.TRIANGLES, 0, 3);