fix: dispose of renderer

Author: jpoehnelt

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@googlemaps/three",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.3",
   "keywords": [
     "google",
     "maps",

package.json

@@ -15,7 +15,7 @@
  */
 
 import { Map, initialize } from "@googlemaps/jest-mocks";
-import { PerspectiveCamera, Scene } from "three";
+import { PerspectiveCamera, Scene, WebGLRenderer } from "three";
 
 import { ThreeJSOverlayView } from "./three";
 
@@ -74,6 +74,23 @@ test("setMap is called on overlay", () => {
   expect(overlay["overlay"].setMap).toHaveBeenCalledWith(map);
 });
 
+test("onContext lost disposes of renderer", () => {
+  const overlay = new ThreeJSOverlayView({});
+
+  overlay.onContextLost(); // noop
+  expect(overlay["renderer"]).toBeNull();
+
+  const dispose = jest.fn();
+  overlay["renderer"] = {
+    dispose,
+  } as unknown as WebGLRenderer;
+
+  overlay.onContextLost();
+
+  expect(dispose).toHaveBeenCalled();
+  expect(overlay["renderer"]).toBeNull();
+});
+
 test("getMap is called on overlay", () => {
   const overlay = new ThreeJSOverlayView({});
   overlay.getMap();

src/three.test.ts

@@ -169,7 +169,14 @@ export class ThreeJSOverlayView implements google.maps.WebglOverlayView {
     this.renderer.setSize(width, height, false);
   }
 
-  onContextLost() {}
+  onContextLost() {
+    if (!this.renderer) {
+      return;
+    }
+
+    this.renderer.dispose();
+    this.renderer = null;
+  }
 
   onDraw(
     gl: WebGLRenderingContext,