WebGL2RenderingContext

Baseline 広く利用可能 *

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2021年9月以降、すべてのブラウザーで利用可能です。

* この機能の一部は、対応レベルが異なる場合があります。

もっと詳しく
完全な互換性情報を見る

メモ: この機能はウェブワーカー内で利用可能です。

WebGL2RenderingContext インターフェイスは、OpenGL ES 3.0 のレンダリングコンテキストを HTML の <canvas> 要素の描画領域に対して提供します。

このインターフェイスのオブジェクトを取得するには、getContext() を <canvas> 要素に対して呼び出し、引数として "webgl2" を提供してください。

const canvas = document.getElementById("myCanvas");
const gl = canvas.getContext("webgl2");

メモ: WebGL 2 は WebGL 1 の拡張版です。WebGL2RenderingContext インターフェイスは、WebGLRenderingContext インターフェイスのすべてのメンバーを実装しています。WebGL 1 コンテキストのメソッドの中には、WebGL 2 コンテキストで使用する場合、追加の値を受け入れることができるものがあります。この点については、WebGL 1 のリファレンスページで探すことができます。

WebGL チュートリアルには、WebGL を始めるための詳しい情報、サンプル、およびリソースが掲載されています。

定数

WebGL 定数ページを参照してください。

状態情報

WebGL2RenderingContext.getIndexedParameter(): 指定された target のインデックス付けされた値を返します。

バッファー

WebGL2RenderingContext.bufferData(): バッファーオブジェクトのデータストアを初期化して作成します。
WebGL2RenderingContext.bufferSubData(): バッファーオブジェクトのデータストアのサブセットを更新します。
WebGL2RenderingContext.copyBufferSubData(): あるバッファーのデータの一部を、別のバッファーにコピーします。
WebGL2RenderingContext.getBufferSubData(): バッファーからデータを読み取り、ArrayBuffer または SharedArrayBuffer へ書き出します。

フレームバッファー

WebGL2RenderingContext.blitFramebuffer(): 読み取り用フレームバッファーから描画用フレームバッファーへ、ピクセルをブロックで転送します。
WebGL2RenderingContext.framebufferTextureLayer(): テクスチャを単一の層でフレームバッファーに添付します。
WebGL2RenderingContext.invalidateFramebuffer(): フレームバッファー内に添付されたコンテンツを無効化します。
WebGL2RenderingContext.invalidateSubFramebuffer(): フレームバッファー内に添付されたコンテンツの一部を無効化します。
WebGL2RenderingContext.readBuffer(): 色バッファーをピクセルのソースとして選択します。

レンダーバッファー

WebGL2RenderingContext.getInternalformatParameter(): 内部形式に対する実装依存の対応状況に関する情報を返します。
WebGL2RenderingContext.renderbufferStorageMultisample(): レンダーバッファーオブジェクトのデータストアを作成して初期化し、使用するサンプル数を指定することができるようにします。

テクスチャ

WebGL2RenderingContext.texStorage2D(): 二次元テクスチャのすべての保存レベルを指定します。
WebGL2RenderingContext.texStorage3D(): 三次元テクスチャまたは二次元配列テクスチャのすべてのレベルを指定します。
WebGL2RenderingContext.texImage3D(): 三次元テクスチャ画像を指定します。
WebGL2RenderingContext.texSubImage3D(): 現在の三次元テクスチャのサブ矩形を指定します。
WebGL2RenderingContext.copyTexSubImage3D(): 現在の WebGLFramebuffer から、既存の三次元テクスチャのサブイメージにピクセルをコピーします。
WebGL2RenderingContext.compressedTexImage3D: 圧縮形式の三次元テクスチャ画像を指定します。
WebGL2RenderingContext.compressedTexSubImage3D(): 圧縮形式のテクスチャ画像に対して、三次元の部分矩形を指定します。

プログラムとシェーダー

WebGL2RenderingContext.getFragDataLocation(): 色数値とユーザー定義の可変出力変数との対応関係を返します。

ユニフォームと属性

WebGL2RenderingContext.uniform[1234][uif][v](): ユニフォーム変数に値を指定するメソッドです。
WebGL2RenderingContext.uniformMatrix[234]x[234]fv(): ユニフォーム変数に対する行列値を指定するメソッドです。
WebGL2RenderingContext.vertexAttribI4[u]i[v](): 汎用頂点属性に対して整数値を指定するメソッドです。
WebGL2RenderingContext.vertexAttribIPointer(): 頂点属性配列における整数データの書式化および頂点属性の配置を指定します。

色空間

WebGL2RenderingContext.drawingBufferColorSpace: WebGL 描画バッファーの色空間を指定します。
WebGL2RenderingContext.unpackColorSpace: テクスチャをインポートする際に変換する色空間を指定します。

描画バッファー

WebGL2RenderingContext.vertexAttribDivisor(): gl.drawArraysInstanced() および gl.drawElementsInstanced() によってプリミティブの複数のインスタンスをレンダリングする際、汎用頂点属性の処理順序を変更します。
WebGL2RenderingContext.drawArraysInstanced(): 配列データからプリミティブを描画します。さらに、要素の範囲に対して複数のインスタンスを実行することも可能です。
WebGL2RenderingContext.drawElementsInstanced(): 配列データからプリミティブを描画します。さらに、一連の要素に対して複数のインスタンスを実行することも可能です。
WebGL2RenderingContext.drawRangeElements(): 指定された範囲の配列データからプリミティブを描画します。
WebGL2RenderingContext.drawBuffers(): 描画されるカラーバッファのリストを指定します。
WebGL2RenderingContext.clearBuffer[fiuv](): 現在バインドされているフレームバッファーからバッファーをクリアします。

