WebMercatorViewport support external projectionMatrix

Provide fov rather than scaleMultiplier

Use projectionMatrix rather than fov for altitude

Add this.fovy to WebMercatorViewport

Fix path to math.gl/web-mercator

Remove altitudeFromProjection variable

Author: felixpalmer

examples/webpack.config.local.js

@@ -61,7 +61,7 @@ function makeLocalDevConfig(EXAMPLE_DIR = LIB_DIR, linkToLuma, linkToMath) {
       'geoid',
       'geospatial',
       'main',
-      'mercator',
+      'web-mercator',
       'polygon',
       'proj4',
       'sun',

modules/core/src/viewports/web-mercator-viewport.js

@@ -35,6 +35,8 @@ import {
 import * as vec2 from 'gl-matrix/vec2';
 import {Matrix4} from 'math.gl';
 
+const RADIANS_TO_DEGREES = 180 / Math.PI;
+
 export default class WebMercatorViewport extends Viewport {
   /**
    * @classdesc
@@ -52,6 +54,7 @@ export default class WebMercatorViewport extends Viewport {
       bearing = 0,
       nearZMultiplier = 0.1,
       farZMultiplier = 1.01,
+      projectionMatrix,
       orthographic = false,
 
       repeat = false,
@@ -73,7 +76,7 @@ export default class WebMercatorViewport extends Viewport {
       width,
       height,
       pitch,
-      altitude,
+      altitude: projectionMatrix ? projectionMatrix[5] / 2 : altitude,
       nearZMultiplier,
       farZMultiplier
     });
@@ -123,6 +126,7 @@ export default class WebMercatorViewport extends Viewport {
     this.pitch = pitch;
     this.bearing = bearing;
     this.altitude = altitude;
+    this.fovy = fov * RADIANS_TO_DEGREES;
 
     this.orthographic = orthographic;
 

test/modules/core/viewports/web-mercator-viewport.spec.js

@@ -21,12 +21,15 @@
 import test from 'tape-catch';
 import {equals, config, Vector3} from 'math.gl';
 import {WebMercatorViewport} from 'deck.gl';
+import {Matrix4} from 'math.gl';
 
 // Adjust sensitivity of math.gl's equals
 const LNGLAT_TOLERANCE = 1e-6;
 const ALT_TOLERANCE = 1e-5;
 const OFFSET_TOLERANCE = 1e-5;
 
+const DEGREES_TO_RADIANS = Math.PI / 180;
+
 /* eslint-disable */
 const TEST_VIEWPORTS = [
   {
@@ -276,6 +279,21 @@ test('WebMercatorViewport.subViewports', t => {
   t.end();
 });
 
+test('WebMercatorViewport.projectionMatrix', t => {
+  const opts = {...TEST_VIEWPORTS[0]};
+
+  const fovy = 25;
+  const projectionMatrix = new Matrix4().perspective({
+    fovy: fovy * DEGREES_TO_RADIANS,
+    aspect: opts.width / opts.height,
+    near: 0.1,
+    far: 10
+  });
+  let viewport = new WebMercatorViewport({projectionMatrix, ...opts});
+  t.deepEqual(viewport.fovy, fovy, 'fovy is passed through');
+  t.end();
+});
+
 function getCulling(p, planes) {
   let outDir = null;
   p = new Vector3(p);