Sync v3.0.0-rc.1 with the release branch

.circleci/config.yml

@@ -101,17 +101,6 @@ workflows:
               ignore: /.*/
             branches:
               only: main
-      - deploy-benchmarks:
-          requires:
-            - install-mbx-ci
-            - build
-          filters:
-            tags:
-              only: /v[0-9]+.[0-9]+.[0-9]+(-.+)?/
-            branches:
-              only:
-                - main
-                - /release-.*/
       - deploy-release:
           requires:
             - install-mbx-ci
@@ -389,22 +378,6 @@ jobs:
           at: ~/
       - run: yarn run test-expressions
 
-  deploy-benchmarks:
-    <<: *linux-defaults
-    steps:
-      - attach_workspace:
-          at: ~/
-      - run:
-          name: Build
-          command: BENCHMARK_VERSION="${CIRCLE_TAG:-$CIRCLE_BRANCH} $(git rev-parse --short=7 HEAD)" yarn run build-benchmarks
-      - aws-cli/install
-      - run:
-          name: Upload benchmark
-          command: aws s3 cp --acl public-read --content-type application/javascript bench/versions/benchmarks_generated.js s3://mapbox-gl-js/${CIRCLE_TAG:-$CIRCLE_BRANCH}/benchmarks.js
-      - run:
-          name: Upload source maps
-          command: aws s3 cp --acl public-read --content-type application/javascript bench/versions/benchmarks_generated.js.map s3://mapbox-gl-js/${CIRCLE_TAG:-$CIRCLE_BRANCH}/benchmarks.js.map
-
   deploy-release:
     <<: *linux-defaults
     steps:
@@ -600,4 +573,4 @@ jobs:
           name: Trigger SLA performance tests
           command: |
             sha=$(git rev-parse HEAD)
-            curl --location --request POST 'https://circleci.com/api/v2/project/github/mapbox/mapbox-gl-js-performance-internal/pipeline' --header 'Content-Type: application/json' -u $CIRCLECI_API_TOKEN: -d "{ \"parameters\": { \"setup_sha\": \"$sha\", \"setup_source_branch\": \"internal\" } }"
+            curl --location --request POST 'https://circleci.com/api/v2/project/github/mapbox/mapbox-gl-js-performance-internal/pipeline' --header 'Content-Type: application/json' -u $CIRCLECI_API_TOKEN: -d "{ \"parameters\": { \"setup_sha\": \"$sha\", \"setup_source_branch\": \"internal\" } }"

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

@@ -7,6 +7,7 @@ import toEvaluationFeature from '../../../src/data/evaluation_feature.js';
 import type {EvaluationFeature} from '../../../src/data/evaluation_feature.js';
 import EvaluationParameters from '../../../src/style/evaluation_parameters.js';
 import Point from '@mapbox/point-geometry';
