いくつかのキャンバスベースのTHREE.Textureのキャンバスを効率的に再利用する方法

Question

私は動的に生成しなければならない複数のテクスチャを持つthree.jsアプリケーションを構築しています（後で再生成（更新）も可能です）。今の私は、次のような割り当てられ、そのようなテクスチャあたりの描画キャンバスオフスクリーン専用割り当てています：

canvas = document.createElement('canvas'); 
canvasContext = canvas.getContext('2d'); 
mainTexture = new THREE.Texture(canvas); 

私はテクスチャを更新する必要があるときに、私はCanvas APIを使用してキャンバスにコンテンツをレンダリングしてから呼び出す

mainTexture.needsUpdate = true; 

これは、テクスチャが将来、いつかキャンバスからコンテンツをリロードするようにします。キャンバスレンダリングに必要なすべてのイメージをプリロードしてキャッシュしているので、レンダリングを行うときにそれ以上のラグが発生しません。

このプロセスでは、更新サイクルの後に怠惰な読み込みや複数のキャンバスを持つことで無駄に多くのメモリが無駄になるため、しばらくの間痙攣が発生します。割り当てられたhtml5キャンバス用に管理されます）。

私の質問は、これをより効率的に行う方法です。同時に複数のテクスチャを更新するのであれば、テクスチャの遅延読み込みの性質のために更新が上書きされるため、単一のキャンバスを使用することはできません。テクスチャをキャンバスから同期してすぐにリロードするように強制する方法はありますか？複数のキャンバスを持たない別の実現可能な戦略が存在するだろうか？

TY、

マッティ

Answer 1

あなたは、所望の質感に応じたオフセットUV座標やテクスチャを設定し、キャンバスの外にspritesheetsを作ってみましたがありますか？

いいえ、試してみてください、スプライトシートは不思議です！

しかし、キャンバスサイズには注意してください。私は2048より大きなキャンバスを使ってアドバイスをしないだろう* 2048 - here's an interesting conversation that might give you hints