three.js - example - Limpiar los contextos de Threejs WebGl

webgl javascript example

Question

Tengo un problema al limpiar mis escenas WebGl. Estoy usando Three.js con un WebGlRenderer. En mi aplicación, tengo que cambiar las vistas con bastante frecuencia y, por lo tanto, debo renderizar nuevas escenas todo el tiempo. Hasta ahora destruyo y reinicializo toda la escena de Threejs. Después de cambiar las escenas de 15 a 20 veces, recibo la siguiente advertencia:

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

Después de cambiar un par de veces más, el contexto se pierde completamente y la aplicación se bloquea.

¿Hay una manera de destruir el contexto actual de WebGl, al limpiar? ¿O el WebGlRenderer siempre crea un nuevo contexto WebGl cuando se crea una instancia?

Estoy usando Three.js R64.

Answer 1

Debes crear y usar solo un WebGlRenderer. En mi SPA (aplicación de una sola página) tuve un problema extraño con la cámara / escena en THREE.js después de algunas redirecciones. Fue porque WebGlRenderer se creó cada vez que se representaba una página en particular. No hubo ningún error en el registro de la consola (solo la advertencia que escribió). Apareció un error como cambio en la posición de la cámara y problemas con el renderizado.

Answer 2

Puedes mantener el mismo renderizador para diferentes escenas. Al renderizador no le importa qué escena va a renderizar. Puede proporcionar una Scene diferente cada vez que llame a render() si lo desea.

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

Answer 3

Tengo el mismo problema, pero no pude resolverlo usando SPA, debido a los requisitos.

Hay un método .forceContextLoss () en WebGLRenderer (rev 71, quizás fue temprano) para estas situaciones.

Por lo tanto, mi código en el método ''desasignar'' es algo así como

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