fix combining color and opacity in data driven styles

fix #1331

js/render/draw_background.js

@@ -23,7 +23,6 @@ function drawBackground(painter, layer, posMatrix) {
         gl.uniform2fv(shader.u_pattern_br_a, imagePosA.br);
         gl.uniform2fv(shader.u_pattern_tl_b, imagePosB.tl);
         gl.uniform2fv(shader.u_pattern_br_b, imagePosB.br);
-        gl.uniform1f(shader.u_opacity, opacity);
 
         var transform = painter.transform;
         var sizeA = imagePosA.size;
@@ -76,6 +75,9 @@ function drawBackground(painter, layer, posMatrix) {
         gl.vertexAttrib4fv(shader.a_color, color);
     }
 
+    gl.disableVertexAttribArray(shader.a_opacity);
+    gl.vertexAttrib1f(shader.a_opacity, opacity * 255);
+
     gl.disable(gl.STENCIL_TEST);
     gl.bindBuffer(gl.ARRAY_BUFFER, painter.backgroundBuffer);
     gl.vertexAttribPointer(shader.a_pos, painter.backgroundBuffer.itemSize, gl.SHORT, false, 0, 0);

js/render/draw_circle.js

@@ -25,6 +25,13 @@ var PROPERTIES = [
         glName: 'a_size',
         glWidth: 2,
         glType: '1f'
+    },
+    {
+        styleName: 'circle-opacity',
+        styleType: 'number',
+        glName: 'a_opacity',
+        glWidth: 1,
+        glType: '1f'
     }
 ];
 
@@ -63,9 +70,8 @@ function drawCircles(painter, layer, posMatrix, tile) {
                 layer.layout[property.styleName]
             );
 
