WebGLRenderingContext

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.

WebGLRenderingContext インターフェイスは、<canvas> 要素の描画サーフェスのための OpenGL ES 2.0 の描画コンテキストを提供します。

このインターフェイスを取得するためには、getContext() を<canvas> 要素に対して、 "webgl" の引数を与えて呼び出します。

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

キャンバスの WebGL 描画コンテキストを取得すると、そのキャンバス内で描画を行うことができます。WebGL チュートリアルには、 WebGL を使い始めるための詳細な情報、例、リソースが掲載されています。

WebGL 2.0 のコンテキストが必要な場合は、WebGL2RenderingContextを参照してください。これは、 OpenGL ES 3.0 グラフィックスの実装にアクセスするためのものです。

定数

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

WebGL コンテキスト

以下のプロパティとメソッドは、 WebGL コンテキストを扱うための一般的な情報と機能を提供します。

WebGLRenderingContext.canvas: 読み取り専用のHTMLCanvasElement への後方参照です。<canvas> 要素と関連付けられていない場合はnull を返すことがあります。
WebGLRenderingContext.drawingBufferWidth: 読み取り専用の現在の描画バッファーの幅です。コンテキストが関連付けされた canvas 要素の幅と一致しているといえます。
WebGLRenderingContext.drawingBufferHeight: 読み取り専用の現在の描画バッファーの高さです。コンテキストが関連付けされた canvas 要素の高さと一致しているといえます。
WebGLRenderingContext.getContextAttributes(): 実際のコンテキスト引数を含むWebGLContextAttributes オブジェクトを返します。コンテキストが失われていた場合はnull を返すことがあります。
WebGLRenderingContext.isContextLost(): コンテキストが失われている場合はtrue を返し、そうでない場合はfalse を返します。
WebGLRenderingContext.makeXRCompatible(): コンテキストがユーザーの XR ハードウェアと互換性があることを確認し、必要に応じて新しい設定でコンテキストを再作成して実行します。これは、標準的な 2D プレゼンテーションを使用してアプリケーションを開始し、後で VR または AR モードの使用に移行するために使用することができます。

表示とクリッピング

WebGLRenderingContext.scissor(): シザーボックスを定義します。
WebGLRenderingContext.viewport(): ビューポートを設定します。

ステート情報

WebGLRenderingContext.activeTexture(): アクティブなテクスチャユニットを選択します。
WebGLRenderingContext.blendColor(): ブレンド元とブレンド先のブレンド係数を設定します。
WebGLRenderingContext.blendEquation(): RGB のブレンド式とアルファのブレンド式をひとつの式に設定します。
WebGLRenderingContext.blendEquationSeparate(): RGB のブレンド式とアルファのブレンド式を分けて式に設定します。
WebGLRenderingContext.blendFunc(): どの関数がピクセルのブレンド演算に使用されるかを定義します。
WebGLRenderingContext.blendFuncSeparate(): RGB とアルファ成分のピクセル演算を別々にブレンドするために、どの関数を使用するかを定義します。
WebGLRenderingContext.clearColor(): カラーバッファーをクリアする時に使われる色を指定します。
WebGLRenderingContext.clearDepth(): 深度バッファーをクリアする時に使用する深度値を指定します。
WebGLRenderingContext.clearStencil(): ステンシルバッファーをクリアする時に使用するステンシル値を指定します。
WebGLRenderingContext.colorMask(): ドローイングまたはWebGLFramebuffer へのレンダリングの際に、どの色要素を有効または無効にするかを設定します。
WebGLRenderingContext.cullFace(): 前面ポリゴンと後面ポリゴンのいずれか、または両方をカリングするかどうかを指定します。
WebGLRenderingContext.depthFunc(): 現在の深度バッファーの深度値と書き込むピクセルの深度値を比較する関数を指定します。
WebGLRenderingContext.depthMask(): 深度バッファーへの書き込みを有効にするか無効にするかどうかを設定します。
WebGLRenderingContext.depthRange(): 正規化デバイス座標系からウィンドウまたはビューポート座標系への深度レンジマッピングを指定します。
WebGLRenderingContext.disable(): このコンテキストにおいて、指定した WebGL 機能を無効にします。
WebGLRenderingContext.enable(): このコンテキストにおいて、指定した WebGL 機能を有効にします。
WebGLRenderingContext.frontFace(): 前面ポリゴンなのか後面ポリゴンなのかを周る方向によって指定します。
WebGLRenderingContext.getParameter(): 渡された引数名の値を返します。
WebGLRenderingContext.getError(): エラー情報を返します。
WebGLRenderingContext.hint(): 一定の振る舞いについてのヒントを指定します。このヒントの振る舞いは実装に依存します。
WebGLRenderingContext.isEnabled(): このコンテキストで指定された WebGL 機能が有効であるか無効であるかをテストします。
WebGLRenderingContext.lineWidth(): ラスタライズする線の幅を設定します。
WebGLRenderingContext.pixelStorei(): ピクセルストレージモードを指定します。
WebGLRenderingContext.polygonOffset(): 深度値を計算するためのスケール係数と単位を指定します。
WebGLRenderingContext.sampleCoverage(): アンチエイリアシング効果のためのマルチサンプルカバレッジ引数を指定します。
WebGLRenderingContext.stencilFunc(): ステンシルテストための関数と参照値を、前面と後面の両面を設定します。
WebGLRenderingContext.stencilFuncSeparate(): ステンシルテストための関数と参照値を、前面と後面の両面、またはいずれかを設定します。
WebGLRenderingContext.stencilMask(): ステンシル平面の個々のビットの書き込みの有効と無効を、前面と後面の両面を操作します。
WebGLRenderingContext.stencilMaskSeparate(): ステンシル平面の個々のビットの書き込みの有効と無効を、前面と後面のいずれか、または両面を操作します。
WebGLRenderingContext.stencilOp(): 前面と後面のステンシルテストの振る舞いを同時に設定します。
WebGLRenderingContext.stencilOpSeparate(): 前面と後面のステンシルテストの振る舞いを設定します。

