- #146 Update to Mapbox 2.2

- #225 Mapbox 2.2: Update Depth calculation keeping compatibility with previous versions - #226 Mapbox 2.2: Update all the examples (14-buildingshadow & 17-azuremaps not updated) #### 📝 Documentation - Updated [documentation](/examples/readme.md) (Added a note on the examples updated to Mapbox 2.2.0)
jscastro76 · Apr 7, 2021 · 6ecf9a9 · 6ecf9a9
1 parent e1f169b
commit 6ecf9a9
Show file tree

Hide file tree

Showing 24 changed files with 265 additions and 151 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,7 +5,13 @@ Minor version by [@jscastro76](https://github.com/jscastro76), some enhancements
 #### :sparkles: Enhancements
 - #224 Ignore worker_threads
   - #223 Can't resolve worker threads    
-
+- #146 Update to Mapbox 2.2 
+  - #225 Mapbox 2.2: Update Depth calculation keeping compatibility with previous versions 
+  - #226 Mapbox 2.2: Update all the examples (14-buildingshadow & 17-azuremaps not updated)
+
+#### :pencil: Documentation
+- Updated [documentation](/examples/readme.md) (Added a note on the examples updated to Mapbox 2.2.0)
+
 - - - 
 
 ## 2.2.1

diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@
 [![NPM license](http://img.shields.io/npm/l/threebox-plugin.svg?style=flat-square)](https://www.npmjs.org/package/threebox-plugin)
 ![npm](https://img.shields.io/npm/dt/threebox-plugin?style=social)
 
-A **[*Three.js*](https://threejs.org/) (r127)** plugin for **[*Mapbox GL JS*](https://docs.mapbox.com/mapbox-gl-js/examples/)** and **[*Azure Maps*](https://azure.microsoft.com/en-us/services/azure-maps/)** using the [`CustomLayerInterface`](https://docs.mapbox.com/mapbox-gl-js/api/properties/#customlayerinterface) feature. Provides convenient methods to manage objects in lnglat coordinates, and to synchronize the map and scene cameras.
+A **[*Three.js*](https://threejs.org/)** plugin for **[*Mapbox GL JS*](https://docs.mapbox.com/mapbox-gl-js/examples/)** and **[*Azure Maps*](https://azure.microsoft.com/en-us/services/azure-maps/)** using the [`CustomLayerInterface`](https://docs.mapbox.com/mapbox-gl-js/api/properties/#customlayerinterface) feature. Provides convenient methods to manage objects in lnglat coordinates, and to synchronize the map and scene cameras.
 <img alt="threebox" src="docs/gallery.jpg">
 
 <br>
@@ -52,8 +52,8 @@ npm i threebox-plugin
 
 Only in this fork, there is a list of new features implemented on top of the amazing work from [@peterqliu](https://github.com/peterqliu/threebox/):
 - Updated to **Three.js r127**.
-- Updated to Mapbox-gl-js v1.11.1.
-- Updated to Azure Maps v2.0.31.
+- Updated to **Mapbox-gl-js v2.2.0**.
+- Updated to **Azure Maps v2.0.31**.
 - [+20 examples](https://github.com/jscastro76/threebox/tree/master/examples) with all the new features.
 - Support for multiple 3D format objects (FBX, GLTF/GLB, Collada, OBJ/MTL).
 - Support for 3D extruded shapes from [GeoJson](https://geojson.org/) features or points array.
@@ -99,9 +99,9 @@ All the [**Threebox Documentation**](/docs/Threebox.md) has been completely upda
 
 ## Compatibility/Dependencies
 
-- **Three.js r127** (already bundled into the Threebox build). If desired, other versions can be swapped in and rebuilt [here](https://github.com/jscastro76/threebox/blob/master/src/three.js), though compatibility is not guaranteed.
-- Mapbox-gl-js v1.11.1.
-- Azure Maps v2.0.31.
+- **Three.js r127**. (already bundled into the Threebox build). If desired, other versions can be swapped in and rebuilt [here](https://github.com/jscastro76/threebox/blob/master/src/three.js), though compatibility is not guaranteed. **(WARNING: v118.3 breaks compatibility in some cases)**
+- **Mapbox-gl-js v1.11.1. or v.2.0.1**
+- **Azure Maps v2.0.31.**
 
 <br>
 

diff --git a/dist/threebox.js b/dist/threebox.js
@@ -1863,19 +1863,46 @@ CameraSync.prototype = {
             return;
         }
 
-        // Furthest distance optimized by @jscastro76
         const t = this.map.transform;
+        let farZ = 0;
+        let furthestDistance = 0;
+        this.state.fov = t._fov;
+        this.halfFov = this.state.fov / 2;
         const groundAngle = Math.PI / 2 + t._pitch;
-        this.cameraToCenterDistance = 0.5 / Math.tan(this.halfFov) * t.height;
-        this.state.cameraTranslateZ = new THREE.Matrix4().makeTranslation(0, 0, this.cameraToCenterDistance);
-        const topHalfSurfaceDistance = Math.sin(this.halfFov) * this.state.cameraToCenterDistance / Math.sin(Math.PI - groundAngle - this.halfFov);
         const pitchAngle = Math.cos((Math.PI / 2) - t._pitch); //pitch seems to influence heavily the depth calculation and cannot be more than 60 = PI/3
+        this.cameraToCenterDistance = 0.5 / Math.tan(this.halfFov) * t.height;
+
+        if (window.mapboxgl && parseFloat(window.mapboxgl.version) >= 2.0) {
+            // mapbox version >= 2.0
+            const worldSize = this.worldSize(t);
+            const pixelsPerMeter = this.mercatorZfromAltitude(1, t.center.lat) * worldSize;
+            const fovAboveCenter = this.fovAboveCenter(t);
+
+            // Adjust distance to MSL by the minimum possible elevation visible on screen,
+            // this way the far plane is pushed further in the case of negative elevation.
+            const minElevationInPixels = 0; // TODO test with elevation exageration  this.elevation ? this.elevation.getMinElevationBelowMSL() * pixelsPerMeter : 0;
+            const cameraToSeaLevelDistance = ((t._camera.position[2] * worldSize) - minElevationInPixels) / Math.cos(t._pitch);
+            const topHalfSurfaceDistance = Math.sin(fovAboveCenter) * cameraToSeaLevelDistance / Math.sin(utils.clamp(Math.PI - groundAngle - fovAboveCenter, 0.01, Math.PI - 0.01));
+
+            // Calculate z distance of the farthest fragment that should be rendered.
+            furthestDistance = pitchAngle * topHalfSurfaceDistance + cameraToSeaLevelDistance;
+
+            // Add a bit extra to avoid precision problems when a fragment's distance is exactly `furthestDistance`
+            const horizonDistance = cameraToSeaLevelDistance * (1 / t._horizonShift);
+            farZ = Math.min(furthestDistance * 1.01, horizonDistance);
+        } else {
+            // mapbox version < 2.0 or azure maps
+            // Furthest distance optimized by @jscastro76
+            const topHalfSurfaceDistance = Math.sin(this.halfFov) * this.state.cameraToCenterDistance / Math.sin(Math.PI - groundAngle - this.halfFov);
+
+            // Calculate z distance of the farthest fragment that should be rendered. 
+            furthestDistance = pitchAngle * topHalfSurfaceDistance + this.state.cameraToCenterDistance;
 
-        // Calculate z distance of the farthest fragment that should be rendered. 
-        const furthestDistance = pitchAngle * topHalfSurfaceDistance + this.state.cameraToCenterDistance;
+            // Add a bit extra to avoid precision problems when a fragment's distance is exactly `furthestDistance`
+            farZ = furthestDistance * 1.01;
 
-        // Add a bit extra to avoid precision problems when a fragment's distance is exactly `furthestDistance`
-        const farZ = furthestDistance * 1.01;
+        }
+        this.state.cameraTranslateZ = new THREE.Matrix4().makeTranslation(0, 0, this.cameraToCenterDistance);
 
         // someday @ansis set further near plane to fix precision for deckgl,so we should fix it to use mapbox-gl v1.3+ correctly
         // https://github.com/mapbox/mapbox-gl-js/commit/5cf6e5f523611bea61dae155db19a7cb19eb825c#diff-5dddfe9d7b5b4413ee54284bc1f7966d
@@ -1913,8 +1940,26 @@ CameraSync.prototype = {
             .premultiply(scale)
             .premultiply(translateMap)
 
+        // utils.prettyPrintMatrix(this.camera.projectionMatrix.elements);
+        this.map.fire('CameraSynced', { detail: { nearZ: nearZ, farZ: farZ, pitch: t._pitch, angle: t.angle, furthestDistance: furthestDistance, maxFurthestDistance: this.state.maxFurthestDistance, cameraToCenterDistance: this.cameraToCenterDistance, t: this.map.transform, tbProjMatrix: this.camera.projectionMatrix.elements, tbWorldMatrix: this.world.matrix.elements, cameraSyn: CameraSync } });
+
+    },
+
+    worldSize(transform) {
+        return transform.tileSize * transform.scale;
     },
 
+    fovAboveCenter(transform) {
+        return transform._fov * (0.5 + transform.centerOffset.y / transform.height);
+    },
+
+    mercatorZfromAltitude(altitude, lat) {
+        return altitude / this.circumferenceAtLatitude(lat);
+    },
+
+    circumferenceAtLatitude(latitude) {
+        return ThreeboxConstants.EARTH_CIRCUMFERENCE * Math.cos(latitude * Math.PI / 180);
+    },
 
     calcCameraMatrix(pitch, angle, trz) {
         const t = this.map.transform;

diff --git a/dist/threebox.min.js b/dist/threebox.min.js
diff --git a/examples/01-basic.html b/examples/01-basic.html
@@ -1,9 +1,9 @@
 <!doctype html>
 <head>
 	<title>Sphere Example</title>
-	<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>
-	<link href="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css" rel="stylesheet" />
-	<script src="../dist/threebox.min.js" type="text/javascript"></script>
+	<link href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet">
+	<script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
+	<script src="../dist/threebox.js" type="text/javascript"></script>
 	<link href="../dist/threebox.css" rel="stylesheet" type="text/css" />
 	<script src="config.js"></script>
 	<style>

diff --git a/examples/02-line.html b/examples/02-line.html
@@ -4,8 +4,8 @@
 	<script src="../dist/threebox.js" type="text/javascript"></script>
 	<link href="../dist/threebox.css" rel="stylesheet" />
 	<script src="config.js"></script>
-	<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>
-	<link href="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css" rel="stylesheet" />
+	<link href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet">
+	<script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
 	<style>
 		body, html {
 			width: 100%;

diff --git a/examples/03-tube.html b/examples/03-tube.html
@@ -1,8 +1,8 @@
 <!doctype html>
 <head>
 	<title>Tube Example</title>
-	<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>
-	<link href="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css" rel="stylesheet" />
+	<link href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet">
+	<script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
 	<script src="../dist/threebox.js" type="text/javascript"></script>
 	<link href="../dist/threebox.css" rel="stylesheet" />
 	<script src="config.js"></script>

diff --git a/examples/04-mercator.html b/examples/04-mercator.html
@@ -4,8 +4,8 @@
     <script src="../dist/threebox.js" type="text/javascript"></script>
     <link href="../dist/threebox.css" rel="stylesheet" />
     <script src="config.js"></script>
-    <script src="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>
-    <link href="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css" rel="stylesheet" />
+    <link href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet">
+    <script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
     <style>
         body, html {
             width: 100%;
@@ -47,7 +47,8 @@
             map,
             map.getCanvas().getContext('webgl'),
             {
-                defaultLights: true
+                defaultLights: true,
+                enableSelectingObjects: true
             }
         );
 

diff --git a/examples/05-logistics.html b/examples/05-logistics.html
@@ -4,8 +4,8 @@
 	<script src="../dist/threebox.js" type="text/javascript"></script>
 	<link href="../dist/threebox.css" rel="stylesheet" />
 	<script src="config.js"></script>
-	<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>
-	<link href="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css" rel="stylesheet" />
+	<link href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet">
+	<script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
 	<script src="https://d3js.org/d3.v5.min.js"></script>
 	<style>
 		body, html {

diff --git a/examples/06-object3d.html b/examples/06-object3d.html
@@ -1,23 +1,23 @@
 <!doctype html>
 <head>
-    <title>Threebox Object3D Example</title>
-    <script src="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>
-    <link href="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css" rel="stylesheet" />
-    <script src="../dist/threebox.js" type="text/javascript"></script>
-    <link href="../dist/threebox.css" rel="stylesheet" />
-    <script src="config.js"></script>
-    <style>
-        body, html {
-            width: 100%;
-            height: 100%;
-            margin: 0;
-        }
-
-        #map {
-            width: 100%;
-            height: 100%;
-        }
-    </style>
+	<title>Threebox Object3D Example</title>
+	<link href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet">
+	<script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
+	<script src="../dist/threebox.js" type="text/javascript"></script>
+	<link href="../dist/threebox.css" rel="stylesheet" />
+	<script src="config.js"></script>
+	<style>
+		body, html {
+			width: 100%;
+			height: 100%;
+			margin: 0;
+		}
+
+		#map {
+			width: 100%;
+			height: 100%;
+		}
+	</style>
 </head>
 <body>
     <div id='map' class='map'></div>

diff --git a/examples/07-alignmentTest.html b/examples/07-alignmentTest.html
@@ -2,8 +2,8 @@
 <html>
 <head>
 	<title>Threebox alignment Test</title>
-	<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>
-	<link href="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css" rel="stylesheet" />
+	<link href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet">
+	<script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
 	<script src="../dist/threebox.js" type="text/javascript"></script>
 	<link href="../dist/threebox.css" rel="stylesheet" />
 	<script src="config.js"></script>

diff --git a/examples/08-3dbuildings.html b/examples/08-3dbuildings.html
@@ -2,8 +2,8 @@
 <html>
 <head>
 	<title>Threebox display buildings in 3D with auto tooltips</title>
-	<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>
-	<link href="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css" rel="stylesheet" />
+	<link href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet">
+	<script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
 	<script src="../dist/threebox.js" type="text/javascript"></script>
 	<link href="../dist/threebox.css" rel="stylesheet" />
 	<script src="config.js"></script>

diff --git a/examples/09-raycaster.html b/examples/09-raycaster.html
@@ -1,8 +1,8 @@
 <!doctype html>
 <head>
     <title>Threebox raycaster of Objects3D, 3D models and Fill-extrusions</title>
-    <script src="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>
-    <link href="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css" rel="stylesheet" />
+    <link href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet">
+    <script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
     <script src="../dist/threebox.js" type="text/javascript"></script>
     <link href="../dist/threebox.css" rel="stylesheet" />
     <script src="config.js"></script>

diff --git a/examples/10-stylechange.html b/examples/10-stylechange.html
@@ -2,8 +2,8 @@
 <html>
 <head>
 	<title>Threebox change map style for Eiffel Tower</title>
-	<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>
-	<link href="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css" rel="stylesheet" />
+	<link href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet">
+	<script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
 	<script src="../dist/threebox.js" type="text/javascript"></script>
 	<link href="../dist/threebox.css" rel="stylesheet" />
 

diff --git a/examples/11-animation.html b/examples/11-animation.html
@@ -4,8 +4,8 @@
 	<script src="../dist/threebox.js" type="text/javascript"></script>
 	<link href="../dist/threebox.css" rel="stylesheet" />
 	<script src="config.js"></script>
-	<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>
-	<link href="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css" rel="stylesheet" />
+	<link href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet">
+	<script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
 	<script src="https://d3js.org/d3.v5.min.js"></script>
 	<script src="plugins/jquery.min.js"></script>
 	<!-- Place your kit's code here -->

diff --git a/examples/12-add3dmodel.html b/examples/12-add3dmodel.html
@@ -1,12 +1,12 @@
 <!doctype html>
-<head> 
+<head>
 	<meta charset="utf-8" />
 	<title>Add a 3D model with Threebox</title>
 	<script src="../dist/threebox.js" type="text/javascript"></script>
 	<link href="../dist/threebox.css" rel="stylesheet" />
 	<script src="config.js"></script>
-	<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>
-	<link href="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css" rel="stylesheet" />
+	<link href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet">
+	<script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
 	<style>
 		body, html {
 			width: 100%;
@@ -18,6 +18,7 @@
 			width: 100%;
 			height: 100%;
 		}
+
 		#time {
 			position: absolute;
 			left: 0;
@@ -27,6 +28,7 @@
 			margin-right: auto;
 			min-width: 90%;
 		}
+
 		#hour {
 			background: rgba(0, 0, 0, 0.5);
 			color: #fff;

diff --git a/examples/13-eiffel.html b/examples/13-eiffel.html
@@ -2,8 +2,8 @@
 <html>
 <head>
 	<title>Threebox Statue of Liberty and Eiffel Tower</title>
-	<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>
-	<link href="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css" rel="stylesheet" />
+	<link href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet">
+	<script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
 	<script src="../dist/threebox.js" type="text/javascript"></script>
 	<link href="../dist/threebox.css" rel="stylesheet" />
 	<script src="plugins/jquery.min.js" type="text/javascript"></script>

diff --git a/examples/15-performance.html b/examples/15-performance.html
@@ -5,9 +5,8 @@
 	<script src="../dist/threebox.js" type="text/javascript"></script>
 	<link href="../dist/threebox.css" rel="stylesheet" />
 	<script src="config.js"></script>
-	<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>
-	<link href="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css" rel="stylesheet" />
-
+	<link href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet">
+	<script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
 	<script src="plugins/jquery.min.js"></script>
 	<!-- Place your kit's code here -->
 	<script src="css/fontawesome.js"></script>