Как эффективно использовать холсты для нескольких холстов THREE.Texture

Question

Я создаю приложение three.js, где у меня есть несколько текстур, которые я должен генерировать динамически (а также, возможно, позже обновить). Сейчас я отведение посвященного закадровым рисования холста на такую ​​текстуру, выделяются как таковые:

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

Тогда, когда я должен обновить текстуру, я вынести вещи на холст с помощью Canvas API, а затем вызвать

mainTexture.needsUpdate = true; 

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

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

Так что мой вопрос: как это сделать более эффективно? Я не могу, как таковой, просто использовать один холст, так как если бы я одновременно обновлял несколько текстур, их обновления перезаписывали ранее сделанные из-за ленивой природы загрузки текстуры. Есть ли способ заставить текстуру перезагрузить с холста синхронно и сразу? Будет ли еще одна возможная стратегия не иметь нескольких холстов?

ти,

Матти

Answer 1

Вы пробовали сделать spritesheets из холста, затем установка UV координат или текстуры смещения в зависимости от желаемой текстуры?

Если нет, попробуйте, спрайты сделают чудеса!

Остерегайтесь размера холста, однако. Я бы не советовал использовать холсты размером больше 2048 * 2048 - here's an interesting conversation that might give you hints