Split up buffers

fixes #1585

js/data/bucket.js

@@ -1,9 +1,9 @@
 'use strict';
 
 var featureFilter = require('feature-filter');
-
 var Buffer = require('./buffer');
 var StyleLayer = require('../style/style_layer');
+var util = require('../util/util');
 
 module.exports = Bucket;
 
@@ -82,9 +82,11 @@ function Bucket(options) {
 
     if (options.elementGroups) {
         this.elementGroups = options.elementGroups;
-        this.buffers = options.buffers;
+        this.buffers = util.mapObject(options.buffers, function(options) {
+            return new Buffer(options);
+        });
     } else {
-        this.resetBuffers(options.buffers);
+        this.resetBuffers();
     }
 
     for (var shaderName in this.shaders) {
@@ -139,17 +141,16 @@ Bucket.prototype.makeRoomFor = function(shaderName, numVertices) {
  * Start using a new shared `buffers` object and recreate instances of `Buffer`
  * as necessary.
  * @private
- * @param {Object.<string, Buffer>} buffers
  */
-Bucket.prototype.resetBuffers = function(buffers) {
-    this.buffers = buffers;
-    this.elementGroups = {};
+Bucket.prototype.resetBuffers = function() {
+    var elementGroups = this.elementGroups = {};
+    var buffers = this.buffers = {};
 
     for (var shaderName in this.shaders) {
         var shader = this.shaders[shaderName];
 
         var vertexBufferName = this.getBufferName(shaderName, 'vertex');
-        if (shader.vertexBuffer && !buffers[vertexBufferName]) {
+        if (shader.vertexBuffer) {
             buffers[vertexBufferName] = new Buffer({
                 type: Buffer.BufferType.VERTEX,
                 attributes: shader.attributes
@@ -158,21 +159,23 @@ Bucket.prototype.resetBuffers = function(buffers) {
 
         if (shader.elementBuffer) {
             var elementBufferName = this.getBufferName(shaderName, 'element');
-            if (!buffers[elementBufferName]) {
-                buffers[elementBufferName] = createElementBuffer(shader.elementBufferComponents);
-            }
+            buffers[elementBufferName] = createElementBuffer(shader.elementBufferComponents);
             this[this.getAddMethodName(shaderName, 'element')] = createElementAddMethod(this.buffers[elementBufferName]);
         }
 
         if (shader.secondElementBuffer) {
             var secondElementBufferName = this.getBufferName(shaderName, 'secondElement');
-            if (!buffers[secondElementBufferName]) {
-                buffers[secondElementBufferName] = createElementBuffer(shader.secondElementBufferComponents);
-            }
+            buffers[secondElementBufferName] = createElementBuffer(shader.secondElementBufferComponents);
             this[this.getAddMethodName(shaderName, 'secondElement')] = createElementAddMethod(this.buffers[secondElementBufferName]);
         }
 
-        this.elementGroups[shaderName] = [];
+        elementGroups[shaderName] = [];
+    }
+};
+
+Bucket.prototype.destroy = function(gl) {
+    for (var k in this.buffers) {
+        this.buffers[k].destroy(gl);
     }
 };
 
@@ -200,7 +203,10 @@ Bucket.prototype.serialize = function() {
     return {
         layer: this.layer.serialize(),
         zoom: this.zoom,
-        elementGroups: this.elementGroups
+        elementGroups: this.elementGroups,
+        buffers: util.mapObject(this.buffers, function(buffer) {
+            return buffer.serialize();
+        })
     };
 };
 

js/data/buffer.js

@@ -74,6 +74,17 @@ function Buffer(options) {
     }
 }
 
+Buffer.prototype.serialize = function() {
+    return {
+        type: this.type,
+        capacity: this.capacity,
+        arrayBuffer: this.arrayBuffer,
+        attributes: this.attributes,
+        itemSize: this.itemSize,
+        length: this.length
+    };
+};
+
 /**
  * Bind this buffer to a WebGL context.
  * @private

js/data/symbol_bucket.js

@@ -226,7 +226,7 @@ SymbolBucket.prototype.addFeatures = function(collisionTile, stacks, icons) {
         }
     }
 
-    this.placeFeatures(collisionTile, this.buffers, this.collisionDebug);
+    this.placeFeatures(collisionTile, this.collisionDebug);
 };
 
 SymbolBucket.prototype.addFeature = function(lines, shapedText, shapedIcon) {
@@ -326,12 +326,10 @@ SymbolBucket.prototype.anchorIsTooClose = function(text, repeatDistance, anchor)
     return false;
 };
 
-SymbolBucket.prototype.placeFeatures = function(collisionTile, buffers, collisionDebug) {
+SymbolBucket.prototype.placeFeatures = function(collisionTile, collisionDebug) {
     // Calculate which labels can be shown and when they can be shown and
     // create the bufers used for rendering.
 
-    this.resetBuffers(buffers);
-
     var elementGroups = this.elementGroups = {
         glyph: [],
         icon: [],

js/render/draw_circle.js

@@ -35,12 +35,13 @@ function drawCircles(painter, source, layer, coords) {
         var coord = coords[i];
 
         var tile = source.getTile(coord);
-        if (!tile.buffers) continue;
-        var elementGroups = tile.getElementGroups(layer, 'circle');
+        var bucket = tile.getBucket(layer);
+        if (!bucket) continue;
+        var elementGroups = bucket.elementGroups.circle;
         if (!elementGroups) continue;
 
-        var vertex = tile.buffers.circleVertex;
-        var elements = tile.buffers.circleElement;
+        var vertex = bucket.buffers.circleVertex;
+        var elements = bucket.buffers.circleElement;
 
         gl.setPosMatrix(painter.translatePosMatrix(
             painter.calculatePosMatrix(coord, source.maxzoom),

js/render/draw_collision_debug.js

@@ -11,13 +11,15 @@ function drawCollisionDebug(painter, source, layer, coords) {
     for (var i = 0; i < coords.length; i++) {
         var coord = coords[i];
         var tile = source.getTile(coord);
-        var elementGroups = tile.getElementGroups(layer, 'collisionBox');
+        var bucket = tile.getBucket(layer);
+        if (!bucket) continue;
+        var elementGroups = bucket.elementGroups.collisionBox;
 
         if (!elementGroups) continue;
-        if (!tile.buffers) continue;
+        if (!bucket.buffers) continue;
         if (elementGroups[0].vertexLength === 0) continue;
 
-        var buffer = tile.buffers.collisionBoxVertex;
+        var buffer = bucket.buffers.collisionBoxVertex;
         buffer.bind(gl);
         buffer.setAttribPointers(gl, shader, 0);
 

js/render/draw_fill.js

@@ -53,8 +53,9 @@ function draw(painter, source, layer, coords) {
 
 function drawFill(painter, source, layer, coord) {
     var tile = source.getTile(coord);
-    if (!tile.buffers) return;
-    var elementGroups = tile.getElementGroups(layer, 'fill');
+    var bucket = tile.getBucket(layer);
+    if (!bucket) return;
+    var elementGroups = bucket.elementGroups.fill;
     if (!elementGroups) return;
 
     var gl = painter.gl;
@@ -95,10 +96,10 @@ function drawFill(painter, source, layer, coord) {
     gl.switchShader(painter.fillShader, translatedPosMatrix);
 
     // Draw all buffers
-    var vertex = tile.buffers.fillVertex;
+    var vertex = bucket.buffers.fillVertex;
     vertex.bind(gl);
 
-    var elements = tile.buffers.fillElement;
+    var elements = bucket.buffers.fillElement;
     elements.bind(gl);
 
     for (var i = 0; i < elementGroups.length; i++) {
@@ -188,11 +189,11 @@ function drawFill(painter, source, layer, coord) {
 
 function drawStroke(painter, source, layer, coord) {
     var tile = source.getTile(coord);
-    if (!tile.buffers) return;
-    if (!tile.elementGroups[layer.ref || layer.id]) return;
+    var bucket = tile.getBucket(layer);
+    if (!bucket) return;
 
     var gl = painter.gl;
-    var elementGroups = tile.elementGroups[layer.ref || layer.id].fill;
+    var elementGroups = bucket.elementGroups.fill;
 
     gl.setPosMatrix(painter.translatePosMatrix(
         painter.calculatePosMatrix(coord, source.maxzoom),
@@ -202,8 +203,8 @@ function drawStroke(painter, source, layer, coord) {
     ));
 
     // Draw all buffers
-    var vertex = tile.buffers.fillVertex;
-    var elements = tile.buffers.fillSecondElement;
+    var vertex = bucket.buffers.fillVertex;
+    var elements = bucket.buffers.fillSecondElement;
     vertex.bind(gl);
     elements.bind(gl);
 

js/render/draw_line.js

@@ -20,7 +20,8 @@ module.exports = function drawLine(painter, source, layer, coords) {
     painter.depthMask(false);
 
     var hasData = coords.some(function(coord) {
-        return source.getTile(coord).getElementGroups(layer, 'line');
+        var bucket = source.getTile(coord).getBucket(layer);
+        return bucket && bucket.elementGroups.line;
     });
     if (!hasData) return;
 
@@ -126,8 +127,9 @@ module.exports = function drawLine(painter, source, layer, coords) {
     for (var k = 0; k < coords.length; k++) {
         var coord = coords[k];
         var tile = source.getTile(coord);
-
-        var elementGroups = tile.getElementGroups(layer, 'line');
+        var bucket = tile.getBucket(layer);
+        if (!bucket) continue;
+        var elementGroups = bucket.elementGroups.line;
         if (!elementGroups) continue;
 
         painter.enableTileClippingMask(coord);
@@ -165,9 +167,9 @@ module.exports = function drawLine(painter, source, layer, coords) {
             gl.uniform1f(shader.u_ratio, ratio);
         }
 
-        var vertex = tile.buffers.lineVertex;
+        var vertex = bucket.buffers.lineVertex;
         vertex.bind(gl);
-        var element = tile.buffers.lineElement;
+        var element = bucket.buffers.lineElement;
         element.bind(gl);
 
         for (var i = 0; i < elementGroups.length; i++) {

js/render/draw_symbol.js

@@ -31,32 +31,30 @@ function drawSymbols(painter, source, layer, coords) {
     painter.depthMask(false);
     gl.disable(gl.DEPTH_TEST);
 
-    var tile, elementGroups, posMatrix;
+    var tile, elementGroups, bucket, posMatrix;
 
     for (var i = 0; i < coords.length; i++) {
         tile = source.getTile(coords[i]);
-
-        if (!tile.buffers) continue;
-        elementGroups = tile.elementGroups[layer.ref || layer.id];
-        if (!elementGroups) continue;
+        bucket = tile.getBucket(layer);
+        if (!bucket) continue;
+        elementGroups = bucket.elementGroups;
         if (!elementGroups.icon.length) continue;
 
         posMatrix = painter.calculatePosMatrix(coords[i], source.maxzoom);
         painter.enableTileClippingMask(coords[i]);
-        drawSymbol(painter, layer, posMatrix, tile, elementGroups.icon, 'icon', elementGroups.sdfIcons, elementGroups.iconsNeedLinear);
+        drawSymbol(painter, layer, posMatrix, tile, bucket, elementGroups.icon, 'icon', elementGroups.sdfIcons, elementGroups.iconsNeedLinear);
     }
 
     for (var j = 0; j < coords.length; j++) {
         tile = source.getTile(coords[j]);
-
-        if (!tile.buffers) continue;
-        elementGroups = tile.elementGroups[layer.ref || layer.id];
-        if (!elementGroups) continue;
+        bucket = tile.getBucket(layer);
+        if (!bucket) continue;
+        elementGroups = bucket.elementGroups;
         if (!elementGroups.glyph.length) continue;
 
         posMatrix = painter.calculatePosMatrix(coords[j], source.maxzoom);
         painter.enableTileClippingMask(coords[j]);
-        drawSymbol(painter, layer, posMatrix, tile, elementGroups.glyph, 'text', true, false);
+        drawSymbol(painter, layer, posMatrix, tile, bucket, elementGroups.glyph, 'text', true, false);
     }
 
     gl.enable(gl.DEPTH_TEST);
@@ -69,7 +67,7 @@ var defaultSizes = {
     text: 24
 };
 
-function drawSymbol(painter, layer, posMatrix, tile, elementGroups, prefix, sdf, iconsNeedLinear) {
+function drawSymbol(painter, layer, posMatrix, tile, bucket, elementGroups, prefix, sdf, iconsNeedLinear) {
     var gl = painter.gl;
 
     posMatrix = painter.translatePosMatrix(posMatrix, tile, layer.paint[prefix + '-translate'], layer.paint[prefix + '-translate-anchor']);
@@ -122,16 +120,16 @@ function drawSymbol(painter, layer, posMatrix, tile, elementGroups, prefix, sdf,
         if (!glyphAtlas) return;
 
         glyphAtlas.updateTexture(gl);
-        vertex = tile.buffers.glyphVertex;
-        elements = tile.buffers.glyphElement;
+        vertex = bucket.buffers.glyphVertex;
+        elements = bucket.buffers.glyphElement;
         texsize = [glyphAtlas.width / 4, glyphAtlas.height / 4];
     } else {
         var mapMoving = painter.options.rotating || painter.options.zooming;
         var iconScaled = fontScale !== 1 || browser.devicePixelRatio !== painter.spriteAtlas.pixelRatio || iconsNeedLinear;
         var iconTransformed = alignedWithMap || painter.transform.pitch;
         painter.spriteAtlas.bind(gl, sdf || mapMoving || iconScaled || iconTransformed);
-        vertex = tile.buffers.iconVertex;
-        elements = tile.buffers.iconElement;
+        vertex = bucket.buffers.iconVertex;
+        elements = bucket.buffers.iconElement;
         texsize = [painter.spriteAtlas.width / 4, painter.spriteAtlas.height / 4];
     }