Hot Swapping 3d Frameworks

Question

The AR project I'm working on requires that I transition back and forth a few times between a .hcap volumetric video scene and an interactive game scene. I'm using 8th wall / three.js (HoloVideoObject) for the .hcap scene, and would like to use Playcanvas for the game scene. The reason I need to swap scenes on the same webpage is that the client doesn't want the user asked for camera permission multiple times. Before injecting the html/js into the body to swap the scene, I first call this clean-up function:

const cleanUpScene = (scene) => {
  switch(scene) {
    case SceneType.HCAP:
      XR8.stop()
      const {scene, camera, renderer} = XR8.Threejs.xrScene()
      renderer.xr.dispose()
      renderer.dispose()
      XR8.clearCameraPipelineModules()

      $('#camerafeed').remove()
      break

    case SceneType.Game:
      XR8.PlayCanvas.stopXr()
      pc.app.destroy()
      XR8.clearCameraPipelineModules()

      $('#application-canvas').remove()
      $('#camerafeed').remove()
      break

    default:
      break;
  }
}

I'm able to successfully swap scenes, but I get these error messages after a number of swaps:

> There are too many active WebGL contexts on this page, the oldest context will be lost.
...
> TypeError: null is not an object (evaluating 'A.TEXTURE_2D')

The second error occurs after a few instances of the first error occurring. I've seen some posts recommending calling loseContext() on the WebGLRenderingContext. I've tried adding that:

const cleanUpScene = (scene) => {
  switch(scene) {
    case SceneType.HCAP:
      ...
      renderer.xr.dispose()
      renderer.getContext().getExtension('WEBGL_lose_context').loseContext()
      renderer.dispose()
      ...
      break

    case SceneType.Game:
      ...
      XR8.PlayCanvas.stopXr()
      pc.app.graphicsDevice.gl.getExtension('WEBGL_lose_context').loseContext()
      pc.app.destroy()
      ...
      break

    default:
      break;
  }
}

After a few swaps, adding that results in a new error message occurring between the 2 listed above:

> WebGL: INVALID_OPERATION: loseContext: context already lost

My guess is that something is holding on to a reference to a WebGLRenderingContext even though the canvas elements have been destroyed.

Does anyone have any thoughts on what is occurring and how to fix this? Thank you for reading all of this, and thank you ahead of time for any recommendations.

Answer 1

Unfortunately, the only solution which worked for my use case was completely destroying the web gl contexts and associated 3d frameworks' application instances. This "context already lost" error above was patched in 8th wall's release v16.1.4.1227.