Split Buffer into VertexBuffer and IndexBuffer

WPMedia · Aug 24, 2017 · 84393a6 · 84393a6
1 parent 5879b36
commit 84393a6
Show file tree

Hide file tree

Showing 15 changed files with 118 additions and 95 deletions.
diff --git a/src/data/bucket/circle_bucket.js b/src/data/bucket/circle_bucket.js
@@ -1,7 +1,8 @@
 // @flow
 
 const {SegmentVector} = require('../segment');
-const Buffer = require('../buffer');
+const VertexBuffer = require('../../gl/vertex_buffer');
+const IndexBuffer = require('../../gl/index_buffer');
 const {ProgramConfigurationSet} = require('../program_configuration');
 const createVertexArrayType = require('../vertex_array_type');
 const {TriangleElementArray} = require('../element_array_type');
@@ -54,10 +55,10 @@ class CircleBucket implements Bucket {
     layers: Array<StyleLayer>;
 
     layoutVertexArray: StructArray;
-    layoutVertexBuffer: Buffer;
+    layoutVertexBuffer: VertexBuffer;
 
     elementArray: StructArray;
-    elementBuffer: Buffer;
+    elementBuffer: IndexBuffer;
 
     programConfigurations: ProgramConfigurationSet;
     segments: SegmentVector;
@@ -69,8 +70,8 @@ class CircleBucket implements Bucket {
         this.index = options.index;
 
         if (options.layoutVertexArray) {
-            this.layoutVertexBuffer = new Buffer(options.layoutVertexArray, LayoutVertexArrayType.serialize(), Buffer.BufferType.VERTEX);
-            this.elementBuffer = new Buffer(options.elementArray, TriangleElementArray.serialize(), Buffer.BufferType.ELEMENT);
+            this.layoutVertexBuffer = new VertexBuffer(options.layoutVertexArray, LayoutVertexArrayType.serialize());
+            this.elementBuffer = new IndexBuffer(options.elementArray);
             this.programConfigurations = ProgramConfigurationSet.deserialize(circleInterface, options.layers, options.zoom, options.programConfigurations);
             this.segments = new SegmentVector(options.segments);
         } else {

diff --git a/src/data/bucket/fill_bucket.js b/src/data/bucket/fill_bucket.js
@@ -1,7 +1,8 @@
 // @flow
 
 const {SegmentVector} = require('../segment');
-const Buffer = require('../buffer');
+const VertexBuffer = require('../../gl/vertex_buffer');
+const IndexBuffer = require('../../gl/index_buffer');
 const {ProgramConfigurationSet} = require('../program_configuration');
 const createVertexArrayType = require('../vertex_array_type');
 const {LineElementArray, TriangleElementArray} = require('../element_array_type');
@@ -41,13 +42,13 @@ class FillBucket implements Bucket {
     layers: Array<StyleLayer>;
 
     layoutVertexArray: StructArray;
-    layoutVertexBuffer: Buffer;
+    layoutVertexBuffer: VertexBuffer;
 
     elementArray: StructArray;
-    elementBuffer: Buffer;
+    elementBuffer: IndexBuffer;
 
     elementArray2: StructArray;
-    elementBuffer2: Buffer;
+    elementBuffer2: IndexBuffer;
 
     programConfigurations: ProgramConfigurationSet;
     segments: SegmentVector;
@@ -60,9 +61,9 @@ class FillBucket implements Bucket {
         this.index = options.index;
 
         if (options.layoutVertexArray) {
-            this.layoutVertexBuffer = new Buffer(options.layoutVertexArray, LayoutVertexArrayType.serialize(), Buffer.BufferType.VERTEX);
-            this.elementBuffer = new Buffer(options.elementArray, TriangleElementArray.serialize(), Buffer.BufferType.ELEMENT);
-            this.elementBuffer2 = new Buffer(options.elementArray2, LineElementArray.serialize(), Buffer.BufferType.ELEMENT);
+            this.layoutVertexBuffer = new VertexBuffer(options.layoutVertexArray, LayoutVertexArrayType.serialize());
+            this.elementBuffer = new IndexBuffer(options.elementArray);
+            this.elementBuffer2 = new IndexBuffer(options.elementArray2);
             this.programConfigurations = ProgramConfigurationSet.deserialize(fillInterface, options.layers, options.zoom, options.programConfigurations);
             this.segments = new SegmentVector(options.segments);
             this.segments2 = new SegmentVector(options.segments2);

diff --git a/src/data/bucket/fill_extrusion_bucket.js b/src/data/bucket/fill_extrusion_bucket.js
@@ -1,7 +1,8 @@
 // @flow
 
 const {SegmentVector} = require('../segment');
-const Buffer = require('../buffer');
+const VertexBuffer = require('../../gl/vertex_buffer');
+const IndexBuffer = require('../../gl/index_buffer');
 const {ProgramConfigurationSet} = require('../program_configuration');
 const createVertexArrayType = require('../vertex_array_type');
 const {TriangleElementArray} = require('../element_array_type');
@@ -61,10 +62,10 @@ class FillExtrusionBucket implements Bucket {
     layers: Array<StyleLayer>;
 
     layoutVertexArray: StructArray;
-    layoutVertexBuffer: Buffer;
+    layoutVertexBuffer: VertexBuffer;
 
     elementArray: StructArray;
-    elementBuffer: Buffer;
+    elementBuffer: IndexBuffer;
 
     programConfigurations: ProgramConfigurationSet;
     segments: SegmentVector;
@@ -76,8 +77,8 @@ class FillExtrusionBucket implements Bucket {
         this.index = options.index;
 
         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.layoutVertexBuffer = new VertexBuffer(options.layoutVertexArray, LayoutVertexArrayType.serialize());
+            this.elementBuffer = new IndexBuffer(options.elementArray);
             this.programConfigurations = ProgramConfigurationSet.deserialize(fillExtrusionInterface, options.layers, options.zoom, options.programConfigurations);
             this.segments = new SegmentVector(options.segments);
         } else {

diff --git a/src/data/bucket/line_bucket.js b/src/data/bucket/line_bucket.js
@@ -1,7 +1,8 @@
 // @flow
 
 const {SegmentVector} = require('../segment');
-const Buffer = require('../buffer');
+const VertexBuffer = require('../../gl/vertex_buffer');
+const IndexBuffer = require('../../gl/index_buffer');
 const {ProgramConfigurationSet} = require('../program_configuration');
 const createVertexArrayType = require('../vertex_array_type');
 const {TriangleElementArray} = require('../element_array_type');
@@ -106,10 +107,10 @@ class LineBucket implements Bucket {
     layers: Array<StyleLayer>;
 
     layoutVertexArray: StructArray;
-    layoutVertexBuffer: Buffer;
+    layoutVertexBuffer: VertexBuffer;
 
     elementArray: StructArray;
-    elementBuffer: Buffer;
+    elementBuffer: IndexBuffer;
 
     programConfigurations: ProgramConfigurationSet;
     segments: SegmentVector;
@@ -121,8 +122,8 @@ class LineBucket implements Bucket {
         this.index = options.index;
 
         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.layoutVertexBuffer = new VertexBuffer(options.layoutVertexArray, LayoutVertexArrayType.serialize());
+            this.elementBuffer = new IndexBuffer(options.elementArray);
             this.programConfigurations = ProgramConfigurationSet.deserialize(lineInterface, options.layers, options.zoom, options.programConfigurations);
             this.segments = new SegmentVector(options.segments);
         } else {

diff --git a/src/data/bucket/symbol_bucket.js b/src/data/bucket/symbol_bucket.js
@@ -2,7 +2,8 @@
 
 const Point = require('@mapbox/point-geometry');
 const {SegmentVector} = require('../segment');
-const Buffer = require('../buffer');
+const VertexBuffer = require('../../gl/vertex_buffer');
+const IndexBuffer = require('../../gl/index_buffer');
 const {ProgramConfigurationSet} = require('../program_configuration');
 const createVertexArrayType = require('../vertex_array_type');
 const {TriangleElementArray, LineElementArray} = require('../element_array_type');
@@ -211,24 +212,24 @@ type SerializedSymbolBuffer = {
 
 class SymbolBuffers {
     layoutVertexArray: StructArray;
-    layoutVertexBuffer: Buffer;
+    layoutVertexBuffer: VertexBuffer;
 
     elementArray: StructArray;
-    elementBuffer: Buffer;
+    elementBuffer: IndexBuffer;
 
     programConfigurations: ProgramConfigurationSet;
     segments: SegmentVector;
 
     dynamicLayoutVertexArray: StructArray;
-    dynamicLayoutVertexBuffer: Buffer;
+    dynamicLayoutVertexBuffer: VertexBuffer;
 
     constructor(programInterface: ProgramInterface, layers: Array<StyleLayer>, zoom: number, arrays?: SerializedSymbolBuffer) {
         const LayoutVertexArrayType = createVertexArrayType(programInterface.layoutAttributes);
         const ElementArrayType = programInterface.elementArrayType;
 
         if (arrays) {
-            this.layoutVertexBuffer = new Buffer(arrays.layoutVertexArray, LayoutVertexArrayType.serialize(), Buffer.BufferType.VERTEX);
-            this.elementBuffer = new Buffer(arrays.elementArray, ElementArrayType.serialize(), Buffer.BufferType.ELEMENT);
+            this.layoutVertexBuffer = new VertexBuffer(arrays.layoutVertexArray, LayoutVertexArrayType.serialize());
+            this.elementBuffer = new IndexBuffer(arrays.elementArray);
             this.programConfigurations = ProgramConfigurationSet.deserialize(programInterface, layers, zoom, arrays.programConfigurations);
             this.segments = new SegmentVector(arrays.segments);
         } else {
@@ -246,8 +247,7 @@ class SymbolBuffers {
 
         if (arrays) {
             this.dynamicLayoutVertexArray = new DynamicLayoutVertexArrayType(arrays.dynamicLayoutVertexArray);
-            this.dynamicLayoutVertexBuffer = new Buffer(arrays.dynamicLayoutVertexArray,
-                DynamicLayoutVertexArrayType.serialize(), Buffer.BufferType.VERTEX, true);
+            this.dynamicLayoutVertexBuffer = new VertexBuffer(arrays.dynamicLayoutVertexArray, DynamicLayoutVertexArrayType.serialize(), true);
         } else {
             this.dynamicLayoutVertexArray = new DynamicLayoutVertexArrayType();
         }

diff --git a/src/data/program_configuration.js b/src/data/program_configuration.js
@@ -3,7 +3,7 @@
 const createVertexArrayType = require('./vertex_array_type');
 const interpolationFactor = require('../style-spec/function').interpolationFactor;
 const packUint8ToFloat = require('../shaders/encode_attribute').packUint8ToFloat;
-const Buffer = require('./buffer');
+const VertexBuffer = require('../gl/vertex_buffer');
 
 import type StyleLayer from '../style/style_layer';
 import type {ViewType, StructArray, SerializedStructArray, SerializedStructArrayType} from '../util/struct_array';
@@ -224,7 +224,7 @@ class ProgramConfiguration {
     layer: StyleLayer;
     paintVertexArray: StructArray;
     paintPropertyStatistics: PaintPropertyStatistics;
-    paintVertexBuffer: ?Buffer;
+    paintVertexBuffer: ?VertexBuffer;
 
     constructor() {
         this.binders = {};
@@ -339,7 +339,7 @@ class ProgramConfiguration {
     static deserialize(programInterface: ProgramInterface, layer: StyleLayer, zoom: number, serialized: ?SerializedProgramConfiguration) {
         const self = ProgramConfiguration.createDynamic(programInterface, layer, zoom);
         if (serialized) {
-            self.paintVertexBuffer = new Buffer(serialized.array, serialized.type, Buffer.BufferType.VERTEX);
+            self.paintVertexBuffer = new VertexBuffer(serialized.array, serialized.type);
             self.paintPropertyStatistics = serialized.statistics;
         }
         return self;

diff --git a/src/gl/index_buffer.js b/src/gl/index_buffer.js
@@ -0,0 +1,37 @@
+// @flow
+
+import type {SerializedStructArray} from '../util/struct_array';
+
+class IndexBuffer {
+    arrayBuffer: ?ArrayBuffer;
+    length: number;
+    gl: WebGLRenderingContext;
+    buffer: ?WebGLBuffer;
+
+    constructor(array: SerializedStructArray) {
+        this.arrayBuffer = array.arrayBuffer;
+        this.length = array.length;
+    }
+
+    bind(gl: WebGLRenderingContext) {
+        if (!this.buffer) {
+            this.gl = gl;
+            this.buffer = gl.createBuffer();
+            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.buffer);
+            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.arrayBuffer, gl.STATIC_DRAW);
+
+            // dump array buffer once it's bound to gl
+            this.arrayBuffer = null;
+        } else {
+            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.buffer);
+        }
+    }
+
+    destroy() {
+        if (this.buffer) {
+            this.gl.deleteBuffer(this.buffer);
+        }
+    }
+}
+
+module.exports = IndexBuffer;
diff --git a/src/data/buffer.js → src/gl/vertex_buffer.js b/src/data/buffer.js → src/gl/vertex_buffer.js
@@ -25,17 +25,15 @@ const AttributeType = {
 };
 
 /**
- * The `Buffer` class turns a `StructArray` into a WebGL buffer. Each member of the StructArray's
+ * The `VertexBuffer` class turns a `StructArray` into a WebGL buffer. Each member of the StructArray's
  * Struct type is converted to a WebGL atribute.
  * @private
  */
-class Buffer {
-    static BufferType: {[string]: 'ARRAY_BUFFER' | 'ELEMENT_ARRAY_BUFFER'};
+class VertexBuffer {
     arrayBuffer: ?ArrayBuffer;
     length: number;
     attributes: Array<StructArrayMember>;
     itemSize: number;
-    type: 'ARRAY_BUFFER' | 'ELEMENT_ARRAY_BUFFER';
     arrayType: SerializedStructArrayType;
     dynamicDraw: ?boolean;
     gl: WebGLRenderingContext;
@@ -44,46 +42,41 @@ class Buffer {
     /**
      * @param {Object} array A serialized StructArray.
      * @param {Object} arrayType A serialized StructArrayType.
-     * @param {BufferType} type
      * @param {boolean} dynamicDraw Whether this buffer will be repeatedly updated.
      */
     constructor(array: SerializedStructArray,
                 arrayType: SerializedStructArrayType,
-                type: 'ARRAY_BUFFER' | 'ELEMENT_ARRAY_BUFFER',
                 dynamicDraw?: boolean) {
         this.arrayBuffer = array.arrayBuffer;
         this.length = array.length;
         this.attributes = arrayType.members;
         this.itemSize = arrayType.bytesPerElement;
-        this.type = type;
         this.arrayType = arrayType;
         this.dynamicDraw = dynamicDraw;
     }
 
-    static fromStructArray(array: StructArray, type: 'ARRAY_BUFFER' | 'ELEMENT_ARRAY_BUFFER') {
-        return new Buffer(array.serialize(), array.constructor.serialize(), type);
+    static fromStructArray(array: StructArray) {
+        return new VertexBuffer(array.serialize(), array.constructor.serialize());
     }
 
     /**
      * Bind this buffer to a WebGL context.
      * @param gl The WebGL context
      */
     bind(gl: WebGLRenderingContext) {
-        const type: number = (gl: any)[this.type];
-
         if (!this.buffer) {
             this.gl = gl;
             this.buffer = gl.createBuffer();
-            gl.bindBuffer(type, this.buffer);
-            gl.bufferData(type, this.arrayBuffer, this.dynamicDraw ? gl.DYNAMIC_DRAW : gl.STATIC_DRAW);
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+            gl.bufferData(gl.ARRAY_BUFFER, this.arrayBuffer, this.dynamicDraw ? gl.DYNAMIC_DRAW : gl.STATIC_DRAW);
 
             // dump array buffer once it's bound to gl
             this.arrayBuffer = null;
         } else {
-            gl.bindBuffer(type, this.buffer);
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
 
             if (this.dynamicDraw && this.arrayBuffer) {
-                gl.bufferSubData(type, 0, this.arrayBuffer);
+                gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.arrayBuffer);
                 this.arrayBuffer = null;
             }
         }
@@ -137,14 +130,4 @@ class Buffer {
     }
 }
 
-/**
- * @enum {string} BufferType
- * @private
- * @readonly
- */
-Buffer.BufferType = {
-    VERTEX: 'ARRAY_BUFFER',
-    ELEMENT: 'ELEMENT_ARRAY_BUFFER'
-};
-
-module.exports = Buffer;
+module.exports = VertexBuffer;
diff --git a/src/render/draw_debug.js b/src/render/draw_debug.js
@@ -3,7 +3,7 @@
 const browser = require('../util/browser');
 const mat4 = require('@mapbox/gl-matrix').mat4;
 const EXTENT = require('../data/extent');
-const Buffer = require('../data/buffer');
+const VertexBuffer = require('../gl/vertex_buffer');
 const VertexArrayObject = require('./vertex_array_object');
 const PosArray = require('../data/pos_array');
 
@@ -38,7 +38,7 @@ function drawDebugTile(painter, sourceCache, coord) {
     for (let v = 0; v < vertices.length; v += 2) {
         debugTextArray.emplaceBack(vertices[v], vertices[v + 1]);
     }
-    const debugTextBuffer = Buffer.fromStructArray(debugTextArray, Buffer.BufferType.VERTEX);
+    const debugTextBuffer = VertexBuffer.fromStructArray(debugTextArray);
     const debugTextVAO = new VertexArrayObject();
     debugTextVAO.bind(gl, program, debugTextBuffer);
     gl.uniform4f(program.uniforms.u_color, 1, 1, 1, 1);

diff --git a/src/render/draw_fill_extrusion.js b/src/render/draw_fill_extrusion.js
@@ -1,7 +1,7 @@
 // @flow
 
 const glMatrix = require('@mapbox/gl-matrix');
-const Buffer = require('../data/buffer');
+const VertexBuffer = require('../gl/vertex_buffer');
 const VertexArrayObject = require('./vertex_array_object');
 const PosArray = require('../data/pos_array');
 const pattern = require('./pattern');
@@ -100,7 +100,7 @@ function renderTextureToMap(gl, painter, layer, texture) {
     array.emplaceBack(1, 0);
     array.emplaceBack(0, 1);
     array.emplaceBack(1, 1);
-    const buffer = Buffer.fromStructArray(array, Buffer.BufferType.VERTEX);
+    const buffer = VertexBuffer.fromStructArray(array);
 
     const vao = new VertexArrayObject();
     vao.bind(gl, program, buffer);