WebGLProgram

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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

WebGLObject WebGLProgram

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

js
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}`;
}

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

プログラムの使用

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

js
// プログラムを使用
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);

プログラムの削除

プログラムのリンクにエラーがあった場合、または既存のプログラムを削除したい場合は、 WebGLRenderingContext.deleteProgram() を実行するだけです。これにより、リンクされたプログラムのメモリが解放されます。

js
gl.deleteProgram(program);

仕様書

Specification
WebGL Specification
# 5.6

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
WebGLProgram
Available in workers
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.

関連情報