テクスチャを生成するときにWebGLがクラッシュする - OutOfMemory

Question

私は現在、より大きなウェブプロジェクトでThree.jsを使用しています。 すべてうまく動作し、レンダリングなどの問題はありません。私が取り組んでいる唯一の問題は、具体的なものです。

私のプロジェクトの一部では、ユーザーはテクスチャとして使用されるキャンバスを通して3Dモデルに画像を配置できます。場合によっては、ユーザーがクリックによって実際に位置をすばやく変更すると、WebGLの動作が停止することがあります。 Chromeの場合

：

ラット！ WebGLがスラッグを起こしました。

したがって、ユーザーはページをリロードする必要があります。

これは実際にのパフォーマンスの問題ですか？
これは、1秒あたりの変換速度を低下させる唯一の方法ですか？または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 

クリックごとに実行されるコードは次のとおりです。WebGLのではない持っているよう

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関数呼び出しとは何かを持っています前のタスクを終了したのでクラッシュしますか？

Firefoxではブラウザがクラッシュするだけです。私は誰かがこれを手伝ったり、それを避ける方法を教えてくれることを願っています。

**アップデート クリック数を制限すると、満足できる解決策ではありません。このソリューションの問題は、1秒間に1クリック（非常に遅い位置にする）を許可するか、PCが処理できる秒あたりのクリック数を使用するかのいずれかですが、これはタブレットのユーザーと遅いPCの間でエラーが発生する原因になります。私は本当に必要なもの

この

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

のような機能ですが、どのように、私は必要とされたメモリと使用可能なメモリをチェックすることができますか？

Answer 1

私は問題を完全に解決すると思われる解決策を見つけました。

私はちょうどこれは私が検索するものではありませんが、結果には実際の目に見える変化がないので、それは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"; 

に1024×1024から適用されたテクスチャのサイズを縮小私が使用する回避策。これを変更すると、すべての操作がはるかに高速になります。