Enable property functions for fill-color and fill-outline-color

js/data/bucket/fill_bucket.js

@@ -27,16 +27,41 @@ FillBucket.prototype.programInterfaces = {
             name: 'a_pos',
             components: 2,
             type: 'Int16'
+        }],
+        paintAttributes: [{
+            name: 'a_color',
+            components: 4,
+            type: 'Uint8',
+            getValue: function(layer, globalProperties, featureProperties) {
+                return util.premultiply(layer.getPaintValue("fill-color", globalProperties, featureProperties));
+            },
+            multiplier: 255,
+            paintProperty: 'fill-color'
+        }, {
+            name: 'a_outline_color',
+            components: 4,
+            type: 'Uint8',
+            getValue: function(layer, globalProperties, featureProperties) {
+                return util.premultiply(layer.getPaintValue("fill-outline-color", globalProperties, featureProperties));
+            },
+            multiplier: 255,
+            paintProperty: 'fill-outline-color'
         }]
     }
 };
 
 FillBucket.prototype.addFeature = function(feature) {
     var lines = loadGeometry(feature);
     var polygons = classifyRings(lines, EARCUT_MAX_RINGS);
+
+    var startGroup = this.makeRoomFor('fill', 0);
+    var startIndex = startGroup.layout.vertex.length;
+
     for (var i = 0; i < polygons.length; i++) {
         this.addPolygon(polygons[i]);
     }
+
+    this.populatePaintArrays('fill', {zoom: this.zoom}, feature.properties, startGroup, startIndex);
 };
 
 FillBucket.prototype.addPolygon = function(polygon) {

js/data/buffer.js

@@ -1,7 +1,5 @@
 'use strict';
 
-var assert = require('assert');
-
 module.exports = Buffer;
 
 /**
@@ -65,16 +63,17 @@ Buffer.prototype.setVertexAttribPointers = function(gl, program) {
     for (var j = 0; j < this.attributes.length; j++) {
         var member = this.attributes[j];
         var attribIndex = program[member.name];
-        assert(attribIndex !== undefined, 'array member "' + member.name + '" name does not match shader attribute name');
 
-        gl.vertexAttribPointer(
-            attribIndex,
-            member.components,
-            gl[AttributeType[member.type]],
-            false,
-            this.arrayType.bytesPerElement,
-            member.offset
-        );
+        if (attribIndex !== undefined) {
+            gl.vertexAttribPointer(
+                attribIndex,
+                member.components,
+                gl[AttributeType[member.type]],
+                false,
+                this.arrayType.bytesPerElement,
+                member.offset
+            );
+        }
     }
 };
 

js/render/create_uniform_pragmas.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var assert = require('assert');
+
+module.exports = function(uniforms) {
+    var pragmas = {};
+
+    for (var i = 0; i < uniforms.length; i++) {
+        var uniform = uniforms[i];
+        assert(uniform.name.slice(0, 2) === 'u_');
+
+        var type = '$1 ' + (uniform.components === 1 ? 'float' : 'vec' + uniform.components);
+        pragmas['define ' + uniform.name.slice(2)] = 'uniform ' + type + ' ' + uniform.name + ';\n';
+        pragmas['initialize ' + uniform.name.slice(2)] = type + ' ' + uniform.name.slice(2) + ' = ' + uniform.name + ';\n';
+    }
+
+    return pragmas;
+};

js/render/draw_background.js

@@ -4,6 +4,7 @@ var TilePyramid = require('../source/tile_pyramid');
 var pyramid = new TilePyramid({ tileSize: 512 });
 var util = require('../util/util');
 var pixelsToTileUnits = require('../source/pixels_to_tile_units');
+var createUniformPragmas = require('./create_uniform_pragmas');
 
 module.exports = drawBackground;
 
@@ -47,7 +48,8 @@ function drawBackground(painter, source, layer) {
         // Draw filling rectangle.
         if (painter.isOpaquePass !== (color[3] === 1)) return;
 
-        program = painter.useProgram('fill');
+        var pragmas = createUniformPragmas([{name: 'u_color', components: 4}]);
+        program = painter.useProgram('fill', [], pragmas, pragmas);
         gl.uniform4fv(program.u_color, color);
         gl.uniform1f(program.u_opacity, opacity);
         painter.tileExtentVAO.bind(gl, program, painter.tileExtentBuffer);

js/render/draw_fill.js

@@ -11,7 +11,6 @@ function draw(painter, source, layer, coords) {
 
     var color = util.premultiply(layer.paint['fill-color']);
     var image = layer.paint['fill-pattern'];
-    var strokeColor = util.premultiply(layer.paint['fill-outline-color']);
     var opacity = layer.paint['fill-opacity'];
 
     // Draw fill
@@ -24,14 +23,12 @@ function draw(painter, source, layer, coords) {
         }
     }
 
-    // Draw stroke
     if (!painter.isOpaquePass && layer.paint['fill-antialias']) {
-        if (strokeColor || !layer.paint['fill-pattern']) {
-            var outlineProgram = painter.useProgram('outline');
+        if (layer.paint['fill-outline-color'] || !layer.paint['fill-pattern']) {
             painter.lineWidth(2);
             painter.depthMask(false);
 
-            if (strokeColor) {
+            if (layer.paint['fill-outline-color']) {
                 // If we defined a different color for the fill outline, we are
                 // going to ignore the bits in 0x07 and just care about the global
                 // clipping mask.
@@ -44,15 +41,11 @@ function draw(painter, source, layer, coords) {
                 // the (non-antialiased) fill.
                 painter.setDepthSublayer(0);
             }
-            gl.uniform2f(outlineProgram.u_world, gl.drawingBufferWidth, gl.drawingBufferHeight);
-            gl.uniform4fv(outlineProgram.u_color, strokeColor ? strokeColor : color);
-            gl.uniform1f(outlineProgram.u_opacity, opacity);
 
             for (var j = 0; j < coords.length; j++) {
                 drawStroke(painter, source, layer, coords[j]);
             }
         } else {
-            var outlinePatternProgram = painter.useProgram('outlinepattern');
             painter.lineWidth(2);
             painter.depthMask(false);
             // Otherwise, we only want to drawFill the antialiased parts that are
@@ -61,7 +54,6 @@ function draw(painter, source, layer, coords) {
             // the current shape, some pixels from the outline stroke overlapped
             // the (non-antialiased) fill.
             painter.setDepthSublayer(0);
-            gl.uniform2f(outlinePatternProgram.u_world, gl.drawingBufferWidth, gl.drawingBufferHeight);
 
             for (var k = 0; k < coords.length; k++) {
                 drawStroke(painter, source, layer, coords[k]);
@@ -80,23 +72,28 @@ function drawFill(painter, source, layer, coord) {
 
     var gl = painter.gl;
 
-    var color = util.premultiply(layer.paint['fill-color']);
     var image = layer.paint['fill-pattern'];
     var opacity = layer.paint['fill-opacity'];
     var program;
 
-    if (image) {
+    if (layer.paint['fill-outline-color'] || !layer.paint['fill-pattern']) {
+
+        program = painter.useProgram(
+            'fill',
+            bucket.paintAttributes.fill[layer.id].defines,
+            bucket.paintAttributes.fill[layer.id].vertexPragmas,
+            bucket.paintAttributes.fill[layer.id].fragmentPragmas
+        );
+        bucket.setUniforms(gl, 'fill', program, layer, {zoom: painter.transform.zoom});
+        gl.uniform1f(program.u_opacity, opacity);
+
+    } else {
         // Draw texture fill
         program = painter.useProgram('pattern');
         setPattern(image, opacity, tile, coord, painter, program);
 
         gl.activeTexture(gl.TEXTURE0);
         painter.spriteAtlas.bind(gl, true);
-
-    } else {
-        program = painter.useProgram('fill');
-        gl.uniform4fv(program.u_color, color);
-        gl.uniform1f(program.u_opacity, opacity);
     }
 
     gl.uniformMatrix4fv(program.u_matrix, false, painter.translatePosMatrix(
@@ -110,7 +107,7 @@ function drawFill(painter, source, layer, coord) {
 
     for (var i = 0; i < bufferGroups.length; i++) {
         var group = bufferGroups[i];
-        group.vaos[layer.id].bind(gl, program, group.layout.vertex, group.layout.element);
+        group.vaos[layer.id].bind(gl, program, group.layout.vertex, group.layout.element, group.paint[layer.id]);
         gl.drawElements(gl.TRIANGLES, group.layout.element.length, gl.UNSIGNED_SHORT, 0);
     }
 }
@@ -125,7 +122,23 @@ function drawStroke(painter, source, layer, coord) {
 
     var image = layer.paint['fill-pattern'];
     var opacity = layer.paint['fill-opacity'];
-    var program = image ? painter.useProgram('outlinepattern') : painter.useProgram('outline');
+
+    var program;
+    if (image) {
+        program = painter.useProgram('outlinepattern');
+        gl.uniform2f(program.u_world, gl.drawingBufferWidth, gl.drawingBufferHeight);
+
+    } else {
+        program = painter.useProgram(
+            'outline',
+            bucket.paintAttributes.fill[layer.id].defines,
+            bucket.paintAttributes.fill[layer.id].vertexPragmas,
+            bucket.paintAttributes.fill[layer.id].fragmentPragmas
+        );
+        gl.uniform2f(program.u_world, gl.drawingBufferWidth, gl.drawingBufferHeight);
+        gl.uniform1f(program.u_opacity, opacity);
+        bucket.setUniforms(gl, 'fill', program, layer, {zoom: painter.transform.zoom});
+    }
 
     gl.uniformMatrix4fv(program.u_matrix, false, painter.translatePosMatrix(
         coord.posMatrix,
@@ -140,7 +153,7 @@ function drawStroke(painter, source, layer, coord) {
 
     for (var k = 0; k < bufferGroups.length; k++) {
         var group = bufferGroups[k];
-        group.secondVaos[layer.id].bind(gl, program, group.layout.vertex, group.layout.element2);
+        group.secondVaos[layer.id].bind(gl, program, group.layout.vertex, group.layout.element2, group.paint[layer.id]);
         gl.drawElements(gl.LINES, group.layout.element2.length * 2, gl.UNSIGNED_SHORT, 0);
     }
 }

js/render/painter.js

@@ -11,6 +11,7 @@ var StructArrayType = require('../util/struct_array');
 var Buffer = require('../data/buffer');
 var VertexArrayObject = require('./vertex_array_object');
 var RasterBoundsArray = require('./draw_raster').RasterBoundsArray;
+var createUniformPragmas = require('./create_uniform_pragmas');
 
 module.exports = Painter;
 
@@ -150,7 +151,8 @@ Painter.prototype._renderTileClippingMasks = function(coords) {
 
         gl.stencilFunc(gl.ALWAYS, id, 0xF8);
 
-        var program = this.useProgram('fill');
+        var pragmas = createUniformPragmas([{name: 'u_color', components: 4}]);
+        var program = this.useProgram('fill', [], pragmas, pragmas);
         gl.uniformMatrix4fv(program.u_matrix, false, coord.posMatrix);
 
         // Draw the clipping mask

js/style/style_layer/fill_style_layer.js

@@ -7,6 +7,48 @@ function FillStyleLayer() {
     StyleLayer.apply(this, arguments);
 }
 
-module.exports = FillStyleLayer;
+FillStyleLayer.prototype = util.inherit(StyleLayer, {
+
+    getPaintValue: function(name, globalProperties, featureProperties) {
+        if (name === 'fill-outline-color' && this.getPaintProperty('fill-outline-color') === undefined) {
+            return StyleLayer.prototype.getPaintValue.call(this, 'fill-color', globalProperties, featureProperties);
+        } else {
+            return StyleLayer.prototype.getPaintValue.call(this, name, globalProperties, featureProperties);
+        }
+    },
+
+    getPaintValueStopZoomLevels: function(name) {
+        if (name === 'fill-outline-color' && this.getPaintProperty('fill-outline-color') === undefined) {
+            return StyleLayer.prototype.getPaintValueStopZoomLevels.call(this, 'fill-color');
+        } else {
+            return StyleLayer.prototype.getPaintValueStopZoomLevels.call(this, arguments);
+        }
+    },
+
+    getPaintInterpolationT: function(name, zoom) {
+        if (name === 'fill-outline-color' && this.getPaintProperty('fill-outline-color') === undefined) {
+            return StyleLayer.prototype.getPaintInterpolationT.call(this, 'fill-color', zoom);
+        } else {
+            return StyleLayer.prototype.getPaintInterpolationT.call(this, name, zoom);
+        }
+    },
 
-FillStyleLayer.prototype = util.inherit(StyleLayer, {});
+    isPaintValueFeatureConstant: function(name) {
+        if (name === 'fill-outline-color' && this.getPaintProperty('fill-outline-color') === undefined) {
+            return StyleLayer.prototype.isPaintValueFeatureConstant.call(this, 'fill-color');
+        } else {
+            return StyleLayer.prototype.isPaintValueFeatureConstant.call(this, name);
+        }
+    },
+
+    isPaintValueZoomConstant: function(name) {
+        if (name === 'fill-outline-color' && this.getPaintProperty('fill-outline-color') === undefined) {
+            return StyleLayer.prototype.isPaintValueZoomConstant.call(this, 'fill-color');
+        } else {
+            return StyleLayer.prototype.isPaintValueZoomConstant.call(this, name);
+        }
+    }
+
+});
+
+module.exports = FillStyleLayer;

package.json

@@ -19,7 +19,7 @@
     "grid-index": "^0.1.0",
     "mapbox-gl-function": "^1.2.1",
     "mapbox-gl-js-supported": "^1.1.0",
-    "mapbox-gl-shaders": "mapbox/mapbox-gl-shaders#0eda4509d2893adb3aaf92ac68301cdc7722e7b1",
+    "mapbox-gl-shaders": "mapbox/mapbox-gl-shaders#556b3ec8ea48c2135d7111ae650dc09bcbd720ef",
     "mapbox-gl-style-spec": "^8.7.0",
     "minifyify": "^7.0.1",
     "pbf": "^1.3.2",
@@ -47,7 +47,7 @@
     "express": "^4.13.4",
     "gl": "^2.1.5",
     "istanbul": "^0.4.2",
-    "mapbox-gl-test-suite": "mapbox/mapbox-gl-test-suite#5d51f251a04ef919a0e37ccc5bb60a270e8b41fa",
+    "mapbox-gl-test-suite": "mapbox/mapbox-gl-test-suite#cc6f5f0ee3bcc9760c122d70b91de7d9c1307e2e",
     "nyc": "^6.1.1",
     "sinon": "^1.15.4",
     "st": "^1.0.0",