Pixi.js: アクティブなWebGLコンテキストが多すぎます

@andrevenancio
ただし、月曜日または火曜日からしか使用していないため、Pixiの専門家ではありません。 一度に1つだけにアクセスする必要があるという考えで、多くの実験（このような）のために複数のレンダラーとキャンバスがある場合は、グローバルレンダラーまたは別のレンダラーを使用して、実験を配列に保持します。 次に、それを表示する必要がある場合は、各実験のステージをレンダラーに渡すだけです。

var renderer = PIXI.autoDetectRenderer({blah});
var experiments = [];
experiments.push(experiment1);
experiments.push(experiment2);
experiments.push(experiment3);

var currentExperiment = $('#experminetSelector').val();
renderer.render(experiments[currentExperiment]);

このようにして、レンダラーを1回だけ作成し、各実験のステージに渡すだけです。 ただし、これは、多くの異なる実験ページを用意するのではなく、1つのページのみをレンダリングして、すべての実験を実行しようとしている場合にのみ機能します。

免責事項：私はpixiを初めて使用しますが、これを試していません。マイレージは異なる場合があります。 また、開発者が調査したり、ガイダンスを提供したりするようなバグを見つけたようにも聞こえます。

単一のレンダラーと複数のシーンがあれば問題ありません。 1つのレンダラー=== 1つのキャンバス要素。

皆さん、フィードバックをありがとうございます。 @samuraiskirtあなたが提案していることはまったくばかげたことではなく、それが私が通常1つのフレームワークでいくつかの実験を行う方法です...しかし、実験はpixi.jsを使用して行うことができるので、別の解決策を作成する必要がありますthreejsまたはプレーンwebgl。 また、それに加えて、react構造ですでに定義されている遷移のタイプにより、ある時点で古い実験と新しい実験が同時にレンダリングされ、1つのレンダラーのアイデアが勝ちました。動作しません...

さらに....これは問題の回避策であり、解決策そのものではありません... .destroy（）メソッドが実際にwebglコンテキストへの参照を破棄しない場合...ポイントは何ですか？ :(

ヨバディ！ コンテキストが破棄されていない場合、destroy関数が想定どおりに機能していないことに完全に同意します:)

私はさまよう、あなたはautodetectRendererを使っていますか？ ブラウザがwebGL対応かどうかを検出するために作成したテストコンテキストが破棄されていない可能性があります。

いくつかの追加情報：webglコンテキストを破棄することはできません。それらはガベージコレクションされます（何かが変更されていない限り）。

保持している参照を削除し、オプションでキャンバス要素（コンテキストのクリーンアップに必要）を削除すると思いますが、クリーンアップを行うのはブラウザーの責任です。 コンテキストがリークしているか、ブラウザが必要とするよりも速く作成されている可能性があります。 正直なところわかりません。

開発ツールは、このようなコンテキストの周りのリークを示していますか？ 多分それは助けることができますか？ 何かがコンテキストを維持しているように聞こえます..多分、コンテキストへのjs refか、基礎となるキャンバスへのjs refですか？

これが、私が何があってもiframeが大好きな理由です。

@GoodBoyDigital私はこのようにautodetectRendererを使用しています

<strong i="9">@renderer</strong> = new PIXI.autoDetectRenderer canvas.width, canvas.height, { view: canvas, antialias: false, backgroundColor: 0xffffff }

私は今これを駐車しています、私がそれを見つけたときに解決策が何であるかを皆さんに知らせます..そのコンテキストを強制的に失うと、ガベージコレクションにそれをクリーンアップさせるかもしれないと思っていました..しかしそれも確かではありません:)

私は同じ問題を抱えています。 私が構築しているものでは、Pixiを頻繁に破棄して再構築する必要があり、メモリへの影響が心配です。 現時点では、各WebGLインスタンスは非常に小さいですが、これを構築し続けると、はるかに大きくなります。

何か進展はありますか？

明確にするために、私はPhaserを使用していますが、Pixiのrenderer.destroyメソッドを呼び出しているようです。

