WebGL-ジオメトリ

WebGLコンテキストを取得したら、プリミティブ（描画するオブジェクト）のジオメトリを定義して保存する必要があります。 WebGLでは、JavaScript配列を使用して、頂点、インデックス、プリミティブの色などのジオメトリの詳細を定義します。これらの詳細をシェーダープログラムに渡すには、バッファーオブジェクトを作成し、それぞれのバッファーにデータを含むJavaScript配列を格納（アタッチ）する必要があります。

注意：*これらのバッファオブジェクトは、シェーダープログラム（頂点シェーダー）の属性に関連付けられます。

必要なジオメトリの定義

頂点を使用して描画された2Dまたは3Dモデルは、*メッシュ*と呼ばれます。メッシュ内の各ファセットは*ポリゴン*と呼ばれ、ポリゴンは3つ以上の頂点で構成されます。

WebGLレンダリングコンテキストでモデルを描画するには、JavaScript配列を使用して頂点とインデックスを定義する必要があります。たとえば、図に示すように、座標\ {（5,5）、（-5,5）、（-5、-5）}にある三角形を作成する場合、配列を作成できます頂点の場合-

var vertices = [
   0.5,0.5,   //Vertex 1
   0.5,-0.5,  //Vertex 2
   -0.5,-0.5, //Vertex 3
];

ジオメトリ

同様に、インデックスの配列を作成できます。上記の三角形のインデックスのインデックスは[0、1、2]になり、次のように定義できます-

var indices = [ 0,1,2 ]

インデックスの理解を深めるために、正方形のようなより複雑なモデルを検討してください。正方形を2つの三角形のセットとして表すことができます。（0,3,1）と（3,1,2）が正方形を描く2つの三角形である場合、インデックスは次のように定義されます-

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

ジオメトリの例

注-

プリミティブを描画するために、WebGLは次の2つの方法を提供します-

* drawArrays（）*-このメソッドを使用しながら、JavaScript配列を使用してプリミティブの頂点を渡します。
* drawElements（）*-このメソッドを使用している間、JavaScript配列を使用してプリミティブの頂点とインデックスの両方を渡します。

バッファオブジェクト

バッファオブジェクトは、システムに割り当てられたメモリ領域を示すWebGLが提供するメカニズムです。これらのバッファオブジェクトには、頂点、インデックス、色などに対応する、描画するモデルのデータを保存できます。

これらのバッファーオブジェクトを使用すると、属性変数の1つを介してシェーダープログラム（頂点シェーダー）に複数のデータを渡すことができます。これらのバッファオブジェクトはGPUメモリに常駐するため、直接レンダリングでき、パフォーマンスが向上します。

ジオメトリを処理するには、2種類のバッファオブジェクトがあります。彼らは-

頂点バッファオブジェクト（VBO）-レンダリングされるグラフィカルモデルの頂点ごとのデータを保持します。 WebGLで頂点バッファーオブジェクトを使用して、頂点座標、法線、色、テクスチャ座標などの頂点に関するデータを格納および処理します。
インデックスバッファオブジェクト（IBO）-レンダリングされるグラフィカルモデルのインデックス（インデックスデータ）を保持します。

必要なジオメトリを定義し、JavaScript配列に格納した後、これらの配列をバッファーオブジェクトに渡し、そこからデータがシェーダープログラムに渡される必要があります。バッファにデータを保存するには、次の手順に従います。

空のバッファを作成します。
適切な配列オブジェクトを空のバッファーにバインドします。
typed array のいずれかを使用して、データ（頂点/インデックス）をバッファに渡します。
バッファーのバインドを解除します（オプション）。

バッファを作成する

空のバッファオブジェクトを作成するために、WebGLは* createBuffer（）*というメソッドを提供します。このメソッドは、作成が成功した場合、新しく作成されたバッファーオブジェクトを返します。それ以外の場合は、失敗した場合にnull値を返します。

WebGLはステートマシンとして動作します。バッファが作成されると、後続のバッファ操作は、アンバインドするまで現在のバッファで実行されます。次のコードを使用してバッファを作成します-

var vertex_buffer = gl.createBuffer();

注- gl は、現在のWebGLコンテキストへの参照変数です。

バッファーをバインドする

空のバッファオブジェクトを作成したら、適切な配列バッファ（ターゲット）をそれにバインドする必要があります。 WebGLは、この目的のために* bindBuffer（）*というメソッドを提供します。

構文

