WebGLRenderingContext

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

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

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

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

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

定数

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

WebGL コンテキスト

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

WebGLRenderingContext.canvas

読み取り専用の HTMLCanvasElement への後方参照です。<canvas> 要素と関連付けられていない場合は null を返すことがあります。

WebGLRenderingContext.drawingBufferWidth

読み取り専用の現在の描画バッファーの幅です。コンテキストが関連付けされた canvas 要素の幅と一致しているといえます。

WebGLRenderingContext.drawingBufferHeight

読み取り専用の現在の描画バッファーの高さです。コンテキストが関連付けされた canvas 要素の高さと一致しているといえます。

WebGLRenderingContext.getContextAttributes() (en-US)

実際のコンテキスト引数を含む WebGLContextAttributes オブジェクトを返します。コンテキストが失われていた場合は null を返すことがあります。

WebGLRenderingContext.isContextLost() (en-US)

コンテキストが失われている場合は true を返し、そうでない場合は false を返します。

WebGLRenderingContext.makeXRCompatible() (en-US)

コンテキストがユーザーの XR ハードウェアと互換性があることを確認し、必要に応じて新しい設定でコンテキストを再作成して実行します。これは、標準的な 2D プレゼンテーションを使用してアプリケーションを開始し、後で VR または AR モードの使用に移行するために使用することができます。

表示とクリッピング

WebGLRenderingContext.scissor() (en-US)

シザーボックスを定義します。

WebGLRenderingContext.viewport() (en-US)

ビューポートを設定します。

ステート情報

WebGLRenderingContext.activeTexture()

アクティブなテクスチャユニットを選択します。

WebGLRenderingContext.blendColor() (en-US)

ブレンド元とブレンド先のブレンド係数を設定します。

WebGLRenderingContext.blendEquation() (en-US)

RGB のブレンド式とアルファのブレンド式をひとつの式に設定します。

WebGLRenderingContext.blendEquationSeparate() (en-US)

RGB のブレンド式とアルファのブレンド式を分けて式に設定します。

WebGLRenderingContext.blendFunc() (en-US)

どの関数がピクセルのブレンド演算に使用されるかを定義します。

WebGLRenderingContext.blendFuncSeparate() (en-US)

RGB とアルファ成分のピクセル演算を別々にブレンドするために、どの関数を使用するかを定義します。

WebGLRenderingContext.clearColor()

カラーバッファーをクリアする時に使われる色を指定します。

WebGLRenderingContext.clearDepth()

深度バッファーをクリアする時に使用する深度値を指定します。

WebGLRenderingContext.clearStencil()

ステンシルバッファーをクリアする時に使用するステンシル値を指定します。

WebGLRenderingContext.colorMask() (en-US)

ドローイングまたは WebGLFramebuffer へのレンダリングの際に、どの色要素を有効または無効にするかを設定します。

WebGLRenderingContext.cullFace() (en-US)

前面ポリゴンと後面ポリゴンのいずれか、または両方をカリングするかどうかを指定します。

WebGLRenderingContext.depthFunc() (en-US)

現在の深度バッファーの深度値と書き込むピクセルの深度値を比較する関数を指定します。

WebGLRenderingContext.depthMask() (en-US)

深度バッファーへの書き込みを有効にするか無効にするかどうかを設定します。

WebGLRenderingContext.depthRange() (en-US)

正規化デバイス座標系からウィンドウまたはビューポート座標系への深度レンジマッピングを指定します。

WebGLRenderingContext.disable() (en-US)

このコンテキストにおいて、指定した WebGL 機能を無効にします。

WebGLRenderingContext.enable() (en-US)

このコンテキストにおいて、指定した WebGL 機能を有効にします。

WebGLRenderingContext.frontFace() (en-US)

前面ポリゴンなのか後面ポリゴンなのかを周る方向によって指定します。

WebGLRenderingContext.getParameter() (en-US)

渡された引数名の値を返します。

WebGLRenderingContext.getError() (en-US)

エラー情報を返します。

WebGLRenderingContext.hint() (en-US)

一定の振る舞いについてのヒントを指定します。このヒントの振る舞いは実装に依存します。

WebGLRenderingContext.isEnabled() (en-US)

このコンテキストで指定された WebGL 機能が有効であるか無効であるかをテストします。

WebGLRenderingContext.lineWidth() (en-US)

ラスタライズする線の幅を設定します。

WebGLRenderingContext.pixelStorei() (en-US)

ピクセルストレージモードを指定します。

WebGLRenderingContext.polygonOffset() (en-US)

