setLayerHeigthProperty spelling corrected to setLayerHeightProperty

CHANGELOG.md

@@ -380,7 +380,7 @@ Minor version by [@jscastro76](https://github.com/jscastro76), some enhancements
 - [**#95**](https://github.com/jscastro76/threebox/issues/95) `tb.add` should admit layer and source as optional params 
 - [**#96**](https://github.com/jscastro76/threebox/issues/96) `tb.setLayerHeigthProperty` depends on an internal feature on `obj.userData.feature` 
 - [**#98**](https://github.com/jscastro76/threebox/issues/98) Add an init param for multiLayer scenarios, that allows to create a default empty layer in threebox 
-- [**#99**](https://github.com/jscastro76/threebox/issues/99) `setLayoutZoomRange` doesn�t work on multilayer scenarios 
+- [**#99**](https://github.com/jscastro76/threebox/issues/99) `setLayoutZoomRange` doesn�t work on multilayer scenarios 
 - [**#101**](https://github.com/jscastro76/threebox/issues/101) `options.adjustment` must be on top of `options.anchor` not instead 
 
 #### :beetle: Bug fixes
@@ -516,7 +516,7 @@ Minor version by [@jscastro76](https://github.com/jscastro76), some enhancements
   - Improved Eiffel example with real sun light slider and shadows on 3D models and Buildings extrusions [Statue of Liberty and Eiffel Tower with Shadows](https://github.com/jscastro76/threebox/blob/master/examples/eiffel.html)
 - `tb.Constants` are now accessible through instance (usefull for HTML/js side calculations)
 - [**#31**](https://github.com/jscastro76/threebox/issues/31) Create/Remove the shadow plane automatically on `obj.castShadow`
-- [**#33**](https://github.com/jscastro76/threebox/issues/33) Refactored methods `�bj.add` and `obj.remove` to enable add an object to them (honestly this never worked as it was referring to root which is the function.)
+- [**#33**](https://github.com/jscastro76/threebox/issues/33) Refactored methods `�bj.add` and `obj.remove` to enable add an object to them (honestly this never worked as it was referring to root which is the function.)
 - [**#34**](https://github.com/jscastro76/threebox/issues/34) Added shadows for fill extrusion layers
   - Synced with Custom Layers `tb.setSunLight` through `tb.setBuildingShadows(options)`
   - Added new example on fill-extrusion shadows.

dist/threebox.js

@@ -1107,7 +1107,7 @@ Threebox.prototype = {
 	},
 
 	//[jscastro] method to set the height of all the objects in a level. this only works if the objects have a geojson feature
-	setLayerHeigthProperty: function (layerId, level) {
+	setLayerHeightProperty: function (layerId, level) {
 		let layer = this.map.getLayer(layerId);
 		if (!layer) return;
 		if (layer.type == "fill-extrusion") {
@@ -2614,28 +2614,17 @@ class BuildingShadows {
 		this.tb = threebox;
 	}
 	onAdd(map, gl) {
-		this.map = map;
-		const vertexSource = `
-			uniform mat4 u_matrix;
-			uniform float u_height_factor;
-			uniform float u_altitude;
-			uniform float u_azimuth;
-			attribute vec2 a_pos;
-			attribute vec4 a_normal_ed;
-			attribute lowp vec2 a_base;
-			attribute lowp vec2 a_height;
-			void main() {
-				float base = max(0.0, a_base.x);
-				float height = max(0.0, a_height.x);
-				float t = mod(a_normal_ed.x, 2.0);
-				vec4 pos = vec4(a_pos, t > 0.0 ? height : base, 1);
-				float len = pos.z * u_height_factor / tan(u_altitude);
-				pos.x += cos(u_azimuth) * len;
-				pos.y += sin(u_azimuth) * len;
-				pos.z = 0.0;
-				gl_Position = u_matrix * pos;
-			}
-			`;
+		this.map = map; 
+		// find layer source
+		const sourceName = this.map.getLayer(this.buildingsLayerId).source;
+		this.source = (this.map.style.sourceCaches || this.map.style._otherSourceCaches)[sourceName];
+		if (!this.source) {
+			console.warn(`Can't find layer ${this.buildingsLayerId}'s source.`);
+		}
+
+		// vertex shader of fill-extrusion layer is different in mapbox v1 and v2.
+		// https://github.com/mapbox/mapbox-gl-js/commit/cef95aa0241e748b396236f1269fbb8270f31565
+		const vertexSource = this._getVertexSource();
 		const fragmentSource = `
 			void main() {
 				gl_FragColor = vec4(0.0, 0.0, 0.0, 0.7);
@@ -2656,15 +2645,22 @@ class BuildingShadows {
 		this.uHeightFactor = gl.getUniformLocation(this.program, "u_height_factor");
 		this.uAltitude = gl.getUniformLocation(this.program, "u_altitude");
 		this.uAzimuth = gl.getUniformLocation(this.program, "u_azimuth");
-		this.aPos = gl.getAttribLocation(this.program, "a_pos");
-		this.aNormal = gl.getAttribLocation(this.program, "a_normal_ed");
+
+		if (this.tb.mapboxVersion >= 2.0) {
+			this.aPosNormal = gl.getAttribLocation(this.program, "a_pos_normal_ed");
+		} else {
+			this.aPos = gl.getAttribLocation(this.program, "a_pos");
+			this.aNormal = gl.getAttribLocation(this.program, "a_normal_ed");
+		}
+
 		this.aBase = gl.getAttribLocation(this.program, "a_base");
 		this.aHeight = gl.getAttribLocation(this.program, "a_height");
 	}
 	render(gl, matrix) {
+		if (!this.source) return;
+
 		gl.useProgram(this.program);
-		const source = this.map.style.sourceCaches['composite'];
-		const coords = source.getVisibleCoordinates().reverse();
+		const coords = this.source.getVisibleCoordinates().reverse();
 		const buildingsLayer = this.map.getLayer(this.buildingsLayerId);
 		const context = this.map.painter.context;
 		const { lng, lat } = this.map.getCenter();
@@ -2680,24 +2676,30 @@ class BuildingShadows {
 		//gl.blendEquation(gl.FUNC_ADD);
 		gl.disable(gl.DEPTH_TEST);
 		for (const coord of coords) {
-			const tile = source.getTile(coord);
+			const tile = this.source.getTile(coord);
 			const bucket = tile.getBucket(buildingsLayer);
 			if (!bucket) continue;
 			const [heightBuffer, baseBuffer] = bucket.programConfigurations.programConfigurations[this.buildingsLayerId]._buffers;
-			gl.uniformMatrix4fv(this.uMatrix, false, coord.posMatrix);
+			gl.uniformMatrix4fv(this.uMatrix, false, (coord.posMatrix || coord.projMatrix));
 			gl.uniform1f(this.uHeightFactor, Math.pow(2, coord.overscaledZ) / tile.tileSize / 8);
 			for (const segment of bucket.segments.get()) {
 				const numPrevAttrib = context.currentNumAttributes || 0;
 				const numNextAttrib = 2;
 				for (let i = numNextAttrib; i < numPrevAttrib; i++) gl.disableVertexAttribArray(i);
 				const vertexOffset = segment.vertexOffset || 0;
-				gl.enableVertexAttribArray(this.aPos);
 				gl.enableVertexAttribArray(this.aNormal);
 				gl.enableVertexAttribArray(this.aHeight);
 				gl.enableVertexAttribArray(this.aBase);
 				bucket.layoutVertexBuffer.bind();
-				gl.vertexAttribPointer(this.aPos, 2, gl.SHORT, false, 12, 12 * vertexOffset);
-				gl.vertexAttribPointer(this.aNormal, 4, gl.SHORT, false, 12, 4 + 12 * vertexOffset);
+				if (this.tb.mapboxVersion >= 2.0) {
+					gl.enableVertexAttribArray(this.aPosNormal);
+					gl.vertexAttribPointer(this.aPosNormal, 4, gl.SHORT, false, 8, 8 * vertexOffset);
+				} else {
+					gl.enableVertexAttribArray(this.aPos);
+					gl.vertexAttribPointer(this.aPos, 2, gl.SHORT, false, 12, 12 * vertexOffset);
+					gl.vertexAttribPointer(this.aNormal, 4, gl.SHORT, false, 12, 4 + 12 * vertexOffset);
+				}
+
 				heightBuffer.bind();
 				gl.vertexAttribPointer(this.aHeight, 1, gl.FLOAT, false, 4, 4 * vertexOffset);
 				baseBuffer.bind();
@@ -2708,6 +2710,57 @@ class BuildingShadows {
 			}
 		}
 	}
+
+	_getVertexSource() {
+		if (this.tb.mapboxVersion >= 2.0) {
+			return `
+				uniform mat4 u_matrix;
+				uniform float u_height_factor;
+				uniform float u_altitude;
+				uniform float u_azimuth;
+				attribute vec4 a_pos_normal_ed;
+				attribute lowp vec2 a_base;
+				attribute lowp vec2 a_height;
+				void main() {
+					float base = max(0.0, a_base.x);
+					float height = max(0.0, a_height.x);
+
+					vec3 pos_nx = floor(a_pos_normal_ed.xyz * 0.5);
+					mediump vec3 top_up_ny = a_pos_normal_ed.xyz - 2.0 * pos_nx;
+					float t = top_up_ny.x;
+					vec4 pos = vec4(pos_nx.xy, t > 0.0 ? height : base, 1);
+
+					float len = pos.z * u_height_factor / tan(u_altitude);
+					pos.x += cos(u_azimuth) * len;
+					pos.y += sin(u_azimuth) * len;
+					pos.z = 0.0;
+					gl_Position = u_matrix * pos;
+				}
+			`;
+		} else {
+			return `
+				uniform mat4 u_matrix;
+				uniform float u_height_factor;
+				uniform float u_altitude;
+				uniform float u_azimuth;
+				attribute vec2 a_pos;
+				attribute vec4 a_normal_ed;
+				attribute lowp vec2 a_base;
+				attribute lowp vec2 a_height;
+				void main() {
+					float base = max(0.0, a_base.x);
+					float height = max(0.0, a_height.x);
+					float t = mod(a_normal_ed.x, 2.0);
+					vec4 pos = vec4(a_pos, t > 0.0 ? height : base, 1);
+					float len = pos.z * u_height_factor / tan(u_altitude);
+					pos.x += cos(u_azimuth) * len;
+					pos.y += sin(u_azimuth) * len;
+					pos.z = 0.0;
+					gl_Position = u_matrix * pos;
+				}
+			`;
+		}
+	}
 }
 
 
@@ -4237,6 +4290,7 @@ function loadObj(options, cb, promise) {
 			break;
 	}
 
+	materialLoader.withCredentials = options.withCredentials;
 	materialLoader.load(options.mtl, loadObject, () => (null), error => {
 		console.warn("No material file found " + error.stack);
 	});
@@ -4248,6 +4302,7 @@ function loadObj(options, cb, promise) {
 			loader.setMaterials(materials);
 		}
 
+		loader.withCredentials = options.withCredentials;
 		loader.load(options.obj, obj => {
 
 			//[jscastro] MTL/GLTF/FBX models have a different structure
@@ -18192,7 +18247,8 @@ Objects.prototype = {
 			bbox: true,
 			tooltip: true,
 			raycasted: true,
-			clone: true
+			clone: true,
+			withCredentials: false
 		},
 
 		Object3D: {

docs/Threebox.md

@@ -695,9 +695,9 @@ Method to remove a layer from Mapbox, including all 3D objects from Threebox sce
 <br>
 
 
-#### setLayerHeigthProperty 
+#### setLayerHeightProperty 
 ```js
-tb.setLayerHeigthProperty(layerId, level) 
+tb.setLayerHeightProperty(layerId, level) 
 ```
 Method to set the height of all the objects in a level. 
 This method only works if the objects have a [*GeoJson*](https://geojson.org/) feature, and a `level` attribute among its properties.

src/Threebox.js

@@ -837,7 +837,7 @@ Threebox.prototype = {
 	},
 
 	//[jscastro] method to set the height of all the objects in a level. this only works if the objects have a geojson feature
-	setLayerHeigthProperty: function (layerId, level) {
+	setLayerHeightProperty: function (layerId, level) {
 		let layer = this.map.getLayer(layerId);
 		if (!layer) return;
 		if (layer.type == "fill-extrusion") {