WebGL-コンテキスト

WebGLアプリケーションを作成するための最初のステップは、WebGLレンダリングコンテキストオブジェクトを取得することです。このオブジェクトは、WebGL描画バッファーと対話し、すべてのWebGLメソッドを呼び出すことができます。次の操作は、WebGLコンテキストを取得するために実行されます-

HTML-5キャンバスを作成する
キャンバスIDを取得する
WebGLを入手する

HTML-5 Canvas要素の作成

第5章では、HTML-5キャンバス要素の作成方法について説明しました。 HTML-5ドキュメントの本文内で、キャンバスを作成し、名前を付けて、パラメーターidにパラメーターとして渡します。幅と高さの属性を使用して、キャンバスの寸法を定義できます（オプション）。

例

次の例は、寸法500×500のキャンバス要素を作成する方法を示しています。可視性のためにCSSを使用して、キャンバスに境界線を作成しました。次のコードをコピーして、 my_canvasl という名前のファイルに貼り付けます。

<!DOCTYPE HTML>
<html>
   <head>
      <style>
         #mycanvas{border:1px solid blue;}
      </style>
   </head>
   <body>
      <canvas id = "mycanvas" width = "300" height = "300"></canvas>
   </body>
</html>

それは次の結果を生成します-

キャンバスIDを取得する

キャンバスを作成したら、WebGLコンテキストを取得する必要があります。 WebGL描画コンテキストを取得する最初のことは、現在のキャンバス要素のIDを取得することです。

キャンバスIDは、DOM（ドキュメントオブジェクトモデル）メソッド* getElementById（）*を呼び出すことによって取得されます。このメソッドはパラメーターとして文字列値を受け入れるため、現在のキャンバスの名前を渡します。

たとえば、キャンバス名が my_canvas の場合、以下に示すようにキャンバスIDが取得されます-

var canvas = document.getElementById('my_Canvas');

WebGL描画コンテキストを取得します

WebGLRenderingContextオブジェクト（またはWebGL描画コンテキストオブジェクトまたは単にWebGLコンテキスト）を取得するには、現在の HTMLCanvasElement の* getContext（）*メソッドを呼び出します。 getContext（）の構文は次のとおりです-

canvas.getContext(contextType, contextAttributes);

文字列 webgl または experimental-webgl を contentType として渡します。 contextAttributes パラメーターはオプションです。（この手順を進める間、ブラウザが[.underline]＃WebGL＃バージョン1（OpenGL ES 2.0）を実装していることを確認してください）。

次のコードスニペットは、WebGLレンダリングコンテキストを取得する方法を示しています。ここで、 gl は取得したコンテキストオブジェクトへの参照変数です。

var canvas = document.getElementById('my_Canvas');
var gl = canvas.getContext('experimental-webgl');

WebGLContextAttributes

パラメーター WebGLContextAttributes は必須ではありません。このパラメータは、以下にリストされているブール値を受け入れるさまざまなオプションを提供します-

Sr.No.	Attributes & Description
1	Alpha 値がtrueの場合、キャンバスにアルファバッファーを提供します。デフォルトでは、その値はtrueです。
2	depth 値がtrueの場合、少なくとも16ビットの深度バッファーを含む描画バッファーを取得します。デフォルトでは、その値はtrueです。
3	stencil 値がtrueの場合、少なくとも8ビットのステンシルバッファーを含む描画バッファーを取得します。デフォルトでは、その値はfalseです。
4	antialias 値がtrueの場合、アンチエイリアスを実行する描画バッファーを取得します。デフォルトでは、その値はtrueです。
5	premultipliedAlpha 値がtrueの場合、アルファが事前に乗算された色を含む描画バッファーを取得します。デフォルトでは、その値はtrueです。
6	preserveDrawingBuffer その値がtrueの場合、バッファーはクリアされず、作成者によってクリアまたは上書きされるまで値が保持されます。デフォルトでは、その値はfalseです。

次のコードスニペットは、 anti-aliasing を実行しないステンシルバッファーを使用してWebGLコンテキストを作成する方法を示しています。

var canvas = document.getElementById('canvas1');
var context = canvas.getContext('webgl', { antialias: false, stencil: true });

WebGLRenderingContextの作成時に、描画バッファーが作成されます。 ContextオブジェクトはOpenGLの状態を管理し、描画バッファーにレンダリングします。

WebGLRenderingContext

これはWebGLの主要なインターフェイスです。 WebGL描画コンテキストを表します。このインターフェイスには、描画バッファでさまざまなタスクを実行するために使用されるすべてのメソッドが含まれています。このインターフェイスの属性を次の表に示します。

Sr.No.

Attributes & Description

1

Canvas

これは、このコンテキストを作成したキャンバス要素への参照です。

2

drawingBufferWidth

この属性は、描画バッファーの実際の幅を表します。 HTMLCanvasElementのwidth属性とは異なる場合があります。

3

drawingBufferHeight

この属性は、描画バッファーの実際の高さを表します。 HTMLCanvasElementのheight属性とは異なる場合があります。

Sr.No.	Attributes & Description
1	Alpha 値がtrueの場合、キャンバスにアルファバッファーを提供します。デフォルトでは、その値はtrueです。
2	depth 値がtrueの場合、少なくとも16ビットの深度バッファーを含む描画バッファーを取得します。デフォルトでは、その値はtrueです。
3	stencil 値がtrueの場合、少なくとも8ビットのステンシルバッファーを含む描画バッファーを取得します。デフォルトでは、その値はfalseです。
4	antialias 値がtrueの場合、アンチエイリアスを実行する描画バッファーを取得します。デフォルトでは、その値はtrueです。
5	premultipliedAlpha 値がtrueの場合、アルファが事前に乗算された色を含む描画バッファーを取得します。デフォルトでは、その値はtrueです。
6	preserveDrawingBuffer その値がtrueの場合、バッファーはクリアされず、作成者によってクリアまたは上書きされるまで値が保持されます。デフォルトでは、その値はfalseです。

Webgl-context

目次