From c8cbb9d6b0d541413347f317ae7c181fbf62d110 Mon Sep 17 00:00:00 2001
From: Lauren Budorick <lauren@mapbox.com>
Date: Fri, 7 Oct 2016 17:00:57 -0700
Subject: [PATCH] Add fill-extrude-height and fill-extrude-base properties.
 (#3223)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🎉 🏗 🆙
---
 debug/index.html                        |   2 +-
 js/data/bucket.js                       |  11 +-
 js/data/bucket/fill_bucket.js           |  25 ++-
 js/data/bucket/fill_extrusion_bucket.js | 173 +++++++++++++++++
 js/render/draw_extrusion.js             | 244 ++++++++++++++++++++++++
 js/render/painter.js                    |  41 +++-
 js/source/raster_tile_source.js         |   4 +-
 js/style/light.js                       | 147 ++++++++++++++
 js/style/style.js                       |  31 +++
 js/style/style_declaration.js           |   2 +
 js/style/style_function.js              |   8 +-
 js/ui/map.js                            |  23 ++-
 js/util/util.js                         |  27 +++
 package.json                            |   6 +-
 test/js/style/light.test.js             | 126 ++++++++++++
 15 files changed, 848 insertions(+), 22 deletions(-)
 create mode 100644 js/data/bucket/fill_extrusion_bucket.js
 create mode 100644 js/render/draw_extrusion.js
 create mode 100644 js/style/light.js
 create mode 100644 test/js/style/light.test.js
diff --git a/debug/index.html b/debug/index.html
index e156b414125..c63b66822d6 100644
--- a/debug/index.html
+++ b/debug/index.html
@@ -3,7 +3,7 @@
 <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">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
 
     <link rel='stylesheet' href='/dist/mapbox-gl.css' />
     <style>
diff --git a/js/data/bucket.js b/js/data/bucket.js
index 4e2edb7f415..3da946434df 100644
--- a/js/data/bucket.js
+++ b/js/data/bucket.js
@@ -17,11 +17,20 @@ module.exports = Bucket;
 Bucket.create = function(options) {
     var Classes = {
         fill: require('./bucket/fill_bucket'),
+        fillextrusion: require('./bucket/fill_extrusion_bucket'),
         line: require('./bucket/line_bucket'),
         circle: require('./bucket/circle_bucket'),
         symbol: require('./bucket/symbol_bucket')
     };
-    return new Classes[options.layer.type](options);
+
+    var type = options.layer.type;
+    if (type === 'fill' && (!options.layer.isPaintValueFeatureConstant('fill-extrude-height') ||
+        !options.layer.isPaintValueZoomConstant('fill-extrude-height') ||
+        options.layer.getPaintValue('fill-extrude-height') !== 0)) {
+        type = 'fillextrusion';
+    }
+
+    return new Classes[type](options);
 };
 
 
diff --git a/js/data/bucket/fill_bucket.js b/js/data/bucket/fill_bucket.js
index 9089a7c2c09..10202ab2694 100644
--- a/js/data/bucket/fill_bucket.js
+++ b/js/data/bucket/fill_bucket.js
@@ -5,6 +5,7 @@ var util = require('../../util/util');
 var loadGeometry = require('../load_geometry');
 var earcut = require('earcut');
 var classifyRings = require('../../util/classify_rings');
+var Point = require('point-geometry');
 var EARCUT_MAX_RINGS = 500;
 
 module.exports = FillBucket;
@@ -56,9 +57,15 @@ FillBucket.prototype.programInterfaces = {
     }
 };
 
