v3.4.0

.circleci/config.yml

@@ -258,7 +258,7 @@ jobs:
       - run: npm run build-style-spec
       - run: npm run build-flow-types
       - run: npm run test-build
-      - run: while read l; do cp debug/$l test/release/$l; done < test/release/local_release_page_list.txt
+      - run: npm run prepare-release-pages
       - run:
           name: Create mapbox-gl.tar.gz
           command: |
@@ -279,11 +279,21 @@ jobs:
     steps:
       - attach_workspace:
           at: ~/
+      - restore_cache:
+          keys:
+            - v0-playwright-{{ checksum "package-lock.json" }}
+      - run:
+          name: Playwright version
+          command: npx playwright --version
       - run: npx playwright install chromium
       - save_cache:
-          key: v0-playwright
+          key: v0-playwright-{{ checksum "package-lock.json" }}
           paths:
            - ~/.cache
+      - persist_to_workspace:
+          root: ~/
+          paths:
+            - .cache
 
   check-bundle-size:
     <<: *linux-defaults
@@ -306,9 +316,6 @@ jobs:
     steps:
       - attach_workspace:
           at: ~/
-      - restore_cache:
-          keys:
-            - v0-playwright
       - run:
           command: npm run test-unit
           no_output_timeout: 5m
@@ -345,9 +352,6 @@ jobs:
     steps:
       - attach_workspace:
           at: ~/
-      - restore_cache:
-          keys:
-            - v0-playwright
       - run:
           command: npm run test-csp
           no_output_timeout: 5m

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

@@ -12,6 +12,7 @@ import {clamp} from '../../../src/util/util.js';
 import {DEMSampler} from '../../../src/terrain/elevation.js';
 import {ZoomConstantExpression} from '../../../src/style-spec/expression/index.js';
 import {Aabb} from '../../../src/util/primitives.js';
+import {vec3} from 'gl-matrix';
 
 import type ModelStyleLayer from '../../style/style_layer/model_style_layer.js';
 import type {ReplacementSource} from '../../source/replacement_source.js';
@@ -506,17 +507,22 @@ class Tiled3dModelBucket implements Bucket {
         const nodesInfo = this.getNodesInfo();
         const candidates = [];
 
+        const tmpVertex = [0, 0, 0];
+
         for (let i = 0; i < this.nodesInfo.length; i++) {
             const nodeInfo = nodesInfo[i];
             assert(nodeInfo.node.meshes.length > 0);
             const mesh = nodeInfo.node.meshes[0];
-            if (x < mesh.aabb.min[0] || y < mesh.aabb.min[1] || x > mesh.aabb.max[0] || y > mesh.aabb.max[1]) continue;
+            const meshAabb = Aabb.applyTransform(mesh.aabb, nodeInfo.node.matrix);
+            if (x < meshAabb.min[0] || y < meshAabb.min[1] || x > meshAabb.max[0] || y > meshAabb.max[1]) continue;
 
             assert(mesh.heightmap);
             const xCell = ((x - mesh.aabb.min[0]) / (mesh.aabb.max[0] - mesh.aabb.min[0]) * HEIGHTMAP_DIM) | 0;
             const yCell = ((y - mesh.aabb.min[1]) / (mesh.aabb.max[1] - mesh.aabb.min[1]) * HEIGHTMAP_DIM) | 0;
             const heightmapIndex = Math.min(HEIGHTMAP_DIM - 1, yCell) * HEIGHTMAP_DIM + Math.min(HEIGHTMAP_DIM - 1, xCell);
 
+            tmpVertex[2] = mesh.heightmap[heightmapIndex];
+            vec3.transformMat4(tmpVertex, tmpVertex, nodeInfo.node.matrix);
             if (mesh.heightmap[heightmapIndex] < 0 && nodeInfo.node.footprint) {
                 // unpopulated cell. If it is in the building footprint, return undefined height
                 nodeInfo.node.footprint.grid.query(new Point(x, y), new Point(x, y), candidates);
@@ -526,7 +532,7 @@ class Tiled3dModelBucket implements Bucket {
                 continue;
             }
             if (nodeInfo.hiddenByReplacement) return; // better luck with the next source
-            return {height: mesh.heightmap[heightmapIndex], maxHeight: nodeInfo.feature.properties["height"], hidden: false, verticalScale: nodeInfo.evaluatedScale[2]};
+            return {height: tmpVertex[2], maxHeight: nodeInfo.feature.properties["height"], hidden: false, verticalScale: nodeInfo.evaluatedScale[2]};
         }
     }
 }

