Parameterize uniform types per layer

mapbox · Feb 27, 2018 · df5fbd9 · df5fbd9
1 parent 418f82c
commit df5fbd9
Show file tree

Hide file tree

Showing 19 changed files with 656 additions and 377 deletions.
diff --git a/src/data/program_configuration.js b/src/data/program_configuration.js
@@ -19,7 +19,7 @@ import type {StructArray, StructArrayMember} from '../util/struct_array';
 import type VertexBuffer from '../gl/vertex_buffer';
 import type {Feature, SourceExpression, CompositeExpression} from '../style-spec/expression';
 import type {PossiblyEvaluated} from '../style/properties';
-import type {UniformValues} from '../render/uniform_binding';
+import type {BinderUniformTypes} from '../render/uniform_binding';
 
 function packColor(color: Color): [number, number] {
     return [
@@ -333,7 +333,7 @@ class ProgramConfiguration {
         return this._buffers;
     }
 
-    getUniformBindings(context: Context): Uniforms {
+    getUniformBindings(context: Context): Uniforms<BinderUniformTypes> {
         const uniformBindings = {};
         for (const property in this.binders) {
             const binder = this.binders[property];
@@ -347,7 +347,7 @@ class ProgramConfiguration {
         return new Uniforms(uniformBindings);
     }
 
-    getUniforms<Properties: Object>(properties: PossiblyEvaluated<Properties>, globals: GlobalProperties): UniformValues {
+    getUniforms<Properties: Object>(properties: PossiblyEvaluated<Properties>, globals: GlobalProperties) {
         const uniformValues = {};
         for (const property in this.binders) {
             const binder = this.binders[property];

diff --git a/src/gl/vertex_buffer.js b/src/gl/vertex_buffer.js
@@ -68,7 +68,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];
@@ -84,7 +84,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];

diff --git a/src/render/painter.js b/src/render/painter.js
@@ -99,7 +99,7 @@ class Painter {
     currentLayer: number;
     id: string;
     _showOverdrawInspector: boolean;
-    cache: { [string]: Program };
+    cache: { [string]: Program<*> };
     crossTileSymbolIndex: CrossTileSymbolIndex;
     symbolFadeChange: number;
 
@@ -481,7 +481,7 @@ class Painter {
         return !imagePosA || !imagePosB;
     }
 
-    _createProgramCached(name: string, programConfiguration: ProgramConfiguration): Program {
+    _createProgramCached(name: string, programConfiguration: ProgramConfiguration): Program<any> {
         this.cache = this.cache || {};
         const key = `${name}${programConfiguration.cacheKey || ''}${this._showOverdrawInspector ? '/overdraw' : ''}`;
         if (!this.cache[key]) {
@@ -490,7 +490,7 @@ class Painter {
         return this.cache[key];
     }
 
-    useProgram(name: string, programConfiguration?: ProgramConfiguration): Program {
+    useProgram(name: string, programConfiguration?: ProgramConfiguration): Program<any> {
         const nextProgram = this._createProgramCached(name, programConfiguration || this.emptyProgramConfiguration);
 
         this.context.program.set(nextProgram.program);

diff --git a/src/render/program.js b/src/render/program.js
@@ -13,26 +13,26 @@ import type IndexBuffer from '../gl/index_buffer';
 import type DepthMode from '../gl/depth_mode';
 import type StencilMode from '../gl/stencil_mode';
 import type ColorMode from '../gl/color_mode';
-import type {Uniforms, UniformValues, UniformLocations} from './uniform_binding';
+import type {Uniforms, UniformBindings, UniformValues, UniformLocations, BinderUniformTypes} from './uniform_binding';
 
 export type DrawMode =
     | $PropertyType<WebGLRenderingContext, 'LINES'>
     | $PropertyType<WebGLRenderingContext, 'TRIANGLES'>
     | $PropertyType<WebGLRenderingContext, 'LINE_STRIP'>;
 
-class Program {
+class Program<Us: UniformBindings> {
     program: WebGLProgram;
     uniforms: UniformLocations;
     attributes: {[string]: number};
     numAttributes: number;
-    fixedUniforms: Uniforms;
-    binderUniforms: Uniforms;
+    fixedUniforms: Uniforms<Us>;
+    binderUniforms: Uniforms<BinderUniformTypes>;
     configuration: ProgramConfiguration;
 
     constructor(context: Context,
                 source: {fragmentSource: string, vertexSource: string},
                 configuration: ProgramConfiguration,
-                fixedUniforms: (Context) => Uniforms,
+                fixedUniforms: (Context) => Uniforms<Us>,
                 showOverdrawInspector: boolean) {
         const gl = context.gl;
         this.program = gl.createProgram();
@@ -99,7 +99,7 @@ class Program {
          depthMode: $ReadOnly<DepthMode>,
          stencilMode: $ReadOnly<StencilMode>,
          colorMode: $ReadOnly<ColorMode>,
-         uniformValues: UniformValues,
+         uniformValues: UniformValues<Us>,
          layerID: string,
          layoutVertexBuffer: VertexBuffer,
          indexBuffer: IndexBuffer,

diff --git a/src/render/program/background_program.js b/src/render/program/background_program.js
@@ -1,8 +1,10 @@
 // @flow
 
-const {patternUniforms, patternUniformValues} = require('./pattern');
+const {patternUniformValues} = require('./pattern');
 const {
+    Uniform1i,
     Uniform1f,
+    Uniform2fv,
     Uniform4fv,
     UniformMatrix4fv,
     Uniforms
@@ -16,47 +18,80 @@ import type Color from '../../style-spec/util/color';
 import type {CrossFaded} from '../../style/cross_faded';
 import type {OverscaledTileID} from '../../source/tile_id';
 
-function backgroundUniforms(context: Context): Uniforms {
-    return new Uniforms({
-        'u_matrix': new UniformMatrix4fv(context),
-        'u_opacity': new Uniform1f(context),
-        'u_color': new Uniform4fv(context)
-    });
-}
+export type BackgroundUniformsType = {|
+    'u_matrix': UniformMatrix4fv,
+    'u_opacity': Uniform1f,
+    'u_color': Uniform4fv
+|};
 
-function backgroundPatternUniforms(context: Context): Uniforms {
-    return patternUniforms(context)
-        .concatenate(new Uniforms({
-            'u_matrix': new UniformMatrix4fv(context),
-            'u_opacity': new Uniform1f(context)
-        }));
-}
+export type BackgroundPatternUniformsType = {|
+    'u_matrix': UniformMatrix4fv,
+    'u_opacity': Uniform1f,
+    // pattern uniforms:
+    'u_image': Uniform1i,
+    'u_pattern_tl_a': Uniform2fv,
+    'u_pattern_br_a': Uniform2fv,
+    'u_pattern_tl_b': Uniform2fv,
+    'u_pattern_br_b': Uniform2fv,
+    'u_texsize': Uniform2fv,
+    'u_mix': Uniform1f,
+    'u_pattern_size_a': Uniform2fv,
+    'u_pattern_size_b': Uniform2fv,
+    'u_scale_a': Uniform1f,
+    'u_scale_b': Uniform1f,
+    'u_pixel_coord_upper': Uniform2fv,
+    'u_pixel_coord_lower': Uniform2fv,
+    'u_tile_units_to_pixels': Uniform1f
+|};
 
-function backgroundUniformValues(
+const backgroundUniforms = (context: Context): Uniforms<BackgroundUniformsType> => new Uniforms({
+    'u_matrix': new UniformMatrix4fv(context),
+    'u_opacity': new Uniform1f(context),
+    'u_color': new Uniform4fv(context)
+});
+
+const backgroundPatternUniforms = (context: Context): Uniforms<BackgroundPatternUniformsType> => new Uniforms({
+    'u_matrix': new UniformMatrix4fv(context),
+    'u_opacity': new Uniform1f(context),
+    'u_image': new Uniform1i(context),
+    'u_pattern_tl_a': new Uniform2fv(context),
+    'u_pattern_br_a': new Uniform2fv(context),
+    'u_pattern_tl_b': new Uniform2fv(context),
+    'u_pattern_br_b': new Uniform2fv(context),
+    'u_texsize': new Uniform2fv(context),
+    'u_mix': new Uniform1f(context),
+    'u_pattern_size_a': new Uniform2fv(context),
+    'u_pattern_size_b': new Uniform2fv(context),
+    'u_scale_a': new Uniform1f(context),
+    'u_scale_b': new Uniform1f(context),
+    'u_pixel_coord_upper': new Uniform2fv(context),
+    'u_pixel_coord_lower': new Uniform2fv(context),
+    'u_tile_units_to_pixels': new Uniform1f(context)
+});
+
+const backgroundUniformValues = (
     matrix: Float32Array,
     opacity: number,
     color: Color
-): UniformValues {
-    return {
-        'u_matrix': matrix,
-        'u_opacity': opacity,
-        'u_color': [color.r, color.g, color.b, color.a]
-    };
-}
+): UniformValues<BackgroundUniformsType> => ({
+    'u_matrix': matrix,
+    'u_opacity': opacity,
+    'u_color': [color.r, color.g, color.b, color.a]
+});
 
-function backgroundPatternUniformValues(
+const backgroundPatternUniformValues = (
     matrix: Float32Array,
     opacity: number,
     painter: Painter,
     image: CrossFaded<string>,
     tile: {tileID: OverscaledTileID, tileSize: number}
-): UniformValues {
-    return util.extend(patternUniformValues(image, painter, tile),
-        {
-            'u_matrix': matrix,
-            'u_opacity': opacity
-        });
-}
+): UniformValues<BackgroundPatternUniformsType> => util.extend(
+    patternUniformValues(image, painter, tile),
+    {
+        'u_matrix': matrix,
+        'u_opacity': opacity
+    }
+);
 
 module.exports = {
     backgroundUniforms,

diff --git a/src/render/program/circle_program.js b/src/render/program/circle_program.js
@@ -16,22 +16,28 @@ import type Tile from '../../source/tile';
 import type CircleStyleLayer from '../../style/style_layer/circle_style_layer';
 import type Painter from '../painter';
 
-function circleUniforms(context: Context): Uniforms {
-    return new Uniforms({
-        'u_camera_to_center_distance': new Uniform1f(context),
-        'u_scale_with_map': new Uniform1i(context),
-        'u_pitch_with_map': new Uniform1i(context),
-        'u_extrude_scale': new Uniform2fv(context),
-        'u_matrix': new UniformMatrix4fv(context)
-    });
-}
-
-function circleUniformValues(
+export type CircleUniformsType = {|
+    'u_camera_to_center_distance': Uniform1f,
+    'u_scale_with_map': Uniform1i,
+    'u_pitch_with_map': Uniform1i,
+    'u_extrude_scale': Uniform2fv,
+    'u_matrix': UniformMatrix4fv
+|};
+
+const circleUniforms = (context: Context): Uniforms<CircleUniformsType> => new Uniforms({
+    'u_camera_to_center_distance': new Uniform1f(context),
+    'u_scale_with_map': new Uniform1i(context),
+    'u_pitch_with_map': new Uniform1i(context),
+    'u_extrude_scale': new Uniform2fv(context),
+    'u_matrix': new UniformMatrix4fv(context)
+});
+
+const circleUniformValues = (
     painter: Painter,
     coord: OverscaledTileID,
     tile: Tile,
     layer: CircleStyleLayer
-): UniformValues {
+): UniformValues<CircleUniformsType> => {
     const transform = painter.transform;
 
     let pitchWithMap, extrudeScale;
@@ -55,6 +61,6 @@ function circleUniformValues(
         'u_pitch_with_map': +(pitchWithMap),
         'u_extrude_scale': extrudeScale
     };
-}
+};
 
 module.exports = { circleUniforms, circleUniformValues };
diff --git a/src/render/program/clipping_mask_program.js b/src/render/program/clipping_mask_program.js
@@ -5,16 +5,16 @@ const {UniformMatrix4fv, Uniforms} = require('../uniform_binding');
 import type Context from '../../gl/context';
 import type {UniformValues} from '../uniform_binding';
 
-function clippingMaskUniforms(context: Context): Uniforms {
-    return new Uniforms({
-        'u_matrix': new UniformMatrix4fv(context)
-    });
-}
+export type ClippingMaskUniformsType = {|
+    'u_matrix': UniformMatrix4fv
+|};
 
-function clippingMaskUniformValues(matrix: Float32Array): UniformValues {
-    return {
-        'u_matrix': matrix
-    };
-}
+const clippingMaskUniforms = (context: Context): Uniforms<ClippingMaskUniformsType> => new Uniforms({
+    'u_matrix': new UniformMatrix4fv(context)
+});
+
+const clippingMaskUniformValues = (matrix: Float32Array): UniformValues<ClippingMaskUniformsType> => ({
+    'u_matrix': matrix
+});
 
 module.exports = { clippingMaskUniforms, clippingMaskUniformValues };
diff --git a/src/render/program/collision_program.js b/src/render/program/collision_program.js
@@ -13,21 +13,27 @@ import type {UniformValues} from '../uniform_binding';
 import type Transform from '../../geo/transform';
 import type Tile from '../../source/tile';
 
-function collisionUniforms(context: Context): Uniforms {
-    return new Uniforms({
-        'u_matrix': new UniformMatrix4fv(context),
-        'u_camera_to_center_distance': new Uniform1f(context),
-        'u_pixels_to_tile_units': new Uniform1f(context),
-        'u_extrude_scale': new Uniform2fv(context),
-        'u_overscale_factor': new Uniform1f(context)
-    });
-}
+export type CollisionUniformsType = {|
+    'u_matrix': UniformMatrix4fv,
+    'u_camera_to_center_distance': Uniform1f,
+    'u_pixels_to_tile_units': Uniform1f,
+    'u_extrude_scale': Uniform2fv,
+    'u_overscale_factor': Uniform1f
+|};
 
-function collisionUniformValues(
+const collisionUniforms = (context: Context): Uniforms<CollisionUniformsType> => new Uniforms({
+    'u_matrix': new UniformMatrix4fv(context),
+    'u_camera_to_center_distance': new Uniform1f(context),
+    'u_pixels_to_tile_units': new Uniform1f(context),
+    'u_extrude_scale': new Uniform2fv(context),
+    'u_overscale_factor': new Uniform1f(context)
+});
+
+const collisionUniformValues = (
     matrix: Float32Array,
     transform: Transform,
     tile: Tile
-): UniformValues {
+): UniformValues<CollisionUniformsType> => {
     const pixelRatio = pixelsToTileUnits(tile, 1, transform.zoom);
     const scale = Math.pow(2, transform.zoom - tile.tileID.overscaledZ);
     const overscaleFactor = tile.tileID.overscaleFactor();
@@ -39,6 +45,6 @@ function collisionUniformValues(
             transform.pixelsToGLUnits[1] / (pixelRatio * scale)],
         'u_overscale_factor': overscaleFactor
     };
-}
+};
 
 module.exports = { collisionUniforms, collisionUniformValues };
diff --git a/src/render/program/debug_program.js b/src/render/program/debug_program.js
@@ -10,18 +10,19 @@ import type Context from '../../gl/context';
 import type {UniformValues} from '../uniform_binding';
 import type Color from '../../style-spec/util/color';
 
-function debugUniforms(context: Context): Uniforms {
-    return new Uniforms({
-        'u_color': new Uniform4fv(context),
-        'u_matrix': new UniformMatrix4fv(context)
-    });
-}
+export type DebugUniformsType = {|
+    'u_color': Uniform4fv,
+    'u_matrix': UniformMatrix4fv
+|};
 
-function debugUniformValues(matrix: Float32Array, color: Color): UniformValues {
-    return {
-        'u_matrix': matrix,
-        'u_color': [color.r, color.g, color.b, color.a]
-    };
-}
+const debugUniforms = (context: Context): Uniforms<DebugUniformsType> => new Uniforms({
+    'u_color': new Uniform4fv(context),
+    'u_matrix': new UniformMatrix4fv(context)
+});
+
+const debugUniformValues = (matrix: Float32Array, color: Color): UniformValues<DebugUniformsType> => ({
+    'u_matrix': matrix,
+    'u_color': [color.r, color.g, color.b, color.a]
+});
 
 module.exports = { debugUniforms, debugUniformValues };