バッファー

WebGLRenderingContext.bindBuffer(): WebGLBuffer オブジェクトを与えられたターゲットにバインドします。
WebGLRenderingContext.bufferData(): バッファーデータを更新します。
WebGLRenderingContext.bufferSubData(): バッファーデータを与えられたオフセットから更新します。
WebGLRenderingContext.createBuffer(): WebGLBuffer オブジェクトを作成します。
WebGLRenderingContext.deleteBuffer(): WebGLBuffer オブジェクトを削除します。
WebGLRenderingContext.getBufferParameter(): バッファーについての情報を返します。
WebGLRenderingContext.isBuffer(): 与えられたバッファーが有効であるかの論理値を返します。

フレームバッファー

WebGLRenderingContext.bindFramebuffer(): WebGLFrameBuffer オブジェクトを与えられたターゲットにバインドします。
WebGLRenderingContext.checkFramebufferStatus(): フレームバッファーのステータスを返します。
WebGLRenderingContext.createFramebuffer(): WebGLFrameBuffer オブジェクトを作成します。
WebGLRenderingContext.deleteFramebuffer(): WebGLFrameBuffer オブジェクトを削除します。
WebGLRenderingContext.framebufferRenderbuffer(): WebGLRenderingBuffer オブジェクトをWebGLFrameBuffer オブジェクトにアタッチします。
WebGLRenderingContext.framebufferTexture2D(): テクスチャ画像をWebGLFrameBuffer オブジェクトにアタッチします。
WebGLRenderingContext.getFramebufferAttachmentParameter(): フレームバッファーについての情報を返します。
WebGLRenderingContext.isFramebuffer(): 渡されたWebGLFrameBuffer オブジェクトが有効かどうかを表す論理値を返します。
WebGLRenderingContext.readPixels(): WebGLFrameBuffer からピクセルブロックを読み取ります。

レンダーバッファー

WebGLRenderingContext.bindRenderbuffer(): 与えられたターゲットにWebGLRenderBuffer オブジェクトをバインドします。
WebGLRenderingContext.createRenderbuffer(): WebGLRenderBuffer オブジェクトを作成します。
WebGLRenderingContext.deleteRenderbuffer(): WebGLRenderBuffer オブジェクトを削除します。
WebGLRenderingContext.getRenderbufferParameter(): レンダーバッファーについての情報を返します。
WebGLRenderingContext.isRenderbuffer(): 渡されたWebGLRenderingBuffer が有効かどうかを表す論理値を返します。
WebGLRenderingContext.renderbufferStorage(): レンダーバッファーデータストアを作成します。

テクスチャ

