WebGL-コンテキスト

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

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

HTML-5Canvas要素の作成

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

例

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

<!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を取得することです。

Canvas IDは、DOM（Document Object Model）メソッドを呼び出すことによって取得されます getElementById()。このメソッドはパラメータとして文字列値を受け入れるため、現在のキャンバスの名前を渡します。

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

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

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

WebGLRenderingContextオブジェクト（またはWebGL描画コンテキストオブジェクトまたは単にWebGLコンテキスト）を取得するには、 getContext() 現在の方法 HTMLCanvasElement。getContext（）の構文は次のとおりです-

canvas.getContext(contextType, contextAttributes);

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

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

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

WebGLContextAttributes

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

シニア番号	属性と説明
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コンテキストを作成する方法を示しています。 anti-aliasing。

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

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

WebGLRenderingContext

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

シニア番号	属性と説明
1	Canvas これは、このコンテキストを作成したcanvas要素への参照です。
2	drawingBufferWidth この属性は、描画バッファの実際の幅を表します。HTMLCanvasElementのwidth属性とは異なる場合があります。
3	drawingBufferHeight この属性は、描画バッファの実際の高さを表します。HTMLCanvasElementのheight属性とは異なる場合があります。

シニア番号	属性と説明
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です。