mapbox-gl 1.13.2

package/src/render/program/symbol_program.js

@@ -0,0 +1,224 @@
+// @flow
+
+import {
+    Uniform1i,
+    Uniform1f,
+    Uniform2f,
+    UniformMatrix4f
+} from '../uniform_binding';
+import {extend} from '../../util/util';
+import browser from '../../util/browser';
+
+import type Context from '../../gl/context';
+import type Painter from '../painter';
+import type {UniformValues, UniformLocations} from '../uniform_binding';
+
+export type SymbolIconUniformsType = {|
+    'u_is_size_zoom_constant': Uniform1i,
+    'u_is_size_feature_constant': Uniform1i,
+    'u_size_t': Uniform1f,
+    'u_size': Uniform1f,
+    'u_camera_to_center_distance': Uniform1f,
+    'u_pitch': Uniform1f,
+    'u_rotate_symbol': Uniform1i,
+    'u_aspect_ratio': Uniform1f,
+    'u_fade_change': Uniform1f,
+    'u_matrix': UniformMatrix4f,
+    'u_label_plane_matrix': UniformMatrix4f,
+    'u_coord_matrix': UniformMatrix4f,
+    'u_is_text': Uniform1i,
+    'u_pitch_with_map': Uniform1i,
+    'u_texsize': Uniform2f,
+    'u_texture': Uniform1i
+|};
+
+export type SymbolSDFUniformsType = {|
+    'u_is_size_zoom_constant': Uniform1i,
+    'u_is_size_feature_constant': Uniform1i,
+    'u_size_t': Uniform1f,
+    'u_size': Uniform1f,
+    'u_camera_to_center_distance': Uniform1f,
+    'u_pitch': Uniform1f,
+    'u_rotate_symbol': Uniform1i,
+    'u_aspect_ratio': Uniform1f,
+    'u_fade_change': Uniform1f,
+    'u_matrix': UniformMatrix4f,
+    'u_label_plane_matrix': UniformMatrix4f,
+    'u_coord_matrix': UniformMatrix4f,
+    'u_is_text': Uniform1i,
+    'u_pitch_with_map': Uniform1i,
+    'u_texsize': Uniform2f,
+    'u_texture': Uniform1i,
+    'u_gamma_scale': Uniform1f,
+    'u_device_pixel_ratio': Uniform1f,
+    'u_is_halo': Uniform1i
+|};
+
+export type symbolTextAndIconUniformsType = {|
+    'u_is_size_zoom_constant': Uniform1i,
+    'u_is_size_feature_constant': Uniform1i,
+    'u_size_t': Uniform1f,
+    'u_size': Uniform1f,
+    'u_camera_to_center_distance': Uniform1f,
+    'u_pitch': Uniform1f,
+    'u_rotate_symbol': Uniform1i,
+    'u_aspect_ratio': Uniform1f,
+    'u_fade_change': Uniform1f,
+    'u_matrix': UniformMatrix4f,
+    'u_label_plane_matrix': UniformMatrix4f,
+    'u_coord_matrix': UniformMatrix4f,
+    'u_is_text': Uniform1i,
+    'u_pitch_with_map': Uniform1i,
+    'u_texsize': Uniform2f,
+    'u_texsize_icon': Uniform2f,
+    'u_texture': Uniform1i,
+    'u_texture_icon': Uniform1i,
+    'u_gamma_scale': Uniform1f,
+    'u_device_pixel_ratio': Uniform1f,
+    'u_is_halo': Uniform1i
+|};
+
+const symbolIconUniforms = (context: Context, locations: UniformLocations): SymbolIconUniformsType => ({
+    'u_is_size_zoom_constant': new Uniform1i(context, locations.u_is_size_zoom_constant),
+    'u_is_size_feature_constant': new Uniform1i(context, locations.u_is_size_feature_constant),
+    'u_size_t': new Uniform1f(context, locations.u_size_t),
+    'u_size': new Uniform1f(context, locations.u_size),
+    'u_camera_to_center_distance': new Uniform1f(context, locations.u_camera_to_center_distance),
+    'u_pitch': new Uniform1f(context, locations.u_pitch),
+    'u_rotate_symbol': new Uniform1i(context, locations.u_rotate_symbol),
+    'u_aspect_ratio': new Uniform1f(context, locations.u_aspect_ratio),
+    'u_fade_change': new Uniform1f(context, locations.u_fade_change),
+    'u_matrix': new UniformMatrix4f(context, locations.u_matrix),
+    'u_label_plane_matrix': new UniformMatrix4f(context, locations.u_label_plane_matrix),
+    'u_coord_matrix': new UniformMatrix4f(context, locations.u_coord_matrix),
+    'u_is_text': new Uniform1i(context, locations.u_is_text),
+    'u_pitch_with_map': new Uniform1i(context, locations.u_pitch_with_map),
+    'u_texsize': new Uniform2f(context, locations.u_texsize),
+    'u_texture': new Uniform1i(context, locations.u_texture)
+});
+
+const symbolSDFUniforms = (context: Context, locations: UniformLocations): SymbolSDFUniformsType => ({
+    'u_is_size_zoom_constant': new Uniform1i(context, locations.u_is_size_zoom_constant),
+    'u_is_size_feature_constant': new Uniform1i(context, locations.u_is_size_feature_constant),
+    'u_size_t': new Uniform1f(context, locations.u_size_t),
+    'u_size': new Uniform1f(context, locations.u_size),
+    'u_camera_to_center_distance': new Uniform1f(context, locations.u_camera_to_center_distance),
+    'u_pitch': new Uniform1f(context, locations.u_pitch),
+    'u_rotate_symbol': new Uniform1i(context, locations.u_rotate_symbol),
+    'u_aspect_ratio': new Uniform1f(context, locations.u_aspect_ratio),
+    'u_fade_change': new Uniform1f(context, locations.u_fade_change),
+    'u_matrix': new UniformMatrix4f(context, locations.u_matrix),
+    'u_label_plane_matrix': new UniformMatrix4f(context, locations.u_label_plane_matrix),
+    'u_coord_matrix': new UniformMatrix4f(context, locations.u_coord_matrix),
+    'u_is_text': new Uniform1i(context, locations.u_is_text),
+    'u_pitch_with_map': new Uniform1i(context, locations.u_pitch_with_map),
+    'u_texsize': new Uniform2f(context, locations.u_texsize),
+    'u_texture': new Uniform1i(context, locations.u_texture),
+    'u_gamma_scale': new Uniform1f(context, locations.u_gamma_scale),
+    'u_device_pixel_ratio': new Uniform1f(context, locations.u_device_pixel_ratio),
+    'u_is_halo': new Uniform1i(context, locations.u_is_halo)
+});
+
+const symbolTextAndIconUniforms = (context: Context, locations: UniformLocations): symbolTextAndIconUniformsType => ({
+    'u_is_size_zoom_constant': new Uniform1i(context, locations.u_is_size_zoom_constant),
+    'u_is_size_feature_constant': new Uniform1i(context, locations.u_is_size_feature_constant),
+    'u_size_t': new Uniform1f(context, locations.u_size_t),
+    'u_size': new Uniform1f(context, locations.u_size),
+    'u_camera_to_center_distance': new Uniform1f(context, locations.u_camera_to_center_distance),
+    'u_pitch': new Uniform1f(context, locations.u_pitch),
+    'u_rotate_symbol': new Uniform1i(context, locations.u_rotate_symbol),
+    'u_aspect_ratio': new Uniform1f(context, locations.u_aspect_ratio),
+    'u_fade_change': new Uniform1f(context, locations.u_fade_change),
+    'u_matrix': new UniformMatrix4f(context, locations.u_matrix),
+    'u_label_plane_matrix': new UniformMatrix4f(context, locations.u_label_plane_matrix),
+    'u_coord_matrix': new UniformMatrix4f(context, locations.u_coord_matrix),
+    'u_is_text': new Uniform1i(context, locations.u_is_text),
+    'u_pitch_with_map': new Uniform1i(context, locations.u_pitch_with_map),
+    'u_texsize': new Uniform2f(context, locations.u_texsize),
+    'u_texsize_icon': new Uniform2f(context, locations.u_texsize_icon),
+    'u_texture': new Uniform1i(context, locations.u_texture),
+    'u_texture_icon': new Uniform1i(context, locations.u_texture_icon),
+    'u_gamma_scale': new Uniform1f(context, locations.u_gamma_scale),
+    'u_device_pixel_ratio': new Uniform1f(context, locations.u_device_pixel_ratio),
+    'u_is_halo': new Uniform1i(context, locations.u_is_halo)
+});
+
+const symbolIconUniformValues = (
+    functionType: string,
+    size: ?{uSizeT: number, uSize: number},
+    rotateInShader: boolean,
+    pitchWithMap: boolean,
+    painter: Painter,
+    matrix: Float32Array,
+    labelPlaneMatrix: Float32Array,
+    glCoordMatrix: Float32Array,
+    isText: boolean,
+    texSize: [number, number]
+): UniformValues<SymbolIconUniformsType> => {
+    const transform = painter.transform;
+
+    return {
+        'u_is_size_zoom_constant': +(functionType === 'constant' || functionType === 'source'),
+        'u_is_size_feature_constant': +(functionType === 'constant' || functionType === 'camera'),
+        'u_size_t': size ? size.uSizeT : 0,
+        'u_size': size ? size.uSize : 0,
+        'u_camera_to_center_distance': transform.cameraToCenterDistance,
+        'u_pitch': transform.pitch / 360 * 2 * Math.PI,
+        'u_rotate_symbol': +rotateInShader,
+        'u_aspect_ratio': transform.width / transform.height,
+        'u_fade_change': painter.options.fadeDuration ? painter.symbolFadeChange : 1,
+        'u_matrix': matrix,
+        'u_label_plane_matrix': labelPlaneMatrix,
+        'u_coord_matrix': glCoordMatrix,
+        'u_is_text': +isText,
+        'u_pitch_with_map': +pitchWithMap,
+        'u_texsize': texSize,
+        'u_texture': 0
+    };
+};
+
+const symbolSDFUniformValues = (
+    functionType: string,
+    size: ?{uSizeT: number, uSize: number},
+    rotateInShader: boolean,
+    pitchWithMap: boolean,
+    painter: Painter,
+    matrix: Float32Array,
+    labelPlaneMatrix: Float32Array,
+    glCoordMatrix: Float32Array,
+    isText: boolean,
+    texSize: [number, number],
+    isHalo: boolean
+): UniformValues<SymbolSDFUniformsType> => {
+    const transform = painter.transform;
+
+    return extend(symbolIconUniformValues(functionType, size,
+        rotateInShader, pitchWithMap, painter, matrix, labelPlaneMatrix,
+        glCoordMatrix, isText, texSize), {
+        'u_gamma_scale': (pitchWithMap ? Math.cos(transform._pitch) * transform.cameraToCenterDistance : 1),
+        'u_device_pixel_ratio': browser.devicePixelRatio,
+        'u_is_halo': +isHalo
+    });
+};
+
+const symbolTextAndIconUniformValues = (
+    functionType: string,
+    size: ?{uSizeT: number, uSize: number},
+    rotateInShader: boolean,
+    pitchWithMap: boolean,
+    painter: Painter,
+    matrix: Float32Array,
+    labelPlaneMatrix: Float32Array,
+    glCoordMatrix: Float32Array,
+    texSizeSDF: [number, number],
+    texSizeIcon: [number, number]
+): UniformValues<SymbolIconUniformsType> => {
+    return extend(symbolSDFUniformValues(functionType, size,
+        rotateInShader, pitchWithMap, painter, matrix, labelPlaneMatrix,
+        glCoordMatrix, true, texSizeSDF, true), {
+        'u_texsize_icon': texSizeIcon,
+        'u_texture_icon': 1
+    });
+};
+
+export {symbolIconUniforms, symbolSDFUniforms, symbolIconUniformValues, symbolSDFUniformValues, symbolTextAndIconUniformValues, symbolTextAndIconUniforms};

