WebGLでのプリミティブタイプについて
WebGLでの頂点をどのように描画するかの指定をプリミティブタイプで行います。
頂点を3つ使ってポリゴンを描くか、頂点を2つ使って線を描くか、頂点を1つ使って点を描くかなどの指定することができます。 基礎的な部分ですが、種類が沢山あるのでまとめておきます。
プリミティブタイプの指定方法
ドローコール時に指定します。 指定の仕方は下記になります。
gl.drawArrays(
プリミティブ型,
頂点データの配列で最初に使用する要素のインデックス,
頂点の数);
頂点の描画順（IBO）を指定する場合はgl.drawElements()を使用します。
プリミティブタイプの種類
プリミティブタイプの種類について見ていきます。 頂点の数は4つでインデックスの設定は下記です。
gl.TRIANGLES
頂点を3つ使って、三角形を描きます。 頂点1、2、3が結ばれます。
gl.drawArrays (gl.TRIANGLES, 0, 3);
gl.TRIANGLE_STRIP
頂点を4つ使って、三角形を描きます。
頂点1、2、3 頂点2、3、4 がそれぞれが結ばれます。
gl.drawArrays (gl.TRIANGLES, 0, 4);
gl.TRIANGLE_FAN
頂点を4つ使って、三角形を描きます。
頂点1、2、3 頂点1、3、4 頂点1、4、2 とがそれぞれが結ばれます。
gl.drawArrays (gl.TRIANGLES, 0, 4);
gl.POINTS
点を描きます。
gl.drawArrays (gl.POINTS, 0, 4);
点を描画する場合は頂点シェーダーで、頂点の大きさ(gl_PointSize)を指定することができます。
<script id="vs" type="x-shader/x-vertex">
attribute vec3 position;
void main(){
gl_Position = vec4(position, 1.0);
//頂点サイズを指定
gl_PointSize = 5.0;
}
</script>
gl.LINES
直線を描きます。 頂点1と2、頂点3と4がそれぞれ結ばれます。
gl.drawArrays (gl.LINES, 0, 4);
gl.LINE_STRIP
直線を描きます。 頂点1、2、3、4の順で結ばれます。1と4は結ばれません。
gl.drawArrays (gl.LINES, 0, 4);
gl.LINE_LOOP
直線を描きます。 頂点1、2、3、4の順で結ばれ、1と4も結ばれます。
gl.drawArrays (gl.LINES, 0, 4);
まとめ
頂点の描画方法でも色々ありました。 ん〜〜むずかしい。