3d-style/render/draw_model.js

@@ -148,11 +148,12 @@ function drawMesh(sortedMesh: SortedMesh, painter: Painter, layer: ModelStyleLay
     mat4.transpose(normalMatrix, normalMatrix);
 
     const emissiveStrength = layer.paint.get('model-emissive-strength').constantOr(0.0);
-
     const uniformValues = modelUniformValues(
         new Float32Array(sortedMesh.worldViewProjection),
         new Float32Array(lightingMatrix),
         new Float32Array(normalMatrix),
+        /* $FlowIgnore[incompatible-call] we can safely pass null for node.matrix as it is handled in the modelUniformValues constructor */
+        null,
         painter,
         opacity,
         pbr.baseColorFactor,
@@ -621,11 +622,12 @@ function drawInstancedNode(painter: Painter, layer: ModelStyleLayer, node: Node,
                 const layerOpacity = layer.paint.get('model-opacity');
 
                 const emissiveStrength = layer.paint.get('model-emissive-strength').constantOr(0.0);
-
                 uniformValues = modelUniformValues(
                     coord.expandedProjMatrix,
                     Float32Array.from(node.matrix),
                     new Float32Array(16),
+                    /* $FlowIgnore[incompatible-call] we can safely pass null for node.matrix as it is handled in the modelUniformValues constructor */
+                    null,
                     painter,
                     layerOpacity,
                     pbr.baseColorFactor,
@@ -788,12 +790,15 @@ function drawBatchedModels(painter: Painter, source: SourceCache, layer: ModelSt
                 // keep model and nodemodel matrices separate for rendering door lights
                 const nodeModelMatrix = mat4.multiply([], tileModelMatrix, node.matrix);
 
-                const lightingMatrix = mat4.multiply([], zScaleMatrix, tileModelMatrix);
+                let lightingMatrix = mat4.multiply([], zScaleMatrix, tileModelMatrix);
                 mat4.multiply(lightingMatrix, negCameraPosMatrix, lightingMatrix);
                 const normalMatrix = mat4.invert([], lightingMatrix);
                 mat4.transpose(normalMatrix, normalMatrix);
                 mat4.scale(normalMatrix, normalMatrix, normalScale);
 
+                // lighting matrix should take node.matrix into account
+                lightingMatrix = mat4.multiply(lightingMatrix, lightingMatrix, node.matrix);
+
                 const isLightBeamPass = painter.renderPass === 'light-beam';
                 const wpvForNode = mat4.multiply([], tr.expandedFarZProjMatrix, nodeModelMatrix);
                 // Lights come in tilespace so wvp should not include node.matrix when rendering door ligths
@@ -873,7 +878,9 @@ function drawBatchedModels(painter: Painter, source: SourceCache, layer: ModelSt
                     const program = painter.getOrCreateProgram('model', programOptions);
 
                     if (!isShadowPass && shadowRenderer) {
-                        shadowRenderer.setupShadowsFromMatrix(nodeModelMatrix, program, shadowRenderer.useNormalOffset);
+                        // The shadow matrix does not need to include node transforms,
+                        // as shadow_pos will be performing that transform in the shader
+                        shadowRenderer.setupShadowsFromMatrix(tileModelMatrix, program, shadowRenderer.useNormalOffset);
                     }
 
                     painter.uploadCommonUniforms(context, program, null, fogMatrixArray);
@@ -888,6 +895,7 @@ function drawBatchedModels(painter: Painter, source: SourceCache, layer: ModelSt
                             new Float32Array(worldViewProjection),
                             new Float32Array(lightingMatrix),
                             new Float32Array(normalMatrix),
+                            new Float32Array(node.matrix),
                             painter,
                             layerOpacity,
                             pbr.baseColorFactor,

3d-style/render/program/model_program.js

@@ -1,6 +1,6 @@
 // @flow
 
-import {mat3, vec3} from 'gl-matrix';
+import {mat3, mat4, vec3} from 'gl-matrix';
 import {
     Uniform1i,
     Uniform1f,
@@ -22,6 +22,7 @@ export type ModelUniformsType = {
     'u_matrix': UniformMatrix4f,
     'u_lighting_matrix': UniformMatrix4f,
     'u_normal_matrix': UniformMatrix4f,
+    'u_node_matrix': UniformMatrix4f,
     'u_lightpos': Uniform3f,
     'u_lightintensity': Uniform1f,
     'u_lightcolor': Uniform3f,
@@ -49,6 +50,7 @@ const modelUniforms = (context: Context): ModelUniformsType => ({
     'u_matrix': new UniformMatrix4f(context),
     'u_lighting_matrix': new UniformMatrix4f(context),
     'u_normal_matrix': new UniformMatrix4f(context),
+    'u_node_matrix': new UniformMatrix4f(context),
     'u_lightpos': new Uniform3f(context),
     'u_lightintensity': new Uniform1f(context),
     'u_lightcolor': new Uniform3f(context),
@@ -73,10 +75,13 @@ const modelUniforms = (context: Context): ModelUniformsType => ({
 
 });
 
+const emptyMat4 = new Float32Array(mat4.identity([]));
+
 const modelUniformValues = (
     matrix: Float32Array,
     lightingMatrix: Float32Array,
     normalMatrix: Float32Array,
+    nodeMatrix: Float32Array,
     painter: Painter,
     opacity: number,
     baseColorFactor: Color,
@@ -112,6 +117,7 @@ const modelUniformValues = (
         'u_matrix': matrix,
         'u_lighting_matrix': lightingMatrix,
         'u_normal_matrix': normalMatrix,
+        'u_node_matrix': nodeMatrix ? nodeMatrix : emptyMat4,
         'u_lightpos': lightPos,
         'u_lightintensity': light.properties.get('intensity'),
         'u_lightcolor': [lightColor.r, lightColor.g, lightColor.b],
@@ -150,7 +156,6 @@ const modelDepthUniforms = (context: Context): ModelDepthUniformsType => ({
     'u_node_matrix': new UniformMatrix4f(context)
 });
 
-const emptyMat4 = new Float32Array(16);
 const modelDepthUniformValues = (
     matrix: Float32Array,
     instance: Float32Array = emptyMat4,

3d-style/render/shadow_renderer.js

@@ -149,6 +149,8 @@ export class ShadowRenderer {
     shadowDirection: Vec3;
     useNormalOffset: boolean;
 
+    _forceDisable: boolean;
+
     constructor(painter: Painter) {
         this.painter = painter;
         this._enabled = false;
@@ -159,9 +161,11 @@ export class ShadowRenderer {
         this._receivers = new ShadowReceivers();
         this._depthMode = new DepthMode(painter.context.gl.LEQUAL, DepthMode.ReadWrite, [0, 1]);
         this._uniformValues = defaultShadowUniformValues();
+        this._forceDisable = false;
 
         this.useNormalOffset = false;
 
+        painter.tp.registerParameter(this, ["Shadows"], "_forceDisable", {label: "forceDisable"}, () => { this.painter.style.map.triggerRepaint(); });
         painter.tp.registerParameter(shadowParameters, ["Shadows"], "cascadeCount", {min: 1, max: 2, step: 1});
         painter.tp.registerParameter(shadowParameters, ["Shadows"], "shadowMapResolution", {min: 32, max: 2048, step: 32});
         painter.tp.registerBinding(this, ["Shadows"], "_numCascadesToRender", {readonly: true, label: 'numCascadesToRender'});
@@ -201,7 +205,7 @@ export class ShadowRenderer {
 
         this._enabled = this._shadowLayerCount > 0;
 
-        if (!this._enabled) {
+        if (!this.enabled) {
             return;
         }
 
@@ -309,7 +313,7 @@ export class ShadowRenderer {
     }
 
     get enabled(): boolean {
-        return this._enabled;
+        return this._enabled && !this._forceDisable;
     }
 
     set enabled(enabled: boolean) {
@@ -318,7 +322,7 @@ export class ShadowRenderer {
     }
 
     drawShadowPass(style: Style, sourceCoords: {[_: string]: Array<OverscaledTileID>}) {
-        if (!this._enabled) {
+        if (!this.enabled) {
             return;
         }
 
@@ -356,7 +360,7 @@ export class ShadowRenderer {
     }
 
     drawGroundShadows() {
-        if (!this._enabled) {
+        if (!this.enabled) {
             return;
         }
 
@@ -425,7 +429,7 @@ export class ShadowRenderer {
     }
 
     setupShadows(unwrappedTileID: UnwrappedTileID, program: Program<*>, normalOffsetMode: ?ShadowNormalOffsetMode, tileOverscaledZ: number = 0) {
-        if (!this._enabled) {
+        if (!this.enabled) {
             return;
         }
 
@@ -467,7 +471,7 @@ export class ShadowRenderer {
     }
 
     setupShadowsFromMatrix(worldMatrix: Mat4, program: Program<*>, normalOffset: boolean = false) {
-        if (!this._enabled) {
+        if (!this.enabled) {
             return;
         }
 

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

@@ -22,6 +22,7 @@ in vec3 a_pos_3f;
 // interpolatedHeight = pow(pos_z * .x + .y, .z)
 
 uniform mat4 u_matrix;
+uniform mat4 u_node_matrix;
 uniform mat4 u_lighting_matrix;
 uniform vec3 u_camera_pos;
 uniform vec4 u_color_mix;
@@ -170,22 +171,22 @@ void main() {
 #endif
 
 #ifdef RENDER_SHADOWS
-    vec3 shadow_pos = local_pos;
+    vec4 shadow_pos = u_node_matrix * vec4(local_pos, 1.0);
 #ifdef NORMAL_OFFSET
 #ifdef HAS_ATTRIBUTE_a_normal_3f
 #ifdef MODEL_POSITION_ON_GPU
-     // flip the xy to bring it to the same, wrong, fill extrusion normal orientation toward inside.
-     // See the explanation in shadow_normal_offset.
-     vec3 offset = shadow_normal_offset(vec3(-normal_3f.xy, normal_3f.z));
-     shadow_pos += offset * shadow_normal_offset_multiplier0();
+    // flip the xy to bring it to the same, wrong, fill extrusion normal orientation toward inside.
+    // See the explanation in shadow_normal_offset.
+    vec3 offset = shadow_normal_offset(vec3(-normal_3f.xy, normal_3f.z));
+    shadow_pos.xyz += offset * shadow_normal_offset_multiplier0();
 #else
     vec3 offset = shadow_normal_offset_model(normalize(normal_3f));
-    shadow_pos += offset * shadow_normal_offset_multiplier0();
+    shadow_pos.xyz += offset * shadow_normal_offset_multiplier0();
 #endif
 #endif // HAS_ATTRIBUTE_a_normal_3f
 #endif // NORMAL_OFFSET
-    v_pos_light_view_0 = u_light_matrix_0 * vec4(shadow_pos, 1);
-    v_pos_light_view_1 = u_light_matrix_1 * vec4(shadow_pos, 1);
+    v_pos_light_view_0 = u_light_matrix_0 * shadow_pos;
+    v_pos_light_view_1 = u_light_matrix_1 * shadow_pos;
     v_depth_shadows = gl_Position.w;
 #endif // RENDER_SHADOWS
 }

3d-style/source/replacement_source.js

@@ -207,7 +207,7 @@ class ReplacementSource {
                         const active = this._activeRegions[idx];
 
                         // Go through each footprint in the current priority level
-                        // and check whether they're been occluded by any other regions
+                        // and check whether they've been occluded by any other regions
                         // with higher priority
                         active.hiddenByOverlap = false;
 
@@ -359,9 +359,8 @@ function footprintsIntersect(a: Footprint, aTile: UnwrappedTileID, b: Footprint,
         const zDiff = Math.pow(2.0, dstId.z - srcId.z);
 
         queryVertices = a.vertices.map(v => {
-            const x = (v.x * srcId.x * EXTENT) * zDiff - dstId.x * EXTENT;
-            const y = (v.y * srcId.y * EXTENT) * zDiff - dstId.y * EXTENT;
-
+            const x = (v.x + srcId.x * EXTENT) * zDiff - dstId.x * EXTENT;
+            const y = (v.y + srcId.y * EXTENT) * zDiff - dstId.y * EXTENT;
             return new Point(x, y);
         });
     }

3d-style/style/style_layer/model_style_layer_properties.js

@@ -42,6 +42,7 @@ export type PaintProps = {|
     "model-roughness": DataDrivenProperty<number>,
     "model-height-based-emissive-strength-multiplier": DataDrivenProperty<[number, number, number, number, number]>,
     "model-cutoff-fade-range": DataConstantProperty<number>,
+    "model-front-cutoff": DataConstantProperty<[number, number, number]>,
 |};
 
 const paint: Properties<PaintProps> = new Properties({
@@ -59,6 +60,7 @@ const paint: Properties<PaintProps> = new Properties({
     "model-roughness": new DataDrivenProperty(styleSpec["paint_model"]["model-roughness"]),
     "model-height-based-emissive-strength-multiplier": new DataDrivenProperty(styleSpec["paint_model"]["model-height-based-emissive-strength-multiplier"]),
     "model-cutoff-fade-range": new DataConstantProperty(styleSpec["paint_model"]["model-cutoff-fade-range"]),
+    "model-front-cutoff": new DataConstantProperty(styleSpec["paint_model"]["model-front-cutoff"]),
 });
 
 // Note: without adding the explicit type annotation, Flow infers weaker types

CHANGELOG.md

@@ -1,17 +1,26 @@
-## 3.4.0-beta.1
+## 3.4.0
 
 ### Features and improvements ✨
+- Add `dynamic: true` option for GeoJSON sources that enables partial update API with `source.updateData` method. Further optimizations for this mode are expected in future releases.
+- Add `Map` `setConfig`, `getConfig`, `setSchema` and `getSchema` methods for batch setting of style configuration options.
+- Add `config` option for the `Map` constructor and `setStyle` methods for conveniently setting style configuration options on map initialization.
 - Add `icon-color-saturation`, `icon-color-contrast`, `icon-color-brightness-min` and `icon-color-brightness-max` to control symbol layer appearance.
 - Introduce a new `line-join` mode: `none` to improve line pattern distortions around joins.
 - Extend `model-id` property to support URIs (in addition to style-defined model references).
+- Expose more parameters in map `devtools` UI.
 
 ### Bug fixes 🐞
+- Fix an issue with `flyTo` ignoring `padding` in its options.
 - Respect padding in `cameraForBounds` on globe view. (h/t [@jonasnoki](https://github.com/jonasnoki)) [#13126](https://github.com/mapbox/mapbox-gl-js/pull/13126)
 - Fix `preloadOnly` not preloading tiles from style imports.
 - Fix `queryRenderedFeatures` for non-integer ID in non-tiled model sources
 - Fix `model-scale` property for large number of 3D models.
 - Fix flickering of `raster-particle` layer on globe view.
 - Improve rendering of low-resolution `raster-array` data.
+- Fix an issue with GL JS bundle not building locally on Windows.
+- Fix multiple edge cases when using `symbol-z-elevate`.
+- Fix rendering issues with `raster-particle` layer on certain Android devices.
+- Fix shadow and lighting rendering issues in certain areas when using Mapbox Standard.
 
 ## 3.3.0