Adds attribute to identify top vertices

src/layer/GeoJSONWorkerLayer.js

@@ -140,6 +140,7 @@ class GeoJSONWorkerLayer extends Layer {
     var splitPositions = Buffer.splitFloat32Array(results.attributes.positions);
     var splitNormals = Buffer.splitFloat32Array(results.attributes.normals);
     var splitColors = Buffer.splitFloat32Array(results.attributes.colors);
+    var splitTops = Buffer.splitFloat32Array(results.attributes.tops);
 
     var splitOutlinePositions;
     var splitOutlineColors;
@@ -167,7 +168,8 @@ class GeoJSONWorkerLayer extends Layer {
     var polygonAttributeLengths = {
       positions: 3,
       normals: 3,
-      colors: 3
+      colors: 3,
+      tops: 1
     };
 
     var polygonOutlineAttributeLengths = {
@@ -188,7 +190,8 @@ class GeoJSONWorkerLayer extends Layer {
         attributes: [{
           positions: splitPositions[i],
           normals: splitNormals[i],
-          colors: splitColors[i]
+          colors: splitColors[i],
+          tops: splitTops[i]
         }],
         properties: properties,
         flat: flats[i]
@@ -728,6 +731,7 @@ class GeoJSONWorkerLayer extends Layer {
         var positions = [];
         var normals = [];
         var colors = [];
+        var tops = [];
 
         var outlinePositions = [];
         var outlineColors = [];
@@ -757,6 +761,7 @@ class GeoJSONWorkerLayer extends Layer {
             positions.push(attributes.positions);
             normals.push(attributes.normals);
             colors.push(attributes.colors);
+            tops.push(attributes.tops);
 
             if (_properties) {
               properties.push(Buffer.stringToUint8Array(JSON.stringify(polygon.properties)));
@@ -775,7 +780,8 @@ class GeoJSONWorkerLayer extends Layer {
         var mergedAttributes = {
           positions: Buffer.mergeFloat32Arrays(positions),
           normals: Buffer.mergeFloat32Arrays(normals),
-          colors: Buffer.mergeFloat32Arrays(colors)
+          colors: Buffer.mergeFloat32Arrays(colors),
+          tops: Buffer.mergeFloat32Arrays(tops)
         };
 
         var mergedOutlineAttributes = {
@@ -792,6 +798,9 @@ class GeoJSONWorkerLayer extends Layer {
         transferrables.push(mergedAttributes.colors[0].buffer);
         transferrables.push(mergedAttributes.colors[1].buffer);
 
+        transferrables.push(mergedAttributes.tops[0].buffer);
+        transferrables.push(mergedAttributes.tops[1].buffer);
+
         transferrables.push(mergedOutlineAttributes.positions[0].buffer);
         transferrables.push(mergedOutlineAttributes.positions[1].buffer);
 

src/layer/geometry/PolygonLayer.js

@@ -87,7 +87,8 @@ class PolygonLayer extends Layer {
           var attributeLengths = {
             positions: 3,
             normals: 3,
-            colors: 3
+            colors: 3,
+            tops: 1
           };
 
           if (this._options.interactive) {
@@ -190,6 +191,7 @@ class PolygonLayer extends Layer {
         var _vertices = extruded.positions;
         var _faces = [];
         var _colours = [];
+        var _tops = [];
 
         var _colour;
         extruded.top.forEach((face, fi) => {
@@ -199,6 +201,8 @@ class PolygonLayer extends Layer {
           _colour.push([colour.r, colour.g, colour.b]);
           _colour.push([colour.r, colour.g, colour.b]);
 
+          _tops.push([true, true, true]);
+
           _faces.push(face);
           _colours.push(_colour);
         });
@@ -215,12 +219,16 @@ class PolygonLayer extends Layer {
               _colour.push([bottomColor.r, bottomColor.g, bottomColor.b]);
               _colour.push([bottomColor.r, bottomColor.g, bottomColor.b]);
               _colour.push([topColor.r, topColor.g, topColor.b]);
+
+              _tops.push([false, false, true]);
             // Reverse winding for the second face
             // top-top-bottom
             } else {
               _colour.push([topColor.r, topColor.g, topColor.b]);
               _colour.push([topColor.r, topColor.g, topColor.b]);
               _colour.push([bottomColor.r, bottomColor.g, bottomColor.b]);
+
+              _tops.push([true, true, false]);
             }
 
             _faces.push(face);
@@ -235,6 +243,7 @@ class PolygonLayer extends Layer {
           vertices: _vertices,
           faces: _faces,
           colours: _colours,
+          tops: _tops,
           facesCount: _faces.length
         };
 
@@ -514,6 +523,9 @@ class PolygonLayer extends Layer {
     var normals = new Float32Array(polygon.facesCount * 9);
     var colours = new Float32Array(polygon.facesCount * 9);
 
+    // One component per vertex per face (1 x 3 = 3)
+    var tops = new Float32Array(polygon.facesCount * 3);
+
     var pickingIds;
     if (polygon.pickingId) {
       // One component per vertex per face (1 x 3 = 3)
@@ -532,6 +544,7 @@ class PolygonLayer extends Layer {
     var _faces = polygon.faces;
     var _vertices = polygon.vertices;
     var _colour = polygon.colours;
+    var _tops = polygon.tops;
 
     var _pickingId;
     if (pickingIds) {
@@ -549,6 +562,7 @@ class PolygonLayer extends Layer {
       var az = _vertices[index][2];
 
       var c1 = _colour[i][0];
+      var t1 = _tops[i][0];
 
       index = _faces[i][1];
 
@@ -557,6 +571,7 @@ class PolygonLayer extends Layer {
       var bz = _vertices[index][2];
 
       var c2 = _colour[i][1];
+      var t2 = _tops[i][1];
 
       index = _faces[i][2];
 
@@ -565,6 +580,7 @@ class PolygonLayer extends Layer {
       var cz = _vertices[index][2];
 
       var c3 = _colour[i][2];
+      var t3 = _tops[i][2];
 
       // Flat face normals
       // From: http://threejs.org/examples/webgl_buffergeometry.html
@@ -618,6 +634,10 @@ class PolygonLayer extends Layer {
       colours[lastIndex * 9 + 7] = c3[1];
       colours[lastIndex * 9 + 8] = c3[2];
 
+      tops[lastIndex * 3 + 0] = t1;
+      tops[lastIndex * 3 + 1] = t2;
+      tops[lastIndex * 3 + 2] = t3;
+
       if (pickingIds) {
         pickingIds[lastIndex * 3 + 0] = _pickingId;
         pickingIds[lastIndex * 3 + 1] = _pickingId;
@@ -630,7 +650,8 @@ class PolygonLayer extends Layer {
     var attributes = {
       positions: positions,
       normals: normals,
-      colors: colours
+      colors: colours,
+      tops: tops
     };
 
     if (pickingIds) {

src/layer/tile/GeoJSONTileLayer.js

@@ -46,6 +46,8 @@ class GeoJSONTileLayer extends TileLayer {
 
     super(options);
 
+    this.defaults = defaults;
+
     this._path = path;
   }
 
@@ -106,7 +108,7 @@ class GeoJSONTileLayer extends TileLayer {
   }
 
   _createTile(quadcode, layer) {
-    var newOptions = extend({}, defaults, this._options);
+    var newOptions = extend({}, this.defaults, this._options);
     delete newOptions.attribution;
 
     return new GeoJSONTile(quadcode, this._path, layer, newOptions);