3d-tiles: Port Geodan THREE.js example (#419)

visgl · Sep 20, 2019 · e976dd3 · e976dd3
1 parent b9a65ab
commit e976dd3
Show file tree

Hide file tree

Showing 9 changed files with 600 additions and 0 deletions.
diff --git a/examples/3d-tiles-threejs/LICENSE b/examples/3d-tiles-threejs/LICENSE
@@ -0,0 +1,30 @@
+BSD 3-Clause License
+
+Copyright (c) 2019, Geodan
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
diff --git a/examples/3d-tiles-threejs/app.js b/examples/3d-tiles-threejs/app.js
@@ -0,0 +1,39 @@
+/* global mapboxgl */ // Imported via <script> tag
+import Mapbox3DTilesLayer from './mapbox-3d-tiles-layer/mapbox-3d-tiles-layer';
+
+// TODO - Add your mapbox token here
+mapboxgl.accessToken = process.env.MapboxAccessToken; // eslint-disable-line
+
+const BASE_TILESET_URL = 'https://raw.githubusercontent.com/uber-common/deck.gl-data/master';
+const ROTTERDAM_TILESET_URL = `${BASE_TILESET_URL}/3d-tiles/geodan/rotterdam/tileset.json`;
+const AHN_TILESET_URL = `${BASE_TILESET_URL}/3d-tiles/geodan/ahn/tileset.json`;
+
+// Load the mapbox map
+const map = new mapboxgl.Map({
+  container: 'map',
+  style: 'mapbox://styles/mapbox/dark-v10?optimize=true',
+  center: [4.48732, 51.90217],
+  zoom: 14.3,
+  bearing: 0,
+  pitch: 45,
+  hash: true
+});
+
+map.on('style.load', function() {
+  const rotterdam = new Mapbox3DTilesLayer({
+    id: 'rotterdam',
+    url: ROTTERDAM_TILESET_URL,
+    color: 0x0033aa,
+    opacity: 0.5
+  });
+  map.addLayer(rotterdam, 'waterway-label');
+
+  const ahn = new Mapbox3DTilesLayer({
+    id: 'ahn',
+    url: AHN_TILESET_URL,
+    color: 0x007722,
+    opacity: 1.0,
+    pointsize: 1.0
+  });
+  map.addLayer(ahn, 'rotterdam');
+});
diff --git a/examples/3d-tiles-threejs/index.html b/examples/3d-tiles-threejs/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset='utf-8' />
+	<title>3DTile Layer for Mapbox GL JS</title>
+	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
+	<script src="./node_modules/mapbox-gl/dist/mapbox-gl.js"></script>
+	<link rel="stylesheet" type="text/css" href="./node_modules/mapbox-gl/dist/mapbox-gl.css">
+	<script src="./node_modules/three/build/three.min.js"></script>
+	<script src="./node_modules/three/examples/js/loaders/GLTFLoader.js"></script>
+	<style>
+		body { margin:0; padding:0; }
+		#map { position:absolute; top:0; bottom:0; width:100%; }
+		#controls { position:absolute; top:0; left:0; }
+	</style>
+</head>
+<body>
+	<div id='map'></div>
+	<script src="./app.js"></script>
+</body>
+</html>
+
diff --git a/examples/3d-tiles-threejs/mapbox-3d-tiles-layer/mapbox-3d-tiles-layer.js b/examples/3d-tiles-threejs/mapbox-3d-tiles-layer/mapbox-3d-tiles-layer.js
@@ -0,0 +1,120 @@
+import * as THREE from 'three';
+import {loadTileset} from '../threejs-3d-tiles/tile-parsers';
+import {transform2mapbox} from './web-mercator';
+
+export default class Mapbox3DTilesLayer {
+  constructor(params) {
+    if (!params) throw new Error('parameters missing for mapbox 3D tiles layer');
+    if (!params.id) throw new Error('id parameter missing for mapbox 3D tiles layer');
+    if (!params.url) throw new Error('url parameter missing for mapbox 3D tiles layer');
+
+    this.id = params.id;
+    this.url = params.url;
+
+    this.styleParams = {};
+    if ('color' in params) this.styleParams.color = params.color;
+    if ('opacity' in params) this.styleParams.opacity = params.opacity;
+    if ('pointsize' in params) this.styleParams.pointsize = params.pointsize;
+
+    this.loadStatus = 0;
+    this.viewProjectionMatrix = null;
+
+    this.type = 'custom';
+    this.renderingMode = '3d';
+  }
+
+  async onAdd(map, gl) {
+    this.map = map;
+    this.rootTransform = transform2mapbox([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]); // identity matrix tranformed to mapbox scale
+
+    this.renderer = new THREE.WebGLRenderer({
+      canvas: map.getCanvas(),
+      context: gl
+    });
+    this.renderer.autoClear = false;
+
+    this.camera = new THREE.Camera();
+    this.scene = new THREE.Scene();
+
+    const directionalLight = new THREE.DirectionalLight(0xffffff);
+    directionalLight.position.set(0, -70, 100).normalize();
+    this.scene.add(directionalLight);
+
+    const directionalLight2 = new THREE.DirectionalLight(0x999999);
+    directionalLight2.position.set(0, 70, 100).normalize();
+    this.scene.add(directionalLight2);
+
+    this.tileset = await loadTileset(this.url, this.styleParams);
+
+    if (this.tileset.root.transform) {
+      this.rootTransform = transform2mapbox(this.tileset.root.transform);
+    } else {
+      this.rootTransform = transform2mapbox([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]); // identity matrix tranformed to mapbox scale
+    }
+
+    if (this.tileset.root) {
+      this.scene.add(this.tileset.root.totalContent);
+    }
+
+    this.loadStatus = 1;
+
+    map.on('dragend', this.refresh.bind(this));
+    map.on('moveend', this.refresh.bind(this));
+  }
+
+  render(gl, viewProjectionMatrix) {
+    this.viewProjectionMatrix = viewProjectionMatrix;
+    const l = new THREE.Matrix4().fromArray(viewProjectionMatrix);
+    this.renderer.state.reset();
+
+    // The root tile transform is applied to the camera while rendering
+    // instead of to the root tile. This avoids precision errors.
+    this.camera.projectionMatrix = l.multiply(this.rootTransform);
+
+    this.renderer.render(this.scene, this.camera);
+
+    if (this.loadStatus === 1) {
+      // first render after root tile is loaded
+      this.loadStatus = 2;
+      const frustum = new THREE.Frustum();
+      frustum.setFromMatrix(
+        new THREE.Matrix4().multiplyMatrices(
+          this.camera.projectionMatrix,
+          this.camera.matrixWorldInverse
+        )
+      );
+
+      if (this.tileset.root) {
+        this.tileset.root.checkLoad(frustum, this._getCameraPosition());
+      }
+    }
+  }
+
+  // MAP CALLBACKS
+
+  refresh() {
+    const frustum = new THREE.Frustum();
+    frustum.setFromMatrix(
+      new THREE.Matrix4().multiplyMatrices(
+        this.camera.projectionMatrix,
+        this.camera.matrixWorldInverse
+      )
+    );
+    this.tileset.root.checkLoad(frustum, this._getCameraPosition());
+  }
+
+  // HELPERS
+
+  _getCameraPosition() {
+    if (!this.viewProjectionMatrix) {
+      return new THREE.Vector3();
+    }
+
+    const cam = new THREE.Camera();
+    const rootInverse = new THREE.Matrix4().getInverse(this.rootTransform);
+    cam.projectionMatrix.elements = this.viewProjectionMatrix;
+    cam.projectionMatrixInverse = new THREE.Matrix4().getInverse(cam.projectionMatrix); // add since three@0.103.0
+    const campos = new THREE.Vector3(0, 0, 0).unproject(cam).applyMatrix4(rootInverse);
+    return campos;
+  }
+}
diff --git a/examples/3d-tiles-threejs/mapbox-3d-tiles-layer/web-mercator.js b/examples/3d-tiles-threejs/mapbox-3d-tiles-layer/web-mercator.js
@@ -0,0 +1,24 @@
+import * as THREE from 'three';
+const WEBMERCATOR_EXTENT = 20037508.3427892;
+
+export function transform2mapbox(matrix) {
+  const min = -WEBMERCATOR_EXTENT;
+  const max = WEBMERCATOR_EXTENT;
+  const scale = 1 / (2 * WEBMERCATOR_EXTENT);
+
+  const result = matrix.slice(); // copy array
+  result[12] = (matrix[12] - min) * scale; // x translation
+  result[13] = (matrix[13] - max) * -scale; // y translation
+  result[14] = matrix[14] * scale; // z translation
+
+  return new THREE.Matrix4().fromArray(result).scale(new THREE.Vector3(scale, -scale, scale));
+}
+
+/*
+function webmercator2mapbox(x, y, z) {
+  const min = -WEBMERCATOR_EXTENT;
+  const max = WEBMERCATOR_EXTENT;
+  const range = 2 * WEBMERCATOR_EXTENT;
+  return [(x - min) / range, ((y - max) / range) * -1, z / range];
+}
+*/
diff --git a/examples/3d-tiles-threejs/package.json b/examples/3d-tiles-threejs/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "mapbox-3dtiles",
+  "description": "A loaders.gl port of Geodan's 3D Tiles layer for mapbox-gl/THREE.js",
+  "version": "0.5.0",
+  "author": "Geodan https://github.com/geodan/mapbox-3dtiles#readme",
+  "license": "BSD-3-Clause",
+  "main": "index.html",
+  "scripts": {
+    "start": "webpack-dev-server --progress --hot --open",
+    "start-local": "webpack-dev-server --env.local --progress --hot --open"
+  },
+  "dependencies": {
+    "@loaders.gl/core": "^1.3.0",
+    "@loaders.gl/3d-tiles": "^1.3.0",
+    "@loaders.gl/draco": "^1.3.0",
+    "mapbox-gl": "^1.1.1",
+    "three": "^0.106.2"
+  },
+  "devDependencies": {
+    "esm": ">=3.1.0",
+    "webpack": "^4.39.1",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.11"
+  }
+}
+