[wip] Circles support

debug/blank_v8.json

@@ -0,0 +1,7 @@
+{
+  "version": 8,
+  "name": "rivers",
+  "constants": { },
+  "sources": { },
+  "layers": [ ]
+}

debug/site.js

@@ -4,28 +4,37 @@ mapboxgl.accessToken = getAccessToken();
 var map = new mapboxgl.Map({
     container: 'map',
     zoom: 12.5,
-    center: [38.888, -77.01866],
-    style: 'https://www.mapbox.com/mapbox-gl-styles/styles/bright-v7.json',
+    center: [-77.066104, 38.910203].reverse(),
+    style: "blank_v8.json",
     hash: true
 });
 
 map.addControl(new mapboxgl.Navigation());
 
 map.on('style.load', function() {
-    map.addSource('geojson', {
+    map.addSource('geojson-point', {
         "type": "geojson",
-        "data": "/debug/route.json"
+        "data": {
+            type: 'Point',
+            coordinates: [-77.066104, 38.910203]
+        }
     });
-
+    /*
+    map.addSource('geojson-point', {
+        "type": "geojson",
+        "data": "random-4.geojson"
+    });
+    */
     map.addLayer({
-        "id": "route",
-        "type": "line",
-        "source": "geojson",
+        "id": "point-example",
+        "type": "circle",
+        "source": "geojson-point",
         "paint": {
-            "line-color": "#EC8D8D",
-            "line-width": "@motorway_width"
+            "circle-radius": 100,
+            "circle-color": '#f00',
+            "circle-blur": 0
         }
-    }, 'country_label_1');
+    }, 'point_circle');
 });
 
 map.on('click', function(e) {

js/data/buffer/buffer_set.js

@@ -9,6 +9,8 @@ var GlyphVertexBuffer = require('./glyph_vertex_buffer');
 var GlyphElementBuffer = require('./triangle_element_buffer');
 var IconVertexBuffer = require('./icon_vertex_buffer');
 var IconElementBuffer = require('./triangle_element_buffer');
+var CircleVertexBuffer = require('./circle_vertex_buffer');
+var CircleElementBuffer = require('./triangle_element_buffer');
 var CollisionBoxVertexBuffer = require('./collision_box_vertex_buffer');
 
 module.exports = function(bufferset) {
@@ -18,6 +20,8 @@ module.exports = function(bufferset) {
         glyphElement: new GlyphElementBuffer(bufferset.glyphElement),
         iconVertex: new IconVertexBuffer(bufferset.iconVertex),
         iconElement: new IconElementBuffer(bufferset.iconElement),
+        circleVertex: new CircleVertexBuffer(bufferset.circleVertex),
+        circleElement: new CircleElementBuffer(bufferset.circleElement),
         fillVertex: new FillVertexBuffer(bufferset.fillVertex),
         fillElement: new FillElementBuffer(bufferset.fillElement),
         outlineElement: new OutlineElementBuffer(bufferset.outlineElement),

js/data/buffer/circle_vertex_buffer.js

@@ -0,0 +1,41 @@
+'use strict';
+
+var util = require('../../util/util');
+var Buffer = require('./buffer');
+
+module.exports = CircleVertexBuffer;
+
+/**
+ * This contains the data that displays circle markers on the map,
+ * including their centerpoint
+ */
+function CircleVertexBuffer(buffer) {
+    Buffer.call(this, buffer);
+}
+
+CircleVertexBuffer.prototype = util.inherit(Buffer, {
+    defaultLength: 2048 * 16,
+
+    itemSize: 4, // 2 bytes per short * 4 of them
+
+    add: function(x, y, extrudeX, extrudeY) {
+        var pos = this.pos,
+            pos2 = pos / 2;
+
+        this.resize();
+
+        // pack the extrusion of -1 or 1 into one short
+        this.shorts[pos2 + 0] = (x * 2) + ((extrudeX + 1) / 2);
+        this.shorts[pos2 + 1] = (y * 2) + ((extrudeY + 1) / 2);
+
+        this.pos += this.itemSize;
+    },
+
+    bind: function(gl, shader, offset) {
+        Buffer.prototype.bind.call(this, gl);
+
+        gl.vertexAttribPointer(shader.a_pos, 2,
+            gl.SHORT, false,
+            this.itemSize, offset + 0);
+    }
+});

js/data/circle_bucket.js

@@ -0,0 +1,56 @@
+'use strict';
+
+var ElementGroups = require('./element_groups');
+
+module.exports = CircleBucket;
+
+/**
+ * A container for all circle data
+ *
+ * Circles are represented by two triangles.
+ *
+ * Each corner has a pos that is the center of the circle and an extrusion
+ * vector that is where it points.
+ */
+function CircleBucket(buffers) {
+    this.buffers = buffers;
+    this.elementGroups = new ElementGroups(
+        buffers.circleVertex,
+        buffers.circleElement);
+}
+
+CircleBucket.prototype.addFeatures = function() {
+    for (var i = 0; i < this.features.length; i++) {
+        var geometries = this.features[i].loadGeometry()[0];
+        for (var j = 0; j < geometries.length; j++) {
+            this.elementGroups.makeRoomFor(6);
+            var x = geometries[j].x,
+                y = geometries[j].y;
+
+            var idx = this.buffers.circleVertex.index -
+                this.elementGroups.current.vertexStartIndex;
+
+            // this geometry will be of the Point type, and we'll derive
+            // two triangles from it.
+            //
+            // ┌─────────┐
+            // │ 4     3 │
+            // │         │
+            // │ 1     2 │
+            // └─────────┘
+            //
+            this.buffers.circleVertex.add(x, y, -1, -1); // 1
+            this.buffers.circleVertex.add(x, y, 1, -1); // 2
+            this.buffers.circleVertex.add(x, y, 1, 1); // 3
+            this.buffers.circleVertex.add(x, y, -1, 1); // 4
+
+            // 1, 2, 3
+            // 1, 4, 3
+            this.elementGroups.elementBuffer.add(idx, idx + 1, idx + 2);
+            this.elementGroups.elementBuffer.add(idx, idx + 3, idx + 2);
+
+            this.elementGroups.current.vertexLength += 4;
+            this.elementGroups.current.elementLength += 2;
+        }
+    }
+};

js/data/create_bucket.js

@@ -5,6 +5,7 @@ module.exports = createBucket;
 var LineBucket = require('./line_bucket');
 var FillBucket = require('./fill_bucket');
 var SymbolBucket = require('./symbol_bucket');
+var CircleBucket = require('./circle_bucket');
 var LayoutProperties = require('../style/layout_properties');
 var featureFilter = require('feature-filter');
 var StyleDeclarationSet = require('../style/style_declaration_set');
@@ -21,7 +22,8 @@ function createBucket(layer, buffers, collision, z, overscaling, collisionDebug)
     var BucketClass =
         layer.type === 'line' ? LineBucket :
         layer.type === 'fill' ? FillBucket :
-        layer.type === 'symbol' ? SymbolBucket : null;
+        layer.type === 'symbol' ? SymbolBucket :
+        layer.type === 'circle' ? CircleBucket : null;
 
     var bucket = new BucketClass(buffers, new LayoutProperties[layer.type](layout), collision, overscaling, collisionDebug);
 

js/render/draw_circle.js

@@ -0,0 +1,36 @@
+'use strict';
+
+module.exports = drawCircles;
+
+function drawCircles(painter, layer, posMatrix, tile) {
+    // short-circuit if tile is empty
+    if (!tile.buffers) return;
+
+    var elementGroups = tile.elementGroups[layer.ref || layer.id];
+    if (!elementGroups) return;
+
+    var gl = painter.gl;
+
+    gl.switchShader(painter.circleShader, tile.posMatrix, tile.exMatrix);
+
+    // gl.uniform1f(shader.u_opacity, layer.paint['icon-opacity']);
+    var vertex = tile.buffers.circleVertex;
+    var shader = painter.circleShader;
+    var elements = tile.buffers.circleElement;
+
+    gl.uniform4fv(shader.u_color, layer.paint['circle-color']);
+    gl.uniform1f(shader.u_blur, layer.paint['circle-blur']);
+    gl.uniform1f(shader.u_size, layer.paint['circle-radius']);
+
+    for (var k = 0; k < elementGroups.groups.length; k++) {
+        var group = elementGroups.groups[k];
+        var offset = group.vertexStartIndex * vertex.itemSize;
+
+        vertex.bind(gl, shader, offset);
+        elements.bind(gl, shader, offset);
+
+        var count = group.elementLength * 3;
+        var elementOffset = group.elementStartIndex * elements.itemSize;
+        gl.drawElements(gl.TRIANGLES, count, gl.UNSIGNED_SHORT, elementOffset);
+    }
+}

js/render/painter.js

@@ -74,9 +74,13 @@ Painter.prototype.setup = function() {
         ['a_pos', 'a_data'],
         ['u_matrix', 'u_exmatrix', 'u_linewidth', 'u_color', 'u_ratio', 'u_blur', 'u_patternscale_a', 'u_tex_y_a', 'u_patternscale_b', 'u_tex_y_b', 'u_image', 'u_sdfgamma', 'u_mix']);
 
+    this.circleShader = gl.initializeShader('circle',
+        ['a_pos'],
+        ['u_matrix', 'u_exmatrix', 'u_blur', 'u_size', 'u_color']);
+
     this.dotShader = gl.initializeShader('dot',
         ['a_pos'],
-        ['u_matrix', 'u_size', 'u_color', 'u_blur']);
+        ['u_matrix', 'u_size', 'u_color']);
 
     this.sdfShader = gl.initializeShader('sdf',
         ['a_pos', 'a_offset', 'a_data1', 'a_data2'],
@@ -225,6 +229,7 @@ Painter.prototype.bindDefaultFramebuffer = function() {
 
 var draw = {
     symbol: require('./draw_symbol'),
+    circle: require('./draw_circle'),
     line: require('./draw_line'),
     fill: require('./draw_fill'),
     raster: require('./draw_raster'),

js/render/shaders.js

@@ -6,6 +6,7 @@ module.exports = {
     "debug": glify('../../shaders/debug.*.glsl'),
     "dot": glify('../../shaders/dot.*.glsl'),
     "fill": glify('../../shaders/fill.*.glsl'),
+    "circle": glify('../../shaders/circle.*.glsl'),
     "gaussian": glify('../../shaders/gaussian.*.glsl'),
     "line": glify('../../shaders/line.*.glsl'),
     "linepattern": glify('../../shaders/linepattern.*.glsl'),

package.json

@@ -18,7 +18,7 @@
     "gl-matrix": "https://github.com/toji/gl-matrix/archive/v2.2.1.tar.gz",
     "glify": "0.5.0",
     "mapbox-gl-function": "^1.0.0",
-    "mapbox-gl-style-spec": "^7.4.0",
+    "mapbox-gl-style-spec": "https://github.com/mapbox/mapbox-gl-style-spec/archive/v8-circle.tar.gz",
     "minifyify": "^6.1.0",
     "pbf": "^1.2.0",
     "pngjs": "^0.4.0",

shaders/circle.fragment.glsl

@@ -0,0 +1,10 @@
+uniform vec4 u_color;
+uniform float u_blur;
+uniform float u_size;
+
+varying vec2 v_extrude;
+
+void main() {
+    float t = smoothstep(1.0 - (u_blur / 2.0), 1.0, length(v_extrude));
+    gl_FragColor = u_color * (1.0 - t);
+}

shaders/circle.vertex.glsl

@@ -0,0 +1,24 @@
+// set by gl_util
+uniform float u_size;
+
+attribute vec2 a_pos;
+
+uniform mat4 u_matrix;
+uniform mat4 u_exmatrix;
+
+varying vec2 v_extrude;
+
+void main(void) {
+    // unencode the extrusion vector that we snuck into the a_pos vector
+    v_extrude = vec2(
+        mod(a_pos.x, 2.0) * 2.0 - 1.0,
+        mod(a_pos.y, 2.0) * 2.0 - 1.0);
+    vec4 extrude = u_exmatrix * vec4(v_extrude * u_size, 0, 0);
+    // multiply a_pos by 0.5, since we had it * 2 in order to sneak
+    // in extrusion data
+    gl_Position = u_matrix * vec4(a_pos * 0.5, 0, 1);
+
+    // gl_Position is divided by gl_Position.w after this shader runs.
+    // Multiply the extrude by it so that it isn't affected by it.
+    gl_Position += extrude * gl_Position.w;
+}