+FillBucket.prototype.addVertex = function(vertexArray, x, y) {
+    return vertexArray.emplaceBack(x, y);
+};
+
 FillBucket.prototype.addFeature = function(feature) {
     var lines = loadGeometry(feature);
-    var polygons = classifyRings(lines, EARCUT_MAX_RINGS);
+    var polygons = convertCoords(classifyRings(lines, EARCUT_MAX_RINGS));
+
+    this.factor = Math.pow(2, 13);
 
     var startGroup = this.prepareArrayGroup('fill', 0);
     var startIndex = startGroup.layoutVertexArray.length;
@@ -81,23 +88,26 @@ FillBucket.prototype.addPolygon = function(polygon) {
     var holeIndices = [];
     var startIndex = group.layoutVertexArray.length;
 
+    var indices = [];
+
     for (var r = 0; r < polygon.length; r++) {
         var ring = polygon[r];
 
         if (r > 0) holeIndices.push(flattened.length / 2);
 
         for (var v = 0; v < ring.length; v++) {
-            var vertex = ring[v];
+            var v1 = ring[v];
 
-            var index = group.layoutVertexArray.emplaceBack(vertex.x, vertex.y);
+            var index = this.addVertex(group.layoutVertexArray, v1[0], v1[1], 0, 0, 1, 1, 0);
+            indices.push(index);
 
             if (v >= 1) {
                 group.elementArray2.emplaceBack(index - 1, index);
             }
 
             // convert to format used by earcut
-            flattened.push(vertex.x);
-            flattened.push(vertex.y);
+            flattened.push(v1[0]);
+            flattened.push(v1[1]);
         }
     }
 
@@ -107,3 +117,8 @@ FillBucket.prototype.addPolygon = function(polygon) {
         group.elementArray.emplaceBack(triangleIndices[i] + startIndex);
     }
 };
+
+function convertCoords(rings) {
+    if (rings instanceof Point) return [rings.x, rings.y];
+    return rings.map(convertCoords);
+}
diff --git a/js/data/bucket/fill_extrusion_bucket.js b/js/data/bucket/fill_extrusion_bucket.js
new file mode 100644
index 00000000000..3c439215946
--- /dev/null
+++ b/js/data/bucket/fill_extrusion_bucket.js
@@ -0,0 +1,173 @@
+'use strict';
+
+var Bucket = require('../bucket');
+var util = require('../../util/util');
+var loadGeometry = require('../load_geometry');
+var earcut = require('earcut');
+var classifyRings = require('../../util/classify_rings');
+var Point = require('point-geometry');
+var EARCUT_MAX_RINGS = 500;
+
+module.exports = FillExtrusionBucket;
+
+function FillExtrusionBucket() {
+    Bucket.apply(this, arguments);
+}
+
+FillExtrusionBucket.prototype = util.inherit(Bucket, {});
+
+FillExtrusionBucket.prototype.programInterfaces = {
+    fillextrusion: {
+        layoutVertexArrayType: new Bucket.VertexArrayType([{
+            name: 'a_pos',
+            components: 2,
+            type: 'Int16'
+        }, {
+            name: 'a_normal',
+            components: 3,
+            type: 'Int16'
+        }, {
+            name: 'a_edgedistance',
+            components: 1,
+            type: 'Int16'
+        }]),
+        elementArrayType: new Bucket.ElementArrayType(3),
+
+        paintAttributes: [{
+            name: 'a_minH',
+            components: 1,
+            type: 'Uint16',
+            getValue: function(layer, globalProperties, featureProperties) {
+                return [layer.getPaintValue("fill-extrude-base", globalProperties, featureProperties)];
+            },
+            multiplier: 1,
+            paintProperty: 'fill-extrude-base'
+        }, {
+            name: 'a_maxH',
+            components: 1,
+            type: 'Uint16',
+            getValue: function(layer, globalProperties, featureProperties) {
+                return [layer.getPaintValue("fill-extrude-height", globalProperties, featureProperties)];
+            },
+            multiplier: 1,
+            paintProperty: 'fill-extrude-height'
+        }, {
+            name: 'a_color',
+            components: 4,
+            type: 'Uint8',
+            getValue: function(layer, globalProperties, featureProperties) {
+                var color = layer.getPaintValue("fill-color", globalProperties, featureProperties);
+                color[3] = 1.0;
+                return color;
+            },
+            multiplier: 255,
+            paintProperty: 'fill-color'
+        }]
+    }
+};
+
+FillExtrusionBucket.prototype.addVertex = function(vertexArray, x, y, nx, ny, nz, t, e) {
+    return vertexArray.emplaceBack(
+        // a_pos
+        x,
+        y,
+        // a_normal
+        Math.floor(nx * this.factor) * 2 + t,
+        ny * this.factor * 2,
+        nz * this.factor * 2,
+
+        // a_edgedistance
+        Math.round(e)
+        );
+};
+
+FillExtrusionBucket.prototype.addFeature = function(feature) {
+    var lines = loadGeometry(feature);
+    var polygons = convertCoords(classifyRings(lines, EARCUT_MAX_RINGS));
+
+    this.factor = Math.pow(2, 13);
+
+    var startGroup = this.prepareArrayGroup('fillextrusion', 0);
+    var startIndex = startGroup.layoutVertexArray.length;
+
+    for (var i = 0; i < polygons.length; i++) {
+        this.addPolygon(polygons[i]);
+    }
+
+    this.populatePaintArrays('fillextrusion', {zoom: this.zoom}, feature.properties, startGroup, startIndex);
+};
+
+FillExtrusionBucket.prototype.addPolygon = function(polygon) {
+    var numVertices = 0;
+    for (var k = 0; k < polygon.length; k++) {
+        numVertices += polygon[k].length;
+    }
+    numVertices *= 5;
+
+    var group = this.prepareArrayGroup('fillextrusion', numVertices);
+    var flattened = [];
+    var holeIndices = [];
+
+    var indices = [];
+
+    for (var r = 0; r < polygon.length; r++) {
+        var ring = polygon[r];
+
+        if (r > 0) holeIndices.push(flattened.length / 2);
+
+        var edgeDistance = 0;
+
+        for (var v = 0; v < ring.length; v++) {
+            var v1 = ring[v];
+
+            var index = this.addVertex(group.layoutVertexArray, v1[0], v1[1], 0, 0, 1, 1, 0);
+            indices.push(index);
+
+            if (v >= 1) {
+                var v2 = ring[v - 1];
+
+                if (!isBoundaryEdge(v1, v2)) {
+                    var perp = Point.convert(v1)._sub(Point.convert(v2))._perp()._unit();
+
+                    var bottomRight = this.addVertex(group.layoutVertexArray, v1[0], v1[1], perp.x, perp.y, 0, 0, edgeDistance);
+                    this.addVertex(group.layoutVertexArray, v1[0], v1[1], perp.x, perp.y, 0, 1, edgeDistance);
+
+                    edgeDistance += Point.convert(v2).dist(Point.convert(v1));
+
+                    this.addVertex(group.layoutVertexArray, v2[0], v2[1], perp.x, perp.y, 0, 0, edgeDistance);
+                    this.addVertex(group.layoutVertexArray, v2[0], v2[1], perp.x, perp.y, 0, 1, edgeDistance);
+
+                    group.elementArray.emplaceBack(bottomRight, bottomRight + 1, bottomRight + 2);
+                    group.elementArray.emplaceBack(bottomRight + 1, bottomRight + 2, bottomRight + 3);
+                }
+            }
+
+            // convert to format used by earcut
+            flattened.push(v1[0]);
+            flattened.push(v1[1]);
+        }
+    }
+
+    var triangleIndices = earcut(flattened, holeIndices);
+
+    for (var j = 0; j < triangleIndices.length - 2; j += 3) {
+        group.elementArray.emplaceBack(indices[triangleIndices[j]],
+            indices[triangleIndices[j + 1]],
+            indices[triangleIndices[j + 2]]);
+    }
+};
+
+function convertCoords(rings) {
+    if (rings instanceof Point) return [rings.x, rings.y];
+    return rings.map(convertCoords);
+}
+
+function isBoundaryEdge(v1, v2) {
+    return v1.some(function(a, i) {
+        return isOutside(v2[i]) && v2[i] === a;
+    });
+}
+
+function isOutside(coord) {
+    return coord < 0 || coord > Bucket.EXTENT;
+}
diff --git a/js/render/draw_extrusion.js b/js/render/draw_extrusion.js
new file mode 100644
index 00000000000..40e89fe4b27
--- /dev/null
+++ b/js/render/draw_extrusion.js
@@ -0,0 +1,244 @@
+'use strict';
+
+var mat3 = require('gl-matrix').mat3;
+var mat4 = require('gl-matrix').mat4;
+var vec3 = require('gl-matrix').vec3;
+var pixelsToTileUnits = require('../source/pixels_to_tile_units');
+var Buffer = require('../data/buffer');
+var VertexArrayObject = require('./vertex_array_object');
+var StructArrayType = require('../util/struct_array');
+
+module.exports = draw;
+
+function draw(painter, source, layer, coords) {
+    if (layer.paint['fill-opacity'] === 0) return;
+    var gl = painter.gl;
+    gl.disable(gl.STENCIL_TEST);
+    painter.depthMask(true);
+
+    // Create a new texture to which to render the extrusion layer. This approach
+    // allows us to adjust opacity on a per-layer basis (eliminating the interior
+    // walls per-feature opacity problem)
+    var texture = new ExtrusionTexture(gl, painter, layer);
+    texture.bindFramebuffer();
+
+    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+    for (var i = 0; i < coords.length; i++) {
+        drawExtrusion(painter, source, layer, coords[i]);
+    }
+
+    // Unbind the framebuffer as a render target and render it to the map
+    texture.unbindFramebuffer();
+    texture.renderToMap();
+}
+
+function ExtrusionTexture(gl, painter, layer) {
+    this.gl = gl;
+    this.width = painter.width;
+    this.height = painter.height;
+    this.painter = painter;
+    this.layer = layer;
+
+    this.texture = null;
+    this.fbo = null;
+    this.fbos = this.painter.preFbos[this.width] && this.painter.preFbos[this.width][this.height];
+}
+
+ExtrusionTexture.prototype.bindFramebuffer = function() {
+    var gl = this.gl;
+
+    this.texture = this.painter.getViewportTexture(this.width, this.height);
+
+    gl.activeTexture(gl.TEXTURE1);
+    if (!this.texture) {
+        this.texture = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, this.texture);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.width, this.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+        this.texture.width = this.width;
+        this.texture.height = this.height;
+    } else {
+        gl.bindTexture(gl.TEXTURE_2D, this.texture);
+    }
+
+    if (!this.fbos) {
+        this.fbo = gl.createFramebuffer();
+        var stencil = gl.createRenderbuffer();
+        var depthRenderBuffer = gl.createRenderbuffer();
+        gl.bindRenderbuffer(gl.RENDERBUFFER, stencil);
+        gl.bindRenderbuffer(gl.RENDERBUFFER, depthRenderBuffer);
+        gl.renderbufferStorage(gl.RENDERBUFFER, gl.RGBA4, this.width, this.height);
+        gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, this.width, this.height);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this.fbo);
+        gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.RENDERBUFFER, stencil);
+        gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depthRenderBuffer);
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0);
+    } else {
+        this.fbo = this.fbos.pop();
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this.fbo);
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0);
+    }
+};
+
+ExtrusionTexture.prototype.unbindFramebuffer = function() {
+    this.painter.bindDefaultFramebuffer();
+    if (this.fbos) {
+        this.fbos.push(this.fbo);
+    } else {
+        if (!this.painter.preFbos[this.width]) this.painter.preFbos[this.width] = {};
+        this.painter.preFbos[this.width][this.height] = [this.fbo];
+    }
+    this.painter.saveViewportTexture(this.texture);
+};
+
+ExtrusionTexture.prototype.TextureBoundsArray = new StructArrayType({
+    members: [
+        { name: 'a_pos', type: 'Int16', components: 2 }
+    ]
+});
+
+ExtrusionTexture.prototype.renderToMap = function() {
+    var gl = this.gl;
+    var painter = this.painter;
+    var program = painter.useProgram('fillExtrudeTexture');
+
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, this.texture);
+
+    gl.uniform1f(program.u_opacity, this.layer.paint['fill-opacity']);
+    gl.uniform1i(program.u_texture, 1);
+
+    gl.uniformMatrix4fv(program.u_matrix, false, mat4.ortho(
+        mat4.create(),
+        0,
+        painter.width,
+        painter.height,
+        0,
+        0,
+        1)
+    );
+
+    gl.disable(gl.DEPTH_TEST);
+
+    gl.uniform1i(program.u_xdim, painter.width);
+    gl.uniform1i(program.u_ydim, painter.height);
+
+    var array = new this.TextureBoundsArray();
+    array.emplaceBack(0, 0);
+    array.emplaceBack(painter.width, 0);
+    array.emplaceBack(0, painter.height);
+    array.emplaceBack(painter.width, painter.height);
+    var buffer = new Buffer(array.serialize(), this.TextureBoundsArray.serialize(), Buffer.BufferType.VERTEX);
+
+    var vao = new VertexArrayObject();
+    vao.bind(gl, program, buffer);
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+
+    gl.enable(gl.DEPTH_TEST);
+};
+
+function drawExtrusion(painter, source, layer, coord) {
+    var tile = source.getTile(coord);
+    var bucket = tile.getBucket(layer);
+    if (!bucket) return;
+    var bufferGroups = bucket.bufferGroups.fillextrusion;
+    if (!bufferGroups) return;
+
+    if (painter.isOpaquePass) return;
+
+    var gl = painter.gl;
+
+    var image = layer.paint['fill-pattern'];
+
+    var programOptions = bucket.paintAttributes.fillextrusion[layer.id];
+    var program = painter.useProgram(
+        image ? 'fillExtrudePattern' : 'fillExtrude',
+        programOptions.defines,
+        programOptions.vertexPragmas,
+        programOptions.fragmentPragmas
+    );
+
+    if (image) {
+        setPattern(image, tile, coord, painter, program);
+    }
+
+    setMatrix(program, painter, coord, tile, layer);
+    setLight(program, painter);
+
+    bucket.setUniforms(gl, 'fillextrusion', program, layer, {zoom: painter.transform.zoom});
+
+    for (var i = 0; i < bufferGroups.length; i++) {
+        var group = bufferGroups[i];
+        group.vaos[layer.id].bind(gl, program, group.layoutVertexBuffer, group.elementBuffer, group.paintVertexBuffers[layer.id]);
+        gl.drawElements(gl.TRIANGLES, group.elementBuffer.length * 3, gl.UNSIGNED_SHORT, 0);
+    }
+}
+
+function setMatrix(program, painter, coord, tile, layer) {
+    var zScale = Math.pow(2, painter.transform.zoom) / 50000;
+
+    painter.gl.uniformMatrix4fv(program.u_matrix, false, mat4.scale(
+        mat4.create(),
+        painter.translatePosMatrix(
+            coord.posMatrix,
+            tile,
+            layer.paint['fill-translate'],
+            layer.paint['fill-translate-anchor']
+        ),
+        [1, 1, zScale, 1])
+    );
+}
+
+function setLight(program, painter) {
+    var gl = painter.gl;
+    var light = painter.style.light;
+
+    var _lp = light.calculated.position,
+        lightPos = [_lp.x, _lp.y, _lp.z];
+    var lightMat = mat3.create();
+    if (light.calculated.anchor === 'viewport') mat3.fromRotation(lightMat, -painter.transform.angle);
+    vec3.transformMat3(lightPos, lightPos, lightMat);
+
+    gl.uniform3fv(program.u_lightpos, lightPos);
+    gl.uniform1f(program.u_lightintensity, light.calculated.intensity);
+    gl.uniform3fv(program.u_lightcolor, light.calculated.color.slice(0, 3));
+}
+
+
+function setPattern(image, tile, coord, painter, program) {
+    var gl = painter.gl;
+
+    var imagePosA = painter.spriteAtlas.getPosition(image.from, true);
+    var imagePosB = painter.spriteAtlas.getPosition(image.to, true);
+    if (!imagePosA || !imagePosB) return;
+
+    gl.uniform1i(program.u_image, 0);
+    gl.uniform2fv(program.u_pattern_tl_a, imagePosA.tl);
+    gl.uniform2fv(program.u_pattern_br_a, imagePosA.br);
+    gl.uniform2fv(program.u_pattern_tl_b, imagePosB.tl);
+    gl.uniform2fv(program.u_pattern_br_b, imagePosB.br);
+    gl.uniform1f(program.u_mix, image.t);
+
+    gl.uniform1f(program.u_tile_units_to_pixels, 1 / pixelsToTileUnits(tile, 1, painter.transform.tileZoom));
+    gl.uniform2fv(program.u_pattern_size_a, imagePosA.size);
+    gl.uniform2fv(program.u_pattern_size_b, imagePosB.size);
+    gl.uniform1f(program.u_scale_a, image.fromScale);
+    gl.uniform1f(program.u_scale_b, image.toScale);
+
+    var tileSizeAtNearestZoom = tile.tileSize * Math.pow(2, painter.transform.tileZoom - tile.coord.z);
+
+    var pixelX = tileSizeAtNearestZoom * (tile.coord.x + coord.w * Math.pow(2, tile.coord.z));
+    var pixelY = tileSizeAtNearestZoom * tile.coord.y;
+    // split the pixel coord into two pairs of 16 bit numbers. The glsl spec only guarantees 16 bits of precision.
+    gl.uniform2f(program.u_pixel_coord_upper, pixelX >> 16, pixelY >> 16);
+    gl.uniform2f(program.u_pixel_coord_lower, pixelX & 0xFFFF, pixelY & 0xFFFF);
+
+    gl.uniform1f(program.u_height_factor, -Math.pow(2, painter.transform.tileZoom) / tileSizeAtNearestZoom >> 3);
+
+    gl.activeTexture(gl.TEXTURE0);
+    painter.spriteAtlas.bind(gl, true);
+}
diff --git a/js/render/painter.js b/js/render/painter.js
index 1f7a4de150c..830a4669433 100644
--- a/js/render/painter.js
+++ b/js/render/painter.js
@@ -186,6 +186,7 @@ var draw = {
     circle: require('./draw_circle'),
     line: require('./draw_line'),
     fill: require('./draw_fill'),
+    extrusion: require('./draw_extrusion'),
     raster: require('./draw_raster'),
     background: require('./draw_background'),
     debug: require('./draw_debug')
@@ -273,7 +274,16 @@ Painter.prototype.renderLayer = function(painter, sourceCache, layer, coords) {
     if (layer.isHidden(this.transform.zoom)) return;
     if (layer.type !== 'background' && !coords.length) return;
     this.id = layer.id;
-    draw[layer.type](painter, sourceCache, layer, coords);
+
+    var type = layer.type;
+    if (type === 'fill' &&
+        (!layer.isPaintValueFeatureConstant('fill-extrude-height') ||
+        !layer.isPaintValueZoomConstant('fill-extrude-height') ||
+        layer.getPaintValue('fill-extrude-height') !== 0)) {
+        type = 'extrusion';
+    }
+
+    draw[type](painter, sourceCache, layer, coords);
 };
 
 Painter.prototype.setDepthSublayer = function(n) {
@@ -305,7 +315,7 @@ Painter.prototype.translatePosMatrix = function(matrix, tile, translate, anchor)
     return translatedMatrix;
 };
 
-Painter.prototype.saveTexture = function(texture) {
+Painter.prototype.saveTileTexture = function(texture) {
     var textures = this.reusableTextures[texture.size];
     if (!textures) {
         this.reusableTextures[texture.size] = [texture];
@@ -314,10 +324,31 @@ Painter.prototype.saveTexture = function(texture) {
     }
 };
 
+Painter.prototype.saveViewportTexture = function(texture) {
+    if (!this.reusableTextures.viewport) this.reusableTextures.viewport = {};
+    this.reusableTextures.viewport.texture = texture;
+};
 
-Painter.prototype.getTexture = function(size) {
-    var textures = this.reusableTextures[size];
-    return textures && textures.length > 0 ? textures.pop() : null;
+Painter.prototype.getTileTexture = function(width, height) {
+    var widthTextures = this.reusableTextures[width];
+    if (widthTextures) {
+        var textures = widthTextures[height || width];
+        return textures && textures.length > 0 ? textures.pop() : null;
+    }
+};
+
+Painter.prototype.getViewportTexture = function(width, height) {
+    if (!this.reusableTextures.viewport) return;
+
+    var texture = this.reusableTextures.viewport.texture;
+
+    if (texture.width === width && texture.height === height) {
+        return texture;
+    } else {
+        this.gl.deleteTexture(texture);
+        this.reusableTextures.viewport.texture = null;
+        return;
+    }
 };
 
 Painter.prototype.lineWidth = function(width) {
diff --git a/js/source/raster_tile_source.js b/js/source/raster_tile_source.js
index 1ace928b24f..6ea0b1e4abc 100644
--- a/js/source/raster_tile_source.js
+++ b/js/source/raster_tile_source.js
@@ -59,7 +59,7 @@ RasterTileSource.prototype = util.inherit(Evented, {
             }
 
             var gl = this.map.painter.gl;
-            tile.texture = this.map.painter.getTexture(img.width);
+            tile.texture = this.map.painter.getTileTexture(img.width);
             if (tile.texture) {
                 gl.bindTexture(gl.TEXTURE_2D, tile.texture);
                 gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, img);
@@ -92,6 +92,6 @@ RasterTileSource.prototype = util.inherit(Evented, {
     },
 
     unloadTile: function(tile) {
-        if (tile.texture) this.map.painter.saveTexture(tile.texture);
+        if (tile.texture) this.map.painter.saveTileTexture(tile.texture);
     }
 });
diff --git a/js/style/light.js b/js/style/light.js
new file mode 100644
index 00000000000..b713c433764
--- /dev/null
+++ b/js/style/light.js
@@ -0,0 +1,147 @@
+'use strict';
+
+var styleSpec = require('./style_spec');
+var util = require('../util/util');
+var Evented = require('../util/evented');
+var validateStyle = require('./validate_style');
+var StyleDeclaration = require('./style_declaration');
+var StyleTransition = require('./style_transition');
+
+/*
+ * Represents the light used to light extruded features.
+ */
+module.exports = Light;
+
+var TRANSITION_SUFFIX = '-transition';
+
+function Light(lightOptions) {
+    this.set(lightOptions);
+}
+
+Light.prototype = util.inherit(Evented, {
+    properties: ['anchor', 'color', 'position', 'intensity'],
+
+    _specifications: styleSpec.$root.light,
+
+    set: function(lightOpts) {
+        if (this._validate(validateStyle.light, lightOpts)) return;
+        this._declarations = {};
+        this._transitions = {};
+        this._transitionOptions = {};
+        this.calculated = {};
+
+        lightOpts = util.extend({
+            anchor: this._specifications.anchor.default,
+            color: this._specifications.color.default,
+            position: this._specifications.position.default,
+            intensity: this._specifications.intensity.default
+        }, lightOpts);
+
+        for (var p in this.properties) {
+            var prop = this.properties[p];
+
+            this._declarations[prop] = new StyleDeclaration(this._specifications[prop], lightOpts[prop]);
+        }
+
+        return this;
+    },
+
+    getLight: function() {
+        return {
+            anchor: this.getLightProperty('anchor'),
+            color: this.getLightProperty('color'),
+            position: this.getLightProperty('position'),
+            intensity: this.getLightProperty('intensity')
+        };
+    },
+
+    getLightProperty: function(property) {
+        if (util.endsWith(property, TRANSITION_SUFFIX)) {
+            return (
+                this._transitionOptions[property]
+            );
+        } else {
+            return (
+                this._declarations[property] &&
+                this._declarations[property].value
+            );
+        }
+    },
+
+    getLightValue: function(property, globalProperties) {
+        if (property === 'position') {
+            var calculated = this._transitions[property].calculate(globalProperties),
+                cartesian = util.sphericalToCartesian(calculated);
+            return {
+                x: cartesian[0],
+                y: cartesian[1],
+                z: cartesian[2]
+            };
+        }
+
+        return this._transitions[property].calculate(globalProperties);
+    },
+
+    setLight: function(options) {
+        if (this._validate(validateStyle.light, options)) return;
+
+        for (var key in options) {
+            var value = options[key];
+
+            if (util.endsWith(key, TRANSITION_SUFFIX)) {
+                this._transitionOptions[key] = value;
+            } else if (value === null || value === undefined) {
+                delete this._declarations[key];
+            } else {
+                this._declarations[key] = new StyleDeclaration(this._specifications[key], value);
+            }
+        }
+    },
+
+    recalculate: function(zoom, zoomHistory) {
+        for (var property in this._declarations) {
+            this.calculated[property] = this.getLightValue(property, {zoom: zoom, zoomHistory: zoomHistory});
+        }
+    },
+
+    _applyLightDeclaration: function(property, declaration, options, globalOptions, animationLoop) {
+        var oldTransition = options.transition ? this._transitions[property] : undefined;
+        var spec = this._specifications[property];
+
+        if (declaration === null || declaration === undefined) {
+            declaration = new StyleDeclaration(spec, spec.default);
+        }
+
+        if (oldTransition && oldTransition.declaration.json === declaration.json) return;
+
+        var transitionOptions = util.extend({
+            duration: 300,
+            delay: 0
+        }, globalOptions, this.getLightProperty(property + TRANSITION_SUFFIX));
+        var newTransition = this._transitions[property] =
+            new StyleTransition(spec, declaration, oldTransition, transitionOptions);
+        if (!newTransition.instant()) {
+            newTransition.loopID = animationLoop.set(newTransition.endTime - Date.now());
+        }
+
+        if (oldTransition) {
+            animationLoop.cancel(oldTransition.loopID);
+        }
+    },
+
+    updateLightTransitions: function(options, globalOptions, animationLoop) {
+        var property;
+        for (property in this._declarations) {
+            this._applyLightDeclaration(property, this._declarations[property], options, globalOptions, animationLoop);
+        }
+    },
+
+    _validate: function(validate, value) {
+        return validateStyle.emitErrors(this, validate.call(validateStyle, util.extend({
+            value: value,
+            // Workaround for https://github.com/mapbox/mapbox-gl-js/issues/2407
+            style: {glyphs: true, sprite: true},
+            styleSpec: styleSpec
+        })));
+    },
+});
diff --git a/js/style/style.js b/js/style/style.js
index 040089b4897..ba6d47bfabe 100644
--- a/js/style/style.js
+++ b/js/style/style.js
@@ -3,6 +3,7 @@
 var Evented = require('../util/evented');
 var StyleLayer = require('./style_layer');
 var ImageSprite = require('./image_sprite');
+var Light = require('./light');
 var GlyphSource = require('../symbol/glyph_source');
 var SpriteAtlas = require('../symbol/sprite_atlas');
 var LineAtlas = require('../render/line_atlas');
@@ -158,6 +159,8 @@ Style.prototype = util.inherit(Evented, {
 
         this._groupLayers();
         this._updateWorkerLayers();
+
+        this.light = new Light(this.stylesheet.light);
     },
 
     _groupLayers: function() {
@@ -214,6 +217,8 @@ Style.prototype = util.inherit(Evented, {
                 }
             }
         }
+
+        this.light.updateLightTransitions(options, transition, this.animationLoop);
     },
 
     _recalculate: function(z) {
@@ -232,6 +237,8 @@ Style.prototype = util.inherit(Evented, {
             }
         }
 
+        this.light.recalculate(z, this.zoomHistory);
+
         var maxZoomTransitionDuration = 300;
         if (Math.floor(this.z) !== Math.floor(z)) {
             this.animationLoop.set(maxZoomTransitionDuration);
@@ -582,6 +589,7 @@ Style.prototype = util.inherit(Evented, {
             version: this.stylesheet.version,
             name: this.stylesheet.name,
             metadata: this.stylesheet.metadata,
+            light: this.stylesheet.light,
             center: this.stylesheet.center,
             zoom: this.stylesheet.zoom,
             bearing: this.stylesheet.bearing,
@@ -676,6 +684,29 @@ Style.prototype = util.inherit(Evented, {
         }, callback);
     },
 
+    getLight: function() {
+        return this.light.getLight();
+    },
+
+    setLight: function(lightOptions, transitionOptions) {
+        this._checkLoaded();
+
+        var light = this.light.getLight();
+        var _update = false;
+        for (var key in lightOptions) {
+            if (!util.deepEqual(lightOptions[key], light[key])) {
+                _update = true;
+                break;
+            }
+        }
+        if (!_update) return this;
+
+        var transition = this.stylesheet.transition || {};
+
+        this.light.setLight(lightOptions);
+        return this.light.updateLightTransitions(transitionOptions || {transition: true}, transition, this.animationLoop);
+    },
+
     _validate: function(validate, key, value, props, options) {
         if (options && options.validate === false) {
             return false;
diff --git a/js/style/style_declaration.js b/js/style/style_declaration.js
index 8eb19c4abcb..9ab8b2fe3e9 100644
--- a/js/style/style_declaration.js
+++ b/js/style/style_declaration.js
@@ -14,6 +14,8 @@ function StyleDeclaration(reference, value) {
     this.json = JSON.stringify(this.value);
 
     var parsedValue = reference.type === 'color' && this.value ? parseColor(this.value) : value;
+    var specDefault = reference.default;
+    if (specDefault && reference.type === 'color') specDefault = parseColor(specDefault);
     this.calculate = MapboxGLFunction[reference.function || 'piecewise-constant'](parsedValue);
     this.isFeatureConstant = this.calculate.isFeatureConstant;
     this.isZoomConstant = this.calculate.isZoomConstant;
diff --git a/js/style/style_function.js b/js/style/style_function.js
index 233c568cabe..f52abfca39e 100644
--- a/js/style/style_function.js
+++ b/js/style/style_function.js
@@ -2,8 +2,8 @@
 
 var MapboxGLFunction = require('mapbox-gl-function');
 
-exports.interpolated = function(parameters) {
-    var inner = MapboxGLFunction.interpolated(parameters);
+exports.interpolated = function(parameters, specDefault) {
+    var inner = MapboxGLFunction.interpolated(parameters, specDefault);
     var outer = function(globalProperties, featureProperties) {
         return inner(globalProperties && globalProperties.zoom, featureProperties || {});
     };
@@ -12,8 +12,8 @@ exports.interpolated = function(parameters) {
     return outer;
 };
 
-exports['piecewise-constant'] = function(parameters) {
-    var inner = MapboxGLFunction['piecewise-constant'](parameters);
+exports['piecewise-constant'] = function(parameters, specDefault) {
+    var inner = MapboxGLFunction['piecewise-constant'](parameters, specDefault);
     var outer = function(globalProperties, featureProperties) {
         return inner(globalProperties && globalProperties.zoom, featureProperties || {});
     };
diff --git a/js/ui/map.js b/js/ui/map.js
index fcf683166ad..da9385f1bdb 100755
--- a/js/ui/map.js
+++ b/js/ui/map.js
@@ -123,7 +123,6 @@ var defaultOptions = {
  * });
  */
 var Map = module.exports = function(options) {
-
     options = util.extend({}, defaultOptions, options);
 
     this._interactive = options.interactive;
@@ -188,6 +187,7 @@ var Map = module.exports = function(options) {
 
     if (options.classes) this.setClasses(options.classes);
     if (options.style) this.setStyle(options.style);
+
     if (options.attributionControl) this.addControl(new Attribution(options.attributionControl));
 
     this.on('style.load', function() {
@@ -835,6 +835,27 @@ util.extend(Map.prototype, /** @lends Map.prototype */{
         return this.style.getLayoutProperty(layer, name);
     },
 
+    /**
+     * Sets the any combination of light values.
+     *
+     * @param {Object} options Light properties to set. Must conform to the [Mapbox Style Specification](https://www.mapbox.com/mapbox-gl-style-spec/).
+     * @returns {Map} `this`
+     */
+    setLight: function(lightOptions) {
+        this.style.setLight(lightOptions);
+        this._update(true);
+        return this;
+    },
+
+    /**
+     * Returns the value of the light object.
+     *
+     * @returns {Object} light Light properties of the style.
+     */
+    getLight: function() {
+        return this.style.getLight();
+    },
+
     /**
      * Returns the map's containing HTML element.
      *
diff --git a/js/util/util.js b/js/util/util.js
index 4779370d7bf..a4c6c4a4b3d 100644
--- a/js/util/util.js
+++ b/js/util/util.js
@@ -512,3 +512,30 @@ exports.isClosedPolygon = function(points) {
     // polygon simplification can produce polygons with zero area and more than 3 points
     return (Math.abs(exports.calculateSignedArea(points)) > 0.01);
 };
+
+/**
+ * Converts spherical coordinates to cartesian coordinates.
+ * @param {Array<number>} spherical Spherical coordinates, in [radial, azimuthal, polar]
+ *
+ * @return {Array<number>} cartesian coordinates in [x, y, z]
+ */
+
+exports.sphericalToCartesian = function(spherical) {
+    var r = spherical[0],
+        azimuthal = spherical[1],
+        polar = spherical[2];
+    // We abstract "north"/"up" (compass-wise) to be 0° when really this is 90° (π/2):
+    // correct for that here
+    azimuthal += 90;
+
+    // Convert azimuthal and polar angles to radians
+    azimuthal *= Math.PI / 180;
+    polar *= Math.PI / 180;
+
+    // spherical to cartesian (x, y, z)
+    return [
+        r * Math.cos(azimuthal) * Math.sin(polar),
+        r * Math.sin(azimuthal) * Math.sin(polar),
+        r * Math.cos(polar)
+    ];
+};
diff --git a/package.json b/package.json
index eed4b3fe493..bc354b3b1c4 100644
--- a/package.json
+++ b/package.json
@@ -20,8 +20,8 @@
     "gl-matrix": "^2.3.1",
     "grid-index": "^1.0.0",
     "mapbox-gl-function": "^1.3.0",
-    "mapbox-gl-shaders": "mapbox/mapbox-gl-shaders#98a56d538b11fb331aa67a6d632d6ecd6821b007",
-    "mapbox-gl-style-spec": "8.9.0",
+    "mapbox-gl-shaders": "mapbox/mapbox-gl-shaders#44b65f8090a74cbb0319664d010b8d8a8a1512b0",
+    "mapbox-gl-style-spec": "mapbox/mapbox-gl-style-spec#7d330d2abf1775abc95ab8b889089cf5ff579357",
     "mapbox-gl-supported": "^1.2.0",
     "package-json-versionify": "^1.0.2",
     "pbf": "^1.3.2",
@@ -60,7 +60,7 @@
     "jsdom": "^9.4.2",
     "json-loader": "^0.5.4",
     "lodash": "^4.13.1",
-    "mapbox-gl-test-suite": "mapbox/mapbox-gl-test-suite#f6e5b4576f2a1af1e5338a6915054492d99bd7cb",
+    "mapbox-gl-test-suite": "mapbox/mapbox-gl-test-suite#e1b17ec3444f324cbea88dad8dd6f1aa4f111484",
     "memory-fs": "^0.3.0",
     "minifyify": "^7.0.1",
     "npm-run-all": "^3.0.0",
diff --git a/test/js/style/light.test.js b/test/js/style/light.test.js
new file mode 100644
index 00000000000..d85bbf34981
--- /dev/null
+++ b/test/js/style/light.test.js
@@ -0,0 +1,126 @@
+'use strict';
+
+var test = require('tap').test;
+var Light = require('../../../js/style/light');
+var spec = require('../../../js/style/style_spec').$root.light;
+
+test('Light', function(t) {
+    t.test('creates default light with no options', function (t) {
+        var light = new Light({});
+
+        for (var key in spec) {
+            t.deepEqual(light.getLightProperty(key), spec[key].default);
+        }
+
+        t.end();
+    });
+
+    t.test('instantiates light correctly with options', function(t) {
+        var light = new Light({
+            anchor: 'map',
+            position: [2, 30, 30],
+            intensity: 1
+        });
+
+        t.equal(light.getLightProperty('anchor'), 'map');
+        t.deepEqual(light.getLightProperty('position'), [2, 30, 30]);
+        t.equal(light.getLightProperty('intensity'), 1);
+        t.equal(light.getLightProperty('color'), '#ffffff');
+
+        t.end();
+    });
+
+    t.end();
+});
+
+test('Light#set', function(t) {
+    var light = new Light({});
+
+    t.equal(light.getLightProperty('color'), '#ffffff');
+
+    light.set({ color: 'blue' });
+
+    t.equal(light.getLightProperty('color'), 'blue');
+
+    t.end();
+});
+
+test('Light#getLight', function(t) {
+    var light = new Light({});
+
+    var defaults = {};
+    for (var key in spec) {
+        defaults[key] = spec[key].default;
+    }
+
+    t.deepEqual(light.getLight(), defaults);
+    t.end();
+});
+
+test('Light#getLightProperty', function(t) {
+    var light = new Light({
+        intensity: {
+            stops: [[16, 0.2], [17, 0.8]]
+        },
+        color: 'red'
+    });
+    light.updateLightTransitions({ transition: true }, null, createAnimationLoop());
+
+    t.deepEqual(light.getLightProperty('intensity'), { stops: [[16, 0.2], [17, 0.8]] });
+    t.equal(light.getLightProperty('color'), 'red');
+    t.deepEqual(light.getLightProperty('position', { zoom: 16.5 }), [1.15, 210, 30]);
+
+    t.end();
+});
+
+test('Light#getLightValue', function(t) {
+    var light = new Light({
+        intensity: {
+            stops: [[16, 0.2], [17, 0.8]]
+        },
+        color: 'red'
+    });
+    light.updateLightTransitions({ transition: true }, null, createAnimationLoop());
+
+    t.equal(light.getLightValue('intensity', { zoom: 16.5 }), 0.5);
+    t.deepEqual(light.getLightValue('color', { zoom: 16.5 }), [1, 0, 0, 1]);
+    t.deepEqual(light.getLightValue('position', { zoom: 16.5 }), { x: 0.2875, y: -0.4979646071760521, z: 0.9959292143521045 });
+
+    t.end();
+});
+
+test('Light#setLight', function(t) {
+    var light = new Light({});
+    light.setLight({ color: 'red', "color-transition": { duration: 3000 }});
+    light.updateLightTransitions({ transition: true }, null, createAnimationLoop());
+
+    t.deepEqual(light.getLightValue('color', { zoom: 16 }), [1, 0, 0, 1]);
+
+    t.end();
+});
+
+test('Light#recalculate', function(t) {
+    var light = new Light({
+        intensity: {
+            stops: [[16, 0.2], [17, 0.8]]
+        }
+    });
+    light.updateLightTransitions({ transition: true }, null, createAnimationLoop());
+
+    light.recalculate(16, null);
+
+    t.equal(light.calculated.intensity, 0.2);
+
+    light.recalculate(17, null);
+
+    t.equal(light.calculated.intensity, 0.8);
+
+    t.end();
+});
+
+function createAnimationLoop() {
+    return {
+        set: function() {},
+        cancel: function() {}
+    };
+}
