three.js を使用してインタラクティブな Web アプリケーションを作成していますが、ちょっとした障害に遭遇しました。
ページ上のドラッグ可能な div に多数のキャンバスが含まれています。各キャンバスで、異なるマテリアルが適用された照明のない 3D オブジェクトを表示したいと考えています (各マテリアルはカスタム シェーダーを使用しています)。これらのマテリアルはすべて同じテクスチャで機能します (1 つは青みがかったもの、もう 1 つは彩度が低いものなど)。
ページ上のキャンバスの数は変動する可能性がありますが、その数は一般的に 20 のキャンバスに達する/超えると予想されるため、リソースを共有すること (特に大きなテクスチャの場合) は非常に有益です。
これまで、複数のレンダラー、カメラ、およびシーンを使用してきましたが、複数のシーンで同じテクスチャを使用しようとするまで問題なく機能していました。
ほとんどのマテリアルは、情報を複製する必要がないように、またすべてのマテリアルが互いに同期し続けるように、ユニフォームと属性を共有しています (たとえば、一部のマテリアルが時間の経過とともに変化する場合、それらはすべて同じように変化する必要があります)。
シーン/レンダラー/キャンバス間でテクスチャを共有できる方法があるかどうか疑問に思っていましたか? 試してみると、次のエラーが表示されます。
WebGL: INVALID_OPERATION: bindTexture: object not from this context
この問題の解決策を見つけようとしている私の調査では、複数のビューポートを作成することでこれを解決できるという提案に出会いましたが、異なるキャンバスに異なるビューポートを表示する方法がわかりません。
TL/DR;
次のいずれかを実行できますか:
- 異なるキャンバスで同じシーンを表示しますか?
- 異なるシーン、レンダラー、キャンバスで同じユニフォーム (テクスチャ ユニフォームを含む) を使用しますか?
前もって感謝します！
グリフォーク