v3.1.0-beta.1 (bug fixes, performance improvements and new style properties)

3d-style/render/draw_model.js

@@ -361,7 +361,7 @@ function drawModels(painter: Painter, sourceCache: SourceCache, layer: ModelStyl
         const modelParameters = {zScaleMatrix, negCameraPosMatrix};
         modelParametersVector.push(modelParameters);
         for (const node of model.nodes) {
-            prepareMeshes(painter.transform, node, model.matrix, painter.transform.projMatrix, modelIndex, transparentMeshes, opaqueMeshes);
+            prepareMeshes(painter.transform, node, model.matrix, painter.transform.expandedFarZProjMatrix, modelIndex, transparentMeshes, opaqueMeshes);
         }
         modelIndex++;
     }
@@ -605,7 +605,7 @@ function drawInstancedNode(painter: Painter, layer: ModelStyleLayer, node: Node,
                 const layerOpacity = layer.paint.get('model-opacity');
 
                 uniformValues = modelUniformValues(
-                    coord.projMatrix,
+                    coord.expandedProjMatrix,
                     Float32Array.from(node.matrix),
                     new Float32Array(16),
                     painter,
@@ -750,7 +750,7 @@ function drawBatchedModels(painter: Painter, source: SourceCache, layer: ModelSt
                 mat4.transpose(normalMatrix, normalMatrix);
                 mat4.scale(normalMatrix, normalMatrix, normalScale);
 
-                const worldViewProjection = mat4.multiply([], tr.projMatrix, modelMatrix);
+                const worldViewProjection = mat4.multiply([], tr.expandedFarZProjMatrix, modelMatrix);
 
                 for (let i = 0; i < node.meshes.length; ++i) {
                     const mesh = node.meshes[i];

3d-style/shaders/model.fragment.glsl

@@ -438,8 +438,9 @@ vec4 finalColor;
     vec3 color = computeLightContribution(mat, lightDir, lightColor);
 
     // Ambient Occlusion
+    float ao = 1.0;
 #if defined (HAS_TEXTURE_u_occlusionTexture) && defined(HAS_ATTRIBUTE_a_uv_2f)
-    float ao = (texture2D(u_occlusionTexture, uv_2f).x - 1.0) * u_aoIntensity + 1.0;
+    ao = (texture2D(u_occlusionTexture, uv_2f).x - 1.0) * u_aoIntensity + 1.0;
     color *= ao;
 #endif
     // Emission
@@ -468,7 +469,8 @@ vec4 finalColor;
 #endif
     // Use emissive strength as interpolation between lit and unlit color
     // for coherence with other layer types.
-    color = mix(color, mat.baseColor.rgb, u_emissive_strength);
+    vec3 unlitColor = mat.baseColor.rgb * ao + emissive.rgb;
+    color = mix(color, unlitColor, u_emissive_strength);
     color = linearTosRGB(color);
     color *= opacity;
     finalColor = vec4(color, opacity);

CHANGELOG.md

@@ -1,3 +1,36 @@
+## 3.1.0-beta.1
+
+### Features and improvements ✨
+
+- Improve performance for maps with many textures (such as styles with satellite imagery), fixing excessive memory usage. (h/t [@tristan-morris](https://github.com/tristan-morris)) [#12924](https://github.com/mapbox/mapbox-gl-js/pull/12924)
+- Add `raster-elevation` property for elevating raster layers to a constant height (e.g. clouds over globe).
+- Add `raster-emissive-strength` and `fill-extrusion-emissive-strength` properties for controlling 3D lighting on buildings and raster layers.
+- Add `Map` `getConfigProperty` method for getting current style config values.
+- Add `config` support in terrain options.
+- Improve performance for pitched views with many fill extrusions on higher zoom levels.
+
+### Bug fixes 🐞
+
+- Fix an issue where `center: [0, 0]` and `zoom: 0` map options were ignored in favor of style settings.
+- Fix an issue with the camera not taking the short route when animating between locations across the anti-meridian.
+- Fix an issue where a style with imports sometimes loaded in incomplete state.
+- Fix an issue with rendering styles with nested imports.
+- Fix an issue with sources not reloading when changing language and worldview.
+- Fix an issue where updating a style fragment URL didn't work correctly.
+- Fix an issue when adding a layer with explicit `slot` not taking precedence over the `before` parameter for layer order.
+- Fix an issue where updating an image before initial image is loaded produced an error. (h/t [@maciejmatu](https://github.com/maciejmatu)) [#12928](https://github.com/mapbox/mapbox-gl-js/pull/12928)
+- Fix an issue with incorrect collisions for elevated symbols.
+- Fix an issue with `"camera-projection": "orthographic"` not working in styles with imports.
+- Fix an issue with tiles sometimes missing in terrain mode on views from a hill down on a valley.
+- Fix compact attribution style when using global CSS that sets `box-sizing: border-box`. (h/t [@simondriesen](https://github.com/simondriesen)) [#12982](https://github.com/mapbox/mapbox-gl-js/pull/12982)
+- Remove redundant `aria-label` attribute in attribution control that fails accessibility conformance. (h/t [@maggiewachs](https://github.com/maggiewachs)) [#12981](https://github.com/mapbox/mapbox-gl-js/pull/12981)
+
+## 3.0.1
+
+### Bug fixes 🐞
+
+- Fix attribution not being displayed for imported fragments.
+
 ## 3.0.0
 
 Mapbox GL JS v3 enables the [Mapbox Standard Style](https://www.mapbox.com/blog/standard-core-style), a new realistic 3D lighting system, building shadows and many other visual enhancements, and an ergonomic API for using a new kind of rich, evolving, configurable map styles and seamless integration with custom data. You can get more information about the new features in the [Mapbox GL JS v3 migration guide](https://docs.mapbox.com/mapbox-gl-js/guides/migrate-to-v3/).

debug/image-on-globe.html

@@ -24,15 +24,18 @@
     <div>
         <label>Projection:</label>
         <select id="projName">
-            <option value="mercator" selected>Mercator</option>
+            <option value="mercator">Mercator</option>
             <option value="albers">Albers USA</option>
             <option value="equalEarth">Equal Earth</option>
             <option value="equirectangular">Equirectangular</option>
-            <option value="globe">Globe</option>
+            <option value="globe" selected>Globe</option>
             <option value="lambertConformalConic">Lambert Conformal Conic</option>
             <option value="naturalEarth">Natural Earth</option>
             <option value="winkelTripel">Winkel Tripel</option>
         </select>
+        </br>
+        <label>Raster elevation:</label>
+        <input type="range" id="rasterElevation" name="volume" min="0" max="5000000" value="1000000"/>
     </div>
 </div>
 
@@ -41,22 +44,35 @@
 <script>
     const map = new mapboxgl.Map({
         container: 'map',
-        maxZoom: 7,
-        minZoom: 3,
         zoom: 5,
         center: [-75.789, 41.874],
-        style: 'mapbox://styles/mapbox/dark-v10'
+        style: 'mapbox://styles/mapbox/dark-v10',
+        hash: true,
+        projection: 'globe'
     });
 
     map.on('load', () => {
+        map.addSource('mapbox-dem', {
+            "type": "raster-dem",
+            "url": "mapbox://mapbox.mapbox-terrain-dem-v1",
+            "tileSize": 514,
+            "maxzoom": 14
+        });
+        map.setTerrain({
+            "source": "mapbox-dem",
+            "exaggeration": 1.0
+        });
+
+        map.setFog({});
+
         map.addSource('radar', {
             'type': 'image',
             'url': 'https://docs.mapbox.com/mapbox-gl-js/assets/radar.gif',
             'coordinates': [
-                [-80.425, 46.437],
-                [-71.516, 46.437],
-                [-71.516, 37.936],
-                [-80.425, 37.936]
+                [-150.075, 69.562],
+                [50.866, 69.562],
+                [50.866, 5.248],
+                [-150.075, 5.248]
             ]
         });
 
@@ -65,7 +81,8 @@
             'type': 'raster',
             'source': 'radar',
             'paint': {
-                'raster-fade-duration': 0
+                'raster-fade-duration': 0,
+                'raster-elevation': 1000000
             }
         });
     });
@@ -75,6 +92,11 @@
         map.setProjection(el.options[el.selectedIndex].value);
     });
 
+    document.getElementById('rasterElevation').addEventListener('input', (e) => {
+        const el = document.getElementById('rasterElevation');
+        map.setPaintProperty('radar-layer', 'raster-elevation', Number(el.value));
+    });
+
 </script>
 
 </body>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "mapbox-gl",
   "description": "A WebGL interactive maps library",
-  "version": "3.0.0",
+  "version": "3.1.0-beta.1",
   "main": "dist/mapbox-gl.js",
   "style": "dist/mapbox-gl.css",
   "license": "SEE LICENSE IN LICENSE.txt",
@@ -36,13 +36,13 @@
     "vt-pbf": "^3.1.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.2",
+    "@babel/core": "^7.23.7",
     "@babel/eslint-parser": "^7.22.15",
     "@mapbox/flow-remove-types": "^2.0.0",
     "@mapbox/mvt-fixtures": "^3.10.0",
     "@octokit/rest": "^20.0.2",
     "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-json": "^6.0.1",
+    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.5",
     "@rollup/plugin-strip": "^3.0.4",
@@ -52,7 +52,7 @@
     "chalk": "^5.0.1",
     "chokidar": "^3.5.3",
     "cross-env": "^7.0.3",
-    "cssnano": "^6.0.0",
+    "cssnano": "^6.0.2",
     "d3-queue": "^3.0.7",
     "diff": "^5.1.0",
     "ejs": "^3.1.8",
@@ -61,8 +61,8 @@
     "eslint-config-mourner": "^3.0.0",
     "eslint-plugin-flowtype": "^7.0.0",
     "eslint-plugin-html": "^7.1.0",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-jsdoc": "^46.8.2",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsdoc": "^47.0.2",
     "flow-bin": "0.191.0",
     "gl": "6.0.2",
     "glob": "^10.3.10",
@@ -78,23 +78,23 @@
     "npm-run-all": "^4.1.5",
     "nyc": "^15.1.0",
     "pixelmatch": "^5.3.0",
-    "postcss": "^8.4.31",
-    "postcss-cli": "^10.1.0",
+    "postcss": "^8.4.32",
+    "postcss-cli": "^11.0.0",
     "postcss-inline-svg": "^6.0.0",
     "pretty-bytes": "^6.0.0",
-    "puppeteer-core": "^21.5.0",
+    "puppeteer-core": "^21.6.1",
     "qrcode-terminal": "^0.12.0",
     "rollup": "3.29.4",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rollup-plugin-unassert": "^0.6.0",
-    "selenium-webdriver": "^4.15.0",
+    "selenium-webdriver": "^4.16.0",
     "serve-static": "^1.15.0",
     "shuffle-seed": "^1.1.6",
     "sinon": "^17.0.1",
     "st": "^3.0.0",
     "stylelint": "^15.11.0",
     "stylelint-config-standard": "^34.0.0",
-    "tap": "~16.3.9",
+    "tap": "~16.3.10",
     "tape": "^5.7.2",
     "tape-filter": "^1.0.4",
     "testem": "^3.11.0"

src/data/array_types.js

@@ -644,39 +644,6 @@ class StructArrayLayout2ub2f12 extends StructArray {
 StructArrayLayout2ub2f12.prototype.bytesPerElement = 12;
 register(StructArrayLayout2ub2f12, 'StructArrayLayout2ub2f12');
 
-/**
- * Implementation of the StructArray layout:
- * [0]: Float32[3]
- *
- * @private
- */
-class StructArrayLayout3f12 extends StructArray {
-    uint8: Uint8Array;
-    float32: Float32Array;
-
-    _refreshViews() {
-        this.uint8 = new Uint8Array(this.arrayBuffer);
-        this.float32 = new Float32Array(this.arrayBuffer);
-    }
-
-    emplaceBack(v0: number, v1: number, v2: number): number {
-        const i = this.length;
-        this.resize(i + 1);
-        return this.emplace(i, v0, v1, v2);
-    }
-
-    emplace(i: number, v0: number, v1: number, v2: number): number {
-        const o4 = i * 3;
-        this.float32[o4 + 0] = v0;
-        this.float32[o4 + 1] = v1;
-        this.float32[o4 + 2] = v2;
-        return i;
-    }
-}
-
-StructArrayLayout3f12.prototype.bytesPerElement = 12;
-register(StructArrayLayout3f12, 'StructArrayLayout3f12');
-
 /**
  * Implementation of the StructArray layout:
  * [0]: Uint16[3]
@@ -1025,6 +992,39 @@ class StructArrayLayout1ui2 extends StructArray {
 StructArrayLayout1ui2.prototype.bytesPerElement = 2;
 register(StructArrayLayout1ui2, 'StructArrayLayout1ui2');
 
+/**
+ * Implementation of the StructArray layout:
+ * [0]: Float32[3]
+ *
+ * @private
+ */
+class StructArrayLayout3f12 extends StructArray {
+    uint8: Uint8Array;
+    float32: Float32Array;
+
+    _refreshViews() {
+        this.uint8 = new Uint8Array(this.arrayBuffer);
+        this.float32 = new Float32Array(this.arrayBuffer);
+    }
+
+    emplaceBack(v0: number, v1: number, v2: number): number {
+        const i = this.length;
+        this.resize(i + 1);
+        return this.emplace(i, v0, v1, v2);
+    }
+
+    emplace(i: number, v0: number, v1: number, v2: number): number {
+        const o4 = i * 3;
+        this.float32[o4 + 0] = v0;
+        this.float32[o4 + 1] = v1;
+        this.float32[o4 + 2] = v2;
+        return i;
+    }
+}
+
+StructArrayLayout3f12.prototype.bytesPerElement = 12;
+register(StructArrayLayout3f12, 'StructArrayLayout3f12');
+
 /**
  * Implementation of the StructArray layout:
  * [0]: Float32[2]
@@ -1404,7 +1404,6 @@ export {
     StructArrayLayout3i2i2i16,
     StructArrayLayout2f1f2i16,
     StructArrayLayout2ub2f12,
-    StructArrayLayout3f12,
     StructArrayLayout3ui6,
     StructArrayLayout3i2f2ui3ul3ui2f3ub1ul1i1ub60,
     StructArrayLayout2f9i15ui1ul4f1ub80,
@@ -1413,6 +1412,7 @@ export {
     StructArrayLayout7f28,
     StructArrayLayout1ul3ui12,
     StructArrayLayout1ui2,
+    StructArrayLayout3f12,
     StructArrayLayout2f8,
     StructArrayLayout16f64,
     StructArrayLayout4ui3f20,
@@ -1438,7 +1438,7 @@ export {
     StructArrayLayout3i2i2i16 as CollisionBoxLayoutArray,
     StructArrayLayout2f1f2i16 as CollisionCircleLayoutArray,
     StructArrayLayout2ub2f12 as CollisionVertexArray,
-    StructArrayLayout3f12 as CollisionVertexExtArray,
+    StructArrayLayout4f16 as CollisionVertexExtArray,
     StructArrayLayout3ui6 as QuadTriangleArray,
     StructArrayLayout1f4 as ZOffsetVertexArray,
     StructArrayLayout5f20 as GlobeVertexArray,