清理Threejs WebGl上下文

Question

我在清理WebGl-Scenes时遇到了问题.我正在使用带有WebGlRenderer的Three.js.在我的应用程序中,我必须经常更改视图,因此需要始终渲染新场景.现在,我摧毁并重新初始化整个Threejs场景.切换场景约15 - 20次后,我收到以下警告:

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

切换几次后,上下文完全丢失,应用程序崩溃.

清理时有没有办法破坏当前的WebGl上下文？或者,WebGlRenderer在实例化时是否始终创建新的WebGl上下文？

我正在使用Three.js R64.

Answer 1

我有同样的问题,但由于要求,我无法使用SPA解决它.

对于这种情况,WebGLRenderer中有.forceContextLoss()方法(rev 71,可能是早期).

所以,我在'deallocate'方法中的代码就像是一些类似的东西

_self.renderer.forceContextLoss();
_self.renderer.context = null;
_self.renderer.domElement = null;
_self.renderer = null;

Answer 2

您可以为不同的场景保留相同的渲染器.渲染器不关心渲染的场景.如果您愿意,您可以在Scene每次拨打电话render()时提供不同的电话.

// 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);
}