Preventing WebGL Context Loss in Three.js

The issue you're experiencing is related to WebGL context limits in Chrome. Browsers have a maximum number of WebGL contexts they can maintain simultaneously, and when this limit is reached, the oldest contexts are lost.

Your cleanup approach is on the right track, but you might need to be more thorough in your disposal process. Here's how to properly clean up Three.js resources:

Improved Cleanup Process

JAVASCRIPTCopied
function cleanupThreeJS(renderer, scene, camera) {
  // Dispose of all scene objects
  scene.traverse((object) => {
    // Dispose geometries
    if (object.geometry) {
      object.geometry.dispose();
    }
    
    // Dispose materials
    if (object.material) {
      if (Array.isArray(object.material)) {
        object.material.forEach(material => disposeMaterial(material));
      } else {
        disposeMaterial(object.material);
      }
    }
  });
  
  // Clear the scene
  scene.clear();
  
  // Dispose the renderer
  renderer.dispose();
  
  // Force context loss (can help release resources more aggressively)
  renderer.forceContextLoss();
  
  // Remove references
  renderer = null;
  scene = null;
  camera = null;
}

// Helper function to dispose material and its textures
function disposeMaterial(material) {
  // Dispose textures
  for (const key in material) {
    const value = material[key];
    if (value && typeof value === 'object' && 'minFilter' in value) {
      value.dispose();
    }
  }
  
  // Dispose material
  material.dispose();
}

Additional Recommendations

1. Limit Active Renderers: Consider implementing a pool system that limits the number of active renderers.

2. Lazy Loading: Only create renderers when they're visible in the viewport.

3. Renderer Reuse: Instead of creating and destroying renderers, consider reusing them.

4. Check DOM Removal: Ensure the canvas elements are actually being removed from the DOM after cleanup.

5. Use RenderTargets Carefully: If you're using WebGLRenderTargets, make sure to dispose of them properly.

6. Monitor Memory: Use Chrome's Performance and Memory tools to monitor WebGL memory usage.

By implementing a more thorough cleanup process and being mindful of the number of active WebGL contexts, you should be able to prevent the context loss issue in your application.