web-dev-qa-db-ja.com

ThreejsWebGlコンテキストをクリーンアップします

WebGl-Scenesのクリーンアップ中に問題が発生しました。私はWebGlRendererでThree.jsを使用しています。私のアプリケーションでは、ビューを頻繁に変更する必要があるため、常に新しいシーンをレンダリングする必要があります。今まで、Threejsシーン全体を破棄して再初期化しました。シーンを約15〜20回切り替えた後、次の警告が表示されます。

WARNING: Too many active WebGL contexts. Oldest context will be lost.

数回切り替えると、コンテキストが完全に失われ、アプリケーションがクラッシュします。

クリーンアップするときに、現在のWebGlコンテキストを破棄する方法はありますか？または、WebGlRendererは、インスタンス化されるときに常に新しいWebGlコンテキストを作成しますか？

Three.jsR64を使用しています。

three.jswebglrendererresource-cleanup
19
kassette91

異なるシーンに対して同じレンダラーを維持できます。レンダラーは、レンダリングするシーンを気にしません。必要に応じて、render()を呼び出すたびに異なるSceneを指定できます。

// instantiate only once and keep it
var renderer = new THREE.WebGLRenderer();

// current scene and camera. Switch whenever you like
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(...);
fillScene(scene);

// rendering always uses current scene
function render() {
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}

/* ... 
 *   somewhere in your application
 * ...
 */
if(condition) {
  // switch scene
  scene = new THREE.Scene();
  fillOtherScene(scene);
}
10
theHacker

同じ問題が発生しましたが、要件のため、SPAを使用して解決できませんでした。

この状況のた​​めに、WebGLRenderer（rev 71、おそらく初期）に.forceContextLoss（）メソッドがあります。

したがって、「deallocate」メソッドのコードは次のようなものです。

_self.renderer.forceContextLoss();
_self.renderer.context = null;
_self.renderer.domElement = null;
_self.renderer = null;
14
Konstantin Eletskiy

WebGlRendererを1つだけ作成して使用する必要があります。私のSPA（シングルページアプリケーション）では、いくつかのリダイレクトの後、THREE.jsのカメラ/シーンで奇妙な問題が発生しました。これは、特定の1つのページがレンダリングされるたびにWebGlRendererが作成されたためです。コンソールログにエラーはありませんでした（あなたが書いた警告のみ）。バグは、カメラの位置の変更とレンダリングの問題として現れました。

3
kraag22