Introduce GL state tracking

src/data/bucket.js

@@ -7,6 +7,7 @@ import type Style from '../style/style';
 import type StyleLayer from '../style/style_layer';
 import type FeatureIndex from './feature_index';
 import type {Serialized} from '../util/web_worker_transfer';
+import type Context from '../gl/context';
 
 export type BucketParameters = {
     index: number,
@@ -58,7 +59,7 @@ export interface Bucket {
     populate(features: Array<IndexedFeature>, options: PopulateParameters): void;
     isEmpty(): boolean;
 
-    upload(gl: WebGLRenderingContext): void;
+    upload(context: Context): void;
     uploaded: boolean;
 
     /**

src/data/bucket/circle_bucket.js

@@ -1,8 +1,6 @@
 // @flow
 
 const {SegmentVector} = require('../segment');
-const VertexBuffer = require('../../gl/vertex_buffer');
-const IndexBuffer = require('../../gl/index_buffer');
 const {ProgramConfigurationSet} = require('../program_configuration');
 const createVertexArrayType = require('../vertex_array_type');
 const {TriangleIndexArray} = require('../index_array_type');
@@ -19,6 +17,9 @@ import type {
 import type {ProgramInterface} from '../program_configuration';
 import type StyleLayer from '../../style/style_layer';
 import type {StructArray} from '../../util/struct_array';
+import type Context from '../../gl/context';
+import type IndexBuffer from '../../gl/index_buffer';
+import type VertexBuffer from '../../gl/vertex_buffer';
 import type Point from '@mapbox/point-geometry';
 
 const circleInterface = {
@@ -100,10 +101,10 @@ class CircleBucket implements Bucket {
         return this.layoutVertexArray.length === 0;
     }
 
-    upload(gl: WebGLRenderingContext) {
-        this.layoutVertexBuffer = new VertexBuffer(gl, this.layoutVertexArray);
-        this.indexBuffer = new IndexBuffer(gl, this.indexArray);
-        this.programConfigurations.upload(gl);
+    upload(context: Context) {
+        this.layoutVertexBuffer = context.createVertexBuffer(this.layoutVertexArray);
+        this.indexBuffer = context.createIndexBuffer(this.indexArray);
+        this.programConfigurations.upload(context);
     }
 
     destroy() {

src/data/bucket/fill_bucket.js

@@ -1,8 +1,6 @@
 // @flow
 
 const {SegmentVector} = require('../segment');
-const VertexBuffer = require('../../gl/vertex_buffer');
-const IndexBuffer = require('../../gl/index_buffer');
 const {ProgramConfigurationSet} = require('../program_configuration');
 const createVertexArrayType = require('../vertex_array_type');
 const {LineIndexArray, TriangleIndexArray} = require('../index_array_type');
@@ -22,6 +20,9 @@ import type {
 import type {ProgramInterface} from '../program_configuration';
 import type StyleLayer from '../../style/style_layer';
 import type {StructArray} from '../../util/struct_array';
+import type Context from '../../gl/context';
+import type IndexBuffer from '../../gl/index_buffer';
+import type VertexBuffer from '../../gl/vertex_buffer';
 import type Point from '@mapbox/point-geometry';
 
 const fillInterface = {
@@ -92,11 +93,11 @@ class FillBucket implements Bucket {
         return this.layoutVertexArray.length === 0;
     }
 
-    upload(gl: WebGLRenderingContext) {
-        this.layoutVertexBuffer = new VertexBuffer(gl, this.layoutVertexArray);
-        this.indexBuffer = new IndexBuffer(gl, this.indexArray);
-        this.indexBuffer2 = new IndexBuffer(gl, this.indexArray2);
-        this.programConfigurations.upload(gl);
+    upload(context: Context) {
+        this.layoutVertexBuffer = context.createVertexBuffer(this.layoutVertexArray);
+        this.indexBuffer = context.createIndexBuffer(this.indexArray);
+        this.indexBuffer2 = context.createIndexBuffer(this.indexArray2);
+        this.programConfigurations.upload(context);
     }
 
     destroy() {

src/data/bucket/fill_extrusion_bucket.js

@@ -1,8 +1,6 @@
 // @flow
 
 const {SegmentVector, MAX_VERTEX_ARRAY_LENGTH} = require('../segment');
-const VertexBuffer = require('../../gl/vertex_buffer');
-const IndexBuffer = require('../../gl/index_buffer');
 const {ProgramConfigurationSet} = require('../program_configuration');
 const createVertexArrayType = require('../vertex_array_type');
 const {TriangleIndexArray} = require('../index_array_type');
@@ -23,6 +21,9 @@ import type {
 import type {ProgramInterface} from '../program_configuration';
 import type StyleLayer from '../../style/style_layer';
 import type {StructArray} from '../../util/struct_array';
+import type Context from '../../gl/context';
+import type IndexBuffer from '../../gl/index_buffer';
+import type VertexBuffer from '../../gl/vertex_buffer';
 import type Point from '@mapbox/point-geometry';
 
 const fillExtrusionInterface = {
@@ -105,10 +106,10 @@ class FillExtrusionBucket implements Bucket {
         return this.layoutVertexArray.length === 0;
     }
 
-    upload(gl: WebGLRenderingContext) {
-        this.layoutVertexBuffer = new VertexBuffer(gl, this.layoutVertexArray);
-        this.indexBuffer = new IndexBuffer(gl, this.indexArray);
-        this.programConfigurations.upload(gl);
+    upload(context: Context) {
+        this.layoutVertexBuffer = context.createVertexBuffer(this.layoutVertexArray);
+        this.indexBuffer = context.createIndexBuffer(this.indexArray);
+        this.programConfigurations.upload(context);
     }
 
     destroy() {

src/data/bucket/line_bucket.js

@@ -1,8 +1,6 @@
 // @flow
 
 const {SegmentVector} = require('../segment');
-const VertexBuffer = require('../../gl/vertex_buffer');
-const IndexBuffer = require('../../gl/index_buffer');
 const {ProgramConfigurationSet} = require('../program_configuration');
 const createVertexArrayType = require('../vertex_array_type');
 const {TriangleIndexArray} = require('../index_array_type');
@@ -21,6 +19,9 @@ import type {ProgramInterface} from '../program_configuration';
 import type LineStyleLayer from '../../style/style_layer/line_style_layer';
 import type Point from '@mapbox/point-geometry';
 import type {Segment} from '../segment';
+import type Context from '../../gl/context';
+import type IndexBuffer from '../../gl/index_buffer';
+import type VertexBuffer from '../../gl/vertex_buffer';
 import type {StructArray} from '../../util/struct_array';
 
 // NOTE ON EXTRUDE SCALE:
@@ -149,10 +150,10 @@ class LineBucket implements Bucket {
         return this.layoutVertexArray.length === 0;
     }
 
-    upload(gl: WebGLRenderingContext) {
-        this.layoutVertexBuffer = new VertexBuffer(gl, this.layoutVertexArray);
-        this.indexBuffer = new IndexBuffer(gl, this.indexArray);
-        this.programConfigurations.upload(gl);
+    upload(context: Context) {
+        this.layoutVertexBuffer = context.createVertexBuffer(this.layoutVertexArray);
+        this.indexBuffer = context.createIndexBuffer(this.indexArray);
+        this.programConfigurations.upload(context);
     }
 
     destroy() {

src/data/bucket/symbol_bucket.js

@@ -2,8 +2,6 @@
 
 const Point = require('@mapbox/point-geometry');
 const {SegmentVector} = require('../segment');
-const VertexBuffer = require('../../gl/vertex_buffer');
-const IndexBuffer = require('../../gl/index_buffer');
 const {ProgramConfigurationSet} = require('../program_configuration');
 const createVertexArrayType = require('../vertex_array_type');
 const {TriangleIndexArray, LineIndexArray} = require('../index_array_type');
@@ -30,6 +28,9 @@ import type {ProgramInterface, LayoutAttribute} from '../program_configuration';
 import type CollisionBoxArray, {CollisionBox} from '../../symbol/collision_box';
 import type { StructArray } from '../../util/struct_array';
 import type SymbolStyleLayer from '../../style/style_layer/symbol_style_layer';
+import type Context from '../../gl/context';
+import type IndexBuffer from '../../gl/index_buffer';
+import type VertexBuffer from '../../gl/vertex_buffer';
 import type {SymbolQuad} from '../../symbol/quads';
 import type {SizeData} from '../../symbol/symbol_size';
 import type {PossiblyEvaluatedPropertyValue} from '../../style/properties';
@@ -266,23 +267,23 @@ class SymbolBuffers {
 
     }
 
-    upload(gl: WebGLRenderingContext, dynamicIndexBuffer) {
-        this.layoutVertexBuffer = new VertexBuffer(gl, this.layoutVertexArray);
-        this.indexBuffer = new IndexBuffer(gl, this.indexArray, dynamicIndexBuffer);
-        this.programConfigurations.upload(gl);
+    upload(context: Context, dynamicIndexBuffer) {
+        this.layoutVertexBuffer = context.createVertexBuffer(this.layoutVertexArray);
+        this.indexBuffer = context.createIndexBuffer(this.indexArray, dynamicIndexBuffer);
+        this.programConfigurations.upload(context);
 
         if (this.dynamicLayoutAttributes) {
-            this.dynamicLayoutVertexBuffer = new VertexBuffer(gl, this.dynamicLayoutVertexArray, true);
+            this.dynamicLayoutVertexBuffer = context.createVertexBuffer(this.dynamicLayoutVertexArray, true);
         }
         if (this.opacityAttributes) {
-            this.opacityVertexBuffer = new VertexBuffer(gl, this.opacityVertexArray, true);
+            this.opacityVertexBuffer = context.createVertexBuffer(this.opacityVertexArray, true);
             // This is a performance hack so that we can write to opacityVertexArray with uint32s
             // even though the shaders read uint8s
             this.opacityVertexBuffer.itemSize = 1;
             this.opacityVertexBuffer.attributes = shaderOpacityAttributes;
         }
         if (this.collisionAttributes) {
-            this.collisionVertexBuffer = new VertexBuffer(gl, this.collisionVertexArray, true);
+            this.collisionVertexBuffer = context.createVertexBuffer(this.collisionVertexArray, true);
         }
     }
 
@@ -539,11 +540,11 @@ class SymbolBucket implements Bucket {
         return this.symbolInstances.length === 0;
     }
 
-    upload(gl: WebGLRenderingContext) {
-        this.text.upload(gl, this.sortFeaturesByY);
-        this.icon.upload(gl, this.sortFeaturesByY);
-        this.collisionBox.upload(gl);
-        this.collisionCircle.upload(gl);
+    upload(context: Context) {
+        this.text.upload(context, this.sortFeaturesByY);
+        this.icon.upload(context, this.sortFeaturesByY);
+        this.collisionBox.upload(context);
+        this.collisionCircle.upload(context);
     }
 
     destroy() {

src/data/program_configuration.js

@@ -4,13 +4,14 @@ import type {GlobalProperties} from "../style-spec/expression/index";
 
 const createVertexArrayType = require('./vertex_array_type');
 const packUint8ToFloat = require('../shaders/encode_attribute').packUint8ToFloat;
-const VertexBuffer = require('../gl/vertex_buffer');
 const Color = require('../style-spec/util/color');
 const {deserialize, serialize, register} = require('../util/web_worker_transfer');
 
+import type Context from '../gl/context';
 import type StyleLayer from '../style/style_layer';
 import type {Serialized} from '../util/web_worker_transfer';
 import type {ViewType, StructArray} from '../util/struct_array';
+import type VertexBuffer from '../gl/vertex_buffer';
 import type Program from '../render/program';
 import type {Feature, SourceExpression, CompositeExpression} from '../style-spec/expression';
 import type {PossiblyEvaluated, PossiblyEvaluatedPropertyValue} from '../style/properties';
@@ -84,7 +85,7 @@ interface Binder<T> {
 
     defines(): Array<string>;
 
-    setUniforms(gl: WebGLRenderingContext,
+    setUniforms(context: Context,
                 program: Program,
                 globals: GlobalProperties,
                 currentValue: PossiblyEvaluatedPropertyValue<T>): void;
@@ -111,11 +112,12 @@ class ConstantBinder<T> implements Binder<T> {
 
     populatePaintArray() {}
 
-    setUniforms(gl: WebGLRenderingContext,
+    setUniforms(context: Context,
                 program: Program,
                 globals: GlobalProperties,
                 currentValue: PossiblyEvaluatedPropertyValue<T>) {
         const value: any = currentValue.constantOr(this.value);
+        const gl = context.gl;
         if (this.type === 'color') {
             gl.uniform4f(program.uniforms[`u_${this.name}`], value.r, value.g, value.b, value.a);
         } else {
@@ -166,8 +168,8 @@ class SourceExpressionBinder<T> implements Binder<T> {
         }
     }
 
-    setUniforms(gl: WebGLRenderingContext, program: Program) {
-        gl.uniform1f(program.uniforms[`a_${this.name}_t`], 0);
+    setUniforms(context: Context, program: Program) {
+        context.gl.uniform1f(program.uniforms[`a_${this.name}_t`], 0);
     }
 }
 
@@ -230,8 +232,8 @@ class CompositeExpressionBinder<T> implements Binder<T> {
         }
     }
 
-    setUniforms(gl: WebGLRenderingContext, program: Program, globals: GlobalProperties) {
-        gl.uniform1f(program.uniforms[`a_${this.name}_t`], this.interpolationFactor(globals.zoom));
+    setUniforms(context: Context, program: Program, globals: GlobalProperties) {
+        context.gl.uniform1f(program.uniforms[`a_${this.name}_t`], this.interpolationFactor(globals.zoom));
     }
 }
 
@@ -362,16 +364,16 @@ class ProgramConfiguration {
         return result;
     }
 
-    setUniforms<Properties: Object>(gl: WebGLRenderingContext, program: Program, properties: PossiblyEvaluated<Properties>, globals: GlobalProperties) {
+    setUniforms<Properties: Object>(context: Context, program: Program, properties: PossiblyEvaluated<Properties>, globals: GlobalProperties) {
         for (const property in this.binders) {
             const binder = this.binders[property];
-            binder.setUniforms(gl, program, globals, properties.get(binder.property));
+            binder.setUniforms(context, program, globals, properties.get(binder.property));
         }
     }
 
-    upload(gl: WebGLRenderingContext) {
+    upload(context: Context) {
         if (this.paintVertexArray) {
-            this.paintVertexBuffer = new VertexBuffer(gl, this.paintVertexArray);
+            this.paintVertexBuffer = context.createVertexBuffer(this.paintVertexArray);
         }
     }
 
@@ -414,9 +416,9 @@ class ProgramConfigurationSet {
         return this.programConfigurations[layerId];
     }
 
-    upload(gl: WebGLRenderingContext) {
+    upload(context: Context) {
         for (const layerId in this.programConfigurations) {
-            this.programConfigurations[layerId].upload(gl);
+            this.programConfigurations[layerId].upload(context);
         }
     }