mapbox · mourner · May 6, 2021 · Apr 7, 2021 · Apr 9, 2021 · Apr 12, 2021
@@ -128,6 +128,7 @@ import fillAttributes from '../src/data/bucket/fill_attributes.js';
 import lineAttributes from '../src/data/bucket/line_attributes.js';
 import lineAttributesExt from '../src/data/bucket/line_attributes_ext.js';
 import patternAttributes from '../src/data/bucket/pattern_attributes.js';
+import dashAttributes from '../src/data/bucket/dash_attributes.js';
 import skyboxAttributes from '../src/render/skybox_attributes.js';
 import {fillExtrusionAttributes, centroidAttributes} from '../src/data/bucket/fill_extrusion_attributes.js';
 
@@ -139,7 +140,8 @@ const layoutAttributes = {
     heatmap: circleAttributes,
     line: lineAttributes,
     lineExt: lineAttributesExt,
-    pattern: patternAttributes
+    pattern: patternAttributes,
+    dash: dashAttributes
 };
 for (const name in layoutAttributes) {
     createStructArrayType(`${name.replace(/-/g, '_')}_layout`, layoutAttributes[name]);

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Mapbox GL JS debug page</title>
+    <meta charset='utf-8'>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <link rel='stylesheet' href='../dist/mapbox-gl.css' />
+    <style>
+        body { margin: 0; padding: 0; }
+        html, body, #map { height: 100%; }
+    </style>
+</head>
+
+<body>
+<div id='map'></div>
+
+<script src='../dist/mapbox-gl-dev.js'></script>
+<script src='../debug/access_token_generated.js'></script>
+<script>
+
+var map = window.map = new mapboxgl.Map({
+    container: 'map',
+    zoom: 4,
+    center: [0, 0],
+    style: {sources: {}, version: 8, layers: []}
+});
+
+map.on('load', () => {
+    map.addSource('geojson', {
+        "type": "geojson",
+        "data": {
+            "type": "FeatureCollection",
+            "features": [{
+                "type": "Feature",
+                "properties": {"property": 1},
+                "geometry": {"type": "LineString", "coordinates": [[-10, -5], [10, -5]]}
+            }, {
+                "type": "Feature",
+                "properties": {"property": 2},
+                "geometry": {"type": "LineString", "coordinates": [[-10, 0], [10, 0]]}
+            }, {
+                "type": "Feature",
+                "properties": {"property": 3},
+                "geometry": {"type": "LineString", "coordinates": [[-10, 5], [10, 5]]}
+            }]
+        }
+    });
+
+    map.addLayer({
+        "id": "dash-dds",
+        "type": "line",
+        "source": "geojson",
+        "paint": {
+            "line-width": 10,
+            // "line-dasharray": [1, 2],
+            "line-dasharray": [
+                "match", ["get", "property"],
+                1, ["literal", [1, 2]],
+                2, ["literal", [2, 2]],
+                3, ["literal", [3, 2]],
+                ["literal", [1, 1]]
+            ]
+        },
+        "layout": {
+            "line-cap": ["match", ["get", "property"], 2, "round", "butt"]
+        }
+    });
+});
+
+</script>
+</body>
+</html>
@@ -1129,6 +1129,7 @@ export {
     StructArrayLayout2i4ub1f12 as LineLayoutArray,
     StructArrayLayout2f8 as LineExtLayoutArray,
     StructArrayLayout10ui20 as PatternLayoutArray,
+    StructArrayLayout10ui20 as DashLayoutArray,
     StructArrayLayout4i4ui4i24 as SymbolLayoutArray,
     StructArrayLayout3f12 as SymbolDynamicLayoutArray,
     StructArrayLayout1ul4 as SymbolOpacityArray,

@@ -7,6 +7,7 @@ import type FeatureIndex from './feature_index.js';
 import type Context from '../gl/context.js';
 import type {FeatureStates} from '../source/source_state.js';
 import type {ImagePosition} from '../render/image_atlas.js';
+import type LineAtlas from '../render/line_atlas.js';
 import type {CanonicalTileID} from '../source/tile_id.js';
 
 export type BucketParameters<Layer: TypedStyleLayer> = {
@@ -26,7 +27,8 @@ export type PopulateParameters = {
     iconDependencies: {},
     patternDependencies: {},
     glyphDependencies: {},
-    availableImages: Array<string>
+    availableImages: Array<string>,
+    lineAtlas: LineAtlas
 }
 
 export type IndexedFeature = {

@@ -0,0 +1,12 @@
+// @flow
+import {createLayout} from '../../util/struct_array.js';
+
+const dashAttributes = createLayout([
+    // [tl.x, tl.y, br.x, br.y]
+    {name: 'a_dash_to', components: 4, type: 'Uint16'},
+    {name: 'a_dash_from', components: 4, type: 'Uint16'},
+    {name: 'a_pixel_ratio_to', components: 1, type: 'Uint16'},
+    {name: 'a_pixel_ratio_from', components: 1, type: 'Uint16'},
+]);
+
+export default dashAttributes;
@@ -172,20 +172,78 @@ class LineBucket implements Bucket {
         for (const bucketFeature of bucketFeatures) {
             const {geometry, index, sourceLayerIndex} = bucketFeature;
 
+            this.addFeatureDashes(bucketFeature, options);
+
             if (this.hasPattern) {
                 const patternBucketFeature = addPatternDependencies('line', this.layers, bucketFeature, this.zoom, options);
                 // pattern features are added only once the pattern is loaded into the image atlas
                 // so are stored during populate until later updated with positions by tile worker in addFeatures
                 this.patternFeatures.push(patternBucketFeature);
+
             } else {
-                this.addFeature(bucketFeature, geometry, index, canonical, {});
+                this.addFeature(bucketFeature, geometry, index, canonical, options.lineAtlas.positions);
             }
 
             const feature = features[index].feature;
             options.featureIndex.insert(feature, geometry, index, sourceLayerIndex, this.index);
         }
     }
 
+    addFeatureDashes(feature: BucketFeature, {lineAtlas}: PopulateParameters) {
+
+        const zoom = this.zoom;
+
+        for (const layer of this.layers) {
+            const dashPropertyValue = layer.paint.get('line-dasharray').value;
+            const capPropertyValue = layer.layout.get('line-cap').value;
+
+            if (dashPropertyValue.kind !== 'constant' || capPropertyValue.kind !== 'constant') {
+                let minDashArray, midDashArray, maxDashArray, minRound, midRound, maxRound;
+
+                if (dashPropertyValue.kind === 'constant') {
+                    const constDash = dashPropertyValue.value;
+                    if (!constDash) continue;
+                    minDashArray = midDashArray = constDash.from;
+                    maxDashArray = constDash.to;
+
+                } else {
+                    minDashArray = dashPropertyValue.evaluate({zoom: zoom - 1}, feature);
+                    midDashArray = dashPropertyValue.evaluate({zoom}, feature);
+                    maxDashArray = dashPropertyValue.evaluate({zoom: zoom + 1}, feature);
+                }
+
+                if (capPropertyValue.kind === 'constant') {
+                    minRound = midRound = maxRound = capPropertyValue.value === 'round';
+
+                } else {
+                    minRound = capPropertyValue.evaluate({zoom: zoom - 1}, feature) === 'round';
+                    midRound = capPropertyValue.evaluate({zoom}, feature) === 'round';
+                    maxRound = capPropertyValue.evaluate({zoom: zoom + 1}, feature) === 'round';
+                }
+
+                // add to line atlas
+                lineAtlas.getDash(minDashArray, minRound);
+                lineAtlas.getDash(midDashArray, midRound);
+                lineAtlas.getDash(maxDashArray, maxRound);
+
+                const min = lineAtlas.getKey(minDashArray, minRound);
+                const mid = lineAtlas.getKey(midDashArray, midRound);
+                const max = lineAtlas.getKey(maxDashArray, maxRound);
+
+                // save positions for paint array
+                feature.patterns[layer.id] = {min, mid, max};
+
+            } else {
+                const round = capPropertyValue.value === 'round';
+                const constDash = dashPropertyValue.value;
+                if (!constDash) continue;
+                lineAtlas.getDash(constDash.from, round);
+                lineAtlas.getDash(constDash.to, round);
+            }
+        }
+
+    }
+
     update(states: FeatureStates, vtLayer: VectorTileLayer, imagePositions: {[_: string]: ImagePosition}) {
         if (!this.stateDependentLayers.length) return;
         this.programConfigurations.updatePaintArrays(states, vtLayer, this.stateDependentLayers, imagePositions);
@@ -236,7 +294,7 @@ class LineBucket implements Bucket {
     addFeature(feature: BucketFeature, geometry: Array<Array<Point>>, index: number, canonical: CanonicalTileID, imagePositions: {[_: string]: ImagePosition}) {
         const layout = this.layers[0].layout;
         const join = layout.get('line-join').evaluate(feature, {});
-        const cap = layout.get('line-cap');
+        const cap = layout.get('line-cap').evaluate(feature, {});
         const miterLimit = layout.get('line-miter-limit');
         const roundLimit = layout.get('line-round-limit');
         this.lineClips = this.lineFeatureClips(feature);

@@ -5,9 +5,10 @@ import Color from '../style-spec/util/color.js';
 import {supportsPropertyExpression} from '../style-spec/util/properties.js';
 import {register} from '../util/web_worker_transfer.js';
 import {PossiblyEvaluatedPropertyValue} from '../style/properties.js';
-import {StructArrayLayout1f4, StructArrayLayout2f8, StructArrayLayout4f16, PatternLayoutArray} from './array_types.js';
+import {StructArrayLayout1f4, StructArrayLayout2f8, StructArrayLayout4f16, PatternLayoutArray, DashLayoutArray} from './array_types.js';
 import {clamp} from '../util/util.js';
 import patternAttributes from './bucket/pattern_attributes.js';
+import dashAttributes from './bucket/dash_attributes.js';
 import EvaluationParameters from '../style/evaluation_parameters.js';
 import FeaturePositionMap from './feature_position_map.js';
 import {
@@ -131,23 +132,23 @@ class CrossFadedConstantBinder implements UniformBinder {
     setConstantPatternPositions(posTo: ImagePosition, posFrom: ImagePosition) {
         this.pixelRatioFrom = posFrom.pixelRatio;
         this.pixelRatioTo = posTo.pixelRatio;
-        this.patternFrom = posFrom.tlbr;
-        this.patternTo = posTo.tlbr;
+        this.patternFrom = posFrom.tl.concat(posFrom.br);
+        this.patternTo = posTo.tl.concat(posTo.br);
     }
 
     setUniform(uniform: Uniform<*>, globals: GlobalProperties, currentValue: PossiblyEvaluatedPropertyValue<mixed>, uniformName: string) {
         const pos =
-            uniformName === 'u_pattern_to' ? this.patternTo :
-            uniformName === 'u_pattern_from' ? this.patternFrom :
+            uniformName === 'u_pattern_to' || uniformName === 'u_dash_to' ? this.patternTo :
+            uniformName === 'u_pattern_from' || uniformName === 'u_dash_from' ? this.patternFrom :
             uniformName === 'u_pixel_ratio_to' ? this.pixelRatioTo :
             uniformName === 'u_pixel_ratio_from' ? this.pixelRatioFrom : null;
         if (pos) uniform.set(pos);
     }
 
     getBinding(context: Context, location: WebGLUniformLocation, name: string): $Shape<Uniform<any>> {
-        return name.substr(0, 9) === 'u_pattern' ?
-            new Uniform4f(context, location) :
-            new Uniform1f(context, location);
+        if (name === 'u_pattern_from' || name === 'u_pattern_to') return new Uniform4f(context, location);
+        if (name === 'u_dash_from' || name === 'u_dash_to') return new Uniform4f(context, location);
+        return new Uniform1f(context, location);
     }
 }
 
@@ -320,8 +321,9 @@ class CrossFadedCompositeBinder implements AttributeBinder {
         this.zoom = zoom;
         this.layerId = layerId;
 
+        this.paintVertexAttributes = (type === 'array' ? dashAttributes : patternAttributes).members;
         for (let i = 0; i < names.length; ++i) {
-            assert(`a_${names[i]}` === patternAttributes.members[i].name);
+            assert(`a_${names[i]}` === this.paintVertexAttributes[i].name);
         }
 
         this.zoomInPaintVertexArray = new PaintVertexArray();
@@ -369,8 +371,8 @@ class CrossFadedCompositeBinder implements AttributeBinder {
 
     upload(context: Context) {
         if (this.zoomInPaintVertexArray && this.zoomInPaintVertexArray.arrayBuffer && this.zoomOutPaintVertexArray && this.zoomOutPaintVertexArray.arrayBuffer) {
-            this.zoomInPaintVertexBuffer = context.createVertexBuffer(this.zoomInPaintVertexArray, patternAttributes.members, this.expression.isStateDependent);
-            this.zoomOutPaintVertexBuffer = context.createVertexBuffer(this.zoomOutPaintVertexArray, patternAttributes.members, this.expression.isStateDependent);
+            this.zoomInPaintVertexBuffer = context.createVertexBuffer(this.zoomInPaintVertexArray, this.paintVertexAttributes, this.expression.isStateDependent);
+            this.zoomOutPaintVertexBuffer = context.createVertexBuffer(this.zoomOutPaintVertexArray, this.paintVertexAttributes, this.expression.isStateDependent);
         }
     }
 
@@ -507,14 +509,10 @@ export default class ProgramConfiguration {
         const result = [];
         for (const property in this.binders) {
             const binder = this.binders[property];
-            if (binder instanceof SourceExpressionBinder || binder instanceof CompositeExpressionBinder) {
+            if (binder instanceof SourceExpressionBinder || binder instanceof CompositeExpressionBinder || binder instanceof CrossFadedCompositeBinder) {
                 for (let i = 0; i < binder.paintVertexAttributes.length; i++) {
                     result.push(binder.paintVertexAttributes[i].name);
                 }
-            } else if (binder instanceof CrossFadedCompositeBinder) {
-                for (let i = 0; i < patternAttributes.members.length; i++) {
-                    result.push(patternAttributes.members[i].name);
-                }
             }
         }
         return result;
@@ -664,14 +662,15 @@ function paintAttributeNames(property, type) {
         'line-pattern': ['pattern_to', 'pattern_from', 'pixel_ratio_to', 'pixel_ratio_from'],
         'fill-pattern': ['pattern_to', 'pattern_from', 'pixel_ratio_to', 'pixel_ratio_from'],
         'fill-extrusion-pattern': ['pattern_to', 'pattern_from', 'pixel_ratio_to', 'pixel_ratio_from'],
+        'line-dasharray': ['dash_to', 'dash_from']
     };
 
     return attributeNameExceptions[property] || [property.replace(`${type}-`, '').replace(/-/g, '_')];
 }
 
 function getLayoutException(property) {
     const propertyExceptions = {
-        'line-pattern':{
+        'line-pattern': {
             'source': PatternLayoutArray,
             'composite': PatternLayoutArray
         },
@@ -682,6 +681,10 @@ function getLayoutException(property) {
         'fill-extrusion-pattern':{
             'source': PatternLayoutArray,
             'composite': PatternLayoutArray
+        },
+        'line-dasharray': { // temporary layout
+            'source': DashLayoutArray,
+            'composite': DashLayoutArray
         }
     };