WebGLRenderingContext.bindTexture(): 与えられたターゲットにWebGLTexture オブジェクトをバインドします。
WebGLRenderingContext.compressedTexImage2D(): 2D テクスチャの画像を圧縮フォーマットで指定します。
WebGLRenderingContext.compressedTexSubImage2D(): 2D テクスチャの部分画像を圧縮フォーマットで指定します。
WebGLRenderingContext.copyTexImage2D(): 2D テクスチャの画像をコピーします。
WebGLRenderingContext.copyTexSubImage2D(): 2D テクスチャの部分画像をコピーします。
WebGLRenderingContext.createTexture(): WebGLTexture オブジェクトを作成します。
WebGLRenderingContext.deleteTexture(): WebGLTexture オブジェクトを削除します。
WebGLRenderingContext.generateMipmap(): WebGLTexture オブジェクトに対してミップマップ集合を生成します。
WebGLRenderingContext.getTexParameter(): テクスチャに対しての情報を返します。
WebGLRenderingContext.isTexture(): 渡されたWebGLTexture が有効かどうかを表す論理値を返します。
WebGLRenderingContext.texImage2D(): 2D テクスチャ画像を指定します。
WebGLRenderingContext.texSubImage2D(): 現在のWebGLTexture の部分矩形を更新します。
WebGLRenderingContext.texParameterf(): テクスチャ引数を設定します。
WebGLRenderingContext.texParameteri(): テクスチャ引数を設定します。

プログラムとシェーダー

WebGLRenderingContext.attachShader(): WebGLShader をWebGLProgram にアタッチします。
WebGLRenderingContext.bindAttribLocation(): 汎用頂点インデックスを名前付き属性変数にバインドします。
WebGLRenderingContext.compileShader(): WebGLShader をコンパイルします。
WebGLRenderingContext.createProgram(): WebGLProgram を作成します。
WebGLRenderingContext.createShader(): WebGLShader を作成します。
WebGLRenderingContext.deleteProgram(): WebGLProgram を削除します。
WebGLRenderingContext.deleteShader(): WebGLShader を削除します。
WebGLRenderingContext.detachShader(): WebGLShader をでタッチします。
WebGLRenderingContext.getAttachedShaders(): WebGLProgram にアタッチされたWebGLShader オブジェクトのリストを返します。
WebGLRenderingContext.getProgramParameter(): プログラムについての情報を返します。
WebGLRenderingContext.getProgramInfoLog(): WebGLProgram オブジェクトについての情報ログを返します。
WebGLRenderingContext.getShaderParameter(): シェーダーについての情報を返します。
WebGLRenderingContext.getShaderPrecisionFormat(): シェーダーの数値フォーマットの精度について記述したWebGLShaderPrecisionFormat オブジェクトを返します。
WebGLRenderingContext.getShaderInfoLog(): WebGLShader についての情報ログを返します。
WebGLRenderingContext.getShaderSource(): WebGLShader のソースコードを文字列として返します。
WebGLRenderingContext.isProgram(): 渡されたWebGLProgram 有効かを表す論理値を返します。
WebGLRenderingContext.isShader(): 渡されたWebGLShader 有効かを表す論理値を返します。
WebGLRenderingContext.linkProgram(): 渡されたWebGLProgram オブジェクトをリンクします。
WebGLRenderingContext.shaderSource(): WebGLShader にソースコードを設定します。
WebGLRenderingContext.useProgram(): 指定したWebGLProgram を現在のレンダリングステートの一部として使用します。
WebGLRenderingContext.validateProgram(): WebGLProgram を検証します。

ユニフォームと属性

WebGLRenderingContext.disableVertexAttribArray()
- : 指定された位置の頂点属性配列を無効にします。
WebGLRenderingContext.enableVertexAttribArray()
- : 指定された位置の頂点属性配列を有効にします。
WebGLRenderingContext.getActiveAttrib()
- : 有効な属性変数についての情報を返します。
WebGLRenderingContext.getActiveUniform()
- : 有効なユニフォーム変数についての情報を返します。
WebGLRenderingContext.getAttribLocation()
- : 属性変数のロケーションを返します。
WebGLRenderingContext.getUniform()
- : 与えられたロケーションのユニフォーム変数の値を返します。
WebGLRenderingContext.getUniformLocation()
- : ユニフォーム変数のロケーションを返します。
WebGLRenderingContext.getVertexAttrib()
- : 指定された位置の頂点属性についての情報を返します。
WebGLRenderingContext.getVertexAttribOffset()
- : 与えられた頂点配列のアドレスを返します。
WebGLRenderingContext.uniform[1234][fi][v]()
- : ユニフォーム変数の値を指定します。
WebGLRenderingContext.uniformMatrix[234]fv()
- : ユニフォーム変数の行列を指定します。
WebGLRenderingContext.vertexAttrib[1234]f[v]()
- : 汎用頂点属性の値を指定します。
WebGLRenderingContext.vertexAttribPointer()
- : データフォーマットと頂点属性配列中の頂点属性のロケーションを指定します。