まだ運がない。 1つのグローバルレンダラーを使用してさまざまなシーンをレンダリングするか、iframeを介してコンテンツをロードするだけで、ぶら下がっているものを適切に処理できます。

ちょっと覗いて、はい、これは本当に少しトリッキーなものです。 私が見る限り、コンテキストを破壊するためにできる限りのことをします。 したがって、すべてのテクスチャ/プログラムのarraybuffersectは破棄されます。 私たちにできることは、コンテキストが破棄されたらプールして、毎回新しいコンテキストを作成するのではなく、再利用できるようにすることです。

ちょっと@GoodBoyDigital私の場合、私はアニメーションを出し入れしていたので、常に2つのコンテキストが必要でした...それはReactと統合し、完全なpixiにしないことの問題です...とにかく、これが修正できるバグかどうかはわかりません言うまでもなく..ブラウザがコンテキストを管理するようなものだと思います... three.jsからのこのハックが機能するかどうかさえわかりません...多分それをurV4で試して、pixiで16以上のタブを開いてみてくださいhttps://github.com/mrdoob/three.js/blob/master/src/renderers/WebGLRenderer.js#L289

それ以外の場合は心配ありません、私はすでに私のアプリのアーキテクチャを変更しました... iframe FTW :)

いい人だ！ 私は間違いなくthree.jsトリックを追加することも検討します。

1つのグローバルレンダリングを使用したいと思います。 実際、それが私の究極の目標です。 ただし、コードを既存のコンテキストにストリーミングする方法が必要です。

言い換えれば、ユーザーはコードを書いています。 事前に作成されていません。

私は良い解決策を見つけたと思います。 これにより、お互いを知る必要のないマップオーバーレイReactコンポーネントを作成し、ReactがDOMを所有できるようになります。

この手法を使用し

gl.getExtension('WEBGL_lose_context').loseContext();

完全な例を次に示します。

var document = require('global/document');
var PIXI = require('pixi.js');

// I want to keep this canvas / renderer around. For example, this might be a bottom layer PIXI / React map overlay.
var canvas1 = document.createElement('canvas');
document.body.appendChild(canvas1);
createRenderer(0xff0000, canvas1);

function createRenderer(color, canvas) {
  canvas = canvas || document.createElement('canvas');
  var renderer = new PIXI.WebGLRenderer(800, 600, {view: canvas});
  var stage = new PIXI.Container();
  var graphics = new PIXI.Graphics();
  graphics.beginFill(color, 0.5);
  graphics.drawCircle(0, 0, 200);
  graphics.endFill();
  stage.addChild(graphics);
  renderer.render(stage);
  return {renderer: renderer, stage: stage, graphics: graphics};
}

// Simulate frequent adding / removing of lots of PIXI / React map overlays on top.
for (var i = 0; i < 16; i++) {
  var canvas = document.createElement('canvas');
  document.body.appendChild(canvas);
  var scene = createRenderer(0x00ff00, canvas);
  // Uncomment to see that the original canvas isn't removed.
  /* scene.renderer.currentRenderTarget.gl
      .getExtension('WEBGL_lose_context').loseContext(); */
  scene.renderer.destroy();
  scene.stage.removeChild(scene.graphics);
  document.body.removeChild(canvas);
}

たぶん、PIXIはこれを独自の「破棄」メソッドに追加する必要がありますか？

私たちがコンテキストを所有している場合、それは理にかなっています。私は今、私たちが所有していると想定しています（v3）。

関数isWebGLSupported（）（source / core / utils / index.js）で置換
return !!(gl && gl.getContextAttributes().stencil);

と
var success = !!(gl && gl.getContextAttributes().stencil); gl.getExtension('WEBGL_lose_context').loseContext(); gl = undefined; return success;

私の問題を修正しました。 それはグーグルクロームで最も顕著でした-Firefoxはどちらの方法でも機能しました。 私は少しWebGLの初心者なので、このアプローチについてコメントしていただければ幸いです。

チェック時にコンテキストを強制的に失うという良い呼びかけです。コンテキストを所有していることが（100％）わかっているので、これは素晴らしいアイデアです。

これはマージされましたか？ 私たちは同じ問題を抱えています。

