Сбой WebGL при создании текстуры - OutOfMemory

Question

В настоящее время я использую Three.js в более крупном веб-проекте. Все работает нормально и нет проблем с рендерингом и так далее. Единственная проблема, с которой я сталкиваюсь, - это нечто конкретное.

В части моего проекта пользователь может позиционировать изображение на 3D-модели через холст, который используется как текстура. Иногда, когда пользователь действительно быстро меняет позицию с помощью кликов, WebGL перестает работать.

В Chrome:

Крысы! WebGL hit a Snag - alert

Поэтому пользователю необходимо перезагрузить страницу.

Это действительно выступление выпуск?
Если это так, это единственный способ уменьшить скорость преобразований в секунду? Или есть что-то вроде try/catch, поэтому он просто выполнит преобразование, если это не приведет к блокировке WebGL?

Я действительно хочу сохранить это живое позиционирование изображения на 3D-модели.

Также я мог бы скрыть другие объекты в сцене, так что будет показан только объект, на котором позиционируется изображение, поможет ли это?

Спасибо за ваше время и ответы!

Это фактическая ошибка в консоли:

GL_INVALID_OPERATION : glGenSyncTokenCHROMIUM: 
fence sync must be flushed before generating sync token 

filename.html:1 WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost 

Код выполняется для каждого клика:

context = canvas.getContext("2d"); 
canvas.width = 1024; 
canvas.height = 1024; 
canvas.style.width = canvas.width + "px"; 
canvas.style.height = canvas.height + "px"; 
context.clearRect(0, 0, canvas.width, canvas.height); 

context.save(); 
context.setTransform(1, 0, 0, 1, x + width/2, y + height/2); 
context.rotate(angle * TO_RADIANS); 
var imgT = new Image(); 
imgT.src = fotoprintPath + this.id; 
context.drawImage(imgT, -width/2, -height/2, width, height); 
context.restore(); 

matTexture.map = new THREE.Texture(canvas); 
matTexture.map.needsUpdate = true; 

Есть ли у него что-то делать с вызовами функций asynchrone, как WebGL не имеет закончил предыдущую задачу и так рушится?

В Firefox браузер просто падает. Надеюсь, кто-то может помочь с этим или сказать мне, как этого избежать.

** Обновление Когда я ограничиваю количество кликов в секунду, это не удовлетворительное решение. Проблема в этом решении заключается в том, что я должен разрешать только 1 клик в секунду (что делает позиционирование очень медленным), или я использую клики в секунду, которые может обрабатывать мой компьютер, но это приводит к тому, что пользователи планшета и медленного ПК все еще получают ошибку.

Что мне действительно нужно, это функция, как этот

function canPerformTextureTransformation(){ 
    if(availableMemory >= neededMemory) 
     return true; 
    else 
     return false; 
} 

Но как я могу проверить память, которая будет необходима и доступной памяти?

Answer 1

Я нашел решение, которое, кажется, полностью решает проблему.

Я просто уменьшил размер примененной текстуры от 1024х1024 до 256х256

canvas.width = 1024; --> canvas.width = 256; 
canvas.height = 1024; --> canvas.height = 256; 
canvas.style.width = canvas.width + "px"; 
canvas.style.height = canvas.height + "px"; 

Это не то, что я искал, но нет реальных видимых изменений в результате, так что это обходной путь, который я буду использовать. Изменяя это, все операции выполняются намного быстрее.