Add data driven styling for circle-color and circle-radius

bench/benchmarks/buffer.js

@@ -5,6 +5,7 @@ var Protobuf = require('pbf');
 var assert = require('assert');
 
 var WorkerTile = require('../../js/source/worker_tile');
+var Worker = require('../../js/source/worker');
 var ajax = require('../../js/util/ajax');
 var Style = require('../../js/style/style');
 var util = require('../../js/util/util');
@@ -125,9 +126,7 @@ function preloadAssets(stylesheet, callback) {
 function runSample(stylesheet, getGlyphs, getIcons, getTile, callback) {
     var timeStart = performance.now();
 
-    var layers = stylesheet.layers.filter(function(layer) {
-        return !layer.ref && (layer.type === 'fill' || layer.type === 'line' || layer.type === 'circle' || layer.type === 'symbol');
-    });
+    var layerFamilies = createLayerFamilies(stylesheet.layers);
 
     util.asyncAll(coordinates, function(coordinate, eachCallback) {
         var url = 'https://a.tiles.mapbox.com/v4/mapbox.mapbox-terrain-v2,mapbox.mapbox-streets-v6/' + coordinate.zoom + '/' + coordinate.row + '/' + coordinate.column + '.vector.pbf?access_token=' + config.ACCESS_TOKEN;
@@ -159,7 +158,7 @@ function runSample(stylesheet, getGlyphs, getIcons, getTile, callback) {
         getTile(url, function(err, response) {
             if (err) throw err;
             var data = new VT.VectorTile(new Protobuf(new Uint8Array(response)));
-            workerTile.parse(data, layers, actor, null, function(err) {
+            workerTile.parse(data, layerFamilies, actor, null, function(err) {
                 if (err) return callback(err);
                 eachCallback();
             });
@@ -180,3 +179,16 @@ function asyncTimesSeries(times, work, callback) {
         callback();
     }
 }
+
+var createLayerFamiliesCacheKey;
+var createLayerFamiliesCacheValue;
+function createLayerFamilies(layers) {
+    if (layers !== createLayerFamiliesCacheKey) {
+        var worker = new Worker({addEventListener: function() {} });
+        worker['set layers'](layers);
+
+        createLayerFamiliesCacheKey = layers;
+        createLayerFamiliesCacheValue = worker.layerFamilies;
+    }
+    return createLayerFamiliesCacheValue;
+}

debug/site.js

@@ -51,7 +51,11 @@ map.on('load', function() {
         "source": "geojson-random-points",
         "paint": {
             "circle-radius": 5,
-            "circle-color": "#f0f"
+            "circle-opacity": 0.5,
+            "circle-color": {
+                stops: [[0, 'red'], [100, 'violet']],
+                property: 'mapbox'
+            }
         }
     });
 

js/data/bucket.js

@@ -2,7 +2,6 @@
 
 var featureFilter = require('feature-filter');
 var Buffer = require('./buffer');
-var StyleLayer = require('../style/style_layer');
 var util = require('../util/util');
 var StructArrayType = require('../util/struct_array');
 
@@ -48,9 +47,6 @@ Bucket.EXTENT = 8192;
  * style spec layer type. Because `Bucket` is an abstract class,
  * instances should be created via the `Bucket.create` method.
  *
- * For performance reasons, `Bucket` creates its "add"s methods at
- * runtime using `new Function(...)`.
- *
  * @class Bucket
  * @private
  * @param options
@@ -65,8 +61,8 @@ function Bucket(options) {
     this.zoom = options.zoom;
     this.overscaling = options.overscaling;
     this.layer = options.layer;
+    this.childLayers = options.childLayers;
 
-    this.layerIDs = [this.layer.id];
     this.type = this.layer.type;
     this.features = [];
     this.id = this.layer.id;
@@ -76,11 +72,13 @@ function Bucket(options) {
     this.minZoom = this.layer.minzoom;
     this.maxZoom = this.layer.maxzoom;
 
+    this.attributes = createAttributes(this);
+
     if (options.elementGroups) {
         this.elementGroups = options.elementGroups;
         this.buffers = util.mapObject(options.arrays, function(array, bufferName) {
             var arrayType = options.arrayTypes[bufferName];
-            var type = (arrayType.members[0].name === 'vertices' ? Buffer.BufferType.ELEMENT : Buffer.BufferType.VERTEX);
+            var type = (arrayType.members.length && arrayType.members[0].name === 'vertices' ? Buffer.BufferType.ELEMENT : Buffer.BufferType.VERTEX);
             return new Buffer(array, arrayType, type);
         });
     }
@@ -91,8 +89,8 @@ function Bucket(options) {
  * @private
  */
 Bucket.prototype.populateBuffers = function() {
-    this.createStyleLayer();
     this.createArrays();
+    this.recalculateStyleLayers();
 
     for (var i = 0; i < this.features.length; i++) {
         this.addFeature(this.features[i]);
@@ -118,11 +116,17 @@ Bucket.prototype.makeRoomFor = function(programName, numVertices) {
         var elementArray = this.arrays[this.getBufferName(programName, 'element')];
         var secondElementArray = this.arrays[this.getBufferName(programName, 'secondElement')];
 
-        currentGroup = new ElementGroup(
-            vertexArray.length,
-            elementArray && elementArray.length,
-            secondElementArray && secondElementArray.length
-        );
+        currentGroup = {
+            vertexStartIndex: vertexArray.length,
+            elementStartIndex: elementArray && elementArray.length,
+            secondElementStartIndex: secondElementArray && secondElementArray.length,
+            elementLength: 0,
+            vertexLength: 0,
+            secondElementLength: 0,
+            elementOffset: elementArray && elementArray.length * elementArray.bytesPerElement,
+            secondElementOffset: secondElementArray && secondElementArray.length * secondElementArray.bytesPerElement,
+            vertexOffset: vertexArray && vertexArray.length * vertexArray.bytesPerElement
+        };
         groups.push(currentGroup);
     }
 
@@ -144,37 +148,41 @@ Bucket.prototype.createArrays = function() {
 
         if (programInterface.vertexBuffer) {
             var vertexBufferName = this.getBufferName(programName, 'vertex');
-            var vertexAddMethodName = this.getAddMethodName(programName, 'vertex');
 
             var VertexArrayType = new StructArrayType({
-                members: programInterface.attributes,
+                members: this.attributes[programName].layoutAttributes,
                 alignment: Buffer.VERTEX_ATTRIBUTE_ALIGNMENT
             });
 
             arrays[vertexBufferName] = new VertexArrayType();
             arrayTypes[vertexBufferName] = VertexArrayType.serialize();
 
-            this[vertexAddMethodName] = this[vertexAddMethodName] || createVertexAddMethod(
-                programName,
-                programInterface,
-                this.getBufferName(programName, 'vertex')
-            );
+            var layerPaintAttributes = this.attributes[programName].paintAttributes;
+            for (var layerName in layerPaintAttributes) {
+                var paintVertexBufferName = this.getBufferName(layerName, programName);
+
+                var PaintVertexArrayType = new StructArrayType({
+                    members: layerPaintAttributes[layerName].enabled,
+                    alignment: Buffer.VERTEX_ATTRIBUTE_ALIGNMENT
+                });
+
+                arrays[paintVertexBufferName] = new PaintVertexArrayType();
+                arrayTypes[paintVertexBufferName] = PaintVertexArrayType.serialize();
+            }
         }
 
         if (programInterface.elementBuffer) {
             var elementBufferName = this.getBufferName(programName, 'element');
             var ElementArrayType = createElementBufferType(programInterface.elementBufferComponents);
             arrays[elementBufferName] = new ElementArrayType();
             arrayTypes[elementBufferName] = ElementArrayType.serialize();
-            this[this.getAddMethodName(programName, 'element')] = createElementAddMethod(this.arrays[elementBufferName]);
         }
 
         if (programInterface.secondElementBuffer) {
             var secondElementBufferName = this.getBufferName(programName, 'secondElement');
             var SecondElementArrayType = createElementBufferType(programInterface.secondElementBufferComponents);
             arrays[secondElementBufferName] = new SecondElementArrayType();
             arrayTypes[secondElementBufferName] = SecondElementArrayType.serialize();
-            this[this.getAddMethodName(programName, 'secondElement')] = createElementAddMethod(this.arrays[secondElementBufferName]);
         }
 
         elementGroups[programName] = [];
@@ -194,13 +202,49 @@ Bucket.prototype.trimArrays = function() {
 };
 
 /**
- * Get the name of the method used to add an item to a buffer.
- * @param {string} programName The name of the program that will use the buffer
- * @param {string} type One of "vertex", "element", or "secondElement"
- * @returns {string}
+ * Set the attribute pointers in a WebGL context
+ * @private
+ * @param gl The WebGL context
+ * @param program The active WebGL program
+ * @param {number} offset The offset of the attribute data in the currently bound GL buffer.
  */
-Bucket.prototype.getAddMethodName = function(programName, type) {
-    return 'add' + capitalize(programName) + capitalize(type);
+Bucket.prototype.setAttribPointers = function(programName, gl, program, offset) {
+    var vertexBuffer = this.buffers[this.getBufferName(programName, 'vertex')];
+    vertexBuffer.setVertexAttribPointers(gl, program, offset / vertexBuffer.itemSize);
+};
+
+Bucket.prototype.setUniforms = function(gl, programName, program, layer, globalProperties) {
+    var disabledAttributes = this.attributes[programName].paintAttributes[layer.id].disabled;
+    for (var i = 0; i < disabledAttributes.length; i++) {
+        var attribute = disabledAttributes[i];
+        var attributeId = program[attribute.name];
+        gl['uniform' + attribute.components + 'fv'](attributeId, attribute.getValue(layer, globalProperties));
+    }
+};
+
+Bucket.prototype.bindLayoutBuffers = function(programInterfaceName, gl, options) {
+    var programInterface = this.programInterfaces[programInterfaceName];
+
+    if (programInterface.vertexBuffer) {
+        var vertexBuffer = this.buffers[this.getBufferName(programInterfaceName, 'vertex')];
+        vertexBuffer.bind(gl);
+    }
+
+    if (programInterface.elementBuffer && (!options || !options.secondElement)) {
+        var elementBuffer = this.buffers[this.getBufferName(programInterfaceName, 'element')];
+        elementBuffer.bind(gl);
+    }
+
+    if (programInterface.secondElementBuffer && (options && options.secondElement)) {
+        var secondElementBuffer = this.buffers[this.getBufferName(programInterfaceName, 'secondElement')];
+        secondElementBuffer.bind(gl);
+    }
+};
+
+Bucket.prototype.bindPaintBuffer = function(gl, interfaceName, layerID, program, vertexStartIndex) {
+    var buffer = this.buffers[this.getBufferName(layerID, interfaceName)];
+    buffer.bind(gl);
+    buffer.setVertexAttribPointers(gl, program, vertexStartIndex);
 };
 
 /**
@@ -215,24 +259,18 @@ Bucket.prototype.getBufferName = function(programName, type) {
 
 Bucket.prototype.serialize = function() {
     return {
-        layer: {
-            id: this.layer.id,
-            type: this.layer.type
-        },
+        layerId: this.layer.id,
         zoom: this.zoom,
         elementGroups: this.elementGroups,
         arrays: util.mapObject(this.arrays, function(array) {
             return array.serialize();
         }),
-        arrayTypes: this.arrayTypes
-    };
-};
+        arrayTypes: this.arrayTypes,
 
-Bucket.prototype.createStyleLayer = function() {
-    if (!(this.layer instanceof StyleLayer)) {
-        this.layer = StyleLayer.create(this.layer);
-        this.layer.recalculate(this.zoom, { lastIntegerZoom: Infinity, lastIntegerZoomTime: 0, lastZoom: 0 });
-    }
+        childLayerIds: this.childLayers.map(function(layer) {
+            return layer.id;
+        })
+    };
 };
 
 Bucket.prototype.createFilter = function() {
@@ -241,48 +279,93 @@ Bucket.prototype.createFilter = function() {
     }
 };
 
-
-var createVertexAddMethodCache = {};
-function createVertexAddMethod(programName, programInterface, bufferName) {
-    var pushArgs = [];
-    for (var i = 0; i < programInterface.attributes.length; i++) {
-        pushArgs = pushArgs.concat(programInterface.attributes[i].value);
+var FAKE_ZOOM_HISTORY = { lastIntegerZoom: Infinity, lastIntegerZoomTime: 0, lastZoom: 0 };
+Bucket.prototype.recalculateStyleLayers = function() {
+    for (var i = 0; i < this.childLayers.length; i++) {
+        this.childLayers[i].recalculate(this.zoom, FAKE_ZOOM_HISTORY);
     }
+};
 
-    var body = 'return this.arrays.' + bufferName + '.emplaceBack(' + pushArgs.join(', ') + ');';
-
-    if (!createVertexAddMethodCache[body]) {
-        createVertexAddMethodCache[body] = new Function(programInterface.attributeArgs, body);
+Bucket.prototype.getProgramMacros = function(programInterface, layer) {
+    var macros = [];
+    var enabledAttributes = this.attributes[programInterface].paintAttributes[layer.id].enabled;
+    for (var i = 0; i < enabledAttributes.length; i++) {
+        macros.push('ATTRIBUTE_' + enabledAttributes[i].name.toUpperCase());
     }
+    return macros;
+};
 
-    return createVertexAddMethodCache[body];
-}
-
-function createElementAddMethod(buffer) {
-    return function(one, two, three) {
-        return buffer.emplaceBack(one, two, three);
-    };
-}
+Bucket.prototype.addPaintAttributes = function(interfaceName, globalProperties, featureProperties, startIndex, endIndex) {
+    for (var l = 0; l < this.childLayers.length; l++) {
+        var layer = this.childLayers[l];
+        var length = this.arrays[this.getBufferName(interfaceName, 'vertex')].length;
+        var vertexArray = this.arrays[this.getBufferName(layer.id, interfaceName)];
+        var enabled = this.attributes[interfaceName].paintAttributes[layer.id].enabled;
+        for (var m = 0; m < enabled.length; m++) {
+            var attribute = enabled[m];
+
+            if (attribute.paintProperty === undefined) continue;
+
+            var value = attribute.getValue(layer, globalProperties, featureProperties);
+            var multiplier = attribute.multiplier || 1;
+            var components = attribute.components || 1;
+
+            vertexArray.resize(length);
+            for (var i = startIndex; i < endIndex; i++) {
+                var vertex = vertexArray.get(i);
+                for (var c = 0; c < components; c++) {
+                    var memberName = components > 1 ? (attribute.name + c) : attribute.name;
+                    vertex[memberName] = value[c] * multiplier;
+                }
+            }
+        }
+    }
+};
 
 function createElementBufferType(components) {
     return new StructArrayType({
         members: [{
             type: Buffer.ELEMENT_ATTRIBUTE_TYPE,
             name: 'vertices',
             components: components || 3
-        }]});
+        }]
+    });
 }
 
 function capitalize(string) {
     return string.charAt(0).toUpperCase() + string.slice(1);
 }
 
-function ElementGroup(vertexStartIndex, elementStartIndex, secondElementStartIndex) {
-    // the offset into the vertex buffer of the first vertex in this group
-    this.vertexStartIndex = vertexStartIndex;
-    this.elementStartIndex = elementStartIndex;
-    this.secondElementStartIndex = secondElementStartIndex;
-    this.elementLength = 0;
-    this.vertexLength = 0;
-    this.secondElementLength = 0;
+function createAttributes(bucket) {
+    var attributes = {};
+    for (var interfaceName in bucket.programInterfaces) {
+        var interfaceAttributes = attributes[interfaceName] = { layoutAttributes: [], paintAttributes: {} };
+        var layerPaintAttributes = interfaceAttributes.paintAttributes;
+
+        for (var c = 0; c < bucket.childLayers.length; c++) {
+            var childLayer = bucket.childLayers[c];
+            layerPaintAttributes[childLayer.id] = { enabled: [], disabled: [] };
+        }
+
+        var interface_ = bucket.programInterfaces[interfaceName];
+        for (var i = 0; i < interface_.attributes.length; i++) {
+            var attribute = interface_.attributes[i];
+
+            if (attribute.paintProperty === undefined) {
+                interfaceAttributes.layoutAttributes.push(attribute);
+            } else {
+                for (var j = 0; j < bucket.childLayers.length; j++) {
+                    var layer = bucket.childLayers[j];
+                    var paintAttributes = layerPaintAttributes[layer.id];
+
+                    if (layer.isPaintValueFeatureConstant(attribute.paintProperty)) {
+                        paintAttributes.disabled.push(attribute);
+                    } else {
+                        paintAttributes.enabled.push(attribute);
+                    }
+                }
+            }
+        }
+    }
+    return attributes;
 }