「Learning WebGLで学ぶWebGL入門」の補足

以前公開した「Learning WebGLで学ぶWebGL入門」の補足

最後の辺りの「頂点を変更してみる」のページの補足。

TRIANGLESの解説

三角形は最終的には以下の命令で描画されます。

    gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems);

ここで指定されている「TRIANGLES」は三角形の3頂点をそれぞれ独立したものとして処理します。6つの頂点を指定すると2つの三角形、9つ指定すると3つの三角形を描画する事が出来ます。

そのためもう1つ三角形を描きたい場合はこの様に頂点(x, y, z)を3つ追加し、

    var vertices = [
         0.0,  1.0,  0.0,
        -1.0, -1.0,  0.0,
         1.0, -1.0,  0.0,

         0.0,  1.0+2.0,  0.0,
        -1.0, -1.0+2.0,  0.0,
         1.0, -1.0+2.0,  0.0
    ];

元々記述されていた3頂点の最後の

         1.0, -1.0,  0.0

の最後に , を付けるのを忘れがちなので注意して下さい。

         1.0, -1.0,  0.0,

※JavaScriptはエラーが発生した場合はそこで処理が中断します。プログラムを変更した事により画面が全く描画されなくなったらエラーを疑って下さい。

頂点数の指定を3から6に変更すると三角形がもう一つ作れます。

    triangleVertexPositionBuffer.numItems = 6;

ここの値が3のままだと6つの頂点の内、先頭の3つの頂点しか使われないため三角形の数は1つままに成ります。

ちょっと上の方が画面外に出ちゃってますね。練習がてら数値を調整してみて下さい。

TRIANGLE_STRIPの解説

四角形は最終的には以下の命令で描画されます。

    gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems);

TRIANGLE_STRIPは文章だけだと説明し辛いのでこちらのページのGL_TRIANGLE_STRIPの項目を参照して下さい。

こちらは現在の状態から頂点を1つ追加したら三角形が1つ追加されます。

    vertices = [
         1.0,  1.0,  0.0,
        -1.0,  1.0,  0.0,
         1.0, -1.0,  0.0,
        -1.0, -1.0,  0.0,
         1.3, -2.5,  0.0
    ];

頂点数は4から5に変更します。

    squareVertexPositionBuffer.numItems = 5;

TRIANGLE_STRIPは見ての通り、描画する三角形がくっついた状態での描画と成ります。それぞれの三角形が離れている必要が有る場合には使えません。

その様な場合にはTRIANGLESを使用して下さい。