v3.0.0-beta.1 (advanced 3D lighting, shadows, nested styles and more)

.circleci/config.yml

@@ -86,6 +86,12 @@ workflows:
           filters:
             tags:
               only: /.*/
+      - verify-codegen:
+          requires:
+            - prepare-linux
+          filters:
+            tags:
+              only: /.*/
       - collect-stats:
           requires:
             - build
@@ -220,6 +226,7 @@ jobs:
             - v0-linux-yarn-{{ .Branch }}-
             - v0-linux-yarn-
       - run: yarn --frozen-lockfile --cache-folder ~/.cache/yarn
+      - run: yarn run build-loaders
       - run: yarn run build-dev
       - save_cache:
           key: v0-linux-yarn-{{ .Branch }}-{{ checksum "yarn.lock" }}
@@ -307,7 +314,9 @@ jobs:
     steps:
       - attach_workspace:
           at: ~/
-      - run: yarn run test-unit
+      - run: 
+          command: yarn run test-unit
+          no_output_timeout: 5m
 
   test-query:
     <<: *linux-defaults
@@ -343,6 +352,17 @@ jobs:
           at: ~/
       - run: yarn run test-style-spec
 
+  verify-codegen:
+    <<: *linux-defaults
+    steps:
+      - attach_workspace:
+          at: ~/
+      - run:
+          name: Verify codegen output
+          command: |
+            yarn run codegen
+            git add -A && git diff --staged --exit-code | tee check.patch
+
   collect-stats:
     <<: *linux-defaults
     steps:
@@ -362,7 +382,8 @@ jobs:
     steps:
       - attach_workspace:
           at: ~/
-      - browser-tools/install-browser-tools
+      - browser-tools/install-browser-tools:
+          chrome-version: "114.0.5735.90"
       - run: yarn run build-token
       - run:
           name: Test Chrome
@@ -513,6 +534,7 @@ jobs:
           key: v0-mac-yarn-{{ .Branch }}-{{ checksum "yarn.lock" }}
           paths:
            - ~/.cache/yarn
+      - run: yarn run build-loaders
       - run: yarn run build-dev
       - persist_to_workspace:
           root: ~/
@@ -590,6 +612,7 @@ jobs:
             npm install -g yarn
             refreshenv
       - run: yarn --frozen-lockfile
+      - run: yarn run build-loaders
       - run: yarn run build-dev
       - run:
           name: Clean up workspace to persist faster

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

