今回は、WebGLを描画するキャンバスのフルスクリーン表示対応を行っていました。

PCは簡単でしたが、iOSのSafariはフルスクリーンに対応してなかったので、ウィンドウサイズに合わせてキャンバスを調整して、なるべくキャンバスの領域を大きくすることで対応しました。

あとは、インターリーブ配列にするかどうかでWebGLのパフォーマンスがどのくらい変わるかを確認していました。

こちらが利用前、こちらがインターリーブ配列利用のページです。

インターリーブ配列とは、頂点毎にデータをまとめて、GPUのメモリアクセスの負荷を下げてパフォーマンスをあげる工夫です。(詳しくはググればいっぱい情報出てくるよ！)

ソースコードの、以下部分がインターリーブ配列を処理している箇所ですね。

gl.bindBuffer(gl.ARRAY_BUFFER, _vboAry);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, _data.vbo.itemSizeV, gl.FLOAT, false, 20, 0);
gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, _data.vbo.itemSizeT, gl.FLOAT, false, 20, 12);

意外にも、インターリーブ配列を利用しない方がパフォーマンスが上がりました。ドウイウコトデスカ？

ヽ(｀д´)ﾉ うわーん