package/src/render/program.js

@@ -0,0 +1,188 @@
+// @flow
+
+import {prelude} from '../shaders';
+import assert from 'assert';
+import ProgramConfiguration from '../data/program_configuration';
+import VertexArrayObject from './vertex_array_object';
+import Context from '../gl/context';
+
+import type SegmentVector from '../data/segment';
+import type VertexBuffer from '../gl/vertex_buffer';
+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 CullFaceMode from '../gl/cull_face_mode';
+import type {UniformBindings, UniformValues, UniformLocations} from './uniform_binding';
+import type {BinderUniform} from '../data/program_configuration';
+
+export type DrawMode =
+    | $PropertyType<WebGLRenderingContext, 'LINES'>
+    | $PropertyType<WebGLRenderingContext, 'TRIANGLES'>
+    | $PropertyType<WebGLRenderingContext, 'LINE_STRIP'>;
+
+function getTokenizedAttributesAndUniforms (array: Array<string>): Array<string> {
+    const result = [];
+
+    for (let i = 0; i < array.length; i++) {
+        if (array[i] === null) continue;
+        const token = array[i].split(' ');
+        result.push(token.pop());
+    }
+    return result;
+}
+class Program<Us: UniformBindings> {
+    program: WebGLProgram;
+    attributes: {[_: string]: number};
+    numAttributes: number;
+    fixedUniforms: Us;
+    binderUniforms: Array<BinderUniform>;
+    failedToCreate: boolean;
+
+    constructor(context: Context,
+            name: string,
+            source: {fragmentSource: string, vertexSource: string, staticAttributes: Array<string>, staticUniforms: Array<string>},
+            configuration: ?ProgramConfiguration,
+            fixedUniforms: (Context, UniformLocations) => Us,
+            showOverdrawInspector: boolean) {
+        const gl = context.gl;
+        this.program = gl.createProgram();
+
+        const staticAttrInfo = getTokenizedAttributesAndUniforms(source.staticAttributes);
+        const dynamicAttrInfo = configuration ? configuration.getBinderAttributes() : [];
+        const allAttrInfo = staticAttrInfo.concat(dynamicAttrInfo);
+
+        const staticUniformsInfo = source.staticUniforms ? getTokenizedAttributesAndUniforms(source.staticUniforms) : [];
+        const dynamicUniformsInfo = configuration ? configuration.getBinderUniforms() : [];
+        // remove duplicate uniforms
+        const uniformList = staticUniformsInfo.concat(dynamicUniformsInfo);
+        const allUniformsInfo = [];
+        for (const uniform of uniformList) {
+            if (allUniformsInfo.indexOf(uniform) < 0) allUniformsInfo.push(uniform);
+        }
+
+        const defines = configuration ? configuration.defines() : [];
+        if (showOverdrawInspector) {
+            defines.push('#define OVERDRAW_INSPECTOR;');
+        }
+
+        const fragmentSource = defines.concat(prelude.fragmentSource, source.fragmentSource).join('\n');
+        const vertexSource = defines.concat(prelude.vertexSource, source.vertexSource).join('\n');
+        const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+        if (gl.isContextLost()) {
+            this.failedToCreate = true;
+            return;
+        }
+        gl.shaderSource(fragmentShader, fragmentSource);
+        gl.compileShader(fragmentShader);
+        assert(gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS), (gl.getShaderInfoLog(fragmentShader): any));
+        gl.attachShader(this.program, fragmentShader);
+
+        const vertexShader = gl.createShader(gl.VERTEX_SHADER);
+        if (gl.isContextLost()) {
+            this.failedToCreate = true;
+            return;
+        }
+        gl.shaderSource(vertexShader, vertexSource);
+        gl.compileShader(vertexShader);
+        assert(gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS), (gl.getShaderInfoLog(vertexShader): any));
+        gl.attachShader(this.program, vertexShader);
+
+        this.attributes = {};
+        const uniformLocations = {};
+
+        this.numAttributes = allAttrInfo.length;
+
+        for (let i = 0; i < this.numAttributes; i++) {
+            if (allAttrInfo[i]) {
+                gl.bindAttribLocation(this.program, i, allAttrInfo[i]);
+                this.attributes[allAttrInfo[i]] = i;
+            }
+        }
+
+        gl.linkProgram(this.program);
+        assert(gl.getProgramParameter(this.program, gl.LINK_STATUS), (gl.getProgramInfoLog(this.program): any));
+
+        gl.deleteShader(vertexShader);
+        gl.deleteShader(fragmentShader);
+
+        for (let it = 0; it < allUniformsInfo.length; it++) {
+            const uniform = allUniformsInfo[it];
+            if (uniform && !uniformLocations[uniform]) {
+                const uniformLocation = gl.getUniformLocation(this.program, uniform);
+                if (uniformLocation) {
+                    uniformLocations[uniform] = uniformLocation;
+                }
+            }
+        }
+
+        this.fixedUniforms = fixedUniforms(context, uniformLocations);
+        this.binderUniforms = configuration ? configuration.getUniforms(context, uniformLocations) : [];
+    }
+
+    draw(context: Context,
+         drawMode: DrawMode,
+         depthMode: $ReadOnly<DepthMode>,
+         stencilMode: $ReadOnly<StencilMode>,
+         colorMode: $ReadOnly<ColorMode>,
+         cullFaceMode: $ReadOnly<CullFaceMode>,
+         uniformValues: UniformValues<Us>,
+         layerID: string,
+         layoutVertexBuffer: VertexBuffer,
+         indexBuffer: IndexBuffer,
+         segments: SegmentVector,
+         currentProperties: any,
+         zoom: ?number,
+         configuration: ?ProgramConfiguration,
+         dynamicLayoutBuffer: ?VertexBuffer,
+         dynamicLayoutBuffer2: ?VertexBuffer) {
+
+        const gl = context.gl;
+
+        if (this.failedToCreate) return;
+
+        context.program.set(this.program);
+        context.setDepthMode(depthMode);
+        context.setStencilMode(stencilMode);
+        context.setColorMode(colorMode);
+        context.setCullFace(cullFaceMode);
+
+        for (const name in this.fixedUniforms) {
+            this.fixedUniforms[name].set(uniformValues[name]);
+        }
+
+        if (configuration) {
+            configuration.setUniforms(context, this.binderUniforms, currentProperties, {zoom: (zoom: any)});
+        }
+
+        const primitiveSize = {
+            [gl.LINES]: 2,
+            [gl.TRIANGLES]: 3,
+            [gl.LINE_STRIP]: 1
+        }[drawMode];
+
+        for (const segment of segments.get()) {
+            const vaos = segment.vaos || (segment.vaos = {});
+            const vao: VertexArrayObject = vaos[layerID] || (vaos[layerID] = new VertexArrayObject());
+
+            vao.bind(
+                context,
+                this,
+                layoutVertexBuffer,
+                configuration ? configuration.getPaintVertexBuffers() : [],
+                indexBuffer,
+                segment.vertexOffset,
+                dynamicLayoutBuffer,
+                dynamicLayoutBuffer2
+            );
+
+            gl.drawElements(
+                drawMode,
+                segment.primitiveLength * primitiveSize,
+                gl.UNSIGNED_SHORT,
+                segment.primitiveOffset * primitiveSize * 2);
+        }
+    }
+}
+
+export default Program;

