generated at
Vertex Array Object
>VAO は、煩雑な頂点情報の管理を簡単にしてくれます。とは言っても、VAO 自体が VBO の代わりになるわけではありません。VAO は一度設定された頂点に関する情報をまとめて保持しておいてくれるものと考えるのがいいでしょう。
>従来であれば VBO の個数分だけ繰り返し処理しなければならなかった頂点処理が、VAO というオブジェクトにまとめて設定を突っ込んでおくだけで、後から簡単に再利用できるようになります。

基素の理解
VBOのバインドを一括して行うことができるので便利


VAOなしの場合
js
// VBOをバインドし登録する関数 function set_attribute(vbo, attL, attS){ // 引数として受け取った VBO の配列を順に処理する for(var i in vbo){ // バッファをバインドする gl.bindBuffer(gl.ARRAY_BUFFER, vbo[i]); // attributeLocationを有効にする gl.enableVertexAttribArray(attL[i]); // attributeLocationを通知し登録する gl.vertexAttribPointer(attL[i], attS[i], gl.FLOAT, false, 0, 0); } }
>同じ頂点データだけを使いまわしている場合ならともかく、複数のモデルを切り替えながらレンダリングするようなケースでは、こういった頂点データの扱いが非常に面倒でした。
>レンダリングするモデルが切り替わる場合には、VBO や IBO を全て漏れなく都度バインドしなおしてやる必要がありました。

VAOありの場合
js
var VAO = ext.createVertexArrayOES(); ext.bindVertexArrayOES(VAO);
>バインドが完了すると、ここから先に行うすべての頂点関連処理(主に Attribute 系)を通じて VAO に頂点情報が登録されていきます。先ほど登場した自前の関数の中身で行っていたように、gl.bindBufferやgl.enableVertexAttribArray、gl.vertexAttribPointerなどを適宜呼び出しましょう。これらのメソッドが呼び出されるたびに VAO に情報がひとまとめにされて格納されていきます。
> ここで勘のいい人なら気がついたかもしれませんが、VAO がバインドされている限り、同じ VAO に対して設定が上書きされていくことになります。ですから、異なるモデルの頂点情報を登録する際にはバインドする VAO を切り替えるのを忘れないようにしないと、どんどん設定が塗り替えられていってしまいますので注意しましょう。