私はこのような頂点バッファーを持っています：
0.0, 0.0,
1.0, 0.0,
0.0, 0.6,
1.0, 0.6,
0.5, 1.0
次のインデックスバッファがあります。
0, 2,
2, 4,
4, 3,
3, 2,
2, 1,
1, 0,
0, 3,
3, 1
私はgl.LINESWebGLを使用して描画したいことを知っています。これは、複数の分割された線分を意味します。
gl.drawElements(gl.LINES, 16, gl.UNSIGNED_SHORT, indexBuffer);
WebGLの単一の描画呼び出しで複数の線分の描画を可能にするようです。
誰かELI5が私にできますか？インデックスバッファとは何ですか？それは頂点バッファとどのように関連していますか？プリミティブからインデックスバッファーを生成するにはどうすればよいですか？
回答:
誰かELI5が私にできますか？インデックスバッファとは何ですか？それは頂点バッファとどのように関連していますか？
頂点バッファーには、5つの頂点のX座標とY座標が含まれています。彼らです：
index | X | Y
0 | 0.0 | 0.0
1 | 1.0 | 0.0
2 | 0.0 | 0.6
3 | 1.0 | 0.6
4 | 0.5 | 1.0
インデックスバッファーには、これらの頂点の間に描画する線に関する情報が含まれています。頂点バッファー内の各頂点のインデックスを値として使用します。
線を描画しているので、インデックスバッファー内の連続する値の各ペアは線セグメントを示します。たとえば、インデックスバッファーがで始まる場合0, 2、それは頂点配列の0番目と2番目の頂点の間に線を引くことを意味[0.0, 0.0]し[0.0, 0.6]ます。この場合、これはからに向かう線を描きます。
次の図では、インデックスの各ペアは、それが示す線と色で調整されています。
同様に、線の代わりに三角形を描く場合は、連続する3つの値がそれぞれ頂点バッファー内の3つの頂点のインデックスを示すインデックスバッファーを指定する必要があります。
0, 1, 2,
2, 1, 3,
2, 3, 4,
次のような頂点バッファーがある場合：
var vertices = [
0.0, 0.0, 0.0,
1.0, 0.0, 0.0,
0.0, 0.6, 0.0,
1.0, 0.6, 0.0,
0.5, 1.0, 0.0
]
そしてそれをそのまま描きます：
// Create an empty buffer object
var vertex_buffer = gl.createBuffer();
// Bind appropriate array buffer to it
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
// Pass the vertex data to the buffer
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
/* [...] */
// Draw the lines
gl.drawArrays(gl.LINES, 0, 5);
各線分に2つの専用座標が必要です。ではvertices上記のように、2つのだけドローことは可能であろう二行：
次のインデックスが定義されている場合：
var indices = [
0, 2,
2, 4,
4, 3,
3, 2,
2, 1,
1, 0,
0, 3,
3, 1
]
同じ頂点と何度も交差する線を描くことができます。これにより、冗長性が減少します。インデックスバッファーをバインドし、GPUに、indecies配列で指定された順序で頂点を結ぶ線分を描くように指示した場合：
var index_buffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
// draw geometry lines by indices
gl.drawElements(gl.LINES, 16, gl.UNSIGNED_SHORT, index_buffer);
同じ頂点を何度も再定義することなく、複雑な図形を描くことができます。これが結果です：
インデックスなしで同じ結果を得るには、頂点バッファーは次のようになります。
var vertices = [
0.0, 0.0, 0.0,
0.0, 0.6, 0.0,
0.0, 0.6, 0.0,
0.5, 1.0, 0.0,
0.5, 1.0, 0.0,
1.0, 0.6, 0.0,
1.0, 0.6, 0.0,
0.0, 0.6, 0.0,
0.0, 0.6, 0.0,
1.0, 0.0, 0.0,
1.0, 0.0, 0.0,
0.0, 0.0, 0.0,
0.0, 0.0, 0.0,
1.0, 0.6, 0.0,
1.0, 0.6, 0.0,
1.0, 0.0, 0.0
]
/* [...] */
// Draw the lines
gl.drawArrays(gl.LINES, 0, 16);
同じ画像になります：
格納された頂点の巨大な冗長性に注意してください。