Introduce uniform bindings

build/generate-struct-arrays.js

@@ -185,6 +185,11 @@ createStructArrayType('line_index', createLayout([
     { type: 'Uint16', name: 'vertices', components: 2 }
 ]));
 
+// line strip index array
+createStructArrayType('line_strip_index', createLayout([
+    { type: 'Uint16', name: 'vertices', components: 1 }
+]));
+
 // paint vertex arrays
 
 // used by SourceBinder for float properties

src/data/array_types.js

@@ -709,6 +709,35 @@ StructArrayLayout2ui4.prototype.bytesPerElement = 4;
 register('StructArrayLayout2ui4', StructArrayLayout2ui4);
 
 
+/**
+ * Implementation of the StructArray layout:
+ * [0]: Uint16[1]
+ *
+ * @private
+ */
+class StructArrayLayout1ui2 extends StructArray {
+    uint8: Uint8Array;
+    uint16: Uint16Array;
+
+    _refreshViews() {
+        this.uint8 = new Uint8Array(this.arrayBuffer);
+        this.uint16 = new Uint16Array(this.arrayBuffer);
+    }
+
+    emplaceBack(v0: number) {
+        const i = this.length;
+        this.resize(i + 1);
+        const o2 = i * 1;
+        this.uint16[o2 + 0] = v0;
+        return i;
+    }
+
+}
+
+StructArrayLayout1ui2.prototype.bytesPerElement = 2;
+register('StructArrayLayout1ui2', StructArrayLayout1ui2);
+
+
 /**
  * Implementation of the StructArray layout:
  * [0]: Float32[2]
@@ -1030,6 +1059,7 @@ export {
     StructArrayLayout1ul2ui8,
     StructArrayLayout3ui6,
     StructArrayLayout2ui4,
+    StructArrayLayout1ui2,
     StructArrayLayout2f8,
     StructArrayLayout4f16,
     StructArrayLayout2i4 as PosArray,
@@ -1046,5 +1076,6 @@ export {
     StructArrayLayout2i2i2i12 as CollisionCircleLayoutArray,
     StructArrayLayout2ub4 as CollisionVertexArray,
     StructArrayLayout3ui6 as TriangleIndexArray,
-    StructArrayLayout2ui4 as LineIndexArray
+    StructArrayLayout2ui4 as LineIndexArray,
+    StructArrayLayout1ui2 as LineStripIndexArray
 };

src/data/index_array_type.js

@@ -2,13 +2,15 @@
 
 import {
     LineIndexArray,
-    TriangleIndexArray
+    TriangleIndexArray,
+    LineStripIndexArray
 } from './array_types';
 
 /**
- * An index array stores Uint16 indicies of vertexes in a corresponding vertex array. We use
- * two kinds of index arrays: arrays storing groups of three indicies, forming triangles; and
- * arrays storing pairs of indicies, forming line segments.
+ * An index array stores Uint16 indices of vertexes in a corresponding vertex array. We use
+ * three kinds of index arrays: arrays storing groups of three indices, forming triangles;
+ * arrays storing pairs of indices, forming line segments; and arrays storing single indices,
+ * forming a line strip.
  * @private
  */
-export {LineIndexArray, TriangleIndexArray};
+export {LineIndexArray, TriangleIndexArray, LineStripIndexArray};

src/data/program_configuration.js

@@ -7,12 +7,18 @@ import { register } from '../util/web_worker_transfer';
 import { PossiblyEvaluatedPropertyValue } from '../style/properties';
 import { StructArrayLayout1f4, StructArrayLayout2f8, StructArrayLayout4f16 } from './array_types';
 import EvaluationParameters from '../style/evaluation_parameters';
+import {
+    Uniform,
+    Uniform1f,
+    UniformColor,
+    type UniformBindings,
+    type UniformLocations
+} from '../render/uniform_binding';
 
 import type Context from '../gl/context';
 import type {TypedStyleLayer} from '../style/style_layer/typed_style_layer';
 import type {StructArray, StructArrayMember} from '../util/struct_array';
 import type VertexBuffer from '../gl/vertex_buffer';