問い合わせオブジェクト

WebGLQuery オブジェクトと共に動作するメソッドです。

WebGL2RenderingContext.createQuery(): 新しい WebGLQuery オブジェクトを作成します。
WebGL2RenderingContext.deleteQuery(): 指定された WebGLQuery オブジェクトを削除します。
WebGL2RenderingContext.isQuery(): 指定されたオブジェクトが有効な WebGLQuery オブジェクトである場合、true を返します。
WebGL2RenderingContext.beginQuery(): 非同期問い合わせを開始します。
WebGL2RenderingContext.endQuery(): 非同期問い合わせの終了を示します。
WebGL2RenderingContext.getQuery(): 指定されたターゲットの WebGLQuery オブジェクトを返します。
WebGL2RenderingContext.getQueryParameter(): 問い合わせに関する情報を返します。

サンプラーオブジェクト

WebGL2RenderingContext.createSampler(): 新しい WebGLSampler オブジェクトを作成します。
WebGL2RenderingContext.deleteSampler(): 指定された WebGLSampler オブジェクトを削除します。
WebGL2RenderingContext.bindSampler(): 指定された WebGLSampler をテクスチャユニットにバインドします。
WebGL2RenderingContext.isSampler(): 指定されたオブジェクトが有効な WebGLSampler オブジェクトである場合、true を返します。
WebGL2RenderingContext.samplerParameter[if](): サンプラー引数を設定します。
WebGL2RenderingContext.getSamplerParameter(): サンプラー引数の情報を返します。

同期オブジェクト

WebGL2RenderingContext.fenceSync(): 新しい WebGLSync オブジェクトを生成し、それを GL コマンドストリームに挿入します。
WebGL2RenderingContext.isSync(): 渡されたオブジェクトが有効な WebGLSync オブジェクトである場合、true を返します。
WebGL2RenderingContext.deleteSync(): 指定された WebGLSync オブジェクトを削除します。
WebGL2RenderingContext.clientWaitSync(): WebGLSync オブジェクトがシグナル状態になるか、指定されたタイムアウト時間が経過するまで待機します。
WebGL2RenderingContext.waitSync(): 直ちに返りますが、指定された WebGLSync オブジェクトにシグナルが送信されるまで、GL サーバーで待ちます。
WebGL2RenderingContext.getSyncParameter(): WebGLSync オブジェクトの引数情報を返します。

座標変換フィードバック

WebGL2RenderingContext.createTransformFeedback(): WebGLTransformFeedback オブジェクトを作成し初期化します。
WebGL2RenderingContext.deleteTransformFeedback(): 指定された WebGLTransformFeedback オブジェクトを削除します。
WebGL2RenderingContext.isTransformFeedback(): 渡されたオブジェクトが有効な WebGLTransformFeedback オブジェクトである場合、true を返します。
WebGL2RenderingContext.bindTransformFeedback(): 渡された WebGLTransformFeedback オブジェクトを、現在の GL 状態にバインドします。
WebGL2RenderingContext.beginTransformFeedback(): 座標変換フィードバック操作を開始します。
WebGL2RenderingContext.endTransformFeedback(): 座標変換フィードバック操作を終了します。
WebGL2RenderingContext.transformFeedbackVaryings(): WebGLTransformFeedback バッファーに記録する値を指定します。
WebGL2RenderingContext.getTransformFeedbackVarying(): WebGLTransformFeedback バッファー内の可変変数に関する情報を返します。
WebGL2RenderingContext.pauseTransformFeedback(): 座標変換フィードバック操作を一時停止します。
WebGL2RenderingContext.resumeTransformFeedback(): 座標変換フィードバック操作を再開します。

ユニフォームバッファーオブジェクト

WebGL2RenderingContext.bindBufferBase(): 指定された WebGLBuffer を、指定されたバインディングポイント (target) の指定された index にバインドします。
WebGL2RenderingContext.bindBufferRange(): 指定された WebGLBuffer の範囲を、指定されたバインディングポイント (target) の指定された index にバインドします。
WebGL2RenderingContext.getUniformIndices(): WebGLProgram 内の複数のユニフォームのインデックスを取得します。
WebGL2RenderingContext.getActiveUniforms(): WebGLProgram 内のアクティブなユニフォームに関する情報を取得します。
WebGL2RenderingContext.getUniformBlockIndex(): WebGLProgram 内のユニフォームブロックのインデックスを取得します。
WebGL2RenderingContext.getActiveUniformBlockParameter(): WebGLProgram 内のアクティブなユニフォームブロックに関する情報を取得します。
WebGL2RenderingContext.getActiveUniformBlockName(): WebGLProgram内の指定された位置にある、アクティブなユニフォームブロックの名前を取得します。
WebGL2RenderingContext.uniformBlockBinding(): アクティブなユニフォームブロックにバインディングポイントを代入します。

頂点配列オブジェクト

WebGLVertexArrayObject (VAO) オブジェクトで共に動作するメソッドです。

WebGL2RenderingContext.createVertexArray(): 新しい WebGLVertexArrayObject を作成します。
WebGL2RenderingContext.deleteVertexArray(): 指定された WebGLVertexArrayObject を削除します。
WebGL2RenderingContext.isVertexArray(): 渡されたオブジェクトが有効な WebGLVertexArrayObject オブジェクトである場合、true を返します。
WebGL2RenderingContext.bindVertexArray(): 指定された WebGLVertexArrayObject をこのバッファーにバインドします。

仕様書

仕様書
WebGL 2.0 Specification # 4.7

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって 2026年6月7日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告