render tests

visgl · Jun 12, 2020 · 94612d1 · 94612d1
1 parent 3749b83
commit 94612d1
Show file tree

Hide file tree

Showing 11 changed files with 115 additions and 22 deletions.
diff --git a/docs/api-reference/globe-view.md b/docs/api-reference/globe-view.md
@@ -13,11 +13,13 @@ In the initial release, this class mainly addresses the need to render an overvi
 
 - No support for rotation (`pitch` or `bearing`). The camera always points towards the center of the earth, with north up.
 - No high-precision rendering at high zoom levels (> 12). Features at the city-block scale may not be rendered accurately.
-- Only supports `COORDINATE_SYSTEM.LNGLAT`.
+- Only supports `COORDINATE_SYSTEM.LNGLAT` (default of the `coordinateSystem` prop).
 - These layers currently do not work in this view:
   + Aggregation layers: `HeatmapLayer`, `ContourLayer`
   + Tiled layers: `TerrainLayer`, `MVTLayer`
 
+When GeoJson paths and polygons are rendered with this view, the straight lines and flat surfaces are warped to the surface of the globe. Note that the warped edges still correspond to straight lines in the Mercator projection. To draw lines along the shortest distance on the globe, use the [GreatCircleLayer](/docs/layers/great-circle-layer.md).
+
 
 ## Constructor
 
@@ -37,7 +39,7 @@ To render, `GlobeView` needs to be used together with a `viewState` with the fol
 - `zoom` (`Number`) - zoom level
 - `maxZoom` (`Number`, optional) - max zoom level. Default `20`.
 - `minZoom` (`Number`, optional) - min zoom level. Default `0`.
-- `resolution` (`Number`, optional) - the resolution at which to turn flat features into 3D meshes, in degrees. Default `10`.
+- `resolution` (`Number`, optional) - the resolution at which to turn flat features into 3D meshes, in degrees. Smaller numbers will generate more detailed mesh. Default `10`.
 
 
 ## GlobeController

diff --git a/modules/layers/package.json b/modules/layers/package.json
@@ -32,7 +32,7 @@
     "@loaders.gl/core": "^2.1.5",
     "@loaders.gl/images": "^2.1.5",
     "@mapbox/tiny-sdf": "^1.1.0",
-    "@math.gl/polygon": "^3.2.0-alpha.4",
+    "@math.gl/polygon": "^3.2.0-alpha.5",
     "earcut": "^2.0.6"
   },
   "peerDependencies": {

diff --git a/modules/layers/src/solid-polygon-layer/polygon.js b/modules/layers/src/solid-polygon-layer/polygon.js
@@ -212,22 +212,20 @@ export function getSurfaceIndices(normalizedPolygon, positionSize, preproject) {
   if (normalizedPolygon.holeIndices) {
     holeIndices = normalizedPolygon.holeIndices.map(positionIndex => positionIndex / positionSize);
   }
-  const positions = normalizedPolygon.positions || normalizedPolygon;
+  let positions = normalizedPolygon.positions || normalizedPolygon;
 
   if (preproject) {
-    // When tesselating lnglat coordinates, project them to the Web Mercator plane for accuracy
+    // When tesselating lnglat coordinates, project them to the common space for accuracy
     const n = positions.length;
     // Clone the array
-    const projectedPositions = new Array(positions.length);
+    positions = positions.slice();
     const p = [];
     for (let i = 0; i < n; i += positionSize) {
-      // project points to a scaled version of the web-mercator plane
-      // It doesn't matter if x and y are scaled/translated, but the relationship must be linear
       p[0] = positions[i];
       p[1] = positions[i + 1];
       const xy = preproject(p);
-      projectedPositions[i] = xy[0];
-      projectedPositions[i + 1] = xy[1];
+      positions[i] = xy[0];
+      positions[i + 1] = xy[1];
     }
   }
 

diff --git a/modules/layers/src/solid-polygon-layer/solid-polygon-layer.js b/modules/layers/src/solid-polygon-layer/solid-polygon-layer.js
@@ -328,7 +328,7 @@ export default class SolidPolygonLayer extends Layer {
               // top right - top left - bootom left - bottom right
               vertexPositions: {
                 size: 2,
-                value: new Float32Array([0, 0, 0, 1, 1, 1, 1, 0])
+                value: new Float32Array([1, 0, 0, 0, 0, 1, 1, 1])
               }
             }
           }),