-import type Program from '../render/program';
 import type {
     Feature,
     FeatureState,
@@ -62,8 +68,10 @@ function packColor(color: Color): [number, number] {
  *
  * @private
  */
+
 interface Binder<T> {
     statistics: { max: number };
+    uniformName: string;
 
     populatePaintArray(length: number, feature: Feature): void;
     updatePaintArray(start: number, length: number, feature: Feature, featureState: FeatureState): void;
@@ -72,21 +80,23 @@ interface Binder<T> {
 
     defines(): Array<string>;
 
-    setUniforms(context: Context,
-                program: Program,
-                globals: GlobalProperties,
-                currentValue: PossiblyEvaluatedPropertyValue<T>): void;
+    setUniforms(context: Context, uniform: Uniform<*>, globals: GlobalProperties,
+        currentValue: PossiblyEvaluatedPropertyValue<T>): void;
+
+    getBinding(context: Context, location: WebGLUniformLocation): $Subtype<Uniform<*>>;
 }
 
 class ConstantBinder<T> implements Binder<T> {
     value: T;
     name: string;
-    type: string;
     statistics: { max: number };
+    type: string;
+    uniformName: string;
 
     constructor(value: T, name: string, type: string) {
         this.value = value;
         this.name = name;
+        this.uniformName = `u_${this.name}`;
         this.type = type;
         this.statistics = { max: -Infinity };
     }
@@ -100,23 +110,22 @@ class ConstantBinder<T> implements Binder<T> {
     upload() {}
     destroy() {}
 
-    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 {
-            gl.uniform1f(program.uniforms[`u_${this.name}`], value);
-        }
+    setUniforms(context: Context, uniform: Uniform<*>, globals: GlobalProperties,
+                currentValue: PossiblyEvaluatedPropertyValue<T>): void {
+        uniform.set(currentValue.constantOr(this.value));
+    }
+
+    getBinding(context: Context, location: WebGLUniformLocation): $Subtype<Uniform<any>> {
+        return (this.type === 'color') ?
+            new UniformColor(context, location) :
+            new Uniform1f(context, location);
     }
 }
 
 class SourceExpressionBinder<T> implements Binder<T> {
     expression: SourceExpression;
     name: string;
+    uniformName: string;
     type: string;
     statistics: { max: number };
 
@@ -128,6 +137,7 @@ class SourceExpressionBinder<T> implements Binder<T> {
         this.expression = expression;
         this.name = name;
         this.type = type;
+        this.uniformName = `a_${name}`;
         this.statistics = { max: -Infinity };
         const PaintVertexArray = type === 'color' ? StructArrayLayout2f8 : StructArrayLayout1f4;
         this.paintVertexAttributes = [{
@@ -199,14 +209,19 @@ class SourceExpressionBinder<T> implements Binder<T> {
         }
     }
 
-    setUniforms(context: Context, program: Program) {
-        context.gl.uniform1f(program.uniforms[`a_${this.name}_t`], 0);
+    setUniforms(context: Context, uniform: Uniform<*>): void {
+        uniform.set(0);
+    }
+
+    getBinding(context: Context, location: WebGLUniformLocation): Uniform1f {
+        return new Uniform1f(context, location);
     }
 }
 
 class CompositeExpressionBinder<T> implements Binder<T> {
     expression: CompositeExpression;
     name: string;
+    uniformName: string;
     type: string;
     useIntegerZoom: boolean;
     zoom: number;
@@ -219,6 +234,7 @@ class CompositeExpressionBinder<T> implements Binder<T> {
     constructor(expression: CompositeExpression, name: string, type: string, useIntegerZoom: boolean, zoom: number) {
         this.expression = expression;
         this.name = name;
+        this.uniformName = `a_${this.name}_t`;
         this.type = type;
         this.useIntegerZoom = useIntegerZoom;
         this.zoom = zoom;
@@ -306,8 +322,13 @@ class CompositeExpressionBinder<T> implements Binder<T> {
         }
     }
 
-    setUniforms(context: Context, program: Program, globals: GlobalProperties) {
-        context.gl.uniform1f(program.uniforms[`a_${this.name}_t`], this.interpolationFactor(globals.zoom));
+    setUniforms(context: Context, uniform: Uniform<*>,
+                globals: GlobalProperties): void {
+        uniform.set(this.interpolationFactor(globals.zoom));
+    }
+
+    getBinding(context: Context, location: WebGLUniformLocation): Uniform1f {
+        return new Uniform1f(context, location);
     }
 }
 
@@ -432,15 +453,27 @@ export default class ProgramConfiguration {
         return result;
     }
 
-    setUniforms<Properties: Object>(context: Context, program: Program, properties: PossiblyEvaluated<Properties>, globals: GlobalProperties) {
+    getPaintVertexBuffers(): Array<VertexBuffer> {
+        return this._buffers;
+    }
+
+    getUniforms(context: Context, locations: UniformLocations): UniformBindings {
+        const result = {};
         for (const property in this.binders) {
             const binder = this.binders[property];
-            binder.setUniforms(context, program, globals, properties.get(property));
+            result[binder.uniformName] = binder.getBinding(context, locations[binder.uniformName]);
         }
+        return result;
     }
 
-    getPaintVertexBuffers(): Array<VertexBuffer> {
-        return this._buffers;
+    setUniforms<Properties: Object>(context: Context, uniformBindings: UniformBindings, properties: PossiblyEvaluated<Properties>, globals: GlobalProperties) {
+        // Uniform state bindings are owned by the Program, but we set them
+        // from within the ProgramConfiguraton's binder members.
+
+        for (const property in this.binders) {
+            const binder = this.binders[property];
+            binder.setUniforms(context, uniformBindings[binder.uniformName], globals, properties.get(property));
+        }
     }
 
     upload(context: Context) {

src/data/segment.js

@@ -49,6 +49,16 @@ class SegmentVector {
             }
         }
     }
+
+    static simpleSegment(vertexOffset: number, primitiveOffset: number, vertexLength: number, primitiveLength: number): SegmentVector {
+        return new SegmentVector([{
+            vertexOffset: vertexOffset,
+            primitiveOffset: primitiveOffset,
+            vertexLength: vertexLength,
+            primitiveLength: primitiveLength,
+            vaos: {}
+        }]);
+    }
 }
 
 /*

src/geo/transform.js

@@ -28,7 +28,7 @@ class Transform {
     angle: number;
     rotationMatrix: Float64Array;
     zoomFraction: number;
-    pixelsToGLUnits: Array<number>;
+    pixelsToGLUnits: [number, number];
     cameraToCenterDistance: number;
     projMatrix: Float64Array;
     alignedProjMatrix: Float64Array;

src/gl/context.js

@@ -10,7 +10,7 @@ import { deepEqual } from '../util/util';
 import { ClearColor, ClearDepth, ClearStencil, ColorMask, DepthMask, StencilMask, StencilFunc, StencilOp, StencilTest, DepthRange, DepthTest, DepthFunc, Blend, BlendFunc, BlendColor, Program, ActiveTextureUnit, Viewport, BindFramebuffer, BindRenderbuffer, BindTexture, BindVertexBuffer, BindElementBuffer, BindVertexArrayOES, PixelStoreUnpack, PixelStoreUnpackPremultiplyAlpha } from './value';
 
 
-import type {TriangleIndexArray, LineIndexArray} from '../data/index_array_type';
+import type {TriangleIndexArray, LineIndexArray, LineStripIndexArray} from '../data/index_array_type';
 import type {
     StructArray,
     StructArrayMember
@@ -107,7 +107,7 @@ class Context {
 
     }
 
-    createIndexBuffer(array: TriangleIndexArray | LineIndexArray, dynamicDraw?: boolean) {
+    createIndexBuffer(array: TriangleIndexArray | LineIndexArray | LineStripIndexArray, dynamicDraw?: boolean) {
         return new IndexBuffer(this, array, dynamicDraw);
     }
 

src/gl/index_buffer.js

@@ -2,7 +2,7 @@
 import assert from 'assert';
 
 import type {StructArray} from '../util/struct_array';
-import type {TriangleIndexArray, LineIndexArray} from '../data/index_array_type';
+import type {TriangleIndexArray, LineIndexArray, LineStripIndexArray} from '../data/index_array_type';
 import type Context from '../gl/context';
 
 
@@ -11,7 +11,7 @@ class IndexBuffer {
     buffer: WebGLBuffer;
     dynamicDraw: boolean;
 
-    constructor(context: Context, array: TriangleIndexArray | LineIndexArray, dynamicDraw?: boolean) {
+    constructor(context: Context, array: TriangleIndexArray | LineIndexArray | LineStripIndexArray, dynamicDraw?: boolean) {
         this.context = context;
         const gl = context.gl;
         this.buffer = gl.createBuffer();

src/gl/vertex_buffer.js

@@ -69,7 +69,7 @@ class VertexBuffer {
         gl.bufferSubData(gl.ARRAY_BUFFER, 0, array.arrayBuffer);
     }
 
-    enableAttributes(gl: WebGLRenderingContext, program: Program) {
+    enableAttributes(gl: WebGLRenderingContext, program: Program<*>) {
         for (let j = 0; j < this.attributes.length; j++) {
             const member = this.attributes[j];
             const attribIndex: number | void = program.attributes[member.name];
@@ -85,7 +85,7 @@ class VertexBuffer {
      * @param program The active WebGL program
      * @param vertexOffset Index of the starting vertex of the segment
      */
-    setVertexAttribPointers(gl: WebGLRenderingContext, program: Program, vertexOffset: ?number) {
+    setVertexAttribPointers(gl: WebGLRenderingContext, program: Program<*>, vertexOffset: ?number) {
         for (let j = 0; j < this.attributes.length; j++) {
             const member = this.attributes[j];
             const attribIndex: number | void = program.attributes[member.name];