@scoova/mgl 1.0.0

package/src/render/uniform_binding.test.ts

@@ -0,0 +1,122 @@
+import {mat4} from 'gl-matrix';
+import {Context} from '../gl/context';
+import {
+    Uniform1i,
+    Uniform1f,
+    Uniform2f,
+    Uniform3f,
+    Uniform4f,
+    UniformMatrix4f
+} from './uniform_binding';
+
+describe('Uniform Binding', () => {
+    test('Uniform1i', () => {
+        // test counts ensure we don't call the gl.uniform* setters more than expected
+        expect.assertions(4);
+
+        const context = {
+            gl: {
+                uniform1i: () => { expect(true).toBeTruthy(); }
+            }
+        } as any as Context;
+
+        const u = new Uniform1i(context, 0);
+
+        expect(u.current).toBe(0);
+        u.set(1);
+        expect(u.current).toBe(1);
+        u.set(1);
+        u.set(2);
+    });
+
+    test('Uniform1f', () => {
+        expect.assertions(4);
+
+        const context = {
+            gl: {
+                uniform1f: () => { expect(true).toBeTruthy(); }
+            }
+        } as any as Context;
+
+        const u = new Uniform1f(context, 0);
+
+        expect(u.current).toBe(0);
+        u.set(1);
+        expect(u.current).toBe(1);
+        u.set(1);
+        u.set(2);
+    });
+
+    test('Uniform2f', () => {
+        expect.assertions(4);
+
+        const context = {
+            gl: {
+                uniform2f: () => { expect(true).toBeTruthy(); }
+            }
+        } as any as Context;
+
+        const u = new Uniform2f(context, 0);
+
+        expect(u.current).toEqual([0, 0]);
+        u.set([1, 1]);
+        expect(u.current).toEqual([1, 1]);
+        u.set([1, 1]);
+        u.set([1, 2]);
+    });
+
+    test('Uniform3f', () => {
+        expect.assertions(4);
+
+        const context = {
+            gl: {
+                uniform3f: () => { expect(true).toBeTruthy(); }
+            }
+        } as any as Context;
+
+        const u = new Uniform3f(context, 0);
+
+        expect(u.current).toEqual([0, 0, 0]);
+        u.set([1, 1, 1]);
+        expect(u.current).toEqual([1, 1, 1]);
+        u.set([1, 1, 1]);
+        u.set([1, 1, 2]);
+    });
+
+    test('Uniform4f', () => {
+        expect.assertions(4);
+
+        const context = {
+            gl: {
+                uniform4f: () => { expect(true).toBeTruthy(); }
+            }
+        } as any as Context;
+
+        const u = new Uniform4f(context, 0);
+
+        expect(u.current).toEqual([0, 0, 0, 0]);
+        u.set([1, 1, 1, 1]);
+        expect(u.current).toEqual([1, 1, 1, 1]);
+        u.set([1, 1, 1, 1]);
+        u.set([2, 1, 1, 1]);
+    });
+
+    test('UniformMatrix4f', () => {
+        expect.assertions(4);
+
+        const context = {
+            gl: {
+                uniformMatrix4fv: () => { expect(true).toBeTruthy(); }
+            }
+        } as any as Context;
+
+        const u = new UniformMatrix4f(context, 0);
+        const ident = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1] as mat4;
+        expect(u.current).toEqual(new Float32Array([0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]));
+        u.set(ident);
+        expect(u.current).toEqual(ident);
+        u.set(ident);
+        u.set([2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
+    });
+
+});

package/src/render/uniform_binding.ts

@@ -0,0 +1,157 @@
+import {Color} from '@maplibre/maplibre-gl-style-spec';
+
+import type {Context} from '../gl/context';
+import {mat4, vec2, vec3, vec4} from 'gl-matrix';
+
+type $ObjMap<T extends {}, F extends (v: any) => any> = {
+    [K in keyof T]: F extends (v: T[K]) => infer R ? R : never;
+};
+
+export type UniformValues<Us extends {}> = $ObjMap<Us, <V>(u: Uniform<V>) => V>;
+export type UniformLocations = {[_: string]: WebGLUniformLocation};
+
+/**
+ * @internal
+ * A base uniform abstract class
+ */
+abstract class Uniform<T> {
+    gl: WebGLRenderingContext|WebGL2RenderingContext;
+    location: WebGLUniformLocation;
+    current: T;
+
+    constructor(context: Context, location: WebGLUniformLocation) {
+        this.gl = context.gl;
+        this.location = location;
+    }
+
+    abstract 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<vec2> {
+    constructor(context: Context, location: WebGLUniformLocation) {
+        super(context, location);
+        this.current = [0, 0];
+    }
+
+    set(v: vec2): 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<vec3> {
+    constructor(context: Context, location: WebGLUniformLocation) {
+        super(context, location);
+        this.current = [0, 0, 0];
+    }
+
+    set(v: vec3): 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<vec4> {
+    constructor(context: Context, location: WebGLUniformLocation) {
+        super(context, location);
+        this.current = [0, 0, 0, 0];
+    }
+
+    set(v: vec4): 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) as mat4;
+class UniformMatrix4f extends Uniform<mat4> {
+    constructor(context: Context, location: WebGLUniformLocation) {
+        super(context, location);
+        this.current = emptyMat4;
+    }
+
+    set(v: mat4): 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
+};
+
+/**
+ * @internal
+ * A uniform bindings
+ */
+export type UniformBindings = {[_: string]: Uniform<any>};

package/src/render/update_pattern_positions_in_program.test.ts

@@ -0,0 +1,74 @@
+import {Tile} from '../source/tile';
+import {OverscaledTileID} from '../source/tile_id';
+import {updatePatternPositionsInProgram} from './update_pattern_positions_in_program';
+import {FillStyleLayer} from '../style/style_layer/fill_style_layer';
+import type {CrossFaded} from '../style/properties';
+import type {FillLayerSpecification, ResolvedImage} from '@maplibre/maplibre-gl-style-spec';
+import type {ProgramConfiguration} from '../data/program_configuration';
+import type {ImagePosition} from './image_atlas';
+import type {Rect} from './glyph_atlas';
+
+interface MockProgramConfiguration extends ProgramConfiguration {
+    patternPositions: {
+        posFrom: Rect;
+        posTo: Rect;
+    };
+}
+
+function constructMockProgramConfiguration(): MockProgramConfiguration {
+    const mockProgramConfiguration: MockProgramConfiguration = {patternPositions: {}} as any;
+    mockProgramConfiguration.updatePaintBuffers = jest.fn();
+    mockProgramConfiguration.setConstantPatternPositions = (posFrom: ImagePosition, posTo: ImagePosition) => {
+        // this does not exist on ProgramConfiguration but we want to test the resulting output
+        mockProgramConfiguration.patternPositions = {posFrom: posFrom.paddedRect, posTo: posTo.paddedRect};
+    };
+
+    return mockProgramConfiguration;
+}
+
+function constructMockFillStyleLayer(): FillStyleLayer {
+    const layerSpec = {
+        id: 'mock-layer',
+        source: 'empty-source',
+        type: 'fill',
+        layout: {},
+        'paint': {
+            'fill-pattern': [
+                'step',
+                ['zoom'],
+                'zoo_11',
+                4,
+                'volcano_11'
+            ]
+        }
+    } as FillLayerSpecification;
+    const layer = new FillStyleLayer(layerSpec);
+    return layer;
+}
+
+describe('updatePatternPositionsInProgram', () => {
+    test('geojson tile', () => {
+        const config = constructMockProgramConfiguration();
+        const tile = new Tile(new OverscaledTileID(3, 0, 2, 1, 2), undefined);
+        tile.imageAtlas = {} as any;
+        tile.imageAtlas.patternPositions = {
+            'volcano_11': {paddedRect: {x: 0, y: 0, w: 0, h: 0}, version: 0, tl: [0, 0], pixelRatio: 1, br: [0, 0], tlbr: [0, 0, 0, 0], displaySize: [0, 0], stretchX: [], stretchY: [], content: [0, 0, 0, 0], textFitWidth: undefined, textFitHeight: undefined},
+        };
+        const crossFadeResolveImage: CrossFaded<ResolvedImage> = {
+            from: {name: 'zoo_11', available: false, toString: () => 'zoo_11'},
+            to: {name: 'volcano_11', available: false, toString: () => 'volcano_11'}
+        };
+        updatePatternPositionsInProgram(
+            config,
+            'fill-pattern',
+            crossFadeResolveImage,
+            tile,
+            constructMockFillStyleLayer()
+        );
+        // we added this property to just see what the update looks like
+        expect(config.patternPositions).toEqual({
+            posFrom: {x: 0, y: 0, w: 0, h: 0},
+            posTo: {x: 0, y: 0, w: 0, h: 0}
+        });
+    });
+});

package/src/render/update_pattern_positions_in_program.ts

@@ -0,0 +1,50 @@
+import type {CrossFaded} from '../style/properties';
+import type {ResolvedImage} from '@maplibre/maplibre-gl-style-spec';
+import type {Tile} from '../source/tile';
+import type {ProgramConfiguration} from '../data/program_configuration';
+import type {FillExtrusionStyleLayer} from '../style/style_layer/fill_extrusion_style_layer';
+import type {FillStyleLayer} from '../style/style_layer/fill_style_layer';
+
+/**
+ * A simple helper shared by draw_fill and draw_fill_extrusions to find the correct pattern positions AND update program.
+ * For transitionable properties, especially 'fill-pattern' and 'fill-extrusion-pattern', while rendering certain frames
+ * tile.imageAtlas has been updated by worker to hold the new pattern only, but rendering code is still looking for the previous image.
+ * The mismatch was causing setConstantPatternPositions method not being called and pixelRatio was always the
+ * default of 1, instead of actual values set by original map.addImage.
+ *
+ * @param programConfiguration - to be used to set pattern position and device pixel ratio.
+ * @param propertyName - 'fill-pattern' or 'fill-extrusion-pattern' property key
+ * @param constantPattern - either 'fill-pattern' or 'fill-extrusion-pattern' property value
+ * @param tile - current tile being drawn
+ * @param layer - current layer being rendered
+ */
+export function updatePatternPositionsInProgram(
+    programConfiguration: ProgramConfiguration,
+    propertyName: 'fill-pattern' | 'fill-extrusion-pattern',
+    constantPattern: CrossFaded<ResolvedImage>,
+    tile: Tile,
+    layer: FillStyleLayer | FillExtrusionStyleLayer): void {
+
+    if (!constantPattern || !tile || !tile.imageAtlas) {
+        return;
+    }
+
+    const patternPositions = tile.imageAtlas.patternPositions;
+    let posTo = patternPositions[constantPattern.to.toString()];
+    let posFrom = patternPositions[constantPattern.from.toString()];
+
+    // https://github.com/maplibre/maplibre-gl-js/issues/3377
+    if (!posTo && posFrom) posTo = posFrom;
+    if (!posFrom && posTo) posFrom = posTo;
+
+    // try again in case patternPositions has been updated by worker
+    if (!posTo || !posFrom) {
+        const transitioned = layer.getPaintProperty(propertyName) as string;
+        posTo = patternPositions[transitioned];
+        posFrom = patternPositions[transitioned];
+    }
+
+    if (posTo && posFrom) {
+        programConfiguration.setConstantPatternPositions(posTo, posFrom);
+    }
+}

package/src/render/vertex_array_object.ts

@@ -0,0 +1,163 @@
+
+import type {Program} from './program';
+import type {VertexBuffer} from '../gl/vertex_buffer';
+import type {IndexBuffer} from '../gl/index_buffer';
+import type {Context} from '../gl/context';
+
+/**
+ * @internal
+ * A vertex array object used to pass data to the webgl code
+ */
+export class VertexArrayObject {
+    context: Context;
+    boundProgram: Program<any>;
+    boundLayoutVertexBuffer: VertexBuffer;
+    boundPaintVertexBuffers: Array<VertexBuffer>;
+    boundIndexBuffer: IndexBuffer;
+    boundVertexOffset: number;
+    boundDynamicVertexBuffer: VertexBuffer;
+    boundDynamicVertexBuffer2: VertexBuffer;
+    boundDynamicVertexBuffer3: VertexBuffer;
+    vao: any;
+
+    constructor() {
+        this.boundProgram = null;
+        this.boundLayoutVertexBuffer = null;
+        this.boundPaintVertexBuffers = [];
+        this.boundIndexBuffer = null;
+        this.boundVertexOffset = null;
+        this.boundDynamicVertexBuffer = null;
+        this.vao = null;
+    }
+
+    bind(context: Context,
+        program: Program<any>,
+        layoutVertexBuffer: VertexBuffer,
+        paintVertexBuffers: Array<VertexBuffer>,
+        indexBuffer?: IndexBuffer | null,
+        vertexOffset?: number | null,
+        dynamicVertexBuffer?: VertexBuffer | null,
+        dynamicVertexBuffer2?: VertexBuffer | null,
+        dynamicVertexBuffer3?: VertexBuffer | null) {
+
+        this.context = context;
+
+        let paintBuffersDiffer = this.boundPaintVertexBuffers.length !== paintVertexBuffers.length;
+        for (let i = 0; !paintBuffersDiffer && i < paintVertexBuffers.length; i++) {
+            if (this.boundPaintVertexBuffers[i] !== paintVertexBuffers[i]) {
+                paintBuffersDiffer = true;
+            }
+        }
+
+        const isFreshBindRequired = (
+            !this.vao ||
+            this.boundProgram !== program ||
+            this.boundLayoutVertexBuffer !== layoutVertexBuffer ||
+            paintBuffersDiffer ||
+            this.boundIndexBuffer !== indexBuffer ||
+            this.boundVertexOffset !== vertexOffset ||
+            this.boundDynamicVertexBuffer !== dynamicVertexBuffer ||
+            this.boundDynamicVertexBuffer2 !== dynamicVertexBuffer2 ||
+            this.boundDynamicVertexBuffer3 !== dynamicVertexBuffer3
+        );
+
+        if (isFreshBindRequired) {
+            this.freshBind(program, layoutVertexBuffer, paintVertexBuffers, indexBuffer, vertexOffset, dynamicVertexBuffer, dynamicVertexBuffer2, dynamicVertexBuffer3);
+        } else {
+            context.bindVertexArray.set(this.vao);
+
+            if (dynamicVertexBuffer) {
+                // The buffer may have been updated. Rebind to upload data.
+                dynamicVertexBuffer.bind();
+            }
+
+            if (indexBuffer && indexBuffer.dynamicDraw) {
+                indexBuffer.bind();
+            }
+
+            if (dynamicVertexBuffer2) {
+                dynamicVertexBuffer2.bind();
+            }
+
+            if (dynamicVertexBuffer3) {
+                dynamicVertexBuffer3.bind();
+            }
+        }
+    }
+
+    freshBind(program: Program<any>,
+        layoutVertexBuffer: VertexBuffer,
+        paintVertexBuffers: Array<VertexBuffer>,
+        indexBuffer?: IndexBuffer | null,
+        vertexOffset?: number | null,
+        dynamicVertexBuffer?: VertexBuffer | null,
+        dynamicVertexBuffer2?: VertexBuffer | null,
+        dynamicVertexBuffer3?: VertexBuffer | null) {
+
+        const numNextAttributes = program.numAttributes;
+
+        const context = this.context;
+        const gl = context.gl;
+
+        if (this.vao) this.destroy();
+        this.vao = context.createVertexArray();
+        context.bindVertexArray.set(this.vao);
+
+        // store the arguments so that we can verify them when the vao is bound again
+        this.boundProgram = program;
+        this.boundLayoutVertexBuffer = layoutVertexBuffer;
+        this.boundPaintVertexBuffers = paintVertexBuffers;
+        this.boundIndexBuffer = indexBuffer;
+        this.boundVertexOffset = vertexOffset;
+        this.boundDynamicVertexBuffer = dynamicVertexBuffer;
+        this.boundDynamicVertexBuffer2 = dynamicVertexBuffer2;
+        this.boundDynamicVertexBuffer3 = dynamicVertexBuffer3;
+
+        layoutVertexBuffer.enableAttributes(gl, program);
+        for (const vertexBuffer of paintVertexBuffers) {
+            vertexBuffer.enableAttributes(gl, program);
+        }
+
+        if (dynamicVertexBuffer) {
+            dynamicVertexBuffer.enableAttributes(gl, program);
+        }
+        if (dynamicVertexBuffer2) {
+            dynamicVertexBuffer2.enableAttributes(gl, program);
+        }
+        if (dynamicVertexBuffer3) {
+            dynamicVertexBuffer3.enableAttributes(gl, program);
+        }
+
+        layoutVertexBuffer.bind();
+        layoutVertexBuffer.setVertexAttribPointers(gl, program, vertexOffset);
+        for (const vertexBuffer of paintVertexBuffers) {
+            vertexBuffer.bind();
+            vertexBuffer.setVertexAttribPointers(gl, program, vertexOffset);
+        }
+
+        if (dynamicVertexBuffer) {
+            dynamicVertexBuffer.bind();
+            dynamicVertexBuffer.setVertexAttribPointers(gl, program, vertexOffset);
+        }
+        if (indexBuffer) {
+            indexBuffer.bind();
+        }
+        if (dynamicVertexBuffer2) {
+            dynamicVertexBuffer2.bind();
+            dynamicVertexBuffer2.setVertexAttribPointers(gl, program, vertexOffset);
+        }
+        if (dynamicVertexBuffer3) {
+            dynamicVertexBuffer3.bind();
+            dynamicVertexBuffer3.setVertexAttribPointers(gl, program, vertexOffset);
+        }
+
+        context.currentNumAttributes = numNextAttributes;
+    }
+
+    destroy() {
+        if (this.vao) {
+            this.context.deleteVertexArray(this.vao);
+            this.vao = null;
+        }
+    }
+}

package/src/shaders/README.md

@@ -0,0 +1,42 @@
+# MapLibre GL JS Shaders
+
+This repository contains the GLSL shaders
+
+## Pragmas
+
+Some variables change type depending on their context:
+
+ - if the variable is the same for all features, we declare it as a `uniform`
+ - if the variable is different for each feature, we declare it as an `attribute` (in the vertex shader) and an accompanying `varying` (in both the vertex and fragment shaders).
+ - if the variable is different for each feature and a function of zoom, we declare several `attributes` and `uniforms` then calculate the value using interpolation
+
+We abstract over this functionality using pragmas.
+
+```glsl
+#pragma mapbox: define highp vec4 color
+
+main() {
+    #pragma mapbox: initialize highp vec4 color
+    ...
+    fragColor = color;
+}
+```
+
+This program defines a variable within `main` called `color`, initialize the value of `color`, then sets `fragColor` to the value of `color`.
+
+Pragmas take the following form.
+
+```glsl
+#pragma mapbox: (define|initialize) (lowp|mediump|highp) (float|vec2|vec3|vec4) {name}
+```
+
+When using pragmas, the following requirements apply.
+
+ - all pragma-defined variables must have both `define` and `initialize` pragmas
+ - `define` pragmas must be in file scope
+ - `initialize` pragmas must be in function scope
+ - all pragma-defined variables defined and initialized in the fragment shader must also be defined and initialized in the vertex shader because `attribute`s are not accessible from the fragment shader
+
+## Prelude
+
+The `_prelude.fragment.glsl` and `_prelude.vertex.glsl` files are automatically included in all shaders by the compiler.

package/src/shaders/_prelude.fragment.glsl

@@ -0,0 +1,19 @@
+#ifdef GL_ES
+precision mediump float;
+#else
+
+#if !defined(lowp)
+#define lowp
+#endif
+
+#if !defined(mediump)
+#define mediump
+#endif
+
+#if !defined(highp)
+#define highp
+#endif
+
+#endif
+
+out highp vec4 fragColor;

package/src/shaders/_prelude.fragment.glsl.g.ts

@@ -0,0 +1,2 @@
+// This file is generated. Edit build/generate-shaders.ts, then run `npm run codegen`.
+export default '#ifdef GL_ES\nprecision mediump float;\n#else\n#if !defined(lowp)\n#define lowp\n#endif\n#if !defined(mediump)\n#define mediump\n#endif\n#if !defined(highp)\n#define highp\n#endif\n#endif\n';