diff --git a/package.json b/package.json
@@ -41,7 +41,7 @@
     "jsdom": false
   },
   "resolutions": {
-    "@math.gl/core": "3.2.0-alpha.3"
+    "@math.gl/core": "3.2.0-alpha.5"
   },
   "devDependencies": {
     "@loaders.gl/csv": "^2.1.5",

diff --git a/test/render/golden-images/path-globe.png b/test/render/golden-images/path-globe.png
diff --git a/test/render/golden-images/polygon-globe-extruded.png b/test/render/golden-images/polygon-globe-extruded.png
diff --git a/test/render/golden-images/polygon-globe.png b/test/render/golden-images/polygon-globe.png
diff --git a/test/render/test-cases/path-layer.js b/test/render/test-cases/path-layer.js
@@ -1,4 +1,4 @@
-import {COORDINATE_SYSTEM} from '@deck.gl/core';
+import {COORDINATE_SYSTEM, _GlobeView as GlobeView} from '@deck.gl/core';
 import {PathLayer} from '@deck.gl/layers';
 import {PathStyleExtension} from '@deck.gl/extensions';
 import {zigzag, zigzag3D, meterPaths, positionOrigin} from 'deck.gl-test/data';
@@ -160,5 +160,45 @@ export default [
       })
     ],
     goldenImage: './test/render/golden-images/path-offset.png'
+  },
+  {
+    name: 'path-globe',
+    views: [new GlobeView()],
+    viewState: {
+      latitude: 0,
+      longitude: 0,
+      zoom: 0
+    },
+    layers: [
+      new PathLayer({
+        id: 'path-globe',
+        data: getGraticules(30),
+        getPath: d => d,
+        widthMinPixels: 2
+      })
+    ],
+    goldenImage: './test/render/golden-images/path-globe.png'
   }
 ];
+
+function getGraticules(resolution) {
+  const graticules = [];
+  for (let lat = 0; lat < 90; lat += resolution) {
+    const path1 = [];
+    const path2 = [];
+    for (let lon = -180; lon <= 180; lon += 90) {
+      path1.push([lon, lat]);
+      path2.push([lon, -lat]);
+    }
+    graticules.push(path1);
+    graticules.push(path2);
+  }
+  for (let lon = -180; lon < 180; lon += resolution) {
+    const path = [];
+    for (let lat = -90; lat <= 90; lat += 90) {
+      path.push([lon, lat]);
+    }
+    graticules.push(path);
+  }
+  return graticules;
+}
diff --git a/test/render/test-cases/polygon-layer.js b/test/render/test-cases/polygon-layer.js
@@ -1,4 +1,4 @@
-import {OrthographicView, COORDINATE_SYSTEM} from '@deck.gl/core';
+import {OrthographicView, COORDINATE_SYSTEM, _GlobeView as GlobeView} from '@deck.gl/core';
 import {PolygonLayer} from '@deck.gl/layers';
 import {Fp64Extension, PathStyleExtension} from '@deck.gl/extensions';
 
@@ -75,5 +75,58 @@ export default [
       })
     ],
     goldenImage: './test/render/golden-images/polygon-dash.png'