bindBuffer（）*メソッドの構文は次のとおりです-

void bindBuffer (enum target, Object buffer)

このメソッドは2つのパラメーターを受け入れます。これらについては以下で説明します。

ターゲット-最初の変数は、空のバッファにバインドするバッファのタイプを表す列挙値です。このパラメーターのオプションとして、2つの定義済み列挙値があります。彼らは-

ARRAY_BUFFER 頂点データを表します。
ELEMENT_ARRAY_BUFFER インデックスデータを表します。

オブジェクトバッファ-2番目のものは、前のステップで作成されたバッファオブジェクトへの参照変数です。参照変数は、頂点バッファーオブジェクトまたはインデックスバッファーオブジェクトにすることができます。

例

次のコードスニペットは、bindBuffer（）メソッドの使用方法を示しています。

//vertex buffer
var vertex_buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

//Index buffer
var Index_Buffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer);

データをバッファに渡す

次のステップは、データ（頂点/インデックス）をバッファに渡すことです。データは配列の形になり、バッファに渡す前に、WebGL型付き配列の1つでラップする必要があります。 WebGLは、この目的のために* bufferData（）*という名前のメソッドを提供します。

構文

bufferData（）メソッドの構文は次のとおりです-

void bufferData (enum target, Object data, enum usage)

このメソッドは3つのパラメータを受け入れ、それらは以下で説明されています-

ターゲット-最初のパラメータは、使用した配列バッファのタイプを表す列挙値です。このパラメータのオプションは-

頂点データ*を表す *ARRAY_BUFFER 。
ELEMENT_ARRAY_BUFFER は、*インデックスデータ*を表します。

オブジェクトデータ-2番目のパラメータは、バッファオブジェクトに書き込まれるデータを含むオブジェクト値です。ここでは、 typed array を使用してデータを渡す必要があります。

使用法-このメソッドの3番目のパラメーターは、図形を描画するためにバッファーオブジェクトデータ（保存されたデータ）を使用する方法を指定する列挙型変数です。以下にリストされているように、このパラメーターには3つのオプションがあります。

gl.STATIC_DRAW -データは一度指定され、何度も使用されます。
gl.STREAM_DRAW -データは1回指定され、数回使用されます。
gl.DYNAMIC_DRAW -データは繰り返し指定され、何度も使用されます。

例

次のコードスニペットは、* bufferData（）*メソッドの使用方法を示しています。頂点とインデックスは、それぞれ頂点とインデックスのデータを保持する配列であると仮定します。

//vertex buffer
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

//Index buffer
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

型付き配列

WebGLは、 typed array と呼ばれる特別なタイプの配列を提供して、インデックス頂点やテクスチャなどのデータ要素を転送します。これらの型付き配列は大量のデータを保存し、ネイティブバイナリ形式で処理するため、パフォーマンスが向上します。 WebGLが使用する型付き配列は、Int8Array、Uint8Array、Int16Array、Uint16Array、Int32Array、UInt32Array、Float32Array、およびFloat64Arrayです。

注意

一般的に、頂点データを保存するには、 Float32Array を使用します。インデックスデータを保存するには、 Uint16Array を使用します。
new キーワードを使用して、JavaScript配列のように型付き配列を作成できます。

バッファーのバインドを解除します

バッファを使用した後、アンバインドすることをお勧めします。以下に示すように、バッファオブジェクトの代わりにnull値を渡すことで実行できます。

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);

WebGLは、バッファ操作を実行するために次のメソッドを提供します-

Sr.No.	Methods and Description
1	void bindBuffer (enum target, Object buffer) target-ARRAY_BUFFER、ELEMENT_ARRAY_BUFFER
2	void* bufferData(enum target, long size, enum usage) target-ARRAY_BUFFER、ELEMENT_ARRAY_BUFFER usage* − STATIC_DRAW、STREAM_DRAW、DYNAMIC_DRAW
3	void bufferData (enum target, Object data, enum usage) target_および_usage-上記の bufferData と同じ
4	void bufferSubData(enum target, long offset, Object data) target-ARRAY_BUFFER、ELEMENT_ARRAY_BUFFER
5	Object createBuffer()
6	void* deleteBuffer(Object buffer*)
7	any getBufferParameter(enum target, enum pname) target-ARRAY_BUFFER、ELEMENT_ ARRAY_BUFFER pname-BUFFER_SIZE、BUFFER_USAGE
8	bool isBuffer(Object buffer)

Webgl-geometry

目次