Clean up WebGL context listeners on teardown

Author: xeolabs

packages/sdk/src/viewing/webGLRenderer/WebGLRenderer.ts

@@ -55,6 +55,9 @@ export class WebGLRenderer {
 
   private _viewerSubs: (() => void)[];
   private _viewManagerSubs: (() => void)[];
+  private _webglContextCanvas: HTMLCanvasElement | null = null;
+  private _webglContextLostHandler: ((event: Event) => void) | null = null;
+  private _webglContextRestoredHandler: ((event: Event) => void) | null = null;
   private _destroyed = false; // Indicates if the renderer has been destroyed
 
   // Number of SceneModels currently building (loading). While > 0, per-view
@@ -793,19 +796,32 @@ export class WebGLRenderer {
 
     this._shaderInspector = this._viewManager.shaderInspector;
 
-    this._viewManager.getWebGLCanvasElement().addEventListener("webglcontextlost", (event) => {
+    this._installWebGLContextListeners(viewManager);
+
+    return {
+      ok: true,
+      value: undefined
+    };
+  }
+
+  private _installWebGLContextListeners(viewManager: ViewManager): void {
+    this._removeWebGLContextListeners();
+
+    const canvas = viewManager.getWebGLCanvasElement();
+    const contextLostHandler = (event: Event) => {
+      if (this._viewManager !== viewManager) return;
       // preventDefault is required for the browser to fire webglcontextrestored.
       event.preventDefault();
       // Release GL-backed resources now, while the context is still flagged
       // lost, so their gl.delete* calls are no-ops instead of errors against
       // the restored context.
-      this._viewManager.webglContextLost();
+      viewManager.webglContextLost();
       this.events.webglContextLost.dispatch(this, event as WebGLContextEvent);
-    });
+    };
 
-    this._viewManager.getWebGLCanvasElement().addEventListener("webglcontextrestored", (event) => {
-      if (!this._viewManager) return;
-      const result = this._viewManager.webglContextRestored();
+    const contextRestoredHandler = (_event: Event) => {
+      if (this._viewManager !== viewManager) return;
+      const result = viewManager.webglContextRestored();
       if (result.ok === false) {
         this.logError({
           ok: false,
@@ -824,12 +840,25 @@ export class WebGLRenderer {
         }
       }
       this.events.webglContextRestored.dispatch(this);
-    });
-
-    return {
-      ok: true,
-      value: undefined
     };
+
+    this._webglContextCanvas = canvas;
+    this._webglContextLostHandler = contextLostHandler;
+    this._webglContextRestoredHandler = contextRestoredHandler;
+    canvas.addEventListener("webglcontextlost", contextLostHandler);
+    canvas.addEventListener("webglcontextrestored", contextRestoredHandler);
+  }
+
+  private _removeWebGLContextListeners(): void {
+    if (this._webglContextCanvas && this._webglContextLostHandler) {
+      this._webglContextCanvas.removeEventListener("webglcontextlost", this._webglContextLostHandler);
+    }
+    if (this._webglContextCanvas && this._webglContextRestoredHandler) {
+      this._webglContextCanvas.removeEventListener("webglcontextrestored", this._webglContextRestoredHandler);
+    }
+    this._webglContextCanvas = null;
+    this._webglContextLostHandler = null;
+    this._webglContextRestoredHandler = null;
   }
 
   /**
@@ -937,6 +966,7 @@ export class WebGLRenderer {
       sub();
     }
     this._viewManagerSubs = [];
+    this._removeWebGLContextListeners();
     this._viewManager.destroy();
     this._viewManager = undefined as unknown as ViewManager;
     this._renderSuspendCount = 0;

packages/sdk/src/viewing/webGLRenderer/tests/WebGLRenderer.attachViewer.test.ts

@@ -0,0 +1,122 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import {SDKErrorType} from "../../../base/core";
+
+jest.mock("../internal/ViewManager", () => ({ViewManager: jest.fn()}));
+jest.mock("../internal/webGL", () => ({getWebGLExtension: jest.fn()}));
+jest.mock("../internal/inspectors", () => ({
+  ShaderInspector: class {},
+  RenderInspector: class {},
+}));
+
+import {WebGLRenderer} from "../WebGLRenderer";
+import {ViewManager} from "../internal/ViewManager";
+
+function createSubscribable() {
+  const unsubs: jest.Mock[] = [];
+  const event = {
+    subscribe: jest.fn(() => {
+      const unsub = jest.fn();
+      unsubs.push(unsub);
+      return unsub;
+    }),
+  };
+  return {event, unsubs};
+}
+
+function createViewer(hasScene: boolean) {
+  const onSceneAttached = createSubscribable();
+  const onSceneDetached = createSubscribable();
+  const onViewerDestroyed = createSubscribable();
+
+  return {
+    viewer: {
+      scene: hasScene ? {} : null,
+      events: {
+        onSceneAttached: onSceneAttached.event,
+        onSceneDetached: onSceneDetached.event,
+        onViewerDestroyed: onViewerDestroyed.event,
+      },
+    },
+    subscriptions: [onSceneAttached, onSceneDetached, onViewerDestroyed],
+  };
+}
+
+describe("WebGLRenderer.attachViewer", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test("rolls back viewer state when ViewManager init fails during initial attach", () => {
+    const destroy = jest.fn();
+    (ViewManager as unknown as jest.Mock).mockImplementationOnce(() => ({
+      init: jest.fn(() => ({
+        ok: false,
+        type: SDKErrorType.NotSupported,
+        error: "WebGL2 unavailable",
+      })),
+      destroy,
+    }));
+
+    const renderer = new WebGLRenderer() as any;
+    renderer.logging = false;
+    const failed = createViewer(true);
+
+    const result = renderer.attachViewer(failed.viewer as any);
+
+    expect(result.ok).toBe(false);
+    expect(destroy).toHaveBeenCalledTimes(1);
+    expect(renderer.viewer).toBeNull();
+    expect(renderer._viewerSubs).toEqual([]);
+    for (const sub of failed.subscriptions) {
+      expect(sub.event.subscribe).toHaveBeenCalledTimes(1);
+    }
+    for (const unsub of failed.subscriptions.flatMap((sub) => sub.unsubs)) {
+      expect(unsub).toHaveBeenCalledTimes(1);
+    }
+
+    const retry = createViewer(false);
+    expect(renderer.attachViewer(retry.viewer as any).ok).toBe(true);
+    expect(renderer.viewer).toBe(retry.viewer);
+
+    renderer.detachViewer();
+  });
+
+  test("removes WebGL context listeners when destroying the view manager", () => {
+    const canvas = {
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+    };
+    const viewManager = {
+      getWebGLCanvasElement: jest.fn(() => canvas),
+      webglContextLost: jest.fn(),
+      webglContextRestored: jest.fn(() => ({ok: true, value: undefined})),
+      destroy: jest.fn(),
+    };
+    const renderer = new WebGLRenderer() as any;
+    renderer._viewManager = viewManager;
+    renderer._viewManagerSubs = [];
+
+    renderer._installWebGLContextListeners(viewManager);
+
+    const lostHandler = canvas.addEventListener.mock.calls[0][1];
+    const restoredHandler = canvas.addEventListener.mock.calls[1][1];
+
+    expect(canvas.addEventListener).toHaveBeenCalledWith("webglcontextlost", lostHandler);
+    expect(canvas.addEventListener).toHaveBeenCalledWith("webglcontextrestored", restoredHandler);
+
+    renderer._destroyViewManager();
+
+    expect(canvas.removeEventListener).toHaveBeenCalledWith("webglcontextlost", lostHandler);
+    expect(canvas.removeEventListener).toHaveBeenCalledWith("webglcontextrestored", restoredHandler);
+    expect(viewManager.destroy).toHaveBeenCalledTimes(1);
+
+    lostHandler({preventDefault: jest.fn()});
+    restoredHandler({});
+
+    expect(viewManager.webglContextLost).not.toHaveBeenCalled();
+    expect(viewManager.webglContextRestored).not.toHaveBeenCalled();
+  });
+});