深度値を計算するためのスケール係数と単位を指定します。

WebGLRenderingContext.sampleCoverage() (en-US)

アンチエイリアシング効果のためのマルチサンプルカバレッジ引数を指定します。

WebGLRenderingContext.stencilFunc() (en-US)

ステンシルテストための関数と参照値を、前面と後面の両面を設定します。

WebGLRenderingContext.stencilFuncSeparate() (en-US)

ステンシルテストための関数と参照値を、前面と後面の両面、またはいずれかを設定します。

WebGLRenderingContext.stencilMask() (en-US)

ステンシル平面の個々のビットの書き込みの有効と無効を、前面と後面の両面を操作します。

WebGLRenderingContext.stencilMaskSeparate() (en-US)

ステンシル平面の個々のビットの書き込みの有効と無効を、前面と後面のいずれか、または両面を操作します。

WebGLRenderingContext.stencilOp() (en-US)

前面と後面のステンシルテストの振る舞いを同時に設定します。

WebGLRenderingContext.stencilOpSeparate() (en-US)

前面と後面のステンシルテストの振る舞いを設定します。

バッファー

WebGLRenderingContext.bindBuffer()

WebGLBuffer オブジェクトを与えられたターゲットにバインドします。

WebGLRenderingContext.bufferData()

バッファーデータを更新します。

WebGLRenderingContext.bufferSubData() (en-US)

バッファーデータを与えられたオフセットから更新します。

WebGLRenderingContext.createBuffer()

WebGLBuffer オブジェクトを作成します。

WebGLRenderingContext.deleteBuffer() (en-US)

WebGLBuffer オブジェクトを削除します。

WebGLRenderingContext.getBufferParameter() (en-US)

バッファーについての情報を返します。

WebGLRenderingContext.isBuffer() (en-US)

与えられたバッファーが有効であるかの論理値を返します。

フレームバッファー

WebGLRenderingContext.bindFramebuffer() (en-US)

WebGLFrameBuffer オブジェクトを与えられたターゲットにバインドします。

WebGLRenderingContext.checkFramebufferStatus() (en-US)

フレームバッファーのステータスを返します。

WebGLRenderingContext.createFramebuffer()

WebGLFrameBuffer オブジェクトを作成します。

WebGLRenderingContext.deleteFramebuffer() (en-US)

WebGLFrameBuffer オブジェクトを削除します。

WebGLRenderingContext.framebufferRenderbuffer() (en-US)

WebGLRenderingBuffer オブジェクトを WebGLFrameBuffer オブジェクトにアタッチします。

WebGLRenderingContext.framebufferTexture2D()

テクスチャ画像を WebGLFrameBuffer オブジェクトにアタッチします。

WebGLRenderingContext.getFramebufferAttachmentParameter() (en-US)

フレームバッファーについての情報を返します。

WebGLRenderingContext.isFramebuffer() (en-US)

渡された WebGLFrameBuffer オブジェクトが有効かどうかを表す論理値を返します。

WebGLRenderingContext.readPixels() (en-US)

WebGLFrameBuffer からピクセルブロックを読み取ります。

レンダーバッファー

WebGLRenderingContext.bindRenderbuffer() (en-US)

与えられたターゲットに WebGLRenderBuffer オブジェクトをバインドします。

WebGLRenderingContext.createRenderbuffer()

WebGLRenderBuffer オブジェクトを作成します。

WebGLRenderingContext.deleteRenderbuffer() (en-US)

WebGLRenderBuffer オブジェクトを削除します。

WebGLRenderingContext.getRenderbufferParameter() (en-US)

レンダーバッファーについての情報を返します。

WebGLRenderingContext.isRenderbuffer() (en-US)

渡された WebGLRenderingBuffer が有効かどうかを表す論理値を返します。

WebGLRenderingContext.renderbufferStorage() (en-US)

レンダーバッファーデータストアを作成します。

テクスチャ

WebGLRenderingContext.bindTexture() (en-US)

与えられたターゲットに WebGLTexture オブジェクトをバインドします。

WebGLRenderingContext.compressedTexImage2D() (en-US)

2D テクスチャの画像を圧縮フォーマットで指定します。

WebGLRenderingContext.compressedTexSubImage2D() (en-US)

2D テクスチャの部分画像を圧縮フォーマットで指定します。

WebGLRenderingContext.copyTexImage2D() (en-US)

2D テクスチャの画像をコピーします。

WebGLRenderingContext.copyTexSubImage2D() (en-US)

