WebGLコンテキストを解放してガベージコレクションする方法は？

Question

私はWebとモバイル用のWebGLアプリケーションを開発しています。私はしばしばハードリフレッシュを使って自分のWebGL実装の結果をテストします。

Error: WebGL: Exceeded 16 live WebGL contexts for this principal, losing the least recently used one. 

これは、新鮮な開始ブラウザ上には表示されませんが、複数回のサイトを更新した後：ビューの試みの後、私はエラーを取得します。私は、WebGLのコンテキストが終了、解放、破壊、クリーンアップ、正しく解放されていないと思います。

どうすればいいですか？ https://www.khronos.org/registry/webgl/sdk/tests/conformance/context/context-creation-and-destruction.html：

クロノスグループは解放し、ゴミはここにWebGLのコンテキストを収集するためのテストスイートを作成した（注：これは、ブラウザをクラッシュする可能性があります！）

をテストがPASSとTEST COMPLETEを通るので、basiclyテストが検出されません。任意の問題。しかし、JavaScriptコンソールを開いて、それがの33個のインスタンス読み取ります

Error: WebGL: Exceeded 16 live WebGL contexts for this principal, losing the least recently used one. 

をこれはWebGLのがブラウザによってどのように扱われるかのバグか？あるいは私は何か間違っているのですか？私はWebGLのコンテキストを解放することは考えていませんでした。

私はFirefox Developer Edition 48.0a2とFirefox 46.0.1を使用しています。

WebGLコンテキストを解放してガベージコレクションする方法は？

Answer 1

あなたの質問に誤解があったと思われるかもしれません。

あなたはハードリフレッシュを行っていると言います。ブラウザでリフレッシュを押すことを意味していますか？その場合、最初にすべての拡張機能を無効にして、問題がまだ存在するかどうかを確認します。もしそうであれば、私はあなたが自由なキャンバスにしようとしているそれ以外の場合はmozilla

でバグをし、作成したいものを知っていたし、うまくガベージコレクションのために期待して...ここで私が書いた答えは、私が前に再読み込みだあなたの質問

---

短い答えは、ガベージコレクションを強制することができないということです。あなたは同じキャンバスを再利用する方が良いでしょう。

ソリューションは、しかし、あなたはWebGLのコンテキストにはいくつかの参照につかまっていない、100％確信しているか、すべてのデータを解放し、キャンバスにあなたの特定のケースで

How do I clean up and unload a WebGL canvas context from GPU after use?

をリセットするためにここにありますキャンバス？たとえば、これを行う場合は

canvas.addEventListener('click', function(..) {}); 

ガベージコレクションはできません。イベントリスナー機能がアタッチされています。あなたはその関数への参照を保持していないので、その関数を削除する方法はありません。参照を漏らしている可能性がある多くの方法の1つの例として、すべてのリスナーを削除する必要があります。

There's tons of ways to accidentally keep references to HTML elements like the canvas as well as WebGL objects。ゼロ以上の参照を保持し、ガベージコレクションされることはありません。それは私だった場合一方

Here's some hints on finding the leaks

私はキャンバスを再使用しようと思います。私がすべてを解放したことを確かめるために、すべてのリソースを追跡する私自身の作成/削除関数と呼んでいるかもしれません。例

var textures = []; 
function createTexture(gl) { 
    var tex = gl.createTexture(); 
    textures.push(txt); 
} 

function deleteTexture(gl, tex) { 
    gl.deleteTexture(tex); 
    textures.splice(textures.indexOf(tex), 1); 
} 

今

私はすべてのテクスチャを追跡していますので、私は簡単に残りのすべてのものを削除することができます

while (textures.length) { 
    gl.deleteTexture(textures.pop()); 
}