三角形を表示させる

本チャプターから、実際に手を動かしていきます。

テンプレートの座標系は、canvas要素の中心が(0.0,0.0)で、X軸・Y軸ともに両端を1.0, -1.0となるようにしています。

それではここに、以下の図のような三角形を表示させてみましょう。

図の三角形は

• 頂点1 : (0.0, -0.5)
• 頂点2 : (0.5, -0.5)
• 頂点3 : (-0.5, -0.5)

の3つの頂点を持っています。
これらの頂点を以下のように定義します。

const vertices = [];
vertices.push(0.0, 0.5); // 頂点1
vertices.push(0.5, -0.5);  // 頂点2
vertices.push(-0.5, -0.5);  // 頂点3

頂点を定義したら、頂点が保存された配列をGPUに渡します。そして描画するように指示を出します。これで三角形が表示されます。

vbo.updateVbo(new Float32Array(vertices));
gl.drawArrays(gl.LINE_LOOP, 0, vertices.length / 2);

このように表示されていればOKです。