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 の組み合わせです。

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

上の例の vertexShader と fragmentShader の作成については 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);

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2023年12月5日 by MDN contributors.

View this page on GitHub • Report a problem with this content

WebGL: ウェブの 2D および 3D グラフィック
WebGLProgram
継承
1. WebGLObject
WebGL に関連するページ
ガイド
1. WebGL の定数
2. WebGL の型
3. WebGL のモデル、ビュー、投影
4. WebGL best practices
5. 実例による WebGL
6. 基本的な 2D WebGL アニメーションの例
7. Compressed texture formats
8. WebGL のデータ
9. ウェブの行列計算
10. WebGL 拡張機能の使用
チュートリアル
1. WebGL チュートリアル
2. WebGL 入門
3. WebGL コンテキストへの 2D コンテンツの追加
4. シェーダーを用いた WebGL での色の指定
5. WebGL でのオブジェクトのアニメーション
6. WebGL を用いた 3D オブジェクトの作成
7. WebGL でのテクスチャの使用
8. WebGL でのライティング
9. WebGL におけるテクスチャのアニメーション

WebGLProgram

In this article

例

プログラムの使用

プログラムの削除

仕様書

ブラウザーの互換性

関連情報

Help improve MDN