v3.5.0

.circleci/config.yml

@@ -357,8 +357,14 @@ jobs:
       - attach_workspace:
           at: ~/
       - run:
-          command: npm run test-unit
+          name: Run unit tests
+          command: |
+            npm run test-unit
           no_output_timeout: 5m
+      - store_artifacts:
+          path: test/unit/vitest
+      - store_test_results:
+          path: test/unit/test-results.xml
 
   test-query:
     <<: *linux-defaults

.github/CODEOWNERS

@@ -1 +1 @@
-* @mapbox/gl-js
+* @mapbox/gl-js @mapbox/gl-native @mapbox/mapbox-3d-team

3d-style/data/bucket/tiled_3d_model_bucket.ts

@@ -95,8 +95,9 @@ export class Tiled3dModelFeature {
         this.emissionHeightBasedParams = [];
         // Needs to calculate geometry
         this.feature = {type: 'Point', id: node.id, geometry: [], properties: {'height' : getNodeHeight(node)}};
+        this.aabb = this._getLocalBounds();
     }
-    getLocalBounds(): Aabb {
+    _getLocalBounds(): Aabb {
         if (!this.node.meshes) {
             return new Aabb([Infinity, Infinity, Infinity], [-Infinity, -Infinity, -Infinity]);
         }
@@ -105,11 +106,12 @@ export class Tiled3dModelFeature {
             const aabb = new Aabb([Infinity, Infinity, Infinity], [-Infinity, -Infinity, -Infinity]);
             for (const mesh of this.node.meshes) {
                 if (this.node.lightMeshIndex !== i) {
-                    aabb.encapsulate(mesh.aabb);
+                    mesh.transformedAabb = Aabb.applyTransform(mesh.aabb, this.node.matrix);
+                    aabb.encapsulate(mesh.transformedAabb);
                 }
                 i++;
             }
-            this.aabb = Aabb.applyTransform(aabb, this.node.matrix);
+            this.aabb = aabb;
         }
         return this.aabb;
     }
@@ -551,7 +553,7 @@ class Tiled3dModelBucket implements Bucket {
             const nodeInfo = nodesInfo[i];
             assert(nodeInfo.node.meshes.length > 0);
             const mesh = nodeInfo.node.meshes[0];
-            const meshAabb = Aabb.applyTransform(mesh.aabb, nodeInfo.node.matrix);
+            const meshAabb = mesh.transformedAabb;
             if (x < meshAabb.min[0] || y < meshAabb.min[1] || x > meshAabb.max[0] || y > meshAabb.max[1]) continue;
             if (nodeInfo.node.hidden === true) return {height: 0.0, maxHeight: nodeInfo.feature.properties["height"], hidden: false, verticalScale: nodeInfo.evaluatedScale[2]};
 

3d-style/data/model.ts

@@ -75,6 +75,7 @@ export type Mesh = {
     pbrBuffer: VertexBuffer;
     material: Material;
     aabb: Aabb;
+    transformedAabb: Aabb;
     segments: SegmentVector;
     centroid: vec3;
     heightmap: Float32Array;

3d-style/render/draw_model.ts

@@ -824,7 +824,7 @@ function drawBatchedModels(painter: Painter, source: SourceCache, layer: ModelSt
                 }
 
                 const nodeAabb = () => {
-                    const localBounds = nodeInfo.getLocalBounds();
+                    const localBounds = nodeInfo.aabb;
                     // @ts-expect-error - TS2322 - Type 'number[]' is not assignable to type 'vec3'.
                     aabb.min = [...localBounds.min];
                     // @ts-expect-error - TS2322 - Type 'number[]' is not assignable to type 'vec3'.
@@ -874,8 +874,7 @@ function drawBatchedModels(painter: Painter, source: SourceCache, layer: ModelSt
                 let opacity = layerOpacity;
                 if (!isShadowPass) {
                     if (frontCutoffEnabled) {
-
-                        opacity *= calculateFrontCutoffOpacity(nodeModelMatrix, tr, nodeInfo.getLocalBounds(), frontCutoffParams);
+                        opacity *= calculateFrontCutoffOpacity(tileModelMatrix as any, tr, nodeInfo.aabb, frontCutoffParams);
                     }
 
                     opacity *= calculateFarCutoffOpacity(cutoffParams, depth);
@@ -1120,7 +1119,7 @@ function calculateFarCutoffOpacity(cutoffParams: CutoffParams, depth: number): n
     return clamp((linearDepth - cutoffStart) / (cutoffEnd - cutoffStart), 0.0, 1.0);
 }
 
-function calculateFrontCutoffOpacity(nodeModelMatrix: mat4, tr: Transform, aabb: Aabb, cutoffParams: [number, number, number]) {
+function calculateFrontCutoffOpacity(tileModelMatrix: mat4, tr: Transform, aabb: Aabb, cutoffParams: [number, number, number]) {
     // The cutoff opacity is completely disabled when pitch is lower than 20.
     const fullyOpaquePitch = 20.0;
     const fullyTransparentPitch = 40.0;
@@ -1131,7 +1130,7 @@ function calculateFrontCutoffOpacity(nodeModelMatrix: mat4, tr: Transform, aabb:
     }
 
     const worldToCamera = tr.getWorldToCameraMatrix();
-    const mat = mat4.multiply([] as any, worldToCamera, nodeModelMatrix);
+    const mat = mat4.multiply([] as any, worldToCamera, tileModelMatrix);
 
     // The cutoff opacity is calculated based on how much below the view the AABB bottom corners are.
     // For this, we find the AABB points with the highest and lowest y value in the view space.

3d-style/render/lights.ts

@@ -73,10 +73,10 @@ function calculateGroundRadiance(dir: vec3, dirColor: vec3, ambientColor: vec3):
 export const lightsUniformValues = (directional: Lights<Directional>, ambient: Lights<Ambient>, style: Style): UniformValues<LightsUniformsType> => {
     const direction = directional.properties.get('direction');
 
-    const directionalColor = directional.properties.get('color').toRenderColor(style._luts[directional.scope]).toArray01();
+    const directionalColor = directional.properties.get('color').toRenderColor(style.getLut(directional.scope)).toArray01();
     const directionalIntensity = directional.properties.get('intensity');
 
-    const ambientColor = ambient.properties.get('color').toRenderColor(style._luts[ambient.scope]).toArray01();
+    const ambientColor = ambient.properties.get('color').toRenderColor(style.getLut(ambient.scope)).toArray01();
     const ambientIntensity = ambient.properties.get('intensity');
 
     const dirVec: [number, number, number] = [direction.x, direction.y, direction.z];

3d-style/render/shadow_renderer.ts

@@ -621,10 +621,10 @@ export function calculateGroundShadowFactor(
     const dirDirectionalFactor = Math.max(vec3.dot(groundNormal as [number, number, number], directionVec as [number, number, number]), 0.0);
     const ambStrength = [0, 0, 0];
     // @ts-expect-error - TS2339 - Property 'toRenderColor' does not exist on type 'unknown'. | TS2345 - Argument of type 'unknown' is not assignable to parameter of type 'number'.
-    vec3.scale(ambStrength as [number, number, number], ambientColor.toRenderColor(style._luts[directionalLight.scope]).toArray01Linear().slice(0, 3), ambientIntensity);
+    vec3.scale(ambStrength as [number, number, number], ambientColor.toRenderColor(style.getLut(directionalLight.scope)).toArray01Linear().slice(0, 3), ambientIntensity);
     const dirStrength = [0, 0, 0];
     // @ts-expect-error - TS2339 - Property 'toRenderColor' does not exist on type 'unknown'. | TS2363 - The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.
-    vec3.scale(dirStrength as [number, number, number], dirColor.toRenderColor(style._luts[ambientLight.scope]).toArray01Linear().slice(0, 3), dirDirectionalFactor * dirIntensity);
+    vec3.scale(dirStrength as [number, number, number], dirColor.toRenderColor(style.getLut(ambientLight.scope)).toArray01Linear().slice(0, 3), dirDirectionalFactor * dirIntensity);
 
     // Multiplier X to get from lit surface color L to shadowed surface color S
     // X = A / (A + D)

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

@@ -494,6 +494,10 @@ vec4 finalColor;
     distance +=  mix(0.5, 0.0, clamp(resEmission - 1.0, 0.0, 1.0));
     opacity *= v_roughness_metallic_emissive_alpha.w * saturate(1.0 - distance * distance);
 #endif
+#else
+#ifdef APPLY_LUT_ON_GPU
+    color = applyLUT(u_lutTexture, color);
+#endif
 #endif
     // Use emissive strength as interpolation between lit and unlit color
     // for coherence with other layer types.

3d-style/source/replacement_source.ts

@@ -51,7 +51,7 @@ class ReplacementSource {
         this._sourceIds = [];
         this._activeRegions = [];
         this._prevRegions = [];
-        this._globalClipBounds = {min: new Point(0, 0), max: new Point(0, 0)};
+        this._globalClipBounds = {min: new Point(Infinity, Infinity), max: new Point(-Infinity, -Infinity)};
     }
 
     clear() {

CHANGELOG.md

@@ -1,20 +1,30 @@
-## 3.5.0-beta.1
+## 3.5.0
 
 ### Breaking changes ⚠️
 - This release marks a significant transition for GL JS, moving from [Flow](https://flow.org/) to [TypeScript](https://www.typescriptlang.org/). While we have maintained backward compatibility where possible, the community typings `@types/mapbox-gl` are not fully compatible with the new first-class typings. Users relying on the community typings may experience breaking changes. Please remove the `@types/mapbox-gl` dependency and refer to the [v3.5.0 migration guide](https://github.com/mapbox/mapbox-gl-js/issues/13203) for instructions on upgrading, resolving common issues, and asking questions regarding the migration to the first-class typings. We welcome your feedback and contributions to make Mapbox GL JS better.
 
 ### Features and improvements ✨
-- Add `color-theme` property to enable colorization with a lookup table (LUT) images.
+- Add `color-theme` property and `Map` `setColorTheme` method to enable colorization with a lookup table (LUT) images.
+- Significantly improve performance of `updateData` for `GeoJSON` sources in `dynamic` mode.
 - Add `icon-occlusion-opacity` and `text-occlusion-opacity` properties to fade symbols behind models and landmarks.
 - Add `line-occlusion-opacity` property to fade lines behind 3D objects.
 - Add experimental `clip` layer to filter out rendering data.
 - Add experimental `line-z-offset` property for a non-globe view.
-- Add `model-cutoff-fade-range` property support to control fade out of faraway 3D buildings.
+- Add `model-cutoff-fade-range` property to control fade out of faraway 3D buildings.
+- Improve precision of `line-pattern` on long lines and higher zooms.
+- Add experimental `line-trim-color` and `line-trim-fade-range` properties to customize rendering of lines trimmed with `line-trim-offset`.
+- Add `Map` `getSlots` method for listing available slots of a style.
 
 ### Bug fixes 🐞
+- Fix a performance regression in Standard style introduced in v3.4.0.
 - Fix icon rotation during globe transition.
 - Fix GeoJSON data loss due to frequent `updateData` calls.
 - Improve `raster-particle` layer animation.
+- Fix `model-front-cutoff` property for Meshopt-encoded models.
+- Fix errors in the console on empty 3D tiles.
+- Fix not properly detecting fingerprinting protection when adding terrain through `setTerrain`.
+- Fix `style.load` event missing `style` property.
+- Fix errors when using `queryRenderedFeatures` on areas with missing DEM tiles when terrain is enabled.
 
 ## 3.4.0
 

build/check-ts-suppressions.js

@@ -8,7 +8,7 @@ import {Octokit} from '@octokit/rest';
 import {execSync} from 'child_process';
 
 const owner = 'mapbox';
-const repo = 'mapbox-gl-js-internal';
+const repo = 'mapbox-gl-js';
 const branch = process.env['CIRCLE_BRANCH'] || execSync('git rev-parse --abbrev-ref HEAD').toString().trim();
 
 async function getBannedTsComments() {

build/generate-typed-style-spec.ts

@@ -253,6 +253,21 @@ export type TransitionSpecification = {
 
 // Note: doesn't capture interpolatable vs. non-interpolatable types.
 
+export type PropertyFunctionStop<T> = [number, T];
+export type ZoomAndPropertyFunctionStop<T> = [{zoom: number; value: string | number | boolean}, T];
+
+/**
+ * @deprecated Use [Expressions](https://docs.mapbox.com/style-spec/reference/expressions/) syntax instead.
+*/
+export type FunctionSpecification<T> = {
+    stops: Array<PropertyFunctionStop<T> | ZoomAndPropertyFunctionStop<T>>;
+    base?: number;
+    property?: string;
+    type?: 'identity' | 'exponential' | 'interval' | 'categorical';
+    colorSpace?: 'rgb' | 'lab' | 'hcl';
+    default?: T;
+};
+
 export type CameraFunctionSpecification<T> =
     | { type: 'exponential', stops: Array<[number, T]> }
     | { type: 'interval',    stops: Array<[number, T]> };
@@ -277,6 +292,7 @@ export type PropertyValueSpecification<T> =
 
 export type DataDrivenPropertyValueSpecification<T> =
     | T
+    | FunctionSpecification<T>
     | CameraFunctionSpecification<T>
     | SourceFunctionSpecification<T>
     | CompositeFunctionSpecification<T>

debug/line-pattern.html

@@ -148,6 +148,28 @@
     ]
 };
 
+const longRoute = {
+    "type": "FeatureCollection",
+    "features": [
+        {
+            "type": "Feature",
+            "properties": {},
+            "geometry": {
+                "coordinates": [
+                    [ 48.884680, 16.085282 ], [ 49.061463, 16.515979 ], [ 48.891005, 16.562687 ], [ 48.974135, 16.763008 ],
+                    [ 49.268492, 16.718297 ], [ 49.331357, 16.902966 ], [ 49.386120, 16.986536 ], [ 49.587155, 17.011794 ], 
+                    [ 49.936453, 17.009859 ], [ 50.180135, 17.013721 ], [ 50.236977, 16.961266 ], [ 49.676524, 16.889389 ],
+                    [ 49.528352, 16.714410 ], [ 49.408444, 16.321152 ], [ 49.556546, 16.118124 ], [ 49.802388, 16.008736 ],
+                    [ 50.056386, 15.991148 ], [ 50.415946, 16.075220 ], [ 50.674048, 16.215688 ], [ 50.180274, 16.204027 ], 
+                    [ 50.178172, 16.317207 ], [ 49.885689, 16.315238 ], [ 49.875532, 16.399057 ], [ 49.674499, 16.445862 ], 
+                    [ 50.186082, 16.722162 ], [ 50.699853, 16.720252 ]
+                ], 
+                "type": "LineString"
+            }
+        }
+    ]
+};
+
 map.on('load', () => {
     map.setFog({
         'horizon-blend': 0.0
@@ -160,6 +182,13 @@
         'maxzoom': 19,
     });
 
+    map.addSource('longRoute', {
+        'type': 'geojson',
+        'data': longRoute,
+        'lineMetrics': true,
+        'maxzoom': 16,
+    });
+
     map.addSource('mapbox-dem', {
         'type': 'raster-dem',
         'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',
@@ -216,6 +245,20 @@
                     }
                     map.setPaintProperty('route', 'line-trim-offset', [0, progress]);
                 }, 100);
+
+                map.addLayer({
+                    'id': 'longRoute',
+                    'slot': 'top',
+                    'source': 'longRoute',
+                    'type': 'line',
+                    'layout': {
+                        'line-join': 'none'
+                    },
+                    'paint': {
+                        'line-pattern': 'bluecircle',
+                        'line-width': zoomConstExpression
+                    }
+                });
             });
     });
 });