SDF icon support (fixes #404)

10 files changed, 265 insertions, 173 deletions

diff --git a/include/mbgl/map/sprite.hpp b/include/mbgl/map/sprite.hpp
index 7bc6665570..6461a5e33d 100644
--- a/include/mbgl/map/sprite.hpp
+++ b/include/mbgl/map/sprite.hpp
@@ -19,7 +19,7 @@ class FileSource;
 class SpritePosition {
 public:
     explicit SpritePosition() {}
-    explicit SpritePosition(uint16_t x, uint16_t y, uint16_t width, uint16_t height, float pixelRatio = 1.0f);
+    explicit SpritePosition(uint16_t x, uint16_t y, uint16_t width, uint16_t height, float pixelRatio, bool sdf);
 
     operator bool() const {
         return !(width == 0 && height == 0 && x == 0 && y == 0);
@@ -28,6 +28,7 @@ public:
     uint16_t x = 0, y = 0;
     uint16_t width = 0, height = 0;
     float pixelRatio = 1.0f;
+    bool sdf = false;
 };
 
 class Sprite : public std::enable_shared_from_this<Sprite>, private util::noncopyable {
diff --git a/include/mbgl/renderer/painter.hpp b/include/mbgl/renderer/painter.hpp
index af50a6b52a..75529d1136 100644
--- a/include/mbgl/renderer/painter.hpp
+++ b/include/mbgl/renderer/painter.hpp
@@ -120,12 +120,24 @@ public:
     void discardFramebuffers();
 
     bool needsAnimation() const;
+
 private:
     void setupShaders();
     mat4 translatedMatrix(const mat4& matrix, const std::array<float, 2> &translation, const Tile::ID &id, TranslateAnchorType anchor);
 
     void prepareTile(const Tile& tile);
 
+    template <typename BucketProperties, typename StyleProperties>
+    void renderSDF(SymbolBucket &bucket,
+                   const Tile::ID &id,
+                   const mat4 &matrixSymbol,
+                   const BucketProperties& bucketProperties,
+                   const StyleProperties& styleProperties,
+                   float scaleDivisor,
+                   std::array<float, 2> texsize,
+                   SDFShader& sdfShader,
+                   void (SymbolBucket::*drawSDF)(SDFShader&));
+
 public:
     void useProgram(uint32_t program);
     void lineWidth(float lineWidth);
@@ -176,7 +188,8 @@ public:
     std::unique_ptr<PatternShader> patternShader;
     std::unique_ptr<IconShader> iconShader;
     std::unique_ptr<RasterShader> rasterShader;
-    std::unique_ptr<SDFShader> sdfShader;
+    std::unique_ptr<SDFGlyphShader> sdfGlyphShader;
+    std::unique_ptr<SDFIconShader> sdfIconShader;
     std::unique_ptr<DotShader> dotShader;
     std::unique_ptr<GaussianShader> gaussianShader;
 
diff --git a/include/mbgl/renderer/symbol_bucket.hpp b/include/mbgl/renderer/symbol_bucket.hpp
index 23de5e6e5a..c71d276456 100644
--- a/include/mbgl/renderer/symbol_bucket.hpp
+++ b/include/mbgl/renderer/symbol_bucket.hpp
@@ -51,7 +51,7 @@ typedef std::vector<Symbol> Symbols;
 
 class SymbolBucket : public Bucket {
     typedef ElementGroup<1> TextElementGroup;
-    typedef ElementGroup<1> IconElementGroup;
+    typedef ElementGroup<2> IconElementGroup;
 
 public:
     SymbolBucket(const StyleBucketSymbol &properties, Collision &collision);
@@ -68,7 +68,8 @@ public:
     void addGlyphs(const PlacedGlyphs &glyphs, float placementZoom, PlacementRange placementRange,
                    float zoom);
 
-    void drawGlyphs(SDFShader &shader);
+    void drawGlyphs(SDFShader& shader);
+    void drawIcons(SDFShader& shader);
     void drawIcons(IconShader& shader);
 
 private:
@@ -90,6 +91,7 @@ private:
 
 public:
     const StyleBucketSymbol &properties;
+    bool sdfIcons = false;
 
 private:
     Collision &collision;
diff --git a/include/mbgl/shader/sdf_shader.hpp b/include/mbgl/shader/sdf_shader.hpp
index ba1937d3c3..0737c25ee1 100644
--- a/include/mbgl/shader/sdf_shader.hpp
+++ b/include/mbgl/shader/sdf_shader.hpp
@@ -10,7 +10,7 @@ class SDFShader : public Shader {
 public:
     SDFShader();
 
-    void bind(char *offset);
+    virtual void bind(char *offset) = 0;
 
     UniformMatrix<4>              u_matrix      = {"u_matrix",      *this};
     UniformMatrix<4>              u_exmatrix    = {"u_exmatrix",    *this};
@@ -26,7 +26,7 @@ public:
     Uniform<float>                u_maxfadezoom = {"u_maxfadezoom", *this};
     Uniform<float>                u_fadezoom    = {"u_fadezoom",    *this};
 
-private:
+protected:
     int32_t a_pos = -1;
     int32_t a_offset = -1;
     int32_t a_tex = -1;
@@ -37,6 +37,17 @@ private:
     int32_t a_rangestart = -1;
     int32_t a_labelminzoom = -1;
 };
+
+class SDFGlyphShader : public SDFShader {
+public:
+    void bind(char *offset);
+};
+
+class SDFIconShader : public SDFShader {
+public:
+    void bind(char *offset);
+};
+
 }
 
 #endif
diff --git a/src/map/sprite.cpp b/src/map/sprite.cpp
index a8f4f97185..af9413a0e3 100644
--- a/src/map/sprite.cpp
+++ b/src/map/sprite.cpp
@@ -13,12 +13,13 @@
 
 using namespace mbgl;
 
-SpritePosition::SpritePosition(uint16_t x, uint16_t y, uint16_t width, uint16_t height, float pixelRatio)
+SpritePosition::SpritePosition(uint16_t x, uint16_t y, uint16_t width, uint16_t height, float pixelRatio, bool sdf)
     : x(x),
       y(y),
       width(width),
       height(height),
-      pixelRatio(pixelRatio) {
+      pixelRatio(pixelRatio),
+      sdf(sdf) {
 }
 
 std::shared_ptr<Sprite> Sprite::Create(const std::string& base_url, float pixelRatio, const std::shared_ptr<FileSource> &fileSource) {
@@ -123,13 +124,15 @@ void Sprite::parseJSON() {
                 uint16_t width = 0;
                 uint16_t height = 0;
                 float pixelRatio = 1.0f;
+                bool sdf = false;
 
                 if (value.HasMember("x")) x = value["x"].GetInt();
                 if (value.HasMember("y")) y = value["y"].GetInt();
                 if (value.HasMember("width")) width = value["width"].GetInt();
                 if (value.HasMember("height")) height = value["height"].GetInt();
                 if (value.HasMember("pixelRatio")) pixelRatio = value["pixelRatio"].GetInt();
-                pos.emplace(name, SpritePosition { x, y, width, height, pixelRatio });
+                if (value.HasMember("sdf")) sdf = value["sdf"].GetBool();
+                pos.emplace(name, SpritePosition { x, y, width, height, pixelRatio, sdf });
             }
         }
     } else {
diff --git a/src/renderer/painter.cpp b/src/renderer/painter.cpp
index aee4bda13e..c1705cd7cf 100644
--- a/src/renderer/painter.cpp
+++ b/src/renderer/painter.cpp
@@ -44,7 +44,8 @@ void Painter::setup() {
     assert(linepatternShader);
     assert(patternShader);
     assert(rasterShader);
-    assert(sdfShader);
+    assert(sdfGlyphShader);
+    assert(sdfIconShader);
     assert(dotShader);
     assert(gaussianShader);
 
@@ -75,7 +76,8 @@ void Painter::setupShaders() {
     if (!patternShader) patternShader = std::make_unique<PatternShader>();
     if (!iconShader) iconShader = std::make_unique<IconShader>();
     if (!rasterShader) rasterShader = std::make_unique<RasterShader>();
-    if (!sdfShader) sdfShader = std::make_unique<SDFShader>();
+    if (!sdfGlyphShader) sdfGlyphShader = std::make_unique<SDFGlyphShader>();
+    if (!sdfIconShader) sdfIconShader = std::make_unique<SDFIconShader>();
     if (!dotShader) dotShader = std::make_unique<DotShader>();
     if (!gaussianShader) gaussianShader = std::make_unique<GaussianShader>();
 }
diff --git a/src/renderer/painter_symbol.cpp b/src/renderer/painter_symbol.cpp
index bf88b0e135..4fce66217f 100644
--- a/src/renderer/painter_symbol.cpp
+++ b/src/renderer/painter_symbol.cpp
@@ -7,7 +7,110 @@
 #include <mbgl/util/math.hpp>
 #include <cmath>
 
-namespace mbgl {
+using namespace mbgl;
+
+template <typename BucketProperties, typename StyleProperties>
+void Painter::renderSDF(SymbolBucket &bucket,
+                        const Tile::ID &id,
+                        const mat4 &matrix,
+                        const BucketProperties& bucketProperties,
+                        const StyleProperties& styleProperties,
+                        float sdfFontSize,
+                        std::array<float, 2> texsize,
+                        SDFShader& sdfShader,
+                        void (SymbolBucket::*drawSDF)(SDFShader&))
+{
+    mat4 vtxMatrix = translatedMatrix(matrix, styleProperties.translate, id, styleProperties.translate_anchor);
+
+    mat4 exMatrix;
+    matrix::copy(exMatrix, projMatrix);
+
+    const float angleOffset =
+        bucketProperties.rotation_alignment == RotationAlignmentType::Map
+            ? map.getState().getAngle()
+            : 0;
+
+    if (angleOffset) {
+        matrix::rotate_z(exMatrix, exMatrix, angleOffset);
+    }
+
+    // If layerStyle.size > bucket.info.fontSize then labels may collide
+    float fontSize = std::fmin(styleProperties.size, bucketProperties.max_size);
+    float fontScale = fontSize / sdfFontSize;
+    matrix::scale(exMatrix, exMatrix, fontScale, fontScale, 1.0f);
+
+    useProgram(sdfShader.program);
+    sdfShader.u_matrix = vtxMatrix;
+    sdfShader.u_exmatrix = exMatrix;
+    sdfShader.u_texsize = texsize;
+
+    // Convert the -pi..pi to an int8 range.
+    float angle = std::round(map.getState().getAngle() / M_PI * 128);
+
+    // adjust min/max zooms for variable font sies
+    float zoomAdjust = std::log(fontSize / bucketProperties.max_size) / std::log(2);
+
+    sdfShader.u_angle = (int32_t)(angle + 256) % 256;
+    sdfShader.u_flip = (bucket.properties.placement == PlacementType::Line ? 1 : 0);
+    sdfShader.u_zoom = (map.getState().getNormalizedZoom() - zoomAdjust) * 10; // current zoom level
+
+    FadeProperties f = frameHistory.getFadeProperties(300_milliseconds);
+    sdfShader.u_fadedist = f.fadedist * 10;
+    sdfShader.u_minfadezoom = std::floor(f.minfadezoom * 10);
+    sdfShader.u_maxfadezoom = std::floor(f.maxfadezoom * 10);
+    sdfShader.u_fadezoom = (map.getState().getNormalizedZoom() + f.bump) * 10;
+
+    // The default gamma value has to be adjust for the current pixelratio so that we're not
+    // drawing blurry font on retina screens.
+    const float gamma = 0.105 * sdfFontSize / fontSize / map.getState().getPixelRatio();
+
+    const float sdfPx = 8.0f;
+    const float blurOffset = 1.19f;
+    const float haloOffset = 6.0f;
+
+    // We're drawing in the translucent pass which is bottom-to-top, so we need
+    // to draw the halo first.
+    if (styleProperties.halo_color[3] > 0.0f) {
+        sdfShader.u_gamma = styleProperties.halo_blur * blurOffset / fontScale / sdfPx + gamma;
+
+        if (styleProperties.opacity < 1.0f) {
+            Color color = styleProperties.halo_color;
+            color[0] *= styleProperties.opacity;
+            color[1] *= styleProperties.opacity;
+            color[2] *= styleProperties.opacity;
+            color[3] *= styleProperties.opacity;
+            sdfShader.u_color = color;
+        } else {
+            sdfShader.u_color = styleProperties.halo_color;
+        }
+
+        sdfShader.u_buffer = (haloOffset - styleProperties.halo_width / fontScale) / sdfPx;
+
+        depthRange(strata, 1.0f);
+        (bucket.*drawSDF)(sdfShader);
+    }
+
+    // Then, we draw the text/icon over the halo
+    if (styleProperties.color[3] > 0.0f) {
+        sdfShader.u_gamma = gamma;
+
+        if (styleProperties.opacity < 1.0f) {
+            Color color = styleProperties.color;
+            color[0] *= styleProperties.opacity;
+            color[1] *= styleProperties.opacity;
+            color[2] *= styleProperties.opacity;
+            color[3] *= styleProperties.opacity;
+            sdfShader.u_color = color;
+        } else {
+            sdfShader.u_color = styleProperties.color;
+        }
+
+        sdfShader.u_buffer = (256.0f - 64.0f) / 256.0f;
+
+        depthRange(strata + strata_epsilon, 1.0f);
+        (bucket.*drawSDF)(sdfShader);
+    }
+}
 
 void Painter::renderSymbol(SymbolBucket &bucket, std::shared_ptr<StyleLayer> layer_desc, const Tile::ID &id, const mat4 &matrix) {
     // Abort early.
@@ -20,173 +123,87 @@ void Painter::renderSymbol(SymbolBucket &bucket, std::shared_ptr<StyleLayer> lay
     glDisable(GL_STENCIL_TEST);
 
     if (bucket.hasTextData()) {
-        mat4 vtxMatrix = translatedMatrix(matrix, properties.text.translate, id, properties.text.translate_anchor);
-
-        mat4 exMatrix;
-        matrix::copy(exMatrix, projMatrix);
-
-        const float angleOffset =
-            bucket.properties.text.rotation_alignment == RotationAlignmentType::Map
-                ? map.getState().getAngle()
-                : 0;
-
-        if (angleOffset) {
-            matrix::rotate_z(exMatrix, exMatrix, angleOffset);
-        }
-
-        // If layerStyle.size > bucket.info.fontSize then labels may collide
-        float fontSize = std::fmin(properties.text.size, bucket.properties.text.max_size);
-        matrix::scale(exMatrix, exMatrix, fontSize / 24.0f, fontSize / 24.0f, 1.0f);
-
-        useProgram(sdfShader->program);
-        sdfShader->u_matrix = vtxMatrix;
-        sdfShader->u_exmatrix = exMatrix;
-
         GlyphAtlas &glyphAtlas = *map.getGlyphAtlas();
         glyphAtlas.bind();
-        sdfShader->u_texsize = {{
-            static_cast<float>(glyphAtlas.width),
-            static_cast<float>(glyphAtlas.height)
-        }};
-
-        // Convert the -pi..pi to an int8 range.
-        float angle = std::round((map.getState().getAngle()) / M_PI * 128);
-
-        // adjust min/max zooms for variable font sies
-        float zoomAdjust = log(fontSize / bucket.properties.text.max_size) / log(2);
-
-        sdfShader->u_angle = (int32_t)(angle + 256) % 256;
-        sdfShader->u_flip = (bucket.properties.placement == PlacementType::Line ? 1 : 0);
-        sdfShader->u_zoom = (map.getState().getNormalizedZoom() - zoomAdjust) * 10; // current zoom level
-
-        FadeProperties f = frameHistory.getFadeProperties(300_milliseconds);
-        sdfShader->u_fadedist = f.fadedist * 10;
-        sdfShader->u_minfadezoom = std::floor(f.minfadezoom * 10);
-        sdfShader->u_maxfadezoom = std::floor(f.maxfadezoom * 10);
-        sdfShader->u_fadezoom = (map.getState().getNormalizedZoom() + f.bump) * 10;
-
-        // This defines the gamma around the SDF cutoff value.
-        const float sdfGamma = 1.0f / 10.0f;
-
-        // Our signed distance fields are scaled so that 1 pixel is scaled to 32 pixels.
-        // Our cutoff between positive and negative values is hard coded to 64 (== 2 pixels).
-        // This means that our 6/8 of the value range lies outside the glyph outline.
-        const float sdfOffset = (256.0f - 64.0f) / 32.0f;
-
-        // Currently, all of our fonts are rendered with a font size of 24px.
-        const float sdfFontSize = 24.0f;
-
-        // The default gamma value has to be adjust for the current pixelratio so that we're not
-        // drawing
-        // blurry font on retina screens.
-        const float gamma = sdfGamma * sdfFontSize / fontSize / map.getState().getPixelRatio();
-
-        // We're drawing in the translucent pass which is bottom-to-top, so we need
-        // to draw the halo first.
-        if (properties.text.halo_color[3] > 0.0f) {
-            const float haloWidth = util::clamp(
-                (sdfOffset - properties.text.halo_width / (fontSize / sdfFontSize)) / 8.0f, 0.0f,
-                1.0f);
-
-            if (properties.text.halo_blur != 0.0f) {
-                // We are converting the halo_blur value to current screen pixels.
-                // Then we're dividing it by two because the gamma value is added/subtracted into
-                // both
-                // directions in the shader, but the halo_blur describes the entire width of the
-                // blur.
-                // Note that this does *not* have to be adjusted for retina screens, because we want
-                // the
-                // same blur width when we explicitly specify one.
-                sdfShader->u_gamma = (properties.text.halo_blur / (fontSize / sdfFontSize)) / 8.0f / 2.0f;
-            } else {
-                sdfShader->u_gamma = sdfGamma;
-            }
-
-            if (properties.text.opacity < 1.0f) {
-                Color color = properties.text.halo_color;
-                color[0] *= properties.text.opacity;
-                color[1] *= properties.text.opacity;
-                color[2] *= properties.text.opacity;
-                color[3] *= properties.text.opacity;
-                sdfShader->u_color = color;
-            } else {
-                sdfShader->u_color = properties.text.halo_color;
-            }
-            sdfShader->u_buffer = haloWidth;
-            depthRange(strata, 1.0f);
-            bucket.drawGlyphs(*sdfShader);
-        }
 
-        if (properties.text.color[3] > 0.0f) {
-            // Then, we draw the text over the halo
-            sdfShader->u_gamma = gamma;
-            if (properties.text.opacity < 1.0f) {
-                Color color = properties.text.color;
-                color[0] *= properties.text.opacity;
-                color[1] *= properties.text.opacity;
-                color[2] *= properties.text.opacity;
-                color[3] *= properties.text.opacity;
-                sdfShader->u_color = color;
-            } else {
-                sdfShader->u_color = properties.text.color;
-            }
-            sdfShader->u_buffer = (256.0f - 64.0f) / 256.0f;
-            depthRange(strata + strata_epsilon, 1.0f);
-            bucket.drawGlyphs(*sdfShader);
-        }
+        renderSDF(bucket,
+                  id,
+                  matrix,
+                  bucket.properties.text,
+                  properties.text,
+                  24.0f,
+                  {{ float(glyphAtlas.width) / 4, float(glyphAtlas.height) / 4 }},
+                  *sdfGlyphShader,
+                  &SymbolBucket::drawGlyphs);
     }
 
     if (bucket.hasIconData()) {
-        mat4 vtxMatrix = translatedMatrix(matrix, properties.icon.translate, id, properties.icon.translate_anchor);
-
-        mat4 exMatrix;
-        matrix::copy(exMatrix, projMatrix);
+        bool sdf = bucket.sdfIcons;
 
         const float angleOffset =
             bucket.properties.icon.rotation_alignment == RotationAlignmentType::Map
                 ? map.getState().getAngle()
                 : 0;
 
-        if (angleOffset) {
-            matrix::rotate_z(exMatrix, exMatrix, angleOffset);
-        }
-
         // If layerStyle.size > bucket.info.fontSize then labels may collide
         const float fontSize = properties.icon.size != 0 ? properties.icon.size : bucket.properties.icon.max_size;
         const float fontScale = fontSize / 1.0f;
-        matrix::scale(exMatrix, exMatrix, fontScale, fontScale, 1.0f);
-
-        useProgram(iconShader->program);
-        iconShader->u_matrix = vtxMatrix;
-        iconShader->u_exmatrix = exMatrix;
 
         SpriteAtlas &spriteAtlas = *map.getSpriteAtlas();
-        spriteAtlas.bind(map.getState().isChanging() || bucket.properties.placement == PlacementType::Line || angleOffset != 0 || fontScale != 1);
-        iconShader->u_texsize = {{
-            static_cast<float>(spriteAtlas.getWidth()),
-            static_cast<float>(spriteAtlas.getHeight())
+        spriteAtlas.bind(map.getState().isChanging() || bucket.properties.placement == PlacementType::Line || angleOffset != 0 || fontScale != 1 || sdf);
+
+        std::array<float, 2> texsize = {{
+            float(spriteAtlas.getWidth()),
+            float(spriteAtlas.getHeight())
         }};
 
-        // Convert the -pi..pi to an int8 range.
-        const float angle = std::round((map.getState().getAngle()) / M_PI * 128);
+        if (sdf) {
+            renderSDF(bucket,
+                      id,
+                      matrix,
+                      bucket.properties.icon,
+                      properties.icon,
+                      1.0f,
+                      texsize,
+                      *sdfIconShader,
+                      &SymbolBucket::drawIcons);
+        } else {
+            mat4 vtxMatrix = translatedMatrix(matrix, properties.icon.translate, id, properties.icon.translate_anchor);
+
+            mat4 exMatrix;
+            matrix::copy(exMatrix, projMatrix);
+
+            if (angleOffset) {
+                matrix::rotate_z(exMatrix, exMatrix, angleOffset);
+            }
 
-        // adjust min/max zooms for variable font sies
-        float zoomAdjust = log(fontSize / bucket.properties.icon.max_size) / log(2);
+            matrix::scale(exMatrix, exMatrix, fontScale, fontScale, 1.0f);
 
-        iconShader->u_angle = (int32_t)(angle + 256) % 256;
-        iconShader->u_flip = bucket.properties.placement == PlacementType::Line ? 1 : 0;
-        iconShader->u_zoom = (map.getState().getNormalizedZoom() - zoomAdjust) * 10; // current zoom level
+            useProgram(iconShader->program);
+            iconShader->u_matrix = vtxMatrix;
+            iconShader->u_exmatrix = exMatrix;
+            iconShader->u_texsize = texsize;
 
-        iconShader->u_fadedist = 0 * 10;
-        iconShader->u_minfadezoom = map.getState().getNormalizedZoom() * 10;
-        iconShader->u_maxfadezoom = map.getState().getNormalizedZoom() * 10;
-        iconShader->u_fadezoom = map.getState().getNormalizedZoom() * 10;
-        iconShader->u_opacity = properties.icon.opacity;
+            // Convert the -pi..pi to an int8 range.
+            const float angle = std::round(map.getState().getAngle() / M_PI * 128);
 
-        depthRange(strata, 1.0f);
-        bucket.drawIcons(*iconShader);
+            // adjust min/max zooms for variable font sies
+            float zoomAdjust = std::log(fontSize / bucket.properties.icon.max_size) / std::log(2);
+
+            iconShader->u_angle = (int32_t)(angle + 256) % 256;
+            iconShader->u_flip = bucket.properties.placement == PlacementType::Line ? 1 : 0;
+            iconShader->u_zoom = (map.getState().getNormalizedZoom() - zoomAdjust) * 10; // current zoom level
+
+            iconShader->u_fadedist = 0 * 10;
+            iconShader->u_minfadezoom = map.getState().getNormalizedZoom() * 10;
+            iconShader->u_maxfadezoom = map.getState().getNormalizedZoom() * 10;
+            iconShader->u_fadezoom = map.getState().getNormalizedZoom() * 10;
+            iconShader->u_opacity = properties.icon.opacity;
+
+            depthRange(strata, 1.0f);
+            bucket.drawIcons(*iconShader);
+        }
     }
 
     glEnable(GL_STENCIL_TEST);
 }
-}
diff --git a/src/renderer/symbol_bucket.cpp b/src/renderer/symbol_bucket.cpp
index 7d4d661a73..374ea2dc26 100644
--- a/src/renderer/symbol_bucket.cpp
+++ b/src/renderer/symbol_bucket.cpp
@@ -158,6 +158,10 @@ void SymbolBucket::addFeatures(const VectorTileLayer &layer, const FilterExpress
         // if feature has icon, get sprite atlas position
         if (feature.sprite.length()) {
             image = spriteAtlas.waitForImage(feature.sprite, sprite);
+
+            if (sprite.getSpritePosition(feature.sprite).sdf) {
+                sdfIcons = true;
+            }
         }
 
         // if either shaping or icon position is present, add the feature
@@ -351,7 +355,7 @@ void SymbolBucket::addSymbols(Buffer &buffer, const PlacedGlyphs &symbols, float
 
         // We're generating triangle fans, so we always start with the first
         // coordinate in this polygon.
-        TextElementGroup &triangleGroup = buffer.groups.back();
+        auto &triangleGroup = buffer.groups.back();
         uint32_t triangleIndex = triangleGroup.vertex_length;
 
         // coordinates (2 triangles)
@@ -384,7 +388,7 @@ void SymbolBucket::drawGlyphs(SDFShader &shader) {
     }
 }
 
-void SymbolBucket::drawIcons(IconShader &shader) {
+void SymbolBucket::drawIcons(SDFShader &shader) {
     char *vertex_index = BUFFER_OFFSET(0);
     char *elements_index = BUFFER_OFFSET(0);
     for (IconElementGroup &group : icon.groups) {
@@ -394,4 +398,15 @@ void SymbolBucket::drawIcons(IconShader &shader) {
         elements_index += group.elements_length * icon.triangles.itemSize;
     }
 }
+
+void SymbolBucket::drawIcons(IconShader &shader) {
+    char *vertex_index = BUFFER_OFFSET(0);
+    char *elements_index = BUFFER_OFFSET(0);
+    for (IconElementGroup &group : icon.groups) {
+        group.array[1].bind(shader, icon.vertices, icon.triangles, vertex_index);
+        glDrawElements(GL_TRIANGLES, group.elements_length * 3, GL_UNSIGNED_SHORT, elements_index);
+        vertex_index += group.vertex_length * icon.vertices.itemSize;
+        elements_index += group.elements_length * icon.triangles.itemSize;
+    }
+}
 }
diff --git a/src/shader/sdf.vertex.glsl b/src/shader/sdf.vertex.glsl
index 1d6dc012b5..c5166ae46f 100644
--- a/src/shader/sdf.vertex.glsl
+++ b/src/shader/sdf.vertex.glsl
@@ -65,5 +65,5 @@ void main() {
     z += step(a_rangeend, u_angle) * (1.0 - step(a_rangestart, u_angle));
 
     gl_Position = u_matrix * vec4(a_pos, 0, 1) + u_exmatrix * vec4(a_offset / 64.0, z, 0);
-    v_tex = a_tex * 4.0 / u_texsize;
+    v_tex = a_tex / u_texsize;
 }
diff --git a/src/shader/sdf_shader.cpp b/src/shader/sdf_shader.cpp
index 9ccf0998bc..b86733c0e4 100644
--- a/src/shader/sdf_shader.cpp
+++ b/src/shader/sdf_shader.cpp
@@ -28,36 +28,64 @@ SDFShader::SDFShader()
     a_labelminzoom = glGetAttribLocation(program, "a_labelminzoom");
 }
 
-void SDFShader::bind(char *offset) {
+void SDFGlyphShader::bind(char *offset) {
+    const int stride = 16;
+
+    glEnableVertexAttribArray(a_pos);
+    glVertexAttribPointer(a_pos, 2, GL_SHORT, false, stride, offset + 0);
+
+    glEnableVertexAttribArray(a_offset);
+    glVertexAttribPointer(a_offset, 2, GL_SHORT, false, stride, offset + 4);
+
+    glEnableVertexAttribArray(a_labelminzoom);
+    glVertexAttribPointer(a_labelminzoom, 1, GL_UNSIGNED_BYTE, false, stride, offset + 8);
+
+    glEnableVertexAttribArray(a_minzoom);
+    glVertexAttribPointer(a_minzoom, 1, GL_UNSIGNED_BYTE, false, stride, offset + 9);
+
+    glEnableVertexAttribArray(a_maxzoom);
+    glVertexAttribPointer(a_maxzoom, 1, GL_UNSIGNED_BYTE, false, stride, offset + 10);
+
+    glEnableVertexAttribArray(a_angle);
+    glVertexAttribPointer(a_angle, 1, GL_UNSIGNED_BYTE, false, stride, offset + 11);
+
+    glEnableVertexAttribArray(a_rangeend);
+    glVertexAttribPointer(a_rangeend, 1, GL_UNSIGNED_BYTE, false, stride, offset + 12);
+
+    glEnableVertexAttribArray(a_rangestart);
+    glVertexAttribPointer(a_rangestart, 1, GL_UNSIGNED_BYTE, false, stride, offset + 13);
+
+    glEnableVertexAttribArray(a_tex);
+    glVertexAttribPointer(a_tex, 2, GL_UNSIGNED_BYTE, false, stride, offset + 14);
+}
+
+void SDFIconShader::bind(char *offset) {
+    const int stride = 20;
+
     glEnableVertexAttribArray(a_pos);
-    glVertexAttribPointer(a_pos, 2, GL_SHORT, false, 16, offset + 0);
+    glVertexAttribPointer(a_pos, 2, GL_SHORT, false, stride, offset + 0);
 
     glEnableVertexAttribArray(a_offset);
-    glVertexAttribPointer(a_offset, 2, GL_SHORT, false, 16, offset + 4);
+    glVertexAttribPointer(a_offset, 2, GL_SHORT, false, stride, offset + 4);
 
     glEnableVertexAttribArray(a_labelminzoom);
-    glVertexAttribPointer(a_labelminzoom, 1, GL_UNSIGNED_BYTE, false, 16,
-                          offset + 8);
+    glVertexAttribPointer(a_labelminzoom, 1, GL_UNSIGNED_BYTE, false, stride, offset + 8);
 
     glEnableVertexAttribArray(a_minzoom);
-    glVertexAttribPointer(a_minzoom, 1, GL_UNSIGNED_BYTE, false, 16,
-                          offset + 9);
+    glVertexAttribPointer(a_minzoom, 1, GL_UNSIGNED_BYTE, false, stride, offset + 9);
 
     glEnableVertexAttribArray(a_maxzoom);
-    glVertexAttribPointer(a_maxzoom, 1, GL_UNSIGNED_BYTE, false, 16,
-                          offset + 10);
+    glVertexAttribPointer(a_maxzoom, 1, GL_UNSIGNED_BYTE, false, stride, offset + 10);
 
     glEnableVertexAttribArray(a_angle);
-    glVertexAttribPointer(a_angle, 1, GL_UNSIGNED_BYTE, false, 16, offset + 11);
+    glVertexAttribPointer(a_angle, 1, GL_UNSIGNED_BYTE, false, stride, offset + 11);
 
     glEnableVertexAttribArray(a_rangeend);
-    glVertexAttribPointer(a_rangeend, 1, GL_UNSIGNED_BYTE, false, 16,
-                          offset + 12);
+    glVertexAttribPointer(a_rangeend, 1, GL_UNSIGNED_BYTE, false, stride, offset + 12);
 
     glEnableVertexAttribArray(a_rangestart);
-    glVertexAttribPointer(a_rangestart, 1, GL_UNSIGNED_BYTE, false, 16,
-                          offset + 13);
+    glVertexAttribPointer(a_rangestart, 1, GL_UNSIGNED_BYTE, false, stride, offset + 13);
 
     glEnableVertexAttribArray(a_tex);
-    glVertexAttribPointer(a_tex, 2, GL_UNSIGNED_BYTE, false, 16, offset + 14);
+    glVertexAttribPointer(a_tex, 2, GL_SHORT, false, stride, offset + 16);
 }