WebGL se bloque lors de la génération d'une texture - OutOfMemory

Question

J'utilise actuellement Three.js dans un projet web plus important. Tout fonctionne bien et il n'y a pas de problème avec le rendu et ainsi de suite. Le seul problème que je rencontre est spécifique.

Dans une partie de mon projet, l'utilisateur est capable de positionner une image sur un modèle 3D à travers une toile, qui est utilisée comme texture. Parfois, lorsque l'utilisateur change très rapidement la position via des clics, WebGL cesse de fonctionner.

En Chrome:

Rats! WebGL a déclenché une alerte Snag

L'utilisateur doit donc recharger la page.

Est-ce réellement un problème de performance ?
Si c'est le cas, est le seul moyen de réduire la vitesse des transformations par seconde? Ou y a-t-il quelque chose comme une chose d'essai/attraper ainsi il accomplira juste la transformation, si elle ne conduit pas à bloquer WebGL?

Je veux vraiment garder ce positionnement en direct de l'image sur le modèle 3D.

De même, je pourrais cacher d'autres objets dans la scène, de sorte que seul l'objet sur lequel l'image est positionnée sera montré, cela aiderait-il?

Nous vous remercions de votre temps et de vos réponses!

Ceci est l'erreur réelle dans la console:

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

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

Le code exécuté pour chaque clic est:

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; 

-t-il quelque chose à voir avec les appels de fonction asynchrone, comme WebGL n'a pas terminé la tâche précédente et se bloque donc?

Dans Firefox, le navigateur tombe en panne. J'espère que quelqu'un peut aider avec ceci, ou dites-moi comment l'éviter.

** Mise à jour Lorsque je limite les clics par seconde, ce n'est pas une solution satisfaisante. Le problème avec cette solution est, soit je dois autoriser seulement 1 clic par seconde (ce qui rend le positionnement très lent) ou j'utilise les clics par seconde que mon PC peut gérer mais cela provoque l'erreur des utilisateurs de tablettes et de PC lents.

Ce que je vraiment besoin est une fonction comme celui-ci

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

Mais comment puis-je vérifier la mémoire qui sera nécessaire et la mémoire disponible?

Answer 1

J'ai trouvé une solution, qui semble résoudre complètement le problème.

Je viens réduit la taille de la texture appliquée de 1024x1024 256x256

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

Ce n'est pas ce que je cherchais, mais il n'y a pas de véritable changement visible dans le résultat, il est donc un solution de contournement que je vais utiliser. En changeant cela, toutes les opérations sont beaucoup plus rapides.