WebGL-モデルの描画

バッファーをシェーダーに関連付けた後、最後の手順は必要なプリミティブを描画することです。 WebGLには、モデルを描画するための* drawArrays（）および drawElements（）*という2つのメソッドがあります。

drawArrays（）

drawArrays（）*は、頂点を使用してモデルを描画するために使用されるメソッドです。ここにその構文があります-

void drawArrays(enum mode, int first, long count)

このメソッドは、次の3つのパラメータを取ります-

mode -WebGLでは、モデルはプリミティブ型を使用して描画されます。モードを使用して、プログラマはWebGLが提供するプリミティブタイプのいずれかを選択する必要があります。このオプションの可能な値は、gl.POINTS、gl.LINE_STRIP、gl.LINE_LOOP、gl.LINES、gl.TRIANGLE_STRIP、gl.TRIANGLE_FAN、およびgl.TRIANGLESです。
first -このオプションは、有効な配列の開始要素を指定します。負の値にすることはできません。
count -このオプションは、レンダリングする要素の数を指定します。
drawArrays（）*メソッドを使用してモデルを描画する場合、WebGLは形状のレンダリング中に、頂点座標が定義されている順序でジオメトリを作成します。

例

drawArray（）メソッドを使用して単一の三角形を描画する場合は、以下に示すように、3つの頂点を渡して drawArrays（）*メソッドを呼び出す必要があります。

var vertices = [-0.5,-0.5, -0.25,0.5, 0.0,-0.5,];
gl.drawArrays(gl.TRIANGLES, 0, 3);

以下に示すような三角形を生成します。

トライアングル

連続した三角形を描画したい場合、次の3つの頂点を順番に頂点バッファーに渡し、レンダリングされる要素の数を6として指定する必要があるとします。

var vertices = [-0.5,-0.5, -0.25,0.5, 0.0,-0.5, 0.0,-0.5, 0.25,0.5, 0.5,-0.5,];
gl.drawArrays(gl.TRIANGLES, 0, 6);

以下に示すように、連続した三角形が生成されます。

三角形1

drawElements（）

drawElements（）*は、頂点とインデックスを使用してモデルを描画するために使用されるメソッドです。その構文は次のとおりです-

void drawElements(enum mode, long count, enum type, long offset)

このメソッドは、次の4つのパラメータを取ります-

mode -WebGLモデルはプリミティブ型を使用して描画されます。モードを使用して、プログラマはWebGLが提供するプリミティブタイプのいずれかを選択する必要があります。このオプションの可能な値のリストは、gl.POINTS、gl.LINE_STRIP、gl.LINE_LOOP、gl.LINES、gl.TRIANGLE_STRIP、gl.TRIANGLE_FAN、およびgl.TRIANGLESです。
count -このオプションは、レンダリングする要素の数を指定します。
type -このオプションは、UNSIGNED_BYTEまたはUNSIGNED_SHORTでなければならないインデックスのデータ型を指定します。
offset -このオプションは、レンダリングの開始点を指定します。通常、最初の要素（0）です。
drawElements（）*メソッドを使用してモデルを描画する場合、インデックスバッファーオブジェクトも頂点バッファーオブジェクトと共に作成する必要があります。この方法を使用する場合、頂点データは1回処理され、インデックスに記載されている回数だけ使用されます。

例

インデックスを使用して単一の三角形を描画する場合は、インデックスを頂点とともに渡し、以下に示すように* drawElements（）*メソッドを呼び出す必要があります。

var vertices = [ -0.5,-0.5,0.0, -0.25,0.5,0.0, 0.0,-0.5,0.0 ];
var indices = [0,1,2];

gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0);

それは次の出力を生成します-

トライアングル

drawElements（）*メソッドを使用して伝染性の三角形を描画する場合は、他の頂点を追加し、残りの頂点のインデックスを指定するだけです。

var vertices = [
   -0.5,-0.5,0.0,
   -0.25,0.5,0.0,
   0.0,-0.5,0.0,
   0.25,0.5,0.0,
   0.5,-0.5,0.0
];

var indices = [0,1,2,2,3,4];

gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0);

それは次の出力を生成します-

三角形1

必要な操作

プリミティブを描画する前に、以下で説明するいくつかの操作を実行する必要があります。

キャンバスをクリアする

まず、* clearColor（）*メソッドを使用して、キャンバスをクリアする必要があります。目的の色のRGBA値をパラメーターとしてこのメソッドに渡すことができます。次に、WebGLはキャンバスをクリアし、指定された色で塗りつぶします。したがって、この方法を使用して背景色を設定できます。

次の例を見てください。ここでは、グレー色のRGBA値を渡します。

gl.clearColor(0.5, 0.5, .5, 1);

深度テストを有効にする

以下に示すように、* enable（）*メソッドを使用して深度テストを有効にします。

gl.enable(gl.DEPTH_TEST);

カラーバッファビットをクリアする

以下に示すように、* clear（）*メソッドを使用して、色と深度バッファーをクリアします。

gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

ビューポートを設定する

ビューポートは、描画バッファのレンダリング結果を含む長方形の表示可能領域を表します。 * viewport（）*メソッドを使用して、ビューポートの寸法を設定できます。次のコードでは、ビューポートの寸法がキャンバスの寸法に設定されています。

gl.viewport(0,0,canvas.width,canvas.height);

Webgl-drawing-a-model

目次