Google overlay state synchronization (visgl#6177)

harisbal · Sep 9, 2021 · 6793a8d · 6793a8d
1 parent 65fea01
commit 6793a8d
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 16 deletions.
diff --git a/modules/google-maps/src/google-maps-overlay.js b/modules/google-maps/src/google-maps-overlay.js
@@ -1,5 +1,5 @@
 /* global google */
-import {setParameters, withParameters} from '@luma.gl/core';
+import {getParameters, setParameters, withParameters} from '@luma.gl/core';
 import GL from '@luma.gl/constants';
 import {
   createDeckInstance,
@@ -111,7 +111,14 @@ export default class GoogleMapsOverlay {
   }
 
   _onContextRestored(gl) {
-    this._deck = createDeckInstance(this._map, this._overlay, this._deck, {gl, ...this.props});
+    const _customRender = () => {
+      this._overlay.requestRedraw();
+    };
+    this._deck = createDeckInstance(this._map, this._overlay, this._deck, {
+      gl,
+      _customRender,
+      ...this.props
+    });
   }
 
   _onContextLost() {
@@ -160,21 +167,29 @@ export default class GoogleMapsOverlay {
     });
 
     if (deck.layerManager) {
-      this._overlay.requestRedraw();
+      // As an optimization, some renders are to an separate framebuffer
+      // which we need to pass onto deck
+      const _framebuffer = getParameters(gl, GL.FRAMEBUFFER_BINDING);
+      deck.setProps({_framebuffer});
+
+      // Camera changed, will trigger a map repaint right after this
+      // Clear any change flag triggered by setting viewState so that deck does not request
+      // a second repaint
+      deck.needsRedraw({clearRedrawFlags: true});
+
+      // Workaround for bug in Google maps where viewport state is wrong
+      // TODO remove once fixed
+      setParameters(gl, {
+        viewport: [0, 0, gl.canvas.width, gl.canvas.height],
+        scissor: [0, 0, gl.canvas.width, gl.canvas.height],
+        stencilFunc: [gl.ALWAYS, 0, 255, gl.ALWAYS, 0, 255]
+      });
+
       withParameters(gl, GL_STATE, () => {
         deck._drawLayers('google-vector', {
           clearCanvas: false
         });
       });
-
-      // Reset state otherwise get rendering errors in
-      // Google library. These occur because the picking
-      // code is run outside of the _onDrawVector() method and
-      // the GL state can be inconsistent
-      setParameters(gl, {
-        scissor: [0, 0, gl.canvas.width, gl.canvas.height],
-        stencilFunc: [gl.ALWAYS, 0, 255, gl.ALWAYS, 0, 255]
-      });
     }
   }
 }
diff --git a/modules/google-maps/src/utils.js b/modules/google-maps/src/utils.js
@@ -188,8 +188,9 @@ export function getViewPropsFromCoordinateTransformer(map, coordinateTransformer
   const focalDistance = 0.5 * projectionMatrix[5];
 
   return {
-    width,
-    height,
+    // Using external gl context - do not set css size
+    width: false,
+    height: false,
     viewState: {
       altitude: focalDistance,
       bearing,

diff --git a/test/modules/google-maps/google-maps-overlay.spec.js b/test/modules/google-maps/google-maps-overlay.spec.js
@@ -156,8 +156,13 @@ function drawPickTest(renderingType) {
     t.ok(equals(viewState.longitude, map.opts.longitude), 'longitude is set');
     t.ok(equals(viewState.latitude, map.opts.latitude), 'latitude is set');
     t.ok(equals(viewState.zoom, map.opts.zoom - 1), 'zoom is set');
-    t.ok(equals(width, map.opts.width), 'width is set');
-    t.ok(equals(height, map.opts.height), 'height is set');
+    if (renderingType === mapsApi.RenderingType.RASTER) {
+      t.ok(equals(width, map.opts.width), 'width is set');
+      t.ok(equals(height, map.opts.height), 'height is set');
+    } else {
+      t.ok(equals(width, false), 'width is not set');
+      t.ok(equals(height, false), 'height is not set');
+    }
 
     if (renderingType === mapsApi.RenderingType.RASTER) {
       t.notOk(deck.props.layerFilter, 'layerFilter is empty');