package/src/render/texture.js

@@ -0,0 +1,122 @@
+// @flow
+
+import window from '../util/window';
+const {HTMLImageElement, HTMLCanvasElement, HTMLVideoElement, ImageData, ImageBitmap} = window;
+
+import type Context from '../gl/context';
+import type {RGBAImage, AlphaImage} from '../util/image';
+
+export type TextureFormat =
+    | $PropertyType<WebGLRenderingContext, 'RGBA'>
+    | $PropertyType<WebGLRenderingContext, 'ALPHA'>;
+export type TextureFilter =
+    | $PropertyType<WebGLRenderingContext, 'LINEAR'>
+    | $PropertyType<WebGLRenderingContext, 'LINEAR_MIPMAP_NEAREST'>
+    | $PropertyType<WebGLRenderingContext, 'NEAREST'>;
+export type TextureWrap =
+    | $PropertyType<WebGLRenderingContext, 'REPEAT'>
+    | $PropertyType<WebGLRenderingContext, 'CLAMP_TO_EDGE'>
+    | $PropertyType<WebGLRenderingContext, 'MIRRORED_REPEAT'>;
+
+type EmptyImage = {
+    width: number,
+    height: number,
+    data: null
+}
+
+export type TextureImage =
+    | RGBAImage
+    | AlphaImage
+    | HTMLImageElement
+    | HTMLCanvasElement
+    | HTMLVideoElement
+    | ImageData
+    | EmptyImage
+    | ImageBitmap;
+
+class Texture {
+    context: Context;
+    size: [number, number];
+    texture: WebGLTexture;
+    format: TextureFormat;
+    filter: ?TextureFilter;
+    wrap: ?TextureWrap;
+    useMipmap: boolean;
+
+    constructor(context: Context, image: TextureImage, format: TextureFormat, options: ?{ premultiply?: boolean, useMipmap?: boolean }) {
+        this.context = context;
+        this.format = format;
+        this.texture = context.gl.createTexture();
+        this.update(image, options);
+    }
+
+    update(image: TextureImage, options: ?{premultiply?: boolean, useMipmap?: boolean}, position?: { x: number, y: number }) {
+        const {width, height} = image;
+        const resize = (!this.size || this.size[0] !== width || this.size[1] !== height) && !position;
+        const {context} = this;
+        const {gl} = context;
+
+        this.useMipmap = Boolean(options && options.useMipmap);
+        gl.bindTexture(gl.TEXTURE_2D, this.texture);
+
+        context.pixelStoreUnpackFlipY.set(false);
+        context.pixelStoreUnpack.set(1);
+        context.pixelStoreUnpackPremultiplyAlpha.set(this.format === gl.RGBA && (!options || options.premultiply !== false));
+
+        if (resize) {
+            this.size = [width, height];
+
+            if (image instanceof HTMLImageElement || image instanceof HTMLCanvasElement || image instanceof HTMLVideoElement || image instanceof ImageData || (ImageBitmap && image instanceof ImageBitmap)) {
+                gl.texImage2D(gl.TEXTURE_2D, 0, this.format, this.format, gl.UNSIGNED_BYTE, image);
+            } else {
+                gl.texImage2D(gl.TEXTURE_2D, 0, this.format, width, height, 0, this.format, gl.UNSIGNED_BYTE, image.data);
+            }
+
+        } else {
+            const {x, y} = position || {x: 0, y: 0};
+            if (image instanceof HTMLImageElement || image instanceof HTMLCanvasElement || image instanceof HTMLVideoElement || image instanceof ImageData || (ImageBitmap && image instanceof ImageBitmap)) {
+                gl.texSubImage2D(gl.TEXTURE_2D, 0, x, y, gl.RGBA, gl.UNSIGNED_BYTE, image);
+            } else {
+                gl.texSubImage2D(gl.TEXTURE_2D, 0, x, y, width, height, gl.RGBA, gl.UNSIGNED_BYTE, image.data);
+            }
+        }
+
+        if (this.useMipmap && this.isSizePowerOfTwo()) {
+            gl.generateMipmap(gl.TEXTURE_2D);
+        }
+    }
+
+    bind(filter: TextureFilter, wrap: TextureWrap, minFilter: ?TextureFilter) {
+        const {context} = this;
+        const {gl} = context;
+        gl.bindTexture(gl.TEXTURE_2D, this.texture);
+
+        if (minFilter === gl.LINEAR_MIPMAP_NEAREST && !this.isSizePowerOfTwo()) {
+            minFilter = gl.LINEAR;
+        }
+
+        if (filter !== this.filter) {
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, minFilter || filter);
+            this.filter = filter;
+        }
+
+        if (wrap !== this.wrap) {
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, wrap);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, wrap);
+            this.wrap = wrap;
+        }
+    }
+
+    isSizePowerOfTwo() {
+        return this.size[0] === this.size[1] && (Math.log(this.size[0]) / Math.LN2) % 1 === 0;
+    }
+
+    destroy() {
+        const {gl} = this.context;
+        gl.deleteTexture(this.texture);
+        this.texture = (null: any);
+    }
+}
+
+export default Texture;

