外部で生成された3Dファイルの頂点ごとにどのようなテクスチャ（以前に読み込まれたテクスチャの多く）をfrag-shaderに伝えるには？

Question

テクスチャ付き3DモデルをwebGLアプリケーションに読み込む最良の方法を理解しようとしていますが、問題があります。私の3Dモデルには1つ以上のテクスチャがあり、これまで見てきた3Dファイルにはこの情報が含まれていないようなので、シェーダにどのテクスチャを使用するかを教えてもらえません。 例を挙げましょう：私は、革シート/クッションを備えた木製の椅子をBlenderでモデル化しました。どの形式で椅子をエクスポートすれば、簡単かつ効率的に抽出できますか： - 頂点位置。 - どの頂点が各面に属しているかを定義するfaces/index情報。 - UVコード。 - 法線 - テクスチャファイルの名前/場所。 - 頂点ごとに使用するテクスチャ。

JSで頂点とテクスチャIDのペアを取得したら、その特定の頂点にどのテクスチャを使用するかを知ることができる属性（シェーダごとの属性）としてシェーダに渡すことができます（drawElementsを使用して描画します）それは一度にすべて）しかし、私はどのようにその情報に手をつけて始めるのか分からない。

私がウェブ上で見つけたすべての記事、ハウツー、チュートリアルでは、モデルは1つのテクスチャのみで読み込まれています。私はまた、three.jsがすでにこの問題を解決しているようだが、私はwebGLでこれらのライブラリ（three.js、glge、scene.sj、spiderGLなど）に移動する前に、 。

すべてのヘルプ、リンクまたは提案は、最も高く評価されます。

Answer 1

ここには2つの問題があります。そのうちの1つは、私たちが助けることができ、もう1つは、より多くの情報が必要です。

ほとんどの場合、頂点ごとにテクスチャ情報が表示されることはありません。面ごとにリストするのが自然です。シェーダごとの頂点に渡す必要がありますので、少し前処理する可能性がありますが、それほど悪くはありません。どのようにあなたのファイルからその情報を得るかは、あなたが指定していないフォーマットに依存します。

ファイルで複数のテクスチャをレンダリングする場合、いくつかの方法があります。必要なすべてのテクスチャをシェーダ内のサンプラ配列にバインドし、先にヒントしていた頂点属性でインデックスすることができます。それはドローコールの数を減らすための良い方法ですが、それは極端な最適化のビットであり、私はあなたがそのメリットから多くの利益を得るのではないかと疑っています。

より一般的なプラクティスは、各マテリアル（マテリアル==テクスチャ）に対して1回の描画呼び出しを行うことです。したがって、あなたが木製のフレームとレザーシートクッションを備えた椅子を持っていれば、木のテクスチャをバインドし、フレーム全体をレンダリングし、次にシートクッションのテクスチャをバインドし、クッションを別々にレンダリングします。これにより、マテリアルタイプごとに異なるシェーダを使用する機会がさらに減ります。したがって、木材を素敵でマットな状態に保ちながら、レザーパーツの鏡面性を高めることができます。オブジェクトごとにいくつかのドローコールを行うには高価になるかもしれませんが、実際には複雑なシーンを扱っていない限り、ほとんどの場合、大きな問題にはなりません。