WebGLRenderingContext
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.
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()- : データフォーマットと頂点属性配列中の頂点属性のロケーションを指定します。
バッファーへの描画
WebGLRenderingContext.clear()-
指定されたバッファーを既定値でクリアします。
WebGLRenderingContext.drawArrays()-
プリミティブを配列データからレンダリングします。
WebGLRenderingContext.drawElements()-
プリミティブを要素配列データからレンダリングします。
WebGLRenderingContext.finish()-
以前に呼び出されたコマンドが終了するまで処理をブロックします。
WebGLRenderingContext.flush()-
可能な限り速くすべてのコマンドを実行し、バッファーコマンドを空にします。
色空間
WebGLRenderingContext.drawingBufferColorSpace-
WebGL 描画バッファーの色空間を指定します。
WebGLRenderingContext.unpackColorSpaceExperimental-
テクスチャのインポート時に変換する色空間を指定します。
拡張機能の使用
WebGL 拡張機能の管理を行うメソッドです。
WebGLRenderingContext.getSupportedExtensions()-
サポートしている全ての WebGL拡張 を文字列の配列 (
Array) で返します。 WebGLRenderingContext.getExtension()-
拡張オブジェクトを返します。
仕様書
| Specification |
|---|
| WebGL Specification # 5.14 |
ブラウザーの互換性
BCD tables only load in the browser