three.js プロジェクト (ここで表示可能) には、500 個のキューブがあり、すべて同じサイズで、すべて静的に配置されています。これらの各立方体では、5 つの面が常に同じ色のままです。ただし、6 番目の面の色は動的に更新できます。この変更は、1 つのフレーム内の多くのキューブで発生し、ほとんどのフレームでも発生します。
このシーンをいくつかの異なる方法で実装することができましたが、私が試したもののパフォーマンスに完全に満足したわけではありません. 私はまだ適切なテクニックを思い付いていないか、または適切に実装していない可能性があることを知っています。パフォーマンスの観点から、各キューブの独立性を維持しながら、これらのキューブ面の色を変更する最良の方法は何ですか?
これが私がこれまでに試したことです：
500 個の個別の CubeGeometry および Mesh インスタンスを作成します。ここの回答で説明されているように、ジオメトリ面の色を変更します: キューブの面の色を変更します。これまでのところ、この方法は私にとって最高のパフォーマンスを発揮しましたが、特に優れた GPU で通常の 60fps を達成できないため、500 個の同一のジオメトリは理想的とは言えません。ここでのレンダリングには約 11 ～ 20 ミリ秒かかります。
1 つの CubeGeometry を作成し、500 の Mesh インスタンスで使用します。MeshBasicMaterials の配列を作成して、各メッシュの MeshFaceMaterial を作成します。5 つの MeshBasicMaterial インスタンスは同じで、各立方体の静的に色付けされた 5 つの側面を表します。各メッシュの MeshFaceMaterial に追加する一意の MeshBasicMaterial を作成します。この独自のマテリアルの色を thisMesh.material.materials[3].uniforms.diffuse.value.copy(newColor) で更新します。この方法は、最初の方法 (90 ～ 110 ミリ秒) よりもかなり遅くレンダリングされます。これは私には驚くべきことです。たぶん、それぞれ 6 つのマテリアルを持つ 500 個の立方体 = 3000 個のマテリアルを処理するためでしょうか???
アドバイスをいただければ幸いです。