Eliminate ArrayGroup and BufferGroup

These classes were a poor abstraction: they required highly conditional logic to satisfy the needs of all their consumers, and they were tightly coupled to each other. It's better to have each bucket class contain exactly the array/buffer properties it needs, and to keep corresponding arrays and buffers close to each other in code.

This brings the buffer classes much closer to their corresponding gl-native implementations.

src/data/bucket.js

@@ -7,15 +7,13 @@ import type Style from '../style/style';
 import type StyleLayer from '../style/style_layer';
 import type {PaintPropertyStatistics} from './program_configuration';
 import type FeatureIndex from './feature_index';
-import type {SerializedArrayGroup} from './array_group';
 
 export type BucketParameters = {
     index: number,
     layers: Array<StyleLayer>,
     zoom: number,
     overscaling: number,
-    collisionBoxArray: CollisionBoxArray,
-    arrays?: SerializedArrayGroup
+    collisionBoxArray: CollisionBoxArray
 }
 
 export type PopulateParameters = {
@@ -26,8 +24,7 @@ export type PopulateParameters = {
 
 export type SerializedBucket = {
     zoom: number,
-    layerIds: Array<string>,
-    arrays: SerializedArrayGroup
+    layerIds: Array<string>
 }
 
 export type IndexedFeature = {

src/data/bucket/circle_bucket.js

@@ -1,15 +1,18 @@
 // @flow
 
-const ArrayGroup = require('../array_group');
-const BufferGroup = require('../buffer_group');
+const {SegmentVector} = require('../segment');
+const Buffer = require('../buffer');
 const util = require('../../util/util');
+const {ProgramConfigurationSet} = require('../program_configuration');
+const createVertexArrayType = require('../vertex_array_type');
 const createElementArrayType = require('../element_array_type');
 const loadGeometry = require('../load_geometry');
 const EXTENT = require('../extent');
 
-import type {Bucket, BucketParameters, IndexedFeature, PopulateParameters, SerializedBucket} from '../bucket';
+import type {Bucket, IndexedFeature, PopulateParameters, SerializedBucket} from '../bucket';
 import type {ProgramInterface} from '../program_configuration';
 import type StyleLayer from '../../style/style_layer';
+import type {StructArray} from '../../util/struct_array';
 
 const circleInterface = {
     layoutAttributes: [
@@ -34,6 +37,9 @@ function addCircleVertex(layoutVertexArray, x, y, extrudeX, extrudeY) {
         (y * 2) + ((extrudeY + 1) / 2));
 }
 
+const LayoutVertexArrayType = createVertexArrayType(circleInterface.layoutAttributes);
+const ElementArrayType = circleInterface.elementArrayType;
+
 /**
  * Circles are represented by two triangles.
  *
@@ -48,19 +54,33 @@ class CircleBucket implements Bucket {
     zoom: number;
     overscaling: number;
     layers: Array<StyleLayer>;
-    buffers: BufferGroup;
-    arrays: ArrayGroup;
 
-    constructor(options: BucketParameters) {
+    layoutVertexArray: StructArray;
+    layoutVertexBuffer: Buffer;
+
+    elementArray: StructArray;
+    elementBuffer: Buffer;
+
+    programConfigurations: ProgramConfigurationSet;
+    segments: SegmentVector;
+
+    constructor(options: any) {
         this.zoom = options.zoom;
         this.overscaling = options.overscaling;
         this.layers = options.layers;
         this.index = options.index;
 
-        if (options.arrays) {
-            this.buffers = new BufferGroup(circleInterface, options.layers, options.zoom, options.arrays);
+        if (options.layoutVertexArray) {
+            this.layoutVertexBuffer = new Buffer(options.layoutVertexArray, LayoutVertexArrayType.serialize(), Buffer.BufferType.VERTEX);
+            this.elementBuffer = new Buffer(options.elementArray, ElementArrayType.serialize(), Buffer.BufferType.ELEMENT);
+            this.programConfigurations = ProgramConfigurationSet.deserialize(circleInterface, options.layers, options.zoom, options.paintVertexArrays);
+            this.segments = new SegmentVector(options.segments);
+            this.segments.createVAOs(options.layers);
         } else {
-            this.arrays = new ArrayGroup(circleInterface, options.layers, options.zoom);
+            this.layoutVertexArray = new LayoutVertexArrayType();
+            this.elementArray = new ElementArrayType();
+            this.programConfigurations = new ProgramConfigurationSet(circleInterface, options.layers, options.zoom);
+            this.segments = new SegmentVector();
         }
     }
 
@@ -74,31 +94,32 @@ class CircleBucket implements Bucket {
     }
 
     getPaintPropertyStatistics() {
-        return util.mapObject(this.arrays.programConfigurations, config => config.paintPropertyStatistics);
+        return util.mapObject(this.programConfigurations, config => config.paintPropertyStatistics);
     }
 
     isEmpty() {
-        return this.arrays.isEmpty();
+        return this.layoutVertexArray.length === 0;
     }
 
     serialize(transferables?: Array<Transferable>): SerializedBucket {
         return {
             zoom: this.zoom,
             layerIds: this.layers.map((l) => l.id),
-            arrays: this.arrays.serialize(transferables)
+            layoutVertexArray: this.layoutVertexArray.serialize(transferables),
+            elementArray: this.elementArray.serialize(transferables),
+            paintVertexArrays: this.programConfigurations.serialize(transferables),
+            segments: this.segments.get(),
         };
     }
 
     destroy() {
-        if (this.buffers) {
-            this.buffers.destroy();
-            (this: any).buffers = null;
-        }
+        this.layoutVertexBuffer.destroy();
+        this.elementBuffer.destroy();
+        this.programConfigurations.destroy();
+        this.segments.destroy();
     }
 
     addFeature(feature: VectorTileFeature) {
-        const arrays = this.arrays;
-
         for (const ring of loadGeometry(feature)) {
             for (const point of ring) {
                 const x = point.x;
@@ -116,23 +137,23 @@ class CircleBucket implements Bucket {
                 // │ 0     1 │
                 // └─────────┘
 
-                const segment = arrays.prepareSegment(4);
+                const segment = this.segments.prepareSegment(4, this.layoutVertexArray, this.elementArray);
                 const index = segment.vertexLength;
 
-                addCircleVertex(arrays.layoutVertexArray, x, y, -1, -1);
-                addCircleVertex(arrays.layoutVertexArray, x, y, 1, -1);
-                addCircleVertex(arrays.layoutVertexArray, x, y, 1, 1);
-                addCircleVertex(arrays.layoutVertexArray, x, y, -1, 1);
+                addCircleVertex(this.layoutVertexArray, x, y, -1, -1);
+                addCircleVertex(this.layoutVertexArray, x, y, 1, -1);
+                addCircleVertex(this.layoutVertexArray, x, y, 1, 1);
+                addCircleVertex(this.layoutVertexArray, x, y, -1, 1);
 
-                arrays.elementArray.emplaceBack(index, index + 1, index + 2);
-                arrays.elementArray.emplaceBack(index, index + 3, index + 2);
+                this.elementArray.emplaceBack(index, index + 1, index + 2);
+                this.elementArray.emplaceBack(index, index + 3, index + 2);
 
                 segment.vertexLength += 4;
                 segment.primitiveLength += 2;
             }
         }
 
-        arrays.populatePaintArrays(feature.properties);
+        this.programConfigurations.populatePaintArrays(this.layoutVertexArray.length, feature.properties);
     }
 }