2D テクスチャの部分画像をコピーします。

WebGLRenderingContext.createTexture() (en-US)

WebGLTexture オブジェクトを作成します。

WebGLRenderingContext.deleteTexture() (en-US)

WebGLTexture オブジェクトを削除します。

WebGLRenderingContext.generateMipmap() (en-US)

WebGLTexture オブジェクトに対してミップマップ集合を生成します。

WebGLRenderingContext.getTexParameter() (en-US)

テクスチャに対しての情報を返します。

WebGLRenderingContext.isTexture() (en-US)

渡された WebGLTexture が有効かどうかを表す論理値を返します。

WebGLRenderingContext.texImage2D() (en-US)

2D テクスチャ画像を指定します。

WebGLRenderingContext.texSubImage2D() (en-US)

現在の WebGLTexture の部分矩形を更新します。

WebGLRenderingContext.texParameterf() (en-US)

テクスチャ引数を設定します。

WebGLRenderingContext.texParameteri() (en-US)

テクスチャ引数を設定します。

プログラムとシェーダー

WebGLRenderingContext.attachShader()

WebGLShader を WebGLProgram にアタッチします。

WebGLRenderingContext.bindAttribLocation() (en-US)

汎用頂点インデックスを名前付き属性変数にバインドします。

WebGLRenderingContext.compileShader()

WebGLShader をコンパイルします。

WebGLRenderingContext.createProgram()

WebGLProgram を作成します。

WebGLRenderingContext.createShader()

WebGLShader を作成します。

WebGLRenderingContext.deleteProgram() (en-US)

WebGLProgram を削除します。

WebGLRenderingContext.deleteShader() (en-US)

WebGLShader を削除します。

WebGLRenderingContext.detachShader() (en-US)

WebGLShader をでタッチします。

WebGLRenderingContext.getAttachedShaders() (en-US)

WebGLProgram にアタッチされた WebGLShader オブジェクトのリストを返します。

WebGLRenderingContext.getProgramParameter() (en-US)

プログラムについての情報を返します。

WebGLRenderingContext.getProgramInfoLog() (en-US)

WebGLProgram オブジェクトについての情報ログを返します。

WebGLRenderingContext.getShaderParameter()

シェーダーについての情報を返します。

WebGLRenderingContext.getShaderPrecisionFormat() (en-US)

シェーダーの数値フォーマットの精度について記述した WebGLShaderPrecisionFormat オブジェクトを返します。

WebGLRenderingContext.getShaderInfoLog()

WebGLShader についての情報ログを返します。

WebGLRenderingContext.getShaderSource() (en-US)

WebGLShader のソースコードを文字列として返します。

WebGLRenderingContext.isProgram() (en-US)

渡された WebGLProgram 有効かを表す論理値を返します。

WebGLRenderingContext.isShader() (en-US)

渡された WebGLShader 有効かを表す論理値を返します。

WebGLRenderingContext.linkProgram()

渡された WebGLProgram オブジェクトをリンクします。

WebGLRenderingContext.shaderSource()

WebGLShader にソースコードを設定します。

WebGLRenderingContext.useProgram()

指定した WebGLProgram を現在のレンダリングステートの一部として使用します。

WebGLRenderingContext.validateProgram() (en-US)

WebGLProgram を検証します。

ユニフォームと属性

バッファーへの描画

WebGLRenderingContext.clear()

指定されたバッファーを既定値でクリアします。

WebGLRenderingContext.drawArrays()

プリミティブを配列データからレンダリングします。

WebGLRenderingContext.drawElements()

プリミティブを要素配列データからレンダリングします。

WebGLRenderingContext.finish() (en-US)

以前に呼び出されたコマンドが終了するまで処理をブロックします。

WebGLRenderingContext.flush() (en-US)

可能な限り速くすべてのコマンドを実行し、バッファーコマンドを空にします。

色空間

WebGLRenderingContext.drawingBufferColorSpace

WebGL 描画バッファーの色空間を指定します。

WebGLRenderingContext.unpackColorSpace

テクスチャのインポート時に変換する色空間を指定します。

拡張機能の使用

WebGL 拡張機能の管理を行うメソッドです。

WebGLRenderingContext.getSupportedExtensions() (en-US)

サポートしている全ての WebGL拡張 を文字列の配列 (Array) で返します。

WebGLRenderingContext.getExtension() (en-US)

拡張オブジェクトを返します。

仕様書

Specification
WebGL Specification
# 5.14

ブラウザーの互換性

BCD tables only load in the browser

関連情報