draw fill antialiasing with indexed lines

fixes #668

Author: ansis

js/data/buffer/bufferset.js

@@ -4,6 +4,7 @@ var LineVertexBuffer = require('./linevertexbuffer.js');
 var LineElementBuffer = require('./lineelementbuffer.js');
 var FillVertexBuffer = require('./fillvertexbuffer.js');
 var FillElementBuffer = require('./fillelementsbuffer.js');
+var OutlineElementBuffer = require('./outlineelementsbuffer.js');
 var GlyphVertexBuffer = require('./glyphvertexbuffer.js');
 var IconVertexBuffer = require('./iconvertexbuffer.js');
 
@@ -14,6 +15,7 @@ module.exports = function(bufferset) {
         iconVertex: new IconVertexBuffer(bufferset.iconVertex),
         fillVertex: new FillVertexBuffer(bufferset.fillVertex),
         fillElement: new FillElementBuffer(bufferset.fillElement),
+        outlineElement: new OutlineElementBuffer(bufferset.outlineElement),
         lineVertex: new LineVertexBuffer(bufferset.lineVertex),
         lineElement: new LineElementBuffer(bufferset.lineElement)
     };

js/data/buffer/fillvertexbuffer.js

@@ -22,8 +22,3 @@ FillVertexBuffer.prototype.add = function(x, y) {
 
     this.pos += this.itemSize;
 };
-
-// Add a degenerate vertex (= out-of-viewplane) to the buffer.
-FillVertexBuffer.prototype.addDegenerate = function() {
-    this.add(32767, 0);
-};

js/data/buffer/outlineelementsbuffer.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var Buffer = require('./buffer.js');
+
+module.exports = OutlineElementsBuffer;
+
+function OutlineElementsBuffer(buffer) {
+    Buffer.call(this, buffer);
+}
+
+OutlineElementsBuffer.prototype = Object.create(Buffer.prototype);
+
+OutlineElementsBuffer.prototype.itemSize = 4; // bytes per line (2 * unsigned short == 4 bytes)
+OutlineElementsBuffer.prototype.arrayType = 'ELEMENT_ARRAY_BUFFER';
+
+OutlineElementsBuffer.prototype.add = function(a, b) {
+    var pos2 = this.pos / 2;
+
+    this.resize();
+
+    this.ushorts[pos2 + 0] = a;
+    this.ushorts[pos2 + 1] = b;
+
+    this.pos += this.itemSize;
+};

js/data/elementgroups.js

@@ -2,29 +2,29 @@
 
 module.exports = ElementGroups;
 
