最近、キャンバスを使用して大量の大きなテクスチャを作成し、それらを GPU にアップロードする必要があるプロジェクトがありました。すべてのテクスチャが GPU バスを介して一度にプッシュされたため、ページが読み込まれると、常にメモリが不足し (クロムがクラッシュしていました)、「窒息」していました。
texture.needsUpdate = true;すべてのテクスチャが 1 回のレンダリング更新で GPU にプッシュされないように、呼び出しをずらすことにしました。
これは機能しますが、他の解決策に興味があります...
起動時にすべてのテクスチャをロードしている他の人に役立つかもしれないので、これを投稿しました...
テクスチャをゼロにカリングすることは、過度の負荷を止める最良の方法です。それらを根元で小さくすると、その後に続くすべてが改善されます。
この投稿は古いですが、Google の上位の結果として表示されます。そこで、他の初心者 3D ゲーム/Web 開発者向けの便利なヒントをいくつか紹介します。
テクスチャは固定ビット チャンクでバッファに追加されます。チャンクが少ないほど良いですが、テクスチャを 2 のべき乗の解像度で作成すると、半分のチャンクがロードされてビット/時間が浪費されるのを防ぐことができます。累乗とは、各インスタンス (2、4、8、16、32、64) で 2 倍になる一連の数値を指します。この公式を守ることで、ビットの損失を防ぐことができます。
画面上のテクスチャのサイズを見てください。ソースは 1024x1024 かもしれませんが、画面上で高さが 20px しかない場合、または出力キャンバス ID が 480x640 の場合、余分な情報はすべて失われます。テクスチャを縮小して、画面上のものと一致させます。
同じ点で、テクスチャを使用していない場合はテクスチャの色を削除します。頂点の色付けやライトを使用してテクスチャにディテールを戻すことができます。この場合、テクスチャをグレースケール イメージとして保存するか、パレットを制限します。それらを索引付けすることによってサイズ。
.gif は小さなテクスチャに適した形式ですが、大きなテクスチャを圧縮するには Jpeg の方が適しています。.gif を使用している場合は、テクスチャを 1 つの画像とそれらに一致するパレットにグループ化することでスペースを節約することもできます。ゼルダの LTTP ゲーム全体で 256 色しか使用されなかったことを思い出してください。RGB インデックス配列を作成し、そこから取得する生の数値として画像を格納する方法があります。
JSON からインポート/エクスポートする場合、画像はデフォルトで生の 32 ビット .png ファイルになることに注意してください。それ自体が大きいため、JSON オブジェクト ファイルの末尾にビット データとして追加すると、さらに大きくなります。メッシュ データのみをエクスポートし、JS を介してソースにテクスチャを追加すると、より多くのフォーマットを使用し、より多くのテクスチャを最適化できます。