+  },
+  {
+    name: 'polygon-globe',
+    views: [new GlobeView()],
+    viewState: {
+      latitude: 0,
+      longitude: 50,
+      zoom: 0
+    },
+    layers: [
+      new PolygonLayer({
+        id: 'polygon-globe',
+        data: [
+          [
+            [[60, 40], [30, -30], [-60, -40], [-30, 30]],
+            [[10, 10], [20, -20], [-10, -10], [-20, 20]]
+          ]
+        ],
+        getPolygon: d => d,
+        getLineColor: [0, 0, 0],
+        getFillColor: [160, 160, 0],
+        widthMinPixels: 4
+      })
+    ],
+    goldenImage: './test/render/golden-images/polygon-globe.png'
+  },
+  {
+    name: 'polygon-globe-extruded',
+    views: [new GlobeView()],
+    viewState: {
+      latitude: 0,
+      longitude: 50,
+      zoom: 0
+    },
+    layers: [
+      new PolygonLayer({
+        id: 'polygon-globe',
+        data: [
+          [
+            [[60, 40], [30, -30], [-60, -40], [-30, 30]],
+            [[10, 10], [20, -20], [-10, -10], [-20, 20]]
+          ]
+        ],
+        getPolygon: d => d,
+        extruded: true,
+        wireframe: true,
+        getElevation: 1e6,
+        getLineColor: [0, 0, 0],
+        getFillColor: [160, 160, 0],
+        widthMinPixels: 4
+      })
+    ],
+    goldenImage: './test/render/golden-images/polygon-globe-extruded.png'
   }
 ];
diff --git a/yarn.lock b/yarn.lock
@@ -1968,10 +1968,10 @@
   resolved "https://registry.yarnpkg.com/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz#497c67a1cef50d1a2459ba60f315e448d2ad87fe"
   integrity sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==
 
-"@math.gl/core@3.1.3", "@math.gl/core@3.1.5", "@math.gl/core@3.2.0-alpha.3", "@math.gl/core@^3.1.3", "@math.gl/core@^3.2.0-alpha.3":
-  version "3.2.0-alpha.3"
-  resolved "https://registry.yarnpkg.com/@math.gl/core/-/core-3.2.0-alpha.3.tgz#ea9b7b8f37c6186c05b77e9c2e34bd52e31c8f18"
-  integrity sha512-5rmBHggjMx7FwTBNmOSj3mo7Oxv0n+ZRR4Cg0Ikmg2Eb1wHFCOrejm15P0paOVyQuMiZ5KwWqPnNqxQoC46fUw==
+"@math.gl/core@3.1.3", "@math.gl/core@3.1.5", "@math.gl/core@3.2.0-alpha.3", "@math.gl/core@3.2.0-alpha.5", "@math.gl/core@^3.1.3", "@math.gl/core@^3.2.0-alpha.3":
+  version "3.2.0-alpha.5"
+  resolved "https://registry.yarnpkg.com/@math.gl/core/-/core-3.2.0-alpha.5.tgz#5437142247c6f6434704c6fdf3f87ed5648c620f"
+  integrity sha512-NWKYZBjLRezhgPLNF2GXOhloF+z/VEkbQs3Z7v5LjpTU25N3VTiUxXqZxjSxZkAmzl3v00gi13VI7xPf9ssyMA==
   dependencies:
     "@babel/runtime" "^7.0.0"
     gl-matrix "^3.0.0"
@@ -2003,10 +2003,10 @@
     "@math.gl/core" "3.1.3"
     gl-matrix "^3.0.0"
 
-"@math.gl/polygon@^3.2.0-alpha.3":
-  version "3.2.0-alpha.4"
-  resolved "https://registry.yarnpkg.com/@math.gl/polygon/-/polygon-3.2.0-alpha.4.tgz#72a5aebbad10cb4a702425f04c5359c576336a61"
-  integrity sha512-LJUbw+FS587VoyEYEGNwR/87YPwR0DEbIuDCirthj6iMDcvpzcXLm7mEl+h65SJ89Pi1+yIveMZXAmR6pbWDYQ==
+"@math.gl/polygon@^3.2.0-alpha.5":
+  version "3.2.0-alpha.5"
+  resolved "https://registry.yarnpkg.com/@math.gl/polygon/-/polygon-3.2.0-alpha.5.tgz#3e35f1c7b328c2c0ae6e86b626b9f46c2424dfc4"
+  integrity sha512-JnChv7axSfubG7z1b+0R57FG5KbyZu2e9r8PiKsnfvVS34L+c/BeHT9abJEDz0QK7C/g7T3AG6HxOlkaI/ehDA==
   dependencies:
     "@math.gl/core" "3.1.3"