ping @ englercjこれは今すぐ閉じることができると思います

gl.getExtension('WEBGL_lose_context').loseContext()は警告を抑制する可能性がありますが、仕様では、 WEBGL_lose_context.restoreContext()が呼び出されるまで、コンテキストの喪失をシミュレートするだけであるとされています。これにより、最初から本当に失われなかった場合にのみコンテキストを復元できます。

これは便利かもしれません：lose_context（）は（仕様による）単なるシミュレーションですが、このスレッド（パブリックWebGL：WEBGL_lose_context （mozilla開発者のJeff Gilbertから）では、FirefoxではloseContext()が「このコンテキストとそのコンテキストを解放しますリソース」 。

問題は、他のブラウザがこれを異なる方法で処理することです。 Google開発者（Ken Russell）からの推奨コメントがあります。WebGLRenderingContextで明示的なdelete * APIを使用して、アプリケーションが使用しなくなったGPUリソ​​ースを解放してください。

私はこれを実験したことがないことを認めなければなりませんが、どの解決策もブラウザ固有になると思われます。

興味深いFF実装ノート。 確かに、個々のリソースを削除することについてのKenのアドバイスは、標準的な方法のように見えます。FFは、多くの人気のあるブラウザーの1つにすぎず、FFの動作でさえ予告なしに変更される可能性があります。 また、実装の詳細や偽のユーザーエージェント文字列またはブラウザのスニッフィング、および代替手段がある場合は追加のコードパスに依存したくないため、ブラウザごとにテストしていません。

今日、iOSでアプリのテストを行っていたところ、このエラーが発生しました。 既知の回避策はありますか？ 私のpixiビューはアプリの画面のサブコンポーネントであるため、ユーザーがそのページから移動すると破棄されます。 問題を回避するために、ビューのキャンバスに同じレンダラーを何らかの方法でデタッチ/再アタッチすることは機能するでしょうか？

回避策は、複数のコンテキストを作成しないことです。 持っているものを再利用するだけです。 ページをナビゲートする場合、前のページで何が作成されたかは問題ではありません。

うーん、では、コンテキストを再利用するにはどうすればよいですか？ 私はangularJSを使用しているので、テンプレートフレームワーク内で作業しています。 たとえば、canvas要素をDOMから切り離して保存し、ユーザーがページに戻ったときに、ページ内のその場所に再アタッチすることはできますか？ PIXI内に「この既存のレンダラーとコンテキストを使用して、この新しいキャンバスにアタッチする」という方法があれば素晴らしいのですが、内部でどのように行われるのかわかりません。

私が気にする理由は、アプリの背景として1つの大きなpixiビューを使用していて、設定ページで使用する小さなビューを使用しているためです。 ユーザーが設定ページに複数回アクセスすると、最初に作成されたため、メインの背景ページが強制終了されます。

これは、シングルページアプリ内でPIXIを使用する場合の問題のようです。

PIXI.Application / PIXI.WebGLRenderer / PIXI.CanvasRendererのインスタンスを保存すると、canvas要素のインスタンスも保存されます。 たとえば、PIXI.Applicationでは、HTMLCanvasElementであるviewプロパティを取得できます。 このcanvas要素を挿入して、AngularJS / Reactアプリから削除できます。 PIXIでは、オプションとして渡すことで、使用するキャンバス要素をレンダラーに指示できますが、これは使用しないでください。 代わりに、PIXIが独自のcanvas要素を内部的に作成し、DOMコンテナにaddChildを追加することを許可します。

<div id="pixi-container"></div>

// maintain the reference to this Application even as your SPA view gets destroyed
const app = new PIXI.Application();

// Insert in the DOM or whatever the equivalent is in Angular
document.querySelector("#pixi-container").appendChild(app.view);

わかりました、ありがとう、私はそれを試してみます。 実は全然悪くないです。

了解しました。ビューを破棄するのではなく、切り離して再度追加することで問題が解決しました。助けてくれた人たちに感謝します。

このスレッドは、閉じられた後に最近のアクティビティがないため、自動的にロックされています。 関連するバグについては、新しい問題を開いてください。