私はwebglを使って小さなゲームに取り組んでいます。この試合では、私は、多くの（100以上の）樹木からなる何らかの種類の森林を持っています。私はいくつかの異なるツリーモデルしか持っていないので、私はそれらを表示する前に、これらのモデルを別の方法で回転させ、スケーリングします。それらを表示するために、すべての木の上にモーメントIループでwebglを使用してバッチを実装する方法は？
：
for (var tree in trees) {
tree.display();
}
のような木のdisplay()方法が見えますが：多くのツリーオブジェクトが同じtreeModelオブジェクトを共有するので、私
display : function() { // tree
this.treeModel.setRotation(this.rotation);
this.treeModel.setScale(this.scale);
this.treeModel.setPosition(this.position);
this.treeModel.display();
}
モデルを表示する前に、モデルの回転/スケール/位置を設定する必要があります。回転/スケール/位置の値はツリーごとに異なります。
treeModelの表示方法は、すべてのGLのものを行います。
display : function() { // treeModel
// bind texture
// set uniforms for projection/modelview matrix based on rotation/scale/position
// bind buffers
// drawArrays
}
すべてのツリーモデルが同じシェーダを使用しますが、異なるテクスチャを使用することができます。
1つのツリーモデルはいくつかの三角形から構成されているため、すべてのツリーを1つのVBOに結合し、1つのdrawArrays()コールでフォレスト全体を表示したいと考えています。
いくつかの仮定が簡単に数字の話を作るために：
- を表示するには、250本の木があり、5種類の木のモデルがあり
- すべてのツリーモデルは、50個の三角形
質問があります私は持っています：
現在、私は
50 * 3 * 8 (position + normal + texCoord) * floatSizeバイトの5つのバッファを持っています。 1つのvboですべてのツリーを表示したいとき、私は250 * 50 * 3 * 8 * floatSizeバイトサイズのバッファを持っています。ツリーごとに異なる位置の値があるので（ツリーモデルの位置値とツリー位置/スケール/回転）、インデクスバッファを使うことはできません。これは正しいのですか？それとも、インデックスバッファを使ってバッファサイズを少なくとも少しでも減らす方法はありますか？多分これを最適化する他の方法がありますか？ツリーモデルの異なるテクスチャをどのように扱うか？私はすべてのテクスチャを異なるテクスチャユニットにバインドできますが、現在表示されているフラグメントにどのテクスチャを使用するべきかシェーダ内でどのように決定できますか？
実行時に新しいツリー（または他の種類のオブジェクト）をこのバッファに追加する場合は、次のようにします。新しいバッファを作成してコンテンツをコピーする必要はありますか？
glMapBufferを使って新しい値を追加できないと思います。これは正しいです？
+1 for texture atlas。また、私はWebGL（Mac OSでのChromeの実装は少なくとも、WebGL自体で可能）は配列テクスチャをサポートしているとは思わない。 –
複数のテクスチャを1つにマージするとよいでしょう。私はこれを調べます。また、私はインデックスが65kに制限されていることを知らなかった。良い情報、ありがとう。 – micha
インデックスされた要素に使用されるデータ型（Uint16Array）のため、65kに制限されています。 – MikaelEmtinger