THREE.js webGLガベージコレクション

Question

THREE.jsを使用してボディメッシュの3D画像をレンダリングするアプリがあります。レンダリング機能をカプセル化したMeshViewerというオブジェクトがあります。初期化メソッド中に

this.renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true }) 

私たちはthis.rendererが割り当て解除されていないことをテストするスクリプトを作成しました。この場合

<script> 
    var count = 0; 
    function loop() { 
     if (count >= 25) { 
      return; 
     } 
     else { 
      count++; 
      var viewer = new MeshViewer(
       'mesh_viewer', 
       's3_assets/textured_mean_scape_female.obj', 
       [] 
      ); 

      viewer.cleanup(); 

      setTimeout(function() { 
       loop(); 
      }, 500); 
     } 
    } 
    loop(); 
</script> 

、「mesh_viewer」私たちが見る人を埋め込みたいDOM要素のidです。当社のクリーンアップ方法があれば、私たちドンという意味で

this.renderer = null 

クリーンアップ作品を、設定しますクリーンアップを実行しないと、WebGLコンテキストがあまりにも多く存在するというエラーが発生し、これ以上作成できなくなり、クリーンアップを行うとそのエラーは発生しません。

私の質問は、なぜviewer.cleanupがsetTimeoutのループの前に呼び出され、クリーンアップが外側とsetTimeoutの前に呼び出されたときに失敗するのですか？ （これはTHREE.js/WebGLの質問よりもJavaScriptの質問かもしれません）

Answer 1

おそらくthe way a browser executes javascript and other stuff in a single threadに関連しています。

をsetTimeoutの前に付けると、ブラウザの内部機能またはスリーディフェクト機能のいずれかによって、loop();を呼び出す前に実際にレンダラーを解放する時間が見付かります。

その他viewer.cleanup();とloop()は、何か他のことが起こるために時間のない状態で連続して呼び出されます。

注：多分あなたはシングルトンにあなたのTHREE.WebGLRendererインスタンスを置く必要がありますし、それを解放するのではなく、それを再利用：私はまた

---

提案があることを確認するために、任意のテストをしませんでした。