-function ElementGroups(vertexBuffer, elementBuffer, groups) {
+function ElementGroups(vertexBuffer, elementBuffer, secondElementBuffer) {
 
     this.vertexBuffer = vertexBuffer;
     this.elementBuffer = elementBuffer;
-
-    if (groups) {
-        this.groups = groups;
-    } else {
-        this.groups = [];
-    }
+    this.secondElementBuffer = secondElementBuffer;
+    this.groups = [];
 }
 
 ElementGroups.prototype.makeRoomFor = function(numVertices) {
     if (!this.current || this.current.vertexLength + numVertices > 65535) {
-        this.current = new ElementGroup(this.vertexBuffer.index, this.elementBuffer && this.elementBuffer.index);
+        this.current = new ElementGroup(this.vertexBuffer.index,
+                this.elementBuffer && this.elementBuffer.index,
+                this.secondElementBuffer && this.secondElementBuffer.index);
         this.groups.push(this.current);
     }
 };
 
-function ElementGroup(vertexStartIndex, elementStartIndex)  {
+function ElementGroup(vertexStartIndex, elementStartIndex, secondElementStartIndex)  {
     // the offset into the vertex buffer of the first vertex in this group
     this.vertexStartIndex = vertexStartIndex;
     this.elementStartIndex = elementStartIndex;
+    this.secondElementStartIndex = secondElementStartIndex;
     this.elementLength = 0;
     this.vertexLength = 0;
+    this.secondElementLength = 0;
 }

js/data/fillbucket.js

@@ -7,7 +7,7 @@ module.exports = FillBucket;
 function FillBucket(info, buffers, placement, elementGroups) {
     this.info = info;
     this.buffers = buffers;
-    this.elementGroups = elementGroups || new ElementGroups(buffers.fillVertex, buffers.fillElement);
+    this.elementGroups = elementGroups || new ElementGroups(buffers.fillVertex, buffers.fillElement, buffers.outlineElement);
 }
 
 FillBucket.prototype.addFeatures = function() {
@@ -45,9 +45,9 @@ FillBucket.prototype.addFill = function(vertices) {
 
     var fillVertex = this.buffers.fillVertex;
     var fillElement = this.buffers.fillElement;
+    var outlineElement = this.buffers.outlineElement;
 
     // Start all lines with a degenerate vertex
-    fillVertex.addDegenerate();
     elementGroup.vertexLength++;
 
     // We're generating triangle fans, so we always start with the first coordinate in this polygon.
@@ -67,6 +67,11 @@ FillBucket.prototype.addFill = function(vertices) {
             elementGroup.elementLength++;
         }
 
+        if (i >= 1) {
+            outlineElement.add(prevIndex, currentIndex);
+            elementGroup.secondElementLength++;
+        }
+
         prevIndex = currentIndex;
     }
 };

js/render/drawfill.js

@@ -45,13 +45,14 @@ function drawFill(gl, painter, bucket, layerStyle, posMatrix, params, imageSprit
     elements = bucket.buffers.fillElement;
     elements.bind(gl);
 
+    var offset, elementOffset;
     for (var i = 0; i < bucket.elementGroups.groups.length; i++) {
         group = bucket.elementGroups.groups[i];
-        var offset = group.vertexStartIndex * vertex.itemSize;
+        offset = group.vertexStartIndex * vertex.itemSize;
         gl.vertexAttribPointer(painter.fillShader.a_pos, 2, gl.SHORT, false, 4, offset + 0);
 
         count = group.elementLength * 3;
-        var elementOffset = group.elementStartIndex * elements.itemSize;
+        elementOffset = group.elementStartIndex * elements.itemSize;
         gl.drawElements(gl.TRIANGLES, count, gl.UNSIGNED_SHORT, elementOffset);
     }
 
@@ -90,15 +91,17 @@ function drawFill(gl, painter, bucket, layerStyle, posMatrix, params, imageSprit
 
         // Draw all buffers
         vertex = bucket.buffers.fillVertex;
-        elements = bucket.buffers.fillElement;
+        elements = bucket.buffers.outlineElement;
+        elements.bind(gl);
 
         for (var k = 0; k < bucket.elementGroups.groups.length; k++) {
             group = bucket.elementGroups.groups[k];
-            gl.vertexAttribPointer(painter.outlineShader.a_pos, 2, gl.SHORT, false, 0, 0);
+            offset = group.vertexStartIndex * vertex.itemSize;
+            gl.vertexAttribPointer(painter.outlineShader.a_pos, 2, gl.SHORT, false, 4, offset + 0);
 
-            var begin = group.vertexStartIndex;
-            count = group.vertexLength;
-            gl.drawArrays(gl.LINE_STRIP, begin, count);
+            count = group.secondElementLength * 2;
+            elementOffset = group.secondElementStartIndex * elements.itemSize;
+            gl.drawElements(gl.LINES, count, gl.UNSIGNED_SHORT, elementOffset);
         }
     }
 

shaders/outline.vertex.glsl

@@ -5,10 +5,6 @@ uniform vec2 u_world;
 varying vec2 v_pos;
 
 void main() {
-    // If the x coordinate is the maximum integer, we move the z coordinates out
-    // of the view plane so that the triangle gets clipped. This makes it easier
-    // for us to create degenerate triangle strips.
-    float z = step(32767.0, a_pos.x);
-    gl_Position = u_posmatrix * vec4(a_pos, z, 1);
+    gl_Position = u_posmatrix * vec4(a_pos, 0, 1);
     v_pos = (gl_Position.xy + 1.0) / 2.0 * u_world;
 }