javascript - WebGL バッチ処理: 送信する必要がある変換の数を減らす

Question

現在、単一の描画呼び出しでオブジェクトを描画しています。各オブジェクトは、1 つの変換、1 つの色、および頂点のストリームを持つ単なる頂点の集まりです。

uniform vec4 color;
uniform mat4 transform;
attribute vec3 vertex;

複数のオブジェクトを 1 回の描画呼び出しにバッチ処理したいのですが、色と変換を送信する方法がわかりません。両方を頂点ごとの属性に変換するだけで、多くの重複データが送信されることになります。すべての色と変換を GPU の配列に送信し、各頂点にカラー インデックスと変換インデックスを渡すだけで、その頂点の適切な色と変換を取得できる方法はありますか?

それとも、私が見逃しているもっとエレガントなソリューションが他にありますか?

Answer 1

はい、できます。ユニフォーム配列を作成し、インデックス属性を追加するだけです:

uniform vec4 color[MAX_OBJECTS];
uniform mat4 transform[MAX_OBJECTS];
attribute vec3 vertex;
attribute float index;

whereMAX_OBJECTSはプラットフォームに合わせて適切に定義されています。プラットフォームが一定のスペースに制限されている場合 (モバイル gpu など)、頂点バッファーに色を保存したい場合があります。