アプリ作成の下準備として、描画方式によるメモリ使用量の比較を行いたいと思います。

今回は WebGL 1.0 の GL_TRIANGLES と GL_TRIANGLE_STRIP でテクスチャ付きの立方体を描画した場合、どのくらいメモリ使用量に差が出るか確認しました。

以下が結果です。

注意：この表を鵜呑みにしないで下さい。私の想定(立方体に対して自由にテクスチャを貼るとか)に縛られた部分で最適化出来ずにバイト数が大きくなってしまっている部分があります。

単位：バイト

立方体の数	GL_TRIANGLES	GL_TRIANGLE_STRIP
1個	864	336 (38.89%)
10個	8,640	3,432 (39.72%)
100個	86,400	34,392 (39.81%)

情報としては、頂点座標(float型*4バイト3)とテクスチャ座標(float型4バイト*2)を使用し、頂点数分のインデックスバッファ(unsinged int型 4バイト*頂点数)を使って描画(drawElementsのAPI)した場合を計算しています。

GL_TRIANGLESは独立した三角形を組み合わせて立方体を描画した場合で、1つの立方体を描画するのに12の独立した三角形の情報が必要です。

1つの三角形を描画するのに必要なバイト数は、頂点 (x, y, z)*3 + テクスチャ座標 (x, y) * 3 + インデックスバッファ * 3 = (9 + 6 + 3) * 4 = 72バイト

1つの立方体を描画するのに12の三角形が必要なので、72*12 = 864バイトとなります。

GL_TRIANGLE_STRIPは同じく三角形を組み合わせた描画ですが、2つ目以降の三角形は、1つ前の三角形と辺を共有しています。このリンク先のイメージを見てもらうとわかるのですが、立方体が14の頂点情報で定義できます。ただし、立方体と立方体を離れた別の場所に同時に描画する際、繋がらないように縮退三角形を利用する必要があり、2個以上の立方体を1回のドローコールで描画する場合は、2個目以降の立方体に対して2つの余分なインデックスバッファ(unsinged int型 4byte * 2)を使う必要があります。

1つの立方体を描画するのに必要なバイト数は、(3 + 2) * 14 * 4 + 14 * 4 = 336バイト で、2個目以降は 344バイトです。

結果の表を見てわかる通り、2倍以上の差が出ました。かなり大きな差なのではないでしょうか。

明日はインスタンシング(drawElementsInstancedANGLE)を利用して更に削減します。