Отображение различных сцен, разделяющих ресурсы на нескольких холстах

Я использую Three.js для создания интерактивного веб-приложения, и янаткнулся на маленький камень преткновения:

У меня есть несколько полотен, содержащихся в перетаскиваемых элементах div на странице. Я надеюсь, что на каждом холсте будет отображаться неосвещенный 3D-объект с применением различных материалов (каждый материал использует собственные шейдеры). Все эти материалы имеют одинаковую текстуру (один может быть окрашен в синий цвет, один может быть ненасыщенным и т. Д.).

Количество холстов на странице может варьироваться, но я ожидаю, что это число обычно достигает / превышает 20 холстов, и поэтому такие ресурсы совместного использования (особенно для больших текстур) будут очень полезными.

До сих пор я использовал несколько рендеров, камер и сцен, которые работали нормально, пока я не начал пытаться использовать одну и ту же текстуру в нескольких сценах.

Большинство материалов имеют одинаковую форму и атрибуты, чтобы избежать дублирования информации, а также чтобы все материалы оставались синхронизированными (например, когда некоторые материалы изменяются со временем, все они должны меняться одинаково).

Мне было интересно, есть ли способ, которым я смогу обмениваться текстурами между сценами / рендерерами / холстами? При попытке получить следующую ошибку:

WebGL: INVALID_OPERATION: bindTexture: object not from this context 

В своем исследовании, пытаясь найти решение этой проблемы, я натолкнулся на предположение, что это можно решить путем создания нескольких окон просмотра, однако я не знаю, как отображать разные окна просмотра на разных полотнах.

TL/DR;

Могу ли я либо:

Показать одну и ту же сцену на разных холстах?Использовать одну и ту же форму (включая форму текстуры) для разных сцен, рендеров и / или полотен?

Заранее спасибо!

Griffork

Ответы на вопрос(1)

Ваш ответ на вопрос