geo-layers: refactor tile-3d-layer

fix update doc Fix example Use subclass for simplemesh layer address comments Fix subclass layer address comments fix doc pass modelMatrix to layer bump loaders.gl bump loaders default loader to Tiles3DLoader fix jupyter-widget
visgl · Mar 11, 2020 · 8af7ce0 · 8af7ce0
1 parent eb6f163
commit 8af7ce0
Show file tree

Hide file tree

Showing 21 changed files with 333 additions and 266 deletions.
diff --git a/docs/layers/tile-3d-layer.md b/docs/layers/tile-3d-layer.md
@@ -1,24 +1,32 @@
 # Tile3DLayer (Experimental)
 
-The `Tile3DLayer` renders tileset data formatted according to the [3D Tiles Specification](https://www.opengeospatial.org/standards/3DTiles),
-which is supported by the [Tileset3DLoader](https://loaders.gl/modules/3d-tiles/docs/api-reference/tileset-3d-loader).
+The `Tile3DLayer` renders 3d tiles data formatted according to the [3D Tiles Specification](https://www.opengeospatial.org/standards/3DTiles) and [`ESRI I3S`](https://github.com/Esri/i3s-spec) ,
+which is supported by the [Tiles3DLoader](https://loaders.gl/modules/3d-tiles/docs/api-reference/tiles-3d-loader).
 
-Tile3DLayer is a [CompositeLayer](/docs/api-reference/composite-layer.md). Base on each tile content [format](https://github.com/AnalyticalGraphicsInc/3d-tiles/tree/master/specification#introduction), it uses either a [PointCloudLayer](/docs/layers/point-cloud-layer.md) or [ScenegraphLayer](/docs/layers/scenegraph-layer.md) to render.
+Tile3DLayer is a [CompositeLayer](/docs/api-reference/composite-layer.md). Base on each tile type, it uses a [PointCloudLayer](/docs/layers/point-cloud-layer.md), a [ScenegraphLayer](/docs/layers/scenegraph-layer.md) or [SimpleMeshLayer](/docs/layers/simple-mesh-layer.md) to render.
 
 References
 - [3D Tiles](https://github.com/AnalyticalGraphicsInc/3d-tiles/tree/master/specification).
+- [ESRI I3S](https://github.com/Esri/i3s-spec)
 
+* Load a 3D tiles dataset from ION server. [Set up Ion account](https://cesium.com/docs/tutorials/getting-started/#your-first-app);
 ```js
 import React, {Component} from 'react';
 import DeckGL from '@deck.gl/react';
+import {Tiles3DLoader} from '@loaders.gl/3d-tiles';
 import {Tile3DLayer} from '@deck.gl/geo-layers';
 
 export default class App extends Component {
-
   render() {
     const layer = new Tile3DLayer({
       id: 'tile-3d-layer',
-      data: '<path-to-your-tileset json file>',
+      data: 'https://api.cesium.com/v1/assets/49378',
+      loader: Tiles3DLoader,
+      // https://cesium.com/docs/rest-api/
+      // @loaders.gl/3d-tiles provide a handy function `getIonTilesetMetadata` (experimental) to resolve accessToken 
+      loadOptions: {
+        headers: {Authentication: `Bearer <ion_access_token_for_your_asset>`} 
+      },
       onTilesetLoad: (tileset) => {
         // Recenter to cover the tileset
         const {cartographicCenter, zoom} = tileset;
@@ -94,30 +102,30 @@ This value is only applied when [tile format](https://github.com/AnalyticalGraph
 
 ### Data Properties
 
-##### `data` (String, optional)
+##### `data` (String)
 
-* Default: null
+- A URL to fetch tiles entry point of `3D Tiles` [Tileset JSON](https://github.com/AnalyticalGraphicsInc/3d-tiles/tree/master/specification#tileset-json) file or `Indexed 3D Scene Layer` file [I3S](https://github.com/Esri/i3s-spec).
 
-- A URL to fetch tiles entry point [Tileset JSON](https://github.com/AnalyticalGraphicsInc/3d-tiles/tree/master/specification#tileset-json) file or json object of tileset.
+##### `loader` (Object)
 
-##### `_ionAssetId` (Number|String, Optional)
-##### `_ionAccessToken` (String, Optional)
+- Default [`Tiles3DLoader`](https://loaders.gl/modules/3d-tiles/docs/api-reference/tile-3d-loader)
 
-- `_ionAssetId` and `_ionAccessToken` are used to fetch ion dataset. They are experimental properties, may change in next releases. 
-
-[Set up Ion account](https://cesium.com/docs/tutorials/getting-started/#your-first-app);
+A loader which is used to decode the fetched tiles. Either a [`Tiles3DLoader`](https://loaders.gl/modules/3d-tiles/docs/api-reference/tile-3d-loader) or `I3SLoader`.
 
 ##### `loadOptions` (Object, Optional)
 
 - Default: `{throttleRequests: true}`
 
 Tile3DLayer constructs a [`Tileset3D`](https://loaders.gl/modules/3d-tiles/docs/api-reference/tileset-3d) object after fetching tilset json file. `loadOptions` is an experimental prop to provide Tileset options [Tileset3D options](https://loaders.gl/modules/3d-tiles/docs/api-reference/tileset-3d#options). Among these options, `onTileLoad`, `onTileUnload` and `onTileError` should be passed as layer props.
 
+Note: If `headers` are needed to request data from the server, use `loadOptions.headers`.
+
 ```js
 const layer = new Tile3DLayer({
   data: '<path-to-your-tileset json file>',
   loadOptions: {
-    throttleRequests: false
+    throttleRequests: false,
+    headers: {}
   }
 })
 ```
@@ -146,13 +154,13 @@ When [`picking`](/docs/developer-guide/custom-layers/picking.md) is enabled, `in
 
 ##### `onTileLoad` (Function, optional)
 
-`onTileLoad` is a function that is called when a tile in the tileset hierarchy is loaded. [Tile3DHeader](https://github.com/uber-web/loaders.gl/blob/master/docs/api-reference/3d-tiles/tileset-3d.md#root--tile3dheader) object is passed in the callback.
+`onTileLoad` is a function that is called when a tile in the tileset hierarchy is loaded. [Tile3D](https://github.com/uber-web/loaders.gl/blob/master/docs/api-reference/tiles/tile-3d.md) object is passed in the callback.
 
 - Default: `onTileLoad: (tileHeader) => {}`
 
 ##### `onTileUnload` (Function, optional)
 
-`onTileUnload` is a function that is called when a tile is unloaded. [Tile3DHeader](https://github.com/uber-web/loaders.gl/blob/master/docs/api-reference/3d-tiles/tileset-3d.md#root--tile3dheader) object is passed in the callback.
+`onTileUnload` is a function that is called when a tile is unloaded. [Tile3D](https://github.com/uber-web/loaders.gl/blob/master/docs/api-reference/tiles/tileset-3d.md#root--tile3dheader) object is passed in the callback.
 
 - Default: `onTileUnload: (tileHeader) => {}`
 
@@ -171,6 +179,7 @@ The Tile3DLayer renders the following sublayers based on tile [format](https://g
 * `scenegraph` - a [ScenegraphLayer](/docs/layers/scenegraph-layer.md) rendering all the tiles with Batched 3D Model format (`b3dm`) or Instanced 3D Model format (`i3dm`).
   - `_lighting` is default to `pbr`.
 * `pointcloud` - a [PointCloudLayer](/docs/layers/point-cloud-layer.md) rendering all the tiles with Point Cloud format (`pnts`).
+* `mesh` - a [SimpleMeshLayer](/docs/layers/simple-mesh-layer.md) rendering all the tiles ESRI `MeshPyramids` data.
 
 Follow [CompositeLayer](/docs/api-reference/composite-layer.md#_subLayerProp) and example in this layer doc to see how to override sub layer props.
 

diff --git a/docs/upgrade-guide.md b/docs/upgrade-guide.md
@@ -6,6 +6,11 @@
 
 - `s2-geometry` is no longer a dependency of `@deck.gl/geo-layers`.
 
+##### Tile3DLayer
+
+- A new prop `loader` need be provided, one of `Tiles3DLoader` (`@loaders.gl/3d-tiles`) or `I3SLoader` (`@loaders.gl/i3s`).
+- `_ionAccessId` and `_ionAccesToken` are removed. To render an ion dataset with `Tile3DLayer`, pass the ion dataset url to prop `data`, and `loadOptions.headers` with Cesium authentication token.
+
 ## Upgrading from deck.gl v7.x to v8.0
 
 ### Breaking Changes

diff --git a/examples/layer-browser/package.json b/examples/layer-browser/package.json
@@ -9,8 +9,8 @@
     "start-local-production": "webpack-dev-server --env.local --env.production --progress --hot --open"
   },
   "dependencies": {
-    "@loaders.gl/ply": "^2.0.2",
-    "@loaders.gl/gltf": "^2.0.2",
+    "@loaders.gl/ply": "^2.1.0-alpha.7",
+    "@loaders.gl/gltf": "^2.1.0-alpha.7",
     "@luma.gl/experimental": "^8.1.0-alpha.2",
     "@luma.gl/debug": "^8.1.0-alpha.2",
     "colorbrewer": "^1.0.0",

diff --git a/examples/playground/package.json b/examples/playground/package.json
@@ -9,8 +9,8 @@
   },
   "dependencies": {
     "deck.gl": "^8.0.0",
-    "@loaders.gl/csv": "^2.0.2",
-    "@loaders.gl/core": "^2.0.2",
+    "@loaders.gl/csv": "^2.1.0-alpha.6",
+    "@loaders.gl/core": "^2.1.0-alpha.6",
     "@loaders.gl/draco": "^2.0.2",
     "@luma.gl/constants": "^8.1.0-alpha.2",
     "brace": "^0.11.1",

diff --git a/examples/website/3d-tiles/app.js b/examples/website/3d-tiles/app.js
@@ -1,4 +1,4 @@
-import React, {PureComponent} from 'react';
+import React, {Component} from 'react';
 import {render} from 'react-dom';
 import {StaticMap} from 'react-map-gl';
 import DeckGL from '@deck.gl/react';
@@ -7,10 +7,12 @@ import {Tile3DLayer} from '@deck.gl/geo-layers';
 import {registerLoaders} from '@loaders.gl/core';
 // To manage dependencies and bundle size, the app must decide which supporting loaders to bring in
 import {DracoWorkerLoader} from '@loaders.gl/draco';
-
+import {Tiles3DLoader, _getIonTilesetMetadata as getIonTilesetMetadata} from '@loaders.gl/3d-tiles';
 registerLoaders([DracoWorkerLoader]);
 // Set your mapbox token here
 const MAPBOX_TOKEN = process.env.MapboxAccessToken; // eslint-disable-line
+
+const ION_ASSET_ID = 43978;
 const ION_TOKEN =
   'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlYWMxMzcyYy0zZjJkLTQwODctODNlNi01MDRkZmMzMjIxOWIiLCJpZCI6OTYyMCwic2NvcGVzIjpbImFzbCIsImFzciIsImdjIl0sImlhdCI6MTU2Mjg2NjI3M30.1FNiClUyk00YH_nWfSGpiQAjR5V2OvREDq1PJ5QMjWQ';
 
@@ -25,24 +27,26 @@ const INITIAL_VIEW_STATE = {
   zoom: 17
 };
 
-export default class App extends PureComponent {
+export default class App extends Component {
   constructor(props) {
     super(props);
-
     this.state = {
       initialViewState: INITIAL_VIEW_STATE,
       attributions: []
     };
+  }
 
-    this._onTilesetLoad = this._onTilesetLoad.bind(this);
+  componentDidMount() {
+    this._loadIonData();
   }
 
-  // Called by Tile3DLayer when a new tileset is loaded
-  _onTilesetLoad(tileset) {
-    this.setState({attributions: tileset.credits.attributions});
-    this._centerViewOnTileset(tileset);
+  async _loadIonData() {
+    const ionMetadata = await getIonTilesetMetadata(ION_TOKEN, ION_ASSET_ID);
+    this.setState({
+      ionMetadata
+    });
     if (this.props.updateAttributions) {
-      this.props.updateAttributions(tileset.credits.attributions);
+      this.props.updateAttributions(ionMetadata.attributions);
     }
   }
 
@@ -56,20 +60,26 @@ export default class App extends PureComponent {
         // Update deck.gl viewState, moving the camera to the new tileset
         longitude: cartographicCenter[0],
         latitude: cartographicCenter[1],
-        zoom: zoom + 1.5, // TODO - remove adjustment when Tileset3D calculates correct zoom
+        zoom,
         bearing: INITIAL_VIEW_STATE.bearing,
         pitch: INITIAL_VIEW_STATE.pitch
       }
     });
   }
 
   _renderTile3DLayer() {
+    if (!this.state.ionMetadata) {
+      return null;
+    }
+    const {url, headers} = this.state.ionMetadata;
+
     return new Tile3DLayer({
       id: 'tile-3d-layer',
-      _ionAssetId: 43978,
-      _ionAccessToken: ION_TOKEN,
       pointSize: 2,
-      onTilesetLoad: this._onTilesetLoad
+      data: url,
+      loader: Tiles3DLoader,
+      loadOptions: {headers},
+      onTilesetLoad: this._centerViewOnTileset.bind(this)
     });
   }
 

diff --git a/examples/website/3d-tiles/package.json b/examples/website/3d-tiles/package.json
@@ -6,18 +6,19 @@
   },
   "dependencies": {
     "deck.gl": "^8.0.0",
-    "@loaders.gl/draco": "^2.0.2",
+    "@loaders.gl/core": "^2.1.0-alpha.7",
+    "@loaders.gl/draco": "^2.1.0-alpha.7",
+    "@loaders.gl/3d-tiles": "^2.1.0-alpha.7",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "react-map-gl": "^5.0.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.0.0",
-    "@babel/core": "^7.4.0",
-    "@babel/preset-react": "^7.0.0",
-    "babel-loader": "^8.0.5",
-    "webpack": "^4.39.1",
+    "@babel/core": "^7.8.7",
+    "@babel/preset-react": "^7.8.3",
+    "babel-loader": "^8.0.6",
+    "webpack": "^4.20.2",
     "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.1.11"
+    "webpack-dev-server": "^3.1.1"
   }
 }
diff --git a/examples/website/3d-tiles/webpack.config.js b/examples/website/3d-tiles/webpack.config.js
@@ -14,11 +14,6 @@ const CONFIG = {
     library: 'App'
   },
 
-  // this is required by draco
-  node: {
-    fs: 'empty'
-  },
-
   module: {
     rules: [
       {

diff --git a/examples/website/mesh/package.json b/examples/website/mesh/package.json
@@ -7,7 +7,7 @@
     "start-local": "webpack-dev-server --env.local --progress --hot --open"
   },
   "dependencies": {
-    "@loaders.gl/obj": "^2.0.2",
+    "@loaders.gl/obj": "^2.1.0-alpha.7",
     "deck.gl": "^8.0.0",
     "react": "^16.3.0",
     "react-dom": "^16.3.0",

diff --git a/examples/website/point-cloud/package.json b/examples/website/point-cloud/package.json
@@ -7,8 +7,8 @@
     "start-local": "webpack-dev-server --env.local --progress --hot --open"
   },
   "dependencies": {
-    "@loaders.gl/las": "^2.0.2",
-    "@loaders.gl/ply": "^2.0.2",
+    "@loaders.gl/las": "^2.1.0-alpha.7",
+    "@loaders.gl/ply": "^2.1.0-alpha.7",
     "deck.gl": "^8.0.0",
     "react": "^16.3.0",
     "react-dom": "^16.3.0"

diff --git a/examples/website/scenegraph-layer/package.json b/examples/website/scenegraph-layer/package.json
@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "deck.gl": "^8.0.0",
-    "@loaders.gl/gltf": "^2.0.2",
+    "@loaders.gl/gltf": "^2.1.0-alpha.7",
     "react": "^16.3.0",
     "react-dom": "^16.3.0",
     "react-map-gl": "^5.0.0"

diff --git a/modules/core/package.json b/modules/core/package.json
@@ -32,8 +32,8 @@
     "prepublishOnly": "npm run build-debugger && npm run build-bundle && npm run build-bundle -- --env.dev"
   },
   "dependencies": {
-    "@loaders.gl/core": "^2.1.0-alpha.4",
-    "@loaders.gl/images": "^2.1.0-alpha.4",
+    "@loaders.gl/core": "^2.1.0-alpha.7",
+    "@loaders.gl/images": "^2.1.0-alpha.7",
     "@luma.gl/core": "^8.1.0-alpha.4",
     "@math.gl/web-mercator": "^3.1.3",
     "gl-matrix": "^3.0.0",

diff --git a/modules/geo-layers/package.json b/modules/geo-layers/package.json
@@ -30,10 +30,12 @@
     "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env.dev"
   },
   "dependencies": {
-    "@loaders.gl/3d-tiles": "2.1.0-alpha.4",
-    "@loaders.gl/core": "^2.0.4",
-    "@loaders.gl/mvt": "^2.1.0-alpha.5",
-    "@loaders.gl/terrain": "^2.1.0-alpha.4",
+    "@loaders.gl/core": "^2.1.0-alpha.7",
+    "@loaders.gl/mvt": "^2.1.0-alpha.7",
+    "@loaders.gl/terrain": "^2.1.0-alpha.7",
+    "@loaders.gl/3d-tiles": "^2.1.0-alpha.7",
+    "@loaders.gl/tiles": "^2.1.0-alpha.7",
+    "@math.gl/core": "^3.1.3",
     "@math.gl/web-mercator": "^3.1.3",
     "h3-js": "^3.6.0",
     "long": "^3.2.0",
@@ -43,6 +45,6 @@
     "@deck.gl/core": "^8.0.0",
     "@deck.gl/layers": "^8.0.0",
     "@deck.gl/mesh-layers": "^8.0.0",
-    "@loaders.gl/core": "^2.1.0-alpha.4"
+    "@loaders.gl/core": "^2.1.0-alpha.7"
   }
 }