@@ -0,0 +1,322 @@
+// @flow
+
+import EXTENT from '../../../src/style-spec/data/extent.js';
+import {register} from '../../../src/util/web_worker_transfer.js';
+import loadGeometry from '../../../src/data/load_geometry.js';
+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 type {Mat4} from 'gl-matrix';
+import type {CanonicalTileID, OverscaledTileID} from '../../../src/source/tile_id.js';
+import type {
+    Bucket,
+    BucketParameters,
+    BucketFeature,
+    IndexedFeature,
+    PopulateParameters
+} from '../../../src/data/bucket.js';
+
+import type Context from '../../../src/gl/context.js';
+import type VertexBuffer from '../../../src/gl/vertex_buffer.js';
+import type {FeatureStates} from '../../../src/source/source_state.js';
+import type {SpritePositions} from '../../../src/util/image.js';
+import type {ProjectionSpecification} from '../../../src/style-spec/types.js';
+import type {TileTransform} from '../../../src/geo/projection/tile_transform.js';
+import type {IVectorTileLayer} from '@mapbox/vector-tile';
+import {InstanceVertexArray} from '../../../src/data/array_types.js';
+import assert from 'assert';
+import {warnOnce} from '../../../src/util/util.js';
+import ModelStyleLayer from '../../style/style_layer/model_style_layer.js';
+import {rotationScaleYZFlipMatrix} from '../../util/model_util.js';
+import {tileToMeter} from '../../../src/geo/mercator_coordinate.js';
+
+class ModelFeature {
+    feature: EvaluationFeature;
+    instancedDataOffset: number;
+    instancedDataCount: number;
+
+    constructor(feature: EvaluationFeature, offset: number) {
+        this.feature = feature;
+        this.instancedDataOffset = offset;
+        this.instancedDataCount = 0;
+    }
+}
+
+class PerModelAttributes {
+    // If node has meshes, instancedDataArray gets an entry for each feature instance (used for all meshes or the node).
+    instancedDataArray: InstanceVertexArray;
+    instancedDataBuffer: VertexBuffer;
+    instancesEvaluatedElevation: Array<number>; // Gets added to DEM elevation of the instance to produce value in instancedDataArray.
+
+    features: Array<ModelFeature>;
+    idToFeaturesIndex: {[string | number]: number}; // via this.features, enable lookup instancedDataArray based on feature ID.
+
+    constructor() {
+        this.instancedDataArray = new InstanceVertexArray();
+        this.instancesEvaluatedElevation = [];
+        this.features = [];
+        this.idToFeaturesIndex = {};
+    }
+}
+
+class ModelBucket implements Bucket {
+    zoom: number;
+    index: number;
+    canonical: CanonicalTileID;
+    layers: Array<ModelStyleLayer>;
+    layerIds: Array<string>;
+    stateDependentLayers: Array<ModelStyleLayer>;
+    stateDependentLayerIds: Array<string>;
+    hasPattern: boolean;
+
+    instancesPerModel: {string: PerModelAttributes};
+
+    uploaded: boolean;
+
+    tileToMeter: number;
+    projection: ProjectionSpecification;
+
+    // elevation is baked into vertex buffer together with evaluated instance translation
+    validForExaggeration: number;
+    validForDEMTile: ?OverscaledTileID;
+    maxVerticalOffset: number; // for tile AABB calculation
+    maxScale: number; // across all dimensions, for tile AABB calculation
+    maxHeight: number; // calculated from previous two, during rendering, when models are available.
+    isInsideFirstShadowMapFrustum: boolean; // evaluated during first shadows pass and cached here for the second shadow pass.
+    lookup: ?Uint8Array;
+    lookupDim: number;
+    instanceCount: number;
+    // Bucket min/max terrain elevation among instance positions taking exaggeration value into account
+    terrainElevationMin: number;
+    terrainElevationMax: number;
+
+    /* $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.projection = options.projection;
+        this.index = options.index;
+
+        this.stateDependentLayerIds = this.layers.filter((l) => l.isStateDependent()).map((l) => l.id);
+        this.hasPattern = false;
+        this.instancesPerModel = {};
+        this.validForExaggeration = 0;
+        this.maxVerticalOffset = 0;
+        this.maxScale = 0;
+        this.maxHeight = 0;
+        // reduce density, more on lower zooms and almost no reduction in overscale range.
+        // Heuristics is related to trees performance.
+        this.lookupDim = this.zoom > this.canonical.z ? 256 : this.zoom > 15 ? 75 : 100;
+        this.instanceCount = 0;
+
+        this.terrainElevationMin = 0;
+        this.terrainElevationMax = 0;
+    }
+
+    populate(features: Array<IndexedFeature>, options: PopulateParameters, canonical: CanonicalTileID, tileTransform: TileTransform) {
+        this.tileToMeter = tileToMeter(canonical);
+        const needGeometry = this.layers[0]._featureFilter.needGeometry;
+        this.lookup = new Uint8Array(this.lookupDim * this.lookupDim);
+
+        for (const {feature, id, index, sourceLayerIndex} of features) {
+            const evaluationFeature = toEvaluationFeature(feature, needGeometry);
+
+            // $FlowFixMe[method-unbinding]
+            if (!this.layers[0]._featureFilter.filter(new EvaluationParameters(this.zoom), evaluationFeature, canonical)) continue;
+
+            const bucketFeature: BucketFeature = {
+                id,
+                sourceLayerIndex,
+                index,
+                geometry: needGeometry ? evaluationFeature.geometry : loadGeometry(feature, canonical, tileTransform),
+                properties: feature.properties,
+                type: feature.type,
+                patterns: {}
+            };
+
+            const modelId = this.addFeature(bucketFeature, bucketFeature.geometry, evaluationFeature);
+
+            if (modelId) {
+                options.featureIndex.insert(feature, bucketFeature.geometry, index, sourceLayerIndex, this.index, this.instancesPerModel[modelId].instancedDataArray.length);
+            }
+        }
+        this.lookup = null;
+    }
+
+    // eslint-disable-next-line no-unused-vars
+    update(states: FeatureStates, vtLayer: IVectorTileLayer, availableImages: Array<string>, imagePositions: SpritePositions) {
+        // called when setFeature state API is used
+        for (const modelId in this.instancesPerModel) {
+            const instances = this.instancesPerModel[modelId];
+            for (const id in states) {
+                if (instances.idToFeaturesIndex.hasOwnProperty(id)) {
+                    const feature = instances.features[instances.idToFeaturesIndex[id]];
+                    this.evaluate(feature, states[id], instances, true);
+                }
+            }
+        }
+        this.maxHeight = 0; // needs to be recalculated.
+    }
+
+    isEmpty(): boolean {
+        for (const modelId in this.instancesPerModel) {
+            const perModelAttributes = this.instancesPerModel[modelId];
+            if (perModelAttributes.instancedDataArray.length !== 0) return false;
+        }
+        return true;
+    }
+
+    uploadPending(): boolean {
+        return !this.uploaded;
+    }
+
+    upload(context: Context) {
+        // if buffer size is less than the threshold, do not upload instance buffer.
+        // if instance buffer is not uploaded, instances are rendered one by one.
+        const useInstancingThreshold = Number.MAX_SAFE_INTEGER;
+        if (!this.uploaded) {
+            for (const modelId in this.instancesPerModel) {
+                const perModelAttributes = this.instancesPerModel[modelId];
+                if (perModelAttributes.instancedDataArray.length < useInstancingThreshold || perModelAttributes.instancedDataArray.length === 0) continue;
+                if (!perModelAttributes.instancedDataBuffer) {
+                    perModelAttributes.instancedDataBuffer = context.createVertexBuffer(perModelAttributes.instancedDataArray, perModelAttributes.instancedDataArray.members, true);
+                } else {
+                    perModelAttributes.instancedDataBuffer.updateData(perModelAttributes.instancedDataArray);
+                }
+            }
+        }
+        this.uploaded = true;
+    }
+
+    destroy() {
+        for (const modelId in this.instancesPerModel) {
+            const perModelAttributes = this.instancesPerModel[modelId];
+            if (perModelAttributes.instancedDataArray.length === 0) continue;
+            if (perModelAttributes.instancedDataBuffer) {
+                perModelAttributes.instancedDataBuffer.destroy();
+            }
+        }
+    }
+
+    addFeature(feature: BucketFeature, geometry: Array<Array<Point>>, evaluationFeature: EvaluationFeature): string {
+        const layer = this.layers[0];
+        const modelIdProperty = layer.layout.get('model-id');
+        assert(modelIdProperty);
+        const modelId = modelIdProperty.evaluate(evaluationFeature, {}, this.canonical);
+        if (!modelId) {
+            warnOnce(`modelId is not evaluated for layer ${layer.id} and it is not going to get rendered.`);
+            return modelId;
+        }
+        if (!this.instancesPerModel[modelId]) {
+            this.instancesPerModel[modelId] = new PerModelAttributes();
+        }
+        const perModelVertexArray = this.instancesPerModel[modelId];
+        const instancedDataArray = perModelVertexArray.instancedDataArray;
+
+        const modelFeature = new ModelFeature(evaluationFeature, instancedDataArray.length);
+        for (const geometries of geometry) {
+            for (const point of geometries) {
+                if (point.x < 0 || point.x >= EXTENT || point.y < 0 || point.y >= EXTENT) {
+                    continue; // Clip on tile borders to prevent duplicates
+                }
+                // reduce density
+                const tileToLookup = (this.lookupDim - 1.0) / EXTENT;
+                const lookupIndex = this.lookupDim * ((point.y * tileToLookup) | 0) + (point.x * tileToLookup) | 0;
+                if (this.lookup) {
+                    if (this.lookup[lookupIndex] !== 0) {
+                        continue;
+                    }
+                    this.lookup[lookupIndex] = 1;
+                }
+                this.instanceCount++;
+                const i = instancedDataArray.length;
+                instancedDataArray.resize(i + 1);
+                perModelVertexArray.instancesEvaluatedElevation.push(0);
+                instancedDataArray.float32[i * 16] = point.x;
+                instancedDataArray.float32[i * 16 + 1] = point.y;
+            }
+        }
+        modelFeature.instancedDataCount = perModelVertexArray.instancedDataArray.length - modelFeature.instancedDataOffset;
+        if (modelFeature.instancedDataCount > 0) {
+            if (feature.id) {
+                perModelVertexArray.idToFeaturesIndex[feature.id] = perModelVertexArray.features.length;
+            }
+            perModelVertexArray.features.push(modelFeature);
+            this.evaluate(modelFeature, {}, perModelVertexArray, false);
+        }
+        return modelId;
+    }
+
+    evaluate(feature: ModelFeature, featureState: FeatureStates, perModelVertexArray: PerModelAttributes, update: boolean) {
+        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);
+        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 = [];
+        if (this.maxVerticalOffset < translation[2]) this.maxVerticalOffset = translation[2];
+        this.maxScale = Math.max(Math.max(this.maxScale, scale[0]), Math.max(scale[1], scale[2]));
+
+        rotationScaleYZFlipMatrix(rotationScaleYZFlip, (rotation: any), (scale: any));
+
+        // https://github.com/mapbox/mapbox-gl-native-internal/blob/c380f9492220906accbdca1f02cca5ee489d97fc/src/mbgl/renderer/layers/render_model_layer.cpp#L1282
+        const constantTileToMeterAcrossTile = 10;
+        assert(perModelVertexArray.instancedDataArray.bytesPerElement === 64);
+
+        const vaOffset2 = Math.round(100.0 * color.a) + color.b / 1.05;
+
+        for (let i = 0; i < feature.instancedDataCount; ++i) {
+            const instanceOffset = feature.instancedDataOffset + i;
+            const offset = instanceOffset * 16;
+
+            const va = perModelVertexArray.instancedDataArray.float32;
+            let terrainElevationContribution = 0;
+            if (update) {
+                terrainElevationContribution = va[offset + 6] - perModelVertexArray.instancesEvaluatedElevation[instanceOffset];
+            }
+
+            // All per-instance attributes are packed to one 4x4 float matrix. Data is not expected
+            // to change on every frame when e.g. camera or light changes.
+            // Column major order. Elements:
+            // 0 & 1: tile coordinates stored in integer part of float, R and G color components,
+            // originally in range [0..1], scaled to range [0..0.952(arbitrary, just needs to be
+            // under 1)].
+            const pointY = va[offset + 1] | 0; // point.y stored in integer part
+            va[offset]      = (va[offset] | 0) + color.r / 1.05; // point.x stored in integer part
+            va[offset + 1]  = pointY + color.g / 1.05;
+            // Element 2: packs color's alpha (as integer part) and blue component in fractional part.
+            va[offset + 2]  = vaOffset2;
+            // tileToMeter is taken at center of tile. Prevent recalculating it over again for
+            // thousands of trees.
+            // Element 3: tileUnitsToMeter conversion.
+            va[offset + 3]  = 1.0 / (canonical.z > constantTileToMeterAcrossTile ? this.tileToMeter : tileToMeter(canonical, pointY));
+            // Elements [4..6]: translation evaluated for the feature.
+            va[offset + 4]  = translation[0];
+            va[offset + 5]  = translation[1];
+            va[offset + 6]  = translation[2] + terrainElevationContribution;
+            // Elements [7..16] Instance modelMatrix holds combined rotation and scale 3x3,
+            va[offset + 7]  = rotationScaleYZFlip[0];
+            va[offset + 8]  = rotationScaleYZFlip[1];
+            va[offset + 9]  = rotationScaleYZFlip[2];
+            va[offset + 10] = rotationScaleYZFlip[4];
+            va[offset + 11] = rotationScaleYZFlip[5];
+            va[offset + 12] = rotationScaleYZFlip[6];
+            va[offset + 13] = rotationScaleYZFlip[8];
+            va[offset + 14] = rotationScaleYZFlip[9];
+            va[offset + 15] = rotationScaleYZFlip[10];
+            perModelVertexArray.instancesEvaluatedElevation[instanceOffset] = translation[2];
+        }
+    }
+}
+
+register(ModelBucket, 'ModelBucket', {omit: ['layers']});
+register(PerModelAttributes, 'PerModelAttributes');
+register(ModelFeature, 'ModelFeature');
+
+export default ModelBucket;