fix font sizes as functions for curved labels

Each glyph has a `a_minzoom` and `a_maxzoom` which set the range of zoom
levels it is safe to show the glyph if the glyph is rendered at the
fontSize which was used for placement (the one set in the bucket).
`u_zoom` is compared against the min and max values to see if the glyph
can be shown.

When the font size in the style is different than that at which the
glyphs were placed, then the min and max zooms the glyph can be shown at
change. Instead of changing the min and max zooms, this adjusts `u_zoom`
so that less work needs to be done in the shader.

debug/style.js

@@ -436,7 +436,7 @@ var style_json = {
             "road_label": {
                 "color": "text",
                 "stroke": [1,1,1,0.7],
-                "size": ["exponential", 12, 8, 1, 8, 12]
+                "size": ["exponential", 14, 8, 1, 8, 12]
             }
         }
     }, {

js/render/drawtext.js

@@ -42,9 +42,12 @@ function drawText(gl, painter, layer, layerStyle, tile, stats, params, bucket_in
     // Convert the -pi..pi to an int8 range.
     var angle = Math.round(painter.transform.angle / Math.PI * 128);
 
+    // adjust min/max zooms for variable font sies
+    var zoomAdjust = Math.log(fontSize / bucket_info.fontSize) / Math.LN2;
+
     gl.uniform1f(shader.u_angle, (angle + 256) % 256);
     gl.uniform1f(shader.u_flip, bucket_info.path === 'curve' ? 1 : 0);
-    gl.uniform1f(shader.u_zoom, painter.transform.z * 10); // current zoom level
+    gl.uniform1f(shader.u_zoom, (painter.transform.z - zoomAdjust) * 10); // current zoom level
 
     // Label fading
 
@@ -85,7 +88,7 @@ function drawText(gl, painter, layer, layerStyle, tile, stats, params, bucket_in
     gl.uniform1f(shader.u_fadedist, fadedist * 10);
     gl.uniform1f(shader.u_minfadezoom, Math.floor(lowZ * 10));
     gl.uniform1f(shader.u_maxfadezoom, Math.floor(highZ * 10));
-    gl.uniform1f(shader.u_fadezoombump, bump * 10);
+    gl.uniform1f(shader.u_fadezoom, (painter.transform.z + bump) * 10);
 
     // Draw text first.
     gl.uniform4fv(shader.u_color, layerStyle.color);

js/render/painter.js

@@ -121,7 +121,7 @@ GLPainter.prototype.setup = function() {
 
     this.sdfShader = gl.initializeShader('sdf',
         ['a_pos', 'a_tex', 'a_offset', 'a_angle', 'a_minzoom', 'a_maxzoom', 'a_rangeend', 'a_rangestart', 'a_labelminzoom'],
-        ['u_posmatrix', 'u_exmatrix', 'u_texture', 'u_texsize', 'u_color', 'u_gamma', 'u_buffer', 'u_angle', 'u_zoom', 'u_flip', 'u_fadedist', 'u_minfadezoom', 'u_maxfadezoom', 'u_fadezoombump']);
+        ['u_posmatrix', 'u_exmatrix', 'u_texture', 'u_texsize', 'u_color', 'u_gamma', 'u_buffer', 'u_angle', 'u_zoom', 'u_flip', 'u_fadedist', 'u_minfadezoom', 'u_maxfadezoom', 'u_fadezoom']);
 
     this.outlineShader = gl.initializeShader('outline',
         ['a_pos'],

shaders/sdf.vertex.glsl

@@ -21,7 +21,7 @@ uniform float u_flip;
 uniform float u_fadedist;
 uniform float u_minfadezoom;
 uniform float u_maxfadezoom;
-uniform float u_fadezoombump;
+uniform float u_fadezoom;
 
 uniform vec2 u_texsize;
 
@@ -42,10 +42,11 @@ void main() {
     // If the label should be invisible, we move the vertex outside
     // of the view plane so that the triangle gets clipped. This makes it easier
     // for us to create degenerate triangle strips.
+    // u_zoom is the current zoom level adjusted for the change in font size
     float z = 2.0 - step(a_minzoom, u_zoom) - (1.0 - step(a_maxzoom, u_zoom)) + rev;
 
     // fade out labels
-    float alpha = clamp((u_zoom + u_fadezoombump - a_labelminzoom) / u_fadedist, 0.0, 1.0);
+    float alpha = clamp((u_fadezoom - a_labelminzoom) / u_fadedist, 0.0, 1.0);
 
     // todo remove branching
     if (u_fadedist >= 0.0) {