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);