1

現在、多数の面 (数千) を持ち、テクスチャを使用している three.js メッシュを作成しようとしています。ただし、私の問題は、実行時に各面のテクスチャを変更できることです。そのため、すべての面が異なるテクスチャを持つ可能性があります。

デフォルトのテクスチャを使用してマテリアル配列 (MeshFaceMaterial 用) をプリロードし、各面に異なる materialIndex を割り当てようとしましたが、多くの遅延が発生しました。

少しの研究がhereにつながりました。

数が多い場合 (たとえば、各面が異なる可能性がある場合)、属性/テクスチャを使用して面ごとに異なる外観を実現する別のソリューションを検討してください。

私はシェーダーがどのように機能するかについて少し混乱しています。特に、属性を持つテクスチャをどのように使用するかさえわかりません。私が見つけたほとんどのテクスチャシェーダー関連の例では、代わりにユニフォームが使用されていたため、オンラインでこの例を見つけることができませんでした。

だから私の質問はこれです:実行時に変更可能な多数のテクスチャを持つメッシュを作成する効率的な方法はありますか? そうでない場合、前述の属性/テクスチャのアイデアの例はありますか?

4

1 に答える 1

1

実際、これを実装するのは難しいことです。今、私はGLSLについてあまり話すことができません（私は学んでいます）が、私が知っているのは、ユニフォームは定数であり、呼び出し間で変化しないため、ケースの属性が必要になる可能性がありますが、ここで間違っていることを歓迎します. しかし、私はもっとシンプルな提案をしています。

各面に必要なすべての小さなテクスチャに「分割」できる 1 つのテクスチャを使用できます。次に、実行時にテクスチャから UV 座標を取り出して、面に個別に適用できます。計算時間は引き続き処理されますが、1000 程度の面の場合は実行可能です。25k の顔モデルでテストしたところ、ティックごとにすべての顔がすばやく変更されました。

ここでのトリックは、faceVertexUvs 3 次元配列をナビゲートすることです。しかし、たとえば 12 面のテクスチャ付き立方体の場合、次のようにすべての面を 1 つの辺に等しくなるようにリセットすることができます。

for (var uvCnt = 0; uvCnt < mesh.geometry.faceVertexUvs[0].length; uvCnt+=2 ) {
    mesh.geometry.faceVertexUvs[0][uvCnt][0] = mesh.geometry.faceVertexUvs[0][2][0];
    mesh.geometry.faceVertexUvs[0][uvCnt][1] = mesh.geometry.faceVertexUvs[0][2][1];
    mesh.geometry.faceVertexUvs[0][uvCnt][2] = mesh.geometry.faceVertexUvs[0][2][2];

    mesh.geometry.faceVertexUvs[0][uvCnt+1][0] = mesh.geometry.faceVertexUvs[0][3][0];
    mesh.geometry.faceVertexUvs[0][uvCnt+1][1] = mesh.geometry.faceVertexUvs[0][3][1];
    mesh.geometry.faceVertexUvs[0][uvCnt+1][2] = mesh.geometry.faceVertexUvs[0][3][2];
}

ここでは、6 色 (側面ごとに 1 つ) の立方体があり、各 faceVertexUv をループし (2 つの三角形が平面を作るので 2 ずつステップします)、すべての Uv を青色の 2 番目の側面にリセットします。もちろん、座標をある種のオブジェクトにマップして、オブジェクトを簡単に照会して、対応する Uv を返したりリセットしたりできるようにする必要がありますが、ユースケースはわかりません。完全を期すために、mesh.geometry.uvsNeedUpdate = true;実行時に実行して更新を確認する必要があります。それが役立つことを願っています。

于 2013-10-06T15:14:37.657 に答える