v3.2.0-beta.1 (bug fixes and miscellaneous improvements)

.circleci/config.yml

@@ -557,4 +557,4 @@ jobs:
             else
                 echo "Error: Non-2xx response code - $response_code"
                 exit 1
-            fi
+            fi

.eslintrc

@@ -60,7 +60,7 @@
     "no-eq-null": "off",
     "no-lonely-if": "off",
     "no-new": "off",
-    "no-unused-vars": ["error", {"argsIgnorePattern": "^_$"}],
+    "no-unused-vars": ["error", {"argsIgnorePattern": "^_"}],
     "no-warning-comments": "error",
     "no-mixed-operators": ["error", {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]}],
     "object-curly-spacing": ["error", "never"],

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

@@ -221,6 +221,8 @@ class Tiled3dModelBucket implements Bucket {
                 const doorLightChanged = previousDoorColor !== nodeInfo.evaluatedColor[PartIndices.door] ||
                                          previousDoorRMEA !== nodeInfo.evaluatedRMEA[PartIndices.door];
                 updateNodeFeatureVertices(nodeInfo, doorLightChanged);
+            } else {
+                nodeInfo.evaluatedRMEA[0][2] = layer.paint.get('model-emissive-strength').evaluate(evaluationFeature, {}, canonical);
             }
             nodeInfo.evaluatedScale = (layer.paint.get('model-scale').evaluate(evaluationFeature, {}, canonical): any);
             if (!this.updatePbrBuffer(nodeInfo.node)) {

3d-style/data/model.js

@@ -302,7 +302,6 @@ export default class Model {
 }
 
 export function uploadTexture(texture: ModelTexture, context: Context, useSingleChannelTexture: boolean = false) {
-    // $FlowFixMe[prop-missing]
     const textureFormat = useSingleChannelTexture ? context.gl.R8 : context.gl.RGBA;
     if (!texture.uploaded) {
         const useMipmap = texture.sampler.minFilter >= context.gl.NEAREST_MIPMAP_NEAREST;

3d-style/render/draw_model.js

@@ -758,7 +758,8 @@ function drawBatchedModels(painter: Painter, source: SourceCache, layer: ModelSt
                 mat4.scale(normalMatrix, normalMatrix, normalScale);
 
                 const worldViewProjection = mat4.multiply([], tr.expandedFarZProjMatrix, modelMatrix);
-
+                const hasMapboxFeatures = modelTraits & ModelTraits.HasMapboxMeshFeatures;
+                const emissiveStrength = hasMapboxFeatures ? 0.0 : nodeInfo.evaluatedRMEA[0][2];
                 for (let i = 0; i < node.meshes.length; ++i) {
                     const mesh = node.meshes[i];
                     const isLight = i === node.lightMeshIndex;
@@ -778,8 +779,7 @@ function drawBatchedModels(painter: Painter, source: SourceCache, layer: ModelSt
                     };
                     const dynamicBuffers = [];
                     setupMeshDraw(((programOptions.defines: any): Array<string>), dynamicBuffers, mesh, painter);
-
-                    if (!(modelTraits & ModelTraits.HasMapboxMeshFeatures)) {
+                    if (!hasMapboxFeatures) {
                         (programOptions.defines: any).push('DIFFUSE_SHADED');
                     }
 
@@ -822,7 +822,6 @@ function drawBatchedModels(painter: Painter, source: SourceCache, layer: ModelSt
                     pbr.roughnessFactor = 0.5;
 
                     // Set emissive strength to zero for landmarks, as it is already used embedded in the PBR buffer.
-                    const emissiveStrength = 0.0;
                     const uniformValues = modelUniformValues(
                             new Float32Array(worldViewProjection),
                             new Float32Array(lightingMatrix),

3d-style/render/shadow_renderer.js

@@ -53,8 +53,10 @@ export type TileShadowVolume = {
 
 type ShadowNormalOffsetMode = 'vector-tile' | 'model-tile';
 
-const cascadeCount = 2;
-const shadowMapResolution = 2048;
+const shadowParameters = {
+    cascadeCount: 2,
+    shadowMapResolution: 2048
+};
 
 class ShadowReceiver {
     constructor(aabb: Aabb, lastCascade: ?number) {
@@ -158,6 +160,9 @@ export class ShadowRenderer {
         this._uniformValues = defaultShadowUniformValues();
 
         this.useNormalOffset = false;
+
+        painter.tp.registerParameter(shadowParameters, ["Shadows"], "cascadeCount", {min: 1, max: 2, step: 1});
+        painter.tp.registerParameter(shadowParameters, ["Shadows"], "shadowMapResolution", {min: 32, max: 2048, step: 32});
     }
 
     destroy() {
@@ -199,11 +204,12 @@ export class ShadowRenderer {
         }
 
         const context = painter.context;
-        const width = shadowMapResolution;
-        const height = shadowMapResolution;
+        const width = shadowParameters.shadowMapResolution;
+        const height = shadowParameters.shadowMapResolution;
 
-        if (this._cascades.length === 0) {
-            for (let i = 0; i < cascadeCount; ++i) {
+        if (this._cascades.length === 0 || shadowParameters.shadowMapResolution !== this._cascades[0].texture.size[0]) {
+            this._cascades = [];
+            for (let i = 0; i < shadowParameters.cascadeCount; ++i) {
                 const useColor = painter._shadowMapDebug;
 
                 const gl = context.gl;
@@ -246,13 +252,13 @@ export class ShadowRenderer {
         const cascadeSplitDist = transform.cameraToCenterDistance * 1.5;
         const shadowCutoutDist = cascadeSplitDist * 3.0;
         const cameraInvProj = new Float64Array(16);
-        for (let cascadeIndex = 0; cascadeIndex < cascadeCount; ++cascadeIndex) {
+        for (let cascadeIndex = 0; cascadeIndex < this._cascades.length; ++cascadeIndex) {
             const cascade = this._cascades[cascadeIndex];
 
             let near = transform.height / 50.0;
             let far = 1.0;
 
-            if (cascadeCount === 1) {
+            if (shadowParameters.cascadeCount === 1) {
                 far = shadowCutoutDist;
             } else {
                 if (cascadeIndex === 0) {
@@ -263,7 +269,7 @@ export class ShadowRenderer {
                 }
             }
 
-            const [matrix, radius] = createLightMatrix(transform, this.shadowDirection, near, far, shadowMapResolution, verticalRange);
+            const [matrix, radius] = createLightMatrix(transform, this.shadowDirection, near, far, shadowParameters.shadowMapResolution, verticalRange);
             cascade.scale = transform.scale;
             cascade.matrix = matrix;
             cascade.boundingSphereRadius = radius;
@@ -272,11 +278,12 @@ export class ShadowRenderer {
             cascade.frustum = Frustum.fromInvProjectionMatrix(cameraInvProj, 1, 0, true);
             cascade.far = far;
         }
-        this._uniformValues['u_fade_range'] = [this._cascades[1].far * 0.75, this._cascades[1].far];
+        const fadeRangeIdx = this._cascades.length - 1;
+        this._uniformValues['u_fade_range'] = [this._cascades[fadeRangeIdx].far * 0.75, this._cascades[fadeRangeIdx].far];
         this._uniformValues['u_shadow_intensity'] = shadowIntensity;
         this._uniformValues['u_shadow_direction'] = [this.shadowDirection[0], this.shadowDirection[1], this.shadowDirection[2]];
-        this._uniformValues['u_shadow_texel_size'] = 1 / shadowMapResolution;
-        this._uniformValues['u_shadow_map_resolution'] = shadowMapResolution;
+        this._uniformValues['u_shadow_texel_size'] = 1 / shadowParameters.shadowMapResolution;
+        this._uniformValues['u_shadow_map_resolution'] = shadowParameters.shadowMapResolution;
         this._uniformValues['u_shadowmap_0'] = TextureSlots.ShadowMap0;
         this._uniformValues['u_shadowmap_1'] = TextureSlots.ShadowMap0 + 1;
 
@@ -323,7 +330,7 @@ export class ShadowRenderer {
         // shadows.
         this._numCascadesToRender = this._receivers.computeRequiredCascades(painter.transform.getFrustum(0), painter.transform.worldSize, this._cascades);
 
-        context.viewport.set([0, 0, shadowMapResolution, shadowMapResolution]);
+        context.viewport.set([0, 0, shadowParameters.shadowMapResolution, shadowParameters.shadowMapResolution]);
 
         for (let cascade = 0; cascade < this._numCascadesToRender; ++cascade) {
             painter.currentShadowCascade = cascade;
@@ -428,7 +435,7 @@ export class ShadowRenderer {
         const lightMatrix = new Float64Array(16);
         const tileMatrix = transform.calculatePosMatrix(unwrappedTileID, transform.worldSize);
 
-        for (let i = 0; i < cascadeCount; i++) {
+        for (let i = 0; i < this._cascades.length; i++) {
             mat4.multiply(lightMatrix, this._cascades[i].matrix, tileMatrix);
             uniforms[i === 0 ? 'u_light_matrix_0' : 'u_light_matrix_1'] = Float32Array.from(lightMatrix);
             context.activeTexture.set(gl.TEXTURE0 + TextureSlots.ShadowMap0 + i);
@@ -439,9 +446,9 @@ export class ShadowRenderer {
 
         if (this.useNormalOffset) {
             const meterInTiles = tileToMeter(unwrappedTileID.canonical);
-            const texelScale = 2.0 / transform.tileSize * EXTENT / shadowMapResolution;
+            const texelScale = 2.0 / transform.tileSize * EXTENT / shadowParameters.shadowMapResolution;
             const shadowTexelInTileCoords0 = texelScale * this._cascades[0].boundingSphereRadius;
-            const shadowTexelInTileCoords1 = texelScale * this._cascades[1].boundingSphereRadius;
+            const shadowTexelInTileCoords1 = texelScale * this._cascades[this._cascades.length - 1].boundingSphereRadius;
             // Instanced model tiles could have smoothened (shared among neighbor faces) normals. Normal is not surface normal
             // and this is why it is needed to increase the offset. 3.0 in case of model-tile could be alternatively replaced by
             // 2.0 if normal would not get scaled by dotScale in shadow_normal_offset().
@@ -467,7 +474,7 @@ export class ShadowRenderer {
         const uniforms = this._uniformValues;
 
         const lightMatrix = new Float64Array(16);
-        for (let i = 0; i < cascadeCount; i++) {
+        for (let i = 0; i < shadowParameters.cascadeCount; i++) {
             mat4.multiply(lightMatrix, this._cascades[i].matrix, worldMatrix);
             uniforms[i === 0 ? 'u_light_matrix_0' : 'u_light_matrix_1'] = Float32Array.from(lightMatrix);
             context.activeTexture.set(gl.TEXTURE0 + TextureSlots.ShadowMap0 + i);

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

@@ -144,15 +144,14 @@ vec4 getBaseColor() {
     }
     texColor.w = 1.0;
 #endif
-    // Convert to linear
-    texColor.rgb = sRGBToLinear(texColor.rgb);
+
     if(u_baseTextureIsAlpha) {
-        if (texColor.w < 0.5) {
+        if (texColor.r < 0.5) {
             discard;
         }
-        albedo *= mix(vec4(texColor.rgb, texColor.a), vec4(texColor.a), float(u_baseTextureIsAlpha));
     } else {
         // gltf material
+        texColor.rgb = sRGBToLinear(texColor.rgb);
         albedo *= texColor;
     }
 #endif
@@ -428,7 +427,8 @@ void main() {
 vec4 finalColor;
 #ifdef DIFFUSE_SHADED
     vec3 N = getNormal();
-    vec3 diffuse = getDiffuseShadedColor(getBaseColor().rgb, N, lightDir, lightColor);
+    vec3 baseColor = getBaseColor().rgb;
+    vec3 diffuse = getDiffuseShadedColor(baseColor, N, lightDir, lightColor);
     // Ambient Occlusion
 #ifdef HAS_TEXTURE_u_occlusionTexture
     // For b3dm tiles where models contains occlusion textures we interpret them similarly to how
@@ -437,7 +437,7 @@ vec4 finalColor;
     float ao = (texture(u_occlusionTexture, uv_2f).r - 1.0) * u_aoIntensity + 1.0;
     diffuse *= ao;
 #endif
-    finalColor = vec4(diffuse, 1.0) * u_opacity;
+    finalColor = vec4(mix(diffuse, baseColor, u_emissive_strength), 1.0) * u_opacity;
 #else // DIFFUSE_SHADED
     Material mat = getPBRMaterial();
     vec3 color = computeLightContribution(mat, lightDir, lightColor);

3d-style/style/lights.js

@@ -20,13 +20,13 @@ class Lights<P: Object> extends Evented {
         this._options = options;
         this.properties = new PossiblyEvaluated(properties);
 
-        this._transitionable = new Transitionable(properties, new Map(configOptions));
-        this._transitionable.setTransitionOrValue<LightsSpecification['properties']>(options.properties);
+        this._transitionable = new Transitionable(properties, scope, new Map(configOptions));
+        this._transitionable.setTransitionOrValue<$PropertyType<LightsSpecification, 'properties'>>(options.properties);
         this._transitioning = this._transitionable.untransitioned();
     }
 
     updateConfig(configOptions?: ?ConfigOptions) {
-        this._transitionable.setTransitionOrValue<LightsSpecification['properties']>(this._options.properties, new Map(configOptions));
+        this._transitionable.setTransitionOrValue<$PropertyType<LightsSpecification, 'properties'>>(this._options.properties, new Map(configOptions));
     }
 
     updateTransitions(parameters: TransitionParameters) {
@@ -48,7 +48,7 @@ class Lights<P: Object> extends Evented {
 
     set(options: LightsSpecification, configOptions?: ?ConfigOptions) {
         this._options = options;
-        this._transitionable.setTransitionOrValue<LightsSpecification['properties']>(options.properties, configOptions);
+        this._transitionable.setTransitionOrValue<$PropertyType<LightsSpecification, 'properties'>>(options.properties, configOptions);
     }
 
     shadowsEnabled(): boolean {

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

@@ -17,8 +17,8 @@ class ModelStyleLayer extends StyleLayer {
     paint: PossiblyEvaluated<PaintProps>;
     layout: PossiblyEvaluated<LayoutProps>;
 
-    constructor(layer: LayerSpecification, options?: ?ConfigOptions) {
-        super(layer, properties, options);
+    constructor(layer: LayerSpecification, scope: string, options?: ?ConfigOptions) {
+        super(layer, properties, scope, options);
     }
 
     createBucket(parameters: BucketParameters<ModelStyleLayer>): ModelBucket {

3d-style/util/draco_decoder_gltf.js

@@ -1,5 +1,6 @@
+// @noflow
 /* global WebAssembly: false */
-/* eslint-disable new-cap, flowtype/require-valid-file-annotation */
+/* eslint-disable new-cap */
 
 // Emscripten-based JavaScript wrapper for Google Draco WASM decoder, manually optimized for much smaller size
 export function DracoDecoderModule(wasmPromise) {

CHANGELOG.md

@@ -1,3 +1,23 @@
+## 3.2.0-beta.1
+
+### Features and improvements ✨
+
+- Added imports support in `map.areTilesLoaded`.
+- Added support of rotation of elevated raster layers.
+- Added support of negative values for `fill-extrusion-flood-light-ground-radius` property.
+- Config options of one imported fragment can be used in another fragments.
+- Improved cutoff behavior of buildings.
+
+### Bug fixes 🐞
+
+- Fix an issue where `map.flyTo` with `padding` option was setting and overriding map's padding.
+- Issue a warning instead of a validation error if `url` or `tiles` is missing from source, i.e. in MapTiler source.
+- Fix the moiré effects on patterns in tilted map views.
+- Removing role attribute for non-visible alerts. (h/t [@jakubmakielkowski](https://github.com/jakubmakielkowski)) [#13051](https://github.com/mapbox/mapbox-gl-js/pull/13051)
+- Fix an elevation of symbols above multiple fill extrusions, when some of them hidden or lowered.
+- Fix `config` expression chaining through nested styles.
+- Proper clean up of actor cancel callbacks. (h/t [@temas](https://github.com/temas)) [#13074](https://github.com/mapbox/mapbox-gl-js/pull/13074)
+
 ## 3.1.2
 
 ### Bug fixes 🐞

build/node-loader.js

@@ -10,6 +10,10 @@ export async function resolve(specifier, context, nextResolve) {
         return {url, shortCircuit: true};
     }
 
+    if (specifier == 'tracked_parameters_proxy') {
+        specifier = './tracked_parameters_mock.js';
+    }
+
     return nextResolve(specifier);
 }
 

build/rollup_plugins.js

@@ -10,6 +10,7 @@ import minifyStyleSpec from './rollup_plugin_minify_style_spec.js';
 import {createFilter} from '@rollup/pluginutils';
 import strip from '@rollup/plugin-strip';
 import replace from '@rollup/plugin-replace';
+import alias from '@rollup/plugin-alias';
 
 // Common set of plugins/transformations shared across different rollup
 // builds (main mapboxgl bundle, style-spec package, benchmarks bundle)
@@ -20,6 +21,11 @@ export const plugins = ({minified, production, test, bench, keepClassNames}) =>
     json({
         exclude: 'src/style-spec/reference/v8.json'
     }),
+    alias({
+        entries: [
+            { find: 'tracked_parameters_proxy', replacement: production ? 'src/tracked-parameters/tracked_parameters_mock.js' : 'src/tracked-parameters/tracked_parameters_ui.js' },
+        ]
+    }),
     (production && !bench) ? strip({
         sourceMap: true,
         functions: ['PerformanceUtils.*', 'WorkerPerformanceUtils.*', 'Debug.*', 'performance.mark']

debug/10186.html

@@ -28,6 +28,7 @@
 
 const map = window.map = new mapboxgl.Map({
     container: 'map',
+    enableEmbeddedDevUI: true,
     style: {
         'version': 8,
         'name': "Blank",

debug/2762.html

@@ -20,6 +20,7 @@
 
 var map = new mapboxgl.Map({
     container: 'map',
+    enableEmbeddedDevUI: true,
     style: {
         "version": 8,
         "sources": {

debug/3895.html

@@ -20,6 +20,7 @@
 
 var map = window.map = new mapboxgl.Map({
     container: 'map',
+    enableEmbeddedDevUI: true,
     center: [-68.13734351262877, 45.137451890638886],
     zoom: 5,
     style: 'mapbox://styles/mapbox/streets-v10',

debug/3d-playground.html

@@ -95,7 +95,9 @@
     this.floodLightColor = {r:255, g:255, b:146};
     this.floodLightIntensity = 0.0;
     this.floodLightGroundAttenuation = 0.69;
+    this.floodLightGroundRadius = 0.0;
     this.buildingColor = {r:255, g:255, b:255};
+    this.buildingAlpha = 1.0;
     this.buildingOpacity = 1;
     this.cutoffFadeRange = 0.0;
     this.ambientLightColor = {r:255, g:255, b:255};
@@ -385,6 +387,7 @@
     });
     const verticalGradient = buildings.addInput(demo3d, 'verticalGradient');
     const buildingColor = buildings.addInput(demo3d, 'buildingColor');
+    const buildingAlpha = buildings.addInput(demo3d, 'buildingAlpha', {min:0.0, max:1.0});
     const buildingOpacity = buildings.addInput(demo3d, 'buildingOpacity', {min:0.0, max:1.0});
     const cutoffFadeRange = buildings.addInput(demo3d, 'cutoffFadeRange', {min:0.0, max:1.0});
     const edgeRadius = buildings.addInput(demo3d, 'edgeRadius');
@@ -393,7 +396,7 @@
     buildings.on('change', (ev) => {
         map.setPaintProperty(demo3d.buildingExtrusion, 'fill-extrusion-vertical-gradient', demo3d.verticalGradient);
         map.setPaintProperty(demo3d.buildingExtrusion, 'fill-extrusion-color',
-            'rgb(' + demo3d.buildingColor.r + ', ' + demo3d.buildingColor.g + ', ' + demo3d.buildingColor.b + ')');
+            'rgba(' + demo3d.buildingColor.r + ', ' + demo3d.buildingColor.g + ', ' + demo3d.buildingColor.b + ', ' + demo3d.buildingAlpha + ')');
         map.setPaintProperty(demo3d.buildingExtrusion, 'fill-extrusion-opacity', demo3d.buildingOpacity);
         map.setPaintProperty(demo3d.buildingExtrusion, 'fill-extrusion-cutoff-fade-range', demo3d.cutoffFadeRange);
         map.setLayoutProperty(demo3d.buildingExtrusion, 'fill-extrusion-edge-radius', demo3d.edgeRadius);
@@ -416,6 +419,7 @@
     const floodLightColor = groundEffects.addInput(demo3d, 'floodLightColor');
     const floodLightIntensity = groundEffects.addInput(demo3d, 'floodLightIntensity', {min:0.0, max:1.0});
     const floodLightGroundAttenuation = groundEffects.addInput(demo3d, 'floodLightGroundAttenuation', {min:0.0, max:1.0});
+    const floodLightGroundRadius = groundEffects.addInput(demo3d, 'floodLightGroundRadius', {min:-50.0, max:50.0});
     groundEffects.on('change', (ev) => {
         map.setPaintProperty(demo3d.buildingExtrusion, 'fill-extrusion-ambient-occlusion-intensity', demo3d.aoIntensity);
         map.setPaintProperty(demo3d.buildingExtrusion, 'fill-extrusion-ambient-occlusion-radius', demo3d.aoWallRadius);
@@ -426,6 +430,7 @@
             'rgb(' + demo3d.floodLightColor.r + ', ' + demo3d.floodLightColor.g + ', ' + demo3d.floodLightColor.b + ')');
         map.setPaintProperty(demo3d.buildingExtrusion, 'fill-extrusion-flood-light-intensity', demo3d.floodLightIntensity);
         map.setPaintProperty(demo3d.buildingExtrusion, 'fill-extrusion-flood-light-ground-attenuation', demo3d.floodLightGroundAttenuation);
+        map.setPaintProperty(demo3d.buildingExtrusion, 'fill-extrusion-flood-light-ground-radius', demo3d.floodLightGroundRadius);
     });
 };
 
@@ -437,7 +442,8 @@
     bearing: 60,
     style: window.dynamic,
     hash: true,
-    projection: 'globe'
+    projection: 'globe',
+    enableEmbeddedDevUI: true
 });
 
 const r = 255 * 0.75;