+import {vec3} from 'gl-matrix';
 import type {Mat4} from 'gl-matrix';
 import type {CanonicalTileID, OverscaledTileID} from '../../../src/source/tile_id.js';
 import type {
@@ -37,10 +38,17 @@ class ModelFeature {
     instancedDataOffset: number;
     instancedDataCount: number;
 
+    rotation: Array<number>;
+    scale: Array<number>;
+    translation: Array<number>;
+
     constructor(feature: EvaluationFeature, offset: number) {
         this.feature = feature;
         this.instancedDataOffset = offset;
         this.instancedDataCount = 0;
+        this.rotation = [0, 0, 0];
+        this.scale = [1, 1, 1];
+        this.translation = [0, 0, 0];
     }
 }
 
@@ -92,15 +100,19 @@ class ModelBucket implements Bucket {
     terrainElevationMin: number;
     terrainElevationMax: number;
 
+    hasZoomDependentProperties: boolean;
+
     /* $FlowIgnore[incompatible-type-arg] Doesn't need to know about all the implementations */
     constructor(options: BucketParameters<ModelStyleLayer>) {
         this.zoom = options.zoom;
         this.canonical = options.canonical;
         this.layers = options.layers;
-        this.layerIds = this.layers.map(layer => layer.id);
+        this.layerIds = this.layers.map(layer => layer.fqid);
         this.projection = options.projection;
         this.index = options.index;
 
+        this.hasZoomDependentProperties = this.layers[0].isZoomDependent();
+
         this.stateDependentLayerIds = this.layers.filter((l) => l.isStateDependent()).map((l) => l.id);
         this.hasPattern = false;
         this.instancesPerModel = {};
@@ -163,6 +175,37 @@ class ModelBucket implements Bucket {
         this.maxHeight = 0; // needs to be recalculated.
     }
 
+    updateZoomBasedPaintProperties(): boolean {
+        if (!this.hasZoomDependentProperties) {
+            return false;
+        }
+
+        // layer.paint.get('model-rotation').isZoom
+        let reuploadNeeded = false;
+        for (const modelId in this.instancesPerModel) {
+            const instances = this.instancesPerModel[modelId];
+            for (const feature of instances.features) {
+                const layer = this.layers[0];
+                const evaluationFeature = feature.feature;
+                const canonical = this.canonical;
+                const rotation = layer.paint.get('model-rotation').evaluate(evaluationFeature, {}, canonical);
+                const scale = layer.paint.get('model-scale').evaluate(evaluationFeature, {}, canonical);
+                const translation = layer.paint.get('model-translation').evaluate(evaluationFeature, {}, canonical);
+
+                // $FlowFixMe.
+                if (!vec3.exactEquals(feature.rotation, rotation) ||
+                    // $FlowFixMe.
+                    !vec3.exactEquals(feature.scale, scale) ||
+                    // $FlowFixMe.
+                    !vec3.exactEquals(feature.translation, translation)) {
+                    this.evaluate(feature, feature.featureStates, instances, true);
+                    reuploadNeeded = true;
+                }
+            }
+        }
+        return reuploadNeeded;
+    }
+
     isEmpty(): boolean {
         for (const modelId in this.instancesPerModel) {
             const perModelAttributes = this.instancesPerModel[modelId];
@@ -256,9 +299,13 @@ class ModelBucket implements Bucket {
         const layer = this.layers[0];
         const evaluationFeature = feature.feature;
         const canonical = this.canonical;
-        const rotation = layer.paint.get('model-rotation').evaluate(evaluationFeature, featureState, canonical);
-        const scale = layer.paint.get('model-scale').evaluate(evaluationFeature, featureState, canonical);
-        const translation = layer.paint.get('model-translation').evaluate(evaluationFeature, featureState, canonical);
+        // $FlowFixMe.
+        const rotation = feature.rotation = layer.paint.get('model-rotation').evaluate(evaluationFeature, featureState, canonical);
+        // $FlowFixMe.
+        const scale = feature.scale = layer.paint.get('model-scale').evaluate(evaluationFeature, featureState, canonical);
+        // $FlowFixMe.
+        const translation = feature.translation = layer.paint.get('model-translation').evaluate(evaluationFeature, featureState, canonical);
+
         const color = layer.paint.get('model-color').evaluate(evaluationFeature, featureState, canonical);
         color.a = layer.paint.get('model-color-mix-intensity').evaluate(evaluationFeature, featureState, canonical);
         const rotationScaleYZFlip: Mat4 = [];

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

@@ -169,7 +169,6 @@ class Tiled3dModelBucket implements Bucket {
             expressionRequiresReevaluation(layer.paint.get('model-roughness').value, brightnessChanged) ||
             expressionRequiresReevaluation(layer.paint.get('model-emissive-strength').value, brightnessChanged) ||
             expressionRequiresReevaluation(layer.paint.get('model-height-based-emissive-strength-multiplier').value, brightnessChanged)) {
-            this.dirty = false;
             this.projection = projection;
             this.brightness = calculatedBrightness;
             return true;
@@ -228,14 +227,16 @@ class Tiled3dModelBucket implements Bucket {
                 this.needsUpload = true;
             }
         }
+        this.dirty = false;
     }
 
     elevationUpdate(terrain: Terrain, exaggeration: number, coord: OverscaledTileID, source: string) {
-
+        assert(terrain);
         const demTile = terrain.findDEMTileFor(coord);
-        if (demTile === this.terrainTile && exaggeration === this.terrainExaggeration) return;
+        if (!demTile) return;
+        if (demTile.tileID.canonical === this.terrainTile && exaggeration === this.terrainExaggeration) return;
 
-        if (terrain && demTile && demTile.dem && demTile.tileID.overscaledZ !== this.elevationReadFromZ) {
+        if (demTile.dem && demTile.tileID.overscaledZ !== this.elevationReadFromZ) {
             this.elevationReadFromZ = demTile.tileID.overscaledZ;
             const dem = DEMSampler.create(terrain, coord, demTile);
             if (!dem) return;
@@ -255,6 +256,8 @@ class Tiled3dModelBucket implements Bucket {
                 node.elevation = elevation;
             }
         }
+        this.terrainTile = demTile.tileID.canonical;
+        this.terrainExaggeration = exaggeration;
     }
 
     updateDEM(terrain: Terrain, dem: DEMSampler, coord: OverscaledTileID, source: string) {

3d-style/render/draw_model.js

@@ -1,7 +1,7 @@
 // @flow
 
 import type Painter from '../../src/render/painter.js';
-import type {UseProgramParams} from '../../src/render/painter.js';
+import type {CreateProgramParams} from '../../src/render/painter.js';
 import type SourceCache from '../../src/source/source_cache.js';
 import type ModelStyleLayer from '../style/style_layer/model_style_layer.js';
 
@@ -160,7 +160,7 @@ function drawMesh(sortedMesh: SortedMesh, painter: Painter, layer: ModelStyleLay
         material,
         layer);
 
-    const programOptions: UseProgramParams = {
+    const programOptions: CreateProgramParams = {
         defines: []
     };
 
@@ -189,7 +189,7 @@ function drawMesh(sortedMesh: SortedMesh, painter: Painter, layer: ModelStyleLay
         (programOptions.defines: any).push('RENDER_CUTOFF');
     }
 
-    const program = painter.useProgram('model', programOptions);
+    const program = painter.getOrCreateProgram('model', programOptions);
 
     painter.uploadCommonUniforms(context, program, null, fogMatrixArray, cutoffParams);
 
@@ -268,7 +268,7 @@ function drawShadowCaster(mesh: Mesh, matrix: Mat4, painter: Painter, layer: Mod
     const shadowMatrix = shadowRenderer.calculateShadowPassMatrixFromMatrix(matrix);
     const uniformValues = modelDepthUniformValues(shadowMatrix);
     const definesValues = ['DEPTH_TEXTURE'];
-    const program = painter.useProgram('modelDepth', {defines: ((definesValues: any): DynamicDefinesType[])});
+    const program = painter.getOrCreateProgram('modelDepth', {defines: ((definesValues: any): DynamicDefinesType[])});
     const context = painter.context;
     program.draw(painter, context.gl.TRIANGLES, depthMode, StencilMode.disabled, colorMode, CullFaceMode.backCCW,
             uniformValues, layer.id, mesh.vertexBuffer, mesh.indexBuffer, mesh.segments, layer.paint, painter.transform.zoom,
@@ -407,7 +407,7 @@ function drawModels(painter: Painter, sourceCache: SourceCache, layer: ModelStyl
 }
 
 // If terrain changes, update elevations (baked in translation).
-function updateModelBucketsElevation(painter: Painter, bucket: ModelBucket, bucketTileID: OverscaledTileID) {
+function updateModelBucketsElevation(painter: Painter, bucket: ModelBucket, bucketTileID: OverscaledTileID): boolean {
     let exaggeration = painter.terrain ? painter.terrain.exaggeration() : 0;
     let dem: ?DEMSampler;
     if (painter.terrain && exaggeration > 0) {
@@ -427,7 +427,7 @@ function updateModelBucketsElevation(painter: Painter, bucket: ModelBucket, buck
 
     if (exaggeration === bucket.validForExaggeration &&
         (exaggeration === 0 || (dem && dem._demTile && dem._demTile.tileID === bucket.validForDEMTile.id && dem._dem._timestamp === bucket.validForDEMTile.timestamp))) {
-        return;
+        return false;
     }
 
     let elevationMin: ?number;
@@ -451,8 +451,18 @@ function updateModelBucketsElevation(painter: Painter, bucket: ModelBucket, buck
 
     bucket.validForExaggeration = exaggeration;
     bucket.validForDEMTile = dem && dem._demTile ? {id: dem._demTile.tileID, timestamp: dem._dem._timestamp} : {id: undefined, timestamp: 0};
-    bucket.uploaded = false;
-    bucket.upload(painter.context);
+
+    return true;
+}
+
+function updateModelBucketData(painter: Painter, bucket: ModelBucket, bucketTileID: OverscaledTileID) {
+    const bucketContentsUpdatedByZoom = bucket.updateZoomBasedPaintProperties();
+    const bucketContentsUpdatedByElevation = updateModelBucketsElevation(painter, bucket, bucketTileID);
+
+    if (bucketContentsUpdatedByZoom || bucketContentsUpdatedByElevation) {
+        bucket.uploaded = false;
+        bucket.upload(painter.context);
+    }
 }
 
 // preallocate structure used to reduce re-allocation during rendering and flow checks
@@ -517,8 +527,7 @@ function drawInstancedModels(painter: Painter, source: SourceCache, layer: Model
         const tileZoom = calculateTileZoom(coord, tr);
         evaluationParameters.zoom = tileZoom;
         const modelIdProperty = modelIdUnevaluatedProperty.possiblyEvaluate(evaluationParameters);
-
-        updateModelBucketsElevation(painter, bucket, coord);
+        updateModelBucketData(painter, bucket, coord);
 
         renderData.shadowUniformsInitialized = false;
         renderData.useSingleShadowCascade = !!shadowRenderer && shadowRenderer.getMaxCascadeForTile(coord.toUnwrapped()) === 0;
@@ -560,6 +569,8 @@ function drawInstancedModels(painter: Painter, source: SourceCache, layer: Model
 const minimumInstanceCount = 20;
 
 function drawInstancedNode(painter: Painter, layer: ModelStyleLayer, node: Node, modelInstances: any, cameraPos: [number, number, number], coord: OverscaledTileID, renderData: RenderData) {
+
+    // console.log(`LAYER: ${JSON.stringify(layer.paint.get('model-scale'))}`);
     const context = painter.context;
     const isShadowPass = painter.renderPass === 'shadow';
     const shadowRenderer = painter.shadowRenderer;
@@ -583,12 +594,12 @@ function drawInstancedNode(painter: Painter, layer: ModelStyleLayer, node: Node,
                 definesValues.push('RENDER_CUTOFF');
             }
             if (isShadowPass && shadowRenderer) {
-                program = painter.useProgram('modelDepth', {defines: ((definesValues: any): DynamicDefinesType[])});
+                program = painter.getOrCreateProgram('modelDepth', {defines: ((definesValues: any): DynamicDefinesType[])});
                 uniformValues = modelDepthUniformValues(renderData.shadowTileMatrix, renderData.shadowTileMatrix, Float32Array.from(node.matrix));
                 colorMode = shadowRenderer.getShadowPassColorMode();
             } else {
                 setupMeshDraw(definesValues, dynamicBuffers, mesh, painter);
-                program = painter.useProgram('model', {defines: ((definesValues: any): DynamicDefinesType[]), overrideFog: affectedByFog});
+                program = painter.getOrCreateProgram('model', {defines: ((definesValues: any): DynamicDefinesType[]), overrideFog: affectedByFog});
                 const material = mesh.material;
                 const pbr = material.pbrMetallicRoughness;
                 const layerOpacity = layer.paint.get('model-opacity');
@@ -755,7 +766,7 @@ function drawBatchedModels(painter: Painter, source: SourceCache, layer: ModelSt
                         continue;
                     }
 
-                    const programOptions: UseProgramParams = {
+                    const programOptions: CreateProgramParams = {
                         defines: []
                     };
                     const dynamicBuffers = [];
@@ -788,7 +799,7 @@ function drawBatchedModels(painter: Painter, source: SourceCache, layer: ModelSt
                         }
                     }
 
-                    const program = painter.useProgram('model', programOptions);
+                    const program = painter.getOrCreateProgram('model', programOptions);
 
                     if (!isShadowPass && shadowRenderer) {
                         shadowRenderer.useNormalOffset = !!mesh.normalBuffer;

3d-style/render/shadow_renderer.js

@@ -188,7 +188,7 @@ export class ShadowRenderer {
 
         this._shadowLayerCount = painter.style.order.reduce(
             (accumulator: number, layerId: string) => {
-                const layer = painter.style._layers[layerId];
+                const layer = painter.style._mergedLayers[layerId];
                 return accumulator + (layer.hasShadowPass() && !layer.isHidden(transform.zoom) ? 1 : 0);
             }, 0);
 
@@ -332,10 +332,10 @@ export class ShadowRenderer {
             context.clear({color: Color.white, depth: 1});
 
             for (const layerId of style.order) {
-                const layer = style._layers[layerId];
+                const layer = style._mergedLayers[layerId];
                 if (!layer.hasShadowPass() || layer.isHidden(painter.transform.zoom)) continue;
 
-                const sourceCache = style._getLayerSourceCache(layer);
+                const sourceCache = style.getLayerSourceCache(layer);
                 const coords = sourceCache ? sourceCoords[sourceCache.id] : undefined;
                 if (layer.type !== 'model' && !(coords && coords.length)) continue;
 
@@ -374,7 +374,7 @@ export class ShadowRenderer {
         for (const id of this._groundShadowTiles) {
             const unwrapped = id.toUnwrapped();
             const affectedByFog = painter.isTileAffectedByFog(id);
-            const program = painter.useProgram('groundShadow', {defines: baseDefines, overrideFog: affectedByFog});
+            const program = painter.getOrCreateProgram('groundShadow', {defines: baseDefines, overrideFog: affectedByFog});
 
             this.setupShadows(unwrapped, program);
 

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

@@ -1,3 +1,5 @@
+#include "_prelude_terrain.vertex.glsl"
+
 uniform mat4 u_matrix;
 uniform float u_edge_radius;
 uniform float u_vertical_scale;

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

@@ -1,3 +1,5 @@
+#include "_prelude_shadow.fragment.glsl"
+
 #ifdef GL_ES
 precision highp float;
 #endif

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

@@ -1,3 +1,5 @@
+#include "_prelude_fog.vertex.glsl"
+
 uniform mat4 u_matrix;
 uniform mat4 u_light_matrix_0;
 uniform mat4 u_light_matrix_1;

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

@@ -1,3 +1,6 @@
+#include "_prelude_fog.fragment.glsl"
+#include "_prelude_shadow.fragment.glsl"
+#include "_prelude_lighting.glsl"
 
 uniform float u_opacity;
 
@@ -9,6 +12,8 @@ uniform vec4 u_baseColorFactor;
 uniform vec4 u_emissiveFactor;
 uniform float u_metallicFactor;
 uniform float u_roughnessFactor;
+uniform float u_emissive_strength;
+
 
 varying highp vec4 v_position_height;
 varying lowp vec4 v_color_mix;
@@ -461,7 +466,9 @@ vec4 finalColor;
     opacity *= v_roughness_metallic_emissive_alpha.w * saturate(1.0 - distance * distance);
 #endif
 #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);
     color = linearTosRGB(color);
     color *= opacity;
     finalColor = vec4(color, opacity);

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

@@ -1,3 +1,6 @@
+#include "_prelude_fog.vertex.glsl"
+#include "_prelude_shadow.vertex.glsl"
+
 attribute vec3 a_pos_3f;
 
 #pragma mapbox: define-attribute highp vec3 normal_3f