-            // TODO remove this via https://github.com/mapbox/mapbox-gl-js/issues/1319
-            if (property.styleName === 'circle-color') {
-                value = [value[0] * 255, value[1] * 255, value[2] * 255, value[3] * 255];
+            if (property.styleName === 'circle-opacity') {
+                value = value * 255;
             }
 
             if (property.styleName === 'circle-blur') {

js/render/draw_fill.js

@@ -53,6 +53,7 @@ function drawFill(painter, layer, posMatrix, tile) {
     var offset, elementOffset;
 
     gl.disableVertexAttribArray(painter.fillShader.a_color);
+    gl.disableVertexAttribArray(painter.fillShader.a_opacity);
 
     for (var i = 0; i < elementGroups.groups.length; i++) {
         group = elementGroups.groups[i];
@@ -102,7 +103,9 @@ function drawFill(painter, layer, posMatrix, tile) {
         elements.bind(gl);
 
         gl.disableVertexAttribArray(painter.outlineShader.a_color);
+        gl.disableVertexAttribArray(painter.outlineShader.a_opacity);
         gl.vertexAttrib4fv(painter.outlineShader.a_color, strokeColor ? strokeColor : color);
+        gl.vertexAttrib1f(painter.outlineShader.a_opacity, layer.paint['fill-opacity'] * 255);
 
         for (var k = 0; k < elementGroups.groups.length; k++) {
             group = elementGroups.groups[k];
@@ -116,7 +119,6 @@ function drawFill(painter, layer, posMatrix, tile) {
     }
 
     var image = layer.paint['fill-pattern'];
-    var opacity = layer.paint['fill-opacity'] || 1;
     var shader;
 
     if (image) {
@@ -132,7 +134,6 @@ function drawFill(painter, layer, posMatrix, tile) {
         gl.uniform2fv(shader.u_pattern_br_a, imagePosA.br);
         gl.uniform2fv(shader.u_pattern_tl_b, imagePosB.tl);
         gl.uniform2fv(shader.u_pattern_br_b, imagePosB.br);
-        gl.uniform1f(shader.u_opacity, opacity);
         gl.uniform1f(shader.u_mix, image.t);
 
         var factor = (tile.tileExtent / tile.tileSize) / Math.pow(2, painter.transform.tileZoom - tile.coord.z);
@@ -162,6 +163,9 @@ function drawFill(painter, layer, posMatrix, tile) {
         gl.vertexAttrib4fv(shader.a_color, color);
     }
 
+    gl.disableVertexAttribArray(painter.outlineShader.a_opacity);
+    gl.vertexAttrib1f(shader.a_opacity, layer.paint['fill-opacity'] * 255);
+
     // Only draw regions that we marked
     gl.stencilFunc(gl.NOTEQUAL, 0x0, 0x3F);
     gl.bindBuffer(gl.ARRAY_BUFFER, painter.tileExtentBuffer);

js/render/draw_line.js

@@ -108,11 +108,6 @@ module.exports = function drawLine(painter, layer, posMatrix, tile) {
         gl.uniform2fv(shader.u_pattern_br_b, imagePosB.br);
         gl.uniform1f(shader.u_fade, image.t);
 
-        if (offsets.opacity === undefined) {
-            gl.disableVertexAttribArray(shader.a_opacity);
-            gl.vertexAttrib1f(shader.a_opacity, layer.paint['line-opacity']);
-        }
-
     } else {
         shader = painter.lineShader;
         gl.switchShader(shader, vtxMatrix, tile.exMatrix);
@@ -126,7 +121,12 @@ module.exports = function drawLine(painter, layer, posMatrix, tile) {
     // linepattern does not have a color attribute
     if (shader.a_color !== undefined && offsets.color === undefined) {
         gl.disableVertexAttribArray(shader.a_color);
-        gl.vertexAttrib4fv(shader.a_color, [color[0] * 255, color[1] * 255, color[2] * 255, color[3] * 255]);
+        gl.vertexAttrib4fv(shader.a_color, color);
+    }
+
+    if (offsets.opacity === undefined) {
+        gl.disableVertexAttribArray(shader.a_opacity);
+        gl.vertexAttrib1f(shader.a_opacity, layer.paint['line-opacity'] * 255);
     }
 
     if (offsets.width === undefined) {

js/render/draw_symbol.js

@@ -140,8 +140,12 @@ function drawSymbol(painter, layer, posMatrix, tile, elementGroups, prefix, sdf)
 
         if (offsets.color === undefined) {
             gl.disableVertexAttribArray(shader.a_color);
-            var c = layer.paint[prefix + '-color'];
-            gl.vertexAttrib4fv(shader.a_color, [c[0] * 255, c[1] * 255, c[2] * 255, c[3] * 255]);
+            gl.vertexAttrib4fv(shader.a_color, layer.paint[prefix + '-color']);
+        }
+
+        if (offsets.opacity === undefined) {
+            gl.disableVertexAttribArray(shader.a_opacity);
+            gl.vertexAttrib1f(shader.a_opacity, layer.paint[prefix + '-opacity'] * 255);
         }
 
         gl.disableVertexAttribArray(shader.a_buffer);
@@ -158,6 +162,10 @@ function drawSymbol(painter, layer, posMatrix, tile, elementGroups, prefix, sdf)
                 gl.vertexAttribPointer(shader.a_color, 4, gl.UNSIGNED_BYTE, false, stride, offset + offsets.color);
             }
 
+            if (offsets.opacity !== undefined) {
+                gl.vertexAttribPointer(shader.a_color, 1, gl.UNSIGNED_BYTE, false, stride, offset + offsets.opacity);
+            }
+
             count = group.elementLength * 3;
             elementOffset = group.elementStartIndex * elements.itemSize;
             gl.drawElements(gl.TRIANGLES, count, gl.UNSIGNED_SHORT, elementOffset);
@@ -168,9 +176,11 @@ function drawSymbol(painter, layer, posMatrix, tile, elementGroups, prefix, sdf)
             // vertex attrib arrays disabled above
             if (offsets.color === undefined) {
                 gl.disableVertexAttribArray(shader.a_color);
-                var hc = layer.paint[prefix + '-halo-color'];
-                gl.vertexAttrib4fv(shader.a_color, [hc[0] * 255, hc[1] * 255, hc[2] * 255, hc[3] * 255]);
+                gl.vertexAttrib4fv(shader.a_color, layer.paint[prefix + '-halo-color']);
             }
+            gl.disableVertexAttribArray(shader.a_opacity);
+            gl.vertexAttrib1f(shader.a_opacity, layer.paint[prefix + '-opacity'] * 255);
+
             gl.vertexAttrib1f(shader.a_buffer, (haloOffset - layer.paint[prefix + '-halo-width'] / fontScale) / sdfPx);
             gl.vertexAttrib1f(shader.a_gamma, (layer.paint[prefix + '-halo-blur'] * blurOffset / fontScale / sdfPx + gamma) * gammaScale);
 

js/render/painter.js

@@ -63,45 +63,45 @@ Painter.prototype.setup = function() {
         ['u_matrix', 'u_brightness_low', 'u_brightness_high', 'u_saturation_factor', 'u_spin_weights', 'u_contrast_factor', 'u_opacity0', 'u_opacity1', 'u_image0', 'u_image1', 'u_tl_parent', 'u_scale_parent', 'u_buffer_scale']);
 
     this.circleShader = gl.initializeShader('circle',
-        ['a_pos', 'a_size', 'a_color', 'a_blur'],
+        ['a_pos', 'a_size', 'a_color', 'a_blur', 'a_opacity'],
         ['u_matrix', 'u_exmatrix']);
 
     this.lineShader = gl.initializeShader('line',
-        ['a_pos', 'a_data', 'a_color', 'a_linewidth', 'a_blur', 'a_linegapwidth'],
+        ['a_pos', 'a_data', 'a_color', 'a_linewidth', 'a_blur', 'a_linegapwidth', 'a_opacity'],
         ['u_matrix', 'u_ratio', 'u_extra', 'u_antialiasingmatrix', 'u_antialiasing']);
 
     this.linepatternShader = gl.initializeShader('linepattern',
         ['a_pos', 'a_data', 'a_linewidth', 'a_blur', 'a_opacity', 'a_linegapwidth'],
         ['u_matrix', 'u_exmatrix', 'u_ratio', 'u_pattern_size_a', 'u_pattern_size_b', 'u_pattern_tl_a', 'u_pattern_br_a', 'u_pattern_tl_b', 'u_pattern_br_b', 'u_fade', 'u_antialiasing']);
 
     this.linesdfpatternShader = gl.initializeShader('linesdfpattern',
-        ['a_pos', 'a_data', 'a_color', 'a_linewidth', 'a_blur', 'a_linegapwidth'],
+        ['a_pos', 'a_data', 'a_color', 'a_linewidth', 'a_blur', 'a_linegapwidth', 'a_opacity'],
         ['u_matrix', 'u_exmatrix', 'u_ratio', 'u_patternscale_a', 'u_tex_y_a', 'u_patternscale_b', 'u_tex_y_b', 'u_image', 'u_sdfgamma', 'u_mix', 'u_antialiasing']);
 
     this.dotShader = gl.initializeShader('dot',
         ['a_pos'],
         ['u_matrix', 'u_size', 'u_color', 'u_blur']);
 
     this.sdfShader = gl.initializeShader('sdf',
-        ['a_pos', 'a_offset', 'a_data1', 'a_data2', 'a_color', 'a_buffer', 'a_gamma'],
+        ['a_pos', 'a_offset', 'a_data1', 'a_data2', 'a_color', 'a_buffer', 'a_gamma', 'a_opacity'],
         ['u_matrix', 'u_exmatrix', 'u_texture', 'u_texsize', 'u_zoom', 'u_fadedist', 'u_minfadezoom', 'u_maxfadezoom', 'u_fadezoom', 'u_skewed', 'u_extra']);
 
     this.iconShader = gl.initializeShader('icon',
         ['a_pos', 'a_offset', 'a_data1', 'a_data2', 'a_opacity'],
         ['u_matrix', 'u_exmatrix', 'u_texture', 'u_texsize', 'u_zoom', 'u_fadedist', 'u_minfadezoom', 'u_maxfadezoom', 'u_fadezoom', 'u_skewed', 'u_extra']);
 
     this.outlineShader = gl.initializeShader('outline',
-        ['a_pos', 'a_color'],
+        ['a_pos', 'a_color', 'a_opacity'],
         ['u_matrix', 'u_world']
     );
 
     this.patternShader = gl.initializeShader('pattern',
-        ['a_pos'],
-        ['u_matrix', 'u_pattern_tl_a', 'u_pattern_br_a', 'u_pattern_tl_b', 'u_pattern_br_b', 'u_mix', 'u_patternmatrix_a', 'u_patternmatrix_b', 'u_opacity', 'u_image']
+        ['a_pos', 'a_opacity'],
+        ['u_matrix', 'u_pattern_tl_a', 'u_pattern_br_a', 'u_pattern_tl_b', 'u_pattern_br_b', 'u_mix', 'u_patternmatrix_a', 'u_patternmatrix_b', 'u_image']
     );
 
     this.fillShader = gl.initializeShader('fill',
-        ['a_pos', 'a_color'],
+        ['a_pos', 'a_color', 'a_opacity'],
         ['u_matrix']
     );
 
@@ -212,6 +212,7 @@ Painter.prototype.drawClippingMask = function(tile) {
 
     // Draw the clipping mask
     gl.disableVertexAttribArray(this.fillShader.a_color);
+    gl.disableVertexAttribArray(this.fillShader.a_opacity);
     gl.bindBuffer(gl.ARRAY_BUFFER, this.tileExtentBuffer);
     gl.vertexAttribPointer(this.fillShader.a_pos, this.tileExtentBuffer.itemSize, gl.SHORT, false, 8, 0);
     gl.drawArrays(gl.TRIANGLE_STRIP, 0, this.tileExtentBuffer.itemCount);
@@ -311,6 +312,7 @@ Painter.prototype.drawStencilBuffer = function() {
     gl.bindBuffer(gl.ARRAY_BUFFER, this.backgroundBuffer);
     gl.vertexAttribPointer(this.fillShader.a_pos, this.backgroundBuffer.itemSize, gl.SHORT, false, 0, 0);
     gl.disableVertexAttribArray(this.fillShader.a_color);
+    gl.disableVertexAttribArray(this.fillShader.a_opacity);
     gl.vertexAttrib4fv(this.fillShader.a_color, [0, 0, 0, 0.5]);
     gl.drawArrays(gl.TRIANGLE_STRIP, 0, this.tileExtentBuffer.itemCount);
 

js/style/style_layer.js

@@ -178,20 +178,17 @@ function premultiplyLayer(layer, type) {
         outlineProp = type + '-outline-color',
         color = layer[colorProp],
         haloColor = layer[haloProp],
-        outlineColor = layer[outlineProp],
-        opacity = layer[type + '-opacity'];
+        outlineColor = layer[outlineProp];
 
-    var colorOpacity = color && (opacity * color[3]);
-    var haloOpacity = haloColor && (opacity * haloColor[3]);
-    var outlineOpacity = outlineColor && (opacity * outlineColor[3]);
+    // Also multiply colours by 255 so that each value is 0..255 instead of 0..1
 
-    if (colorOpacity !== undefined && colorOpacity < 1) {
-        layer[colorProp] = util.premultiply([color[0], color[1], color[2], colorOpacity]);
+    if (color) {
+        layer[colorProp] = util.premultiply([color[0], color[1], color[2], color[3] * 255]);
     }
-    if (haloOpacity !== undefined && haloOpacity < 1) {
-        layer[haloProp] = util.premultiply([haloColor[0], haloColor[1], haloColor[2], haloOpacity]);
+    if (haloColor) {
+        layer[haloProp] = util.premultiply([haloColor[0], haloColor[1], haloColor[2], haloColor[3] * 255]);
     }
-    if (outlineOpacity !== undefined && outlineOpacity < 1) {
-        layer[outlineProp] = util.premultiply([outlineColor[0], outlineColor[1], outlineColor[2], outlineOpacity]);
+    if (outlineColor) {
+        layer[outlineProp] = util.premultiply([outlineColor[0], outlineColor[1], outlineColor[2], outlineColor[3] * 255]);
     }
 }

package.json

@@ -19,7 +19,7 @@
     "gl-matrix": "https://github.com/toji/gl-matrix/archive/v2.2.1.tar.gz",
     "glify": "0.5.0",
     "mapbox-gl-function": "^2.0.0",
-    "mapbox-gl-style-spec": "git+https://github.com/mapbox/mapbox-gl-style-spec.git#775b056316da79c8ca96c917e5a6b00181ccb49a",
+    "mapbox-gl-style-spec": "git+https://github.com/mapbox/mapbox-gl-style-spec.git#ff28464c4469817be96c534451548ce80a461e86",
     "minifyify": "^6.1.0",
     "pbf": "^1.2.0",
     "pngjs": "^0.4.0",
@@ -39,7 +39,7 @@
     "documentation": "git+https://github.com/documentationjs/documentation#d341019b32a8a257a93bd55586e7f09f42e29341",
     "eslint": "^0.14.1",
     "istanbul": "^0.3.0",
-    "mapbox-gl-test-suite": "git+https://github.com/mapbox/mapbox-gl-test-suite.git#7b28459dd20a2ba4a3d9ee35864f584f111fc5df",
+    "mapbox-gl-test-suite": "git+https://github.com/mapbox/mapbox-gl-test-suite.git#717d1f754a5babac229b085d01c3e04823b70847",
     "marked": "0.3.x",
     "mkdirp": "^0.5.0",
     "prova": "^2.1.2",

shaders/circle.vertex.glsl

@@ -3,6 +3,7 @@ attribute vec2 a_pos;
 attribute vec4 a_color;
 attribute float a_blur;
 attribute float a_size;
+attribute float a_opacity;
 
 uniform mat4 u_matrix;
 uniform mat4 u_exmatrix;
@@ -25,7 +26,7 @@ void main(void) {
     // Multiply the extrude by it so that it isn't affected by it.
     gl_Position += extrude * gl_Position.w;
 
-    v_color = a_color / 255.0;
+    v_color = a_color / 255.0 * a_opacity / 255.0;
     v_blur = a_blur / 10.0;
     v_size = a_size;
 }

shaders/fill.vertex.glsl

@@ -2,12 +2,11 @@ uniform mat4 u_matrix;
 
 attribute vec2 a_pos;
 attribute vec4 a_color;
+attribute float a_opacity;
 
 varying vec4 v_color;
 
 void main() {
     gl_Position = u_matrix * vec4(a_pos, 0, 1);
-    gl_PointSize = 2.0;
-
-    v_color = a_color;
+    v_color = a_color / 255.0 * a_opacity / 255.0;
 }

shaders/line.vertex.glsl

@@ -12,6 +12,7 @@ attribute vec4 a_color;
 attribute float a_linewidth;
 attribute float a_linegapwidth;
 attribute float a_blur;
+attribute float a_opacity;
 
 // matrix is for the vertex position, exmatrix is for rotating and projecting
 // the extrusion vector.
@@ -68,6 +69,6 @@ void main() {
 
     gamma_scale = perspective_scale * squish_scale;
 
-    v_color = a_color / 255.0;
+    v_color = a_color / 255.0 * a_opacity / 255.0;
     v_blur = a_blur;
 }

shaders/linepattern.vertex.glsl

@@ -55,8 +55,8 @@ void main() {
     // because we're extruding the line in pixel space, regardless of the current
     // tile's zoom level.
     gl_Position = u_matrix * vec4(floor(a_pos * 0.5) + dist.xy / u_ratio, 0.0, 1.0);
-    v_linesofar = a_linesofar;// * u_ratio;
+    v_linesofar = a_linesofar;
 
     v_blur = a_blur;
-    v_opacity = a_opacity;
+    v_opacity = a_opacity / 255.0;
 }

shaders/linesdfpattern.vertex.glsl

@@ -12,6 +12,7 @@ attribute vec4 a_color;
 attribute float a_linewidth;
 attribute float a_linegapwidth;
 attribute float a_blur;
+attribute float a_opacity;
 
 // matrix is for the vertex position, exmatrix is for rotating and projecting
 // the extrusion vector.
@@ -62,6 +63,6 @@ void main() {
     v_tex_a = vec2(a_linesofar * u_patternscale_a.x, normal.y * u_patternscale_a.y + u_tex_y_a);
     v_tex_b = vec2(a_linesofar * u_patternscale_b.x, normal.y * u_patternscale_b.y + u_tex_y_b);
 
-    v_color = a_color / 255.0;
+    v_color = a_color / 255.0 * a_opacity / 255.0;
     v_blur = a_blur;
 }

shaders/outline.vertex.glsl

@@ -1,5 +1,6 @@
 attribute vec2 a_pos;
 attribute vec4 a_color;
+attribute float a_opacity;
 
 uniform highp mat4 u_matrix;
 uniform vec2 u_world;
@@ -10,5 +11,5 @@ varying vec2 v_pos;
 void main() {
     gl_Position = u_matrix * vec4(a_pos, 0, 1);
     v_pos = (gl_Position.xy/gl_Position.w + 1.0) / 2.0 * u_world;
-    v_color = a_color;
+    v_color = a_color / 255.0 * a_opacity / 255.0;
 }

shaders/pattern.fragment.glsl

@@ -1,4 +1,3 @@
-uniform float u_opacity;
 uniform vec2 u_pattern_tl_a;
 uniform vec2 u_pattern_br_a;
 uniform vec2 u_pattern_tl_b;
@@ -9,6 +8,7 @@ uniform sampler2D u_image;
 
 varying vec2 v_pos_a;
 varying vec2 v_pos_b;
+varying float v_opacity;
 
 void main() {
 
@@ -20,5 +20,5 @@ void main() {
     vec2 pos2 = mix(u_pattern_tl_b, u_pattern_br_b, imagecoord_b);
     vec4 color2 = texture2D(u_image, pos2);
 
-    gl_FragColor = mix(color1, color2, u_mix) * u_opacity;
+    gl_FragColor = mix(color1, color2, u_mix) * v_opacity;
 }

shaders/pattern.vertex.glsl

@@ -3,12 +3,15 @@ uniform mat3 u_patternmatrix_a;
 uniform mat3 u_patternmatrix_b;
 
 attribute vec2 a_pos;
+attribute float a_opacity;
 
 varying vec2 v_pos_a;
 varying vec2 v_pos_b;
+varying float v_opacity;
 
 void main() {
     gl_Position = u_matrix * vec4(a_pos, 0, 1);
     v_pos_a = (u_patternmatrix_a * vec3(a_pos, 1)).xy;
     v_pos_b = (u_patternmatrix_b * vec3(a_pos, 1)).xy;
+    v_opacity = a_opacity / 255.0;
 }