package/src/render/uniform_binding.js

@@ -0,0 +1,147 @@
+// @flow
+
+import Color from '../style-spec/util/color';
+
+import type Context from '../gl/context';
+
+export type UniformValues<Us: Object>
+    = $Exact<$ObjMap<Us, <V>(u: Uniform<V>) => V>>;
+export type UniformLocations = {[_: string]: WebGLUniformLocation};
+
+class Uniform<T> {
+    gl: WebGLRenderingContext;
+    location: ?WebGLUniformLocation;
+    current: T;
+
+    constructor(context: Context, location: WebGLUniformLocation) {
+        this.gl = context.gl;
+        this.location = location;
+    }
+
+    +set: (v: T) => void;
+}
+
+class Uniform1i extends Uniform<number> {
+    constructor(context: Context, location: WebGLUniformLocation) {
+        super(context, location);
+        this.current = 0;
+    }
+
+    set(v: number): void {
+        if (this.current !== v) {
+            this.current = v;
+            this.gl.uniform1i(this.location, v);
+        }
+    }
+}
+
+class Uniform1f extends Uniform<number> {
+    constructor(context: Context, location: WebGLUniformLocation) {
+        super(context, location);
+        this.current = 0;
+    }
+
+    set(v: number): void {
+        if (this.current !== v) {
+            this.current = v;
+            this.gl.uniform1f(this.location, v);
+        }
+    }
+}
+
+class Uniform2f extends Uniform<[number, number]> {
+    constructor(context: Context, location: WebGLUniformLocation) {
+        super(context, location);
+        this.current = [0, 0];
+    }
+
+    set(v: [number, number]): void {
+        if (v[0] !== this.current[0] || v[1] !== this.current[1]) {
+            this.current = v;
+            this.gl.uniform2f(this.location, v[0], v[1]);
+        }
+    }
+}
+
+class Uniform3f extends Uniform<[number, number, number]> {
+    constructor(context: Context, location: WebGLUniformLocation) {
+        super(context, location);
+        this.current = [0, 0, 0];
+    }
+
+    set(v: [number, number, number]): void {
+        if (v[0] !== this.current[0] || v[1] !== this.current[1] || v[2] !== this.current[2]) {
+            this.current = v;
+            this.gl.uniform3f(this.location, v[0], v[1], v[2]);
+        }
+    }
+}
+
+class Uniform4f extends Uniform<[number, number, number, number]> {
+    constructor(context: Context, location: WebGLUniformLocation) {
+        super(context, location);
+        this.current = [0, 0, 0, 0];
+    }
+
+    set(v: [number, number, number, number]): void {
+        if (v[0] !== this.current[0] || v[1] !== this.current[1] ||
+            v[2] !== this.current[2] || v[3] !== this.current[3]) {
+            this.current = v;
+            this.gl.uniform4f(this.location, v[0], v[1], v[2], v[3]);
+        }
+    }
+}
+
+class UniformColor extends Uniform<Color> {
+    constructor(context: Context, location: WebGLUniformLocation) {
+        super(context, location);
+        this.current = Color.transparent;
+    }
+
+    set(v: Color): void {
+        if (v.r !== this.current.r || v.g !== this.current.g ||
+            v.b !== this.current.b || v.a !== this.current.a) {
+            this.current = v;
+            this.gl.uniform4f(this.location, v.r, v.g, v.b, v.a);
+        }
+    }
+}
+
+const emptyMat4 = new Float32Array(16);
+class UniformMatrix4f extends Uniform<Float32Array> {
+    constructor(context: Context, location: WebGLUniformLocation) {
+        super(context, location);
+        this.current = emptyMat4;
+    }
+
+    set(v: Float32Array): void {
+        // The vast majority of matrix comparisons that will trip this set
+        // happen at i=12 or i=0, so we check those first to avoid lots of
+        // unnecessary iteration:
+        if (v[12] !== this.current[12] || v[0] !== this.current[0]) {
+            this.current = v;
+            this.gl.uniformMatrix4fv(this.location, false, v);
+            return;
+        }
+        for (let i = 1; i < 16; i++) {
+            if (v[i] !== this.current[i]) {
+                this.current = v;
+                this.gl.uniformMatrix4fv(this.location, false, v);
+                break;
+            }
+        }
+    }
+}
+
+export {
+    Uniform,
+    Uniform1i,
+    Uniform1f,
+    Uniform2f,
+    Uniform3f,
+    Uniform4f,
+    UniformColor,
+    UniformMatrix4f
+};
+
+export type UniformBindings = {[_: string]: Uniform<any>};