maplibre-gl 6.0.0 → 6.2.0

package/src/webgl/program/projection_program.ts

@@ -1,6 +1,5 @@
-import {Uniform1f, Uniform4f, type UniformLocations, UniformMatrix4f} from '../uniform_binding.ts';
+import {Uniform1f, Uniform1i, Uniform4f, type UniformLocations, type UniformValues, UniformMatrix4f} from '../uniform_binding.ts';
 import {type Context} from '../../webgl/context.ts';
-// This next import is needed for the "@link" in the documentation to work properly.
 
 import type {ProjectionData} from '../../geo/projection/projection_data.ts';
 
@@ -10,6 +9,7 @@ export type ProjectionPreludeUniformsType = {
     'u_projection_clipping_plane': Uniform4f;
     'u_projection_transition': Uniform1f;
     'u_projection_fallback_matrix': UniformMatrix4f;
+    'u_projection_clip_antimeridian': Uniform1i;
 };
 
 export const projectionUniforms = (context: Context, locations: UniformLocations): ProjectionPreludeUniformsType => ({
@@ -18,15 +18,17 @@ export const projectionUniforms = (context: Context, locations: UniformLocations
     'u_projection_clipping_plane': new Uniform4f(context, locations.u_projection_clipping_plane),
     'u_projection_transition': new Uniform1f(context, locations.u_projection_transition),
     'u_projection_fallback_matrix': new UniformMatrix4f(context, locations.u_projection_fallback_matrix),
+    'u_projection_clip_antimeridian': new Uniform1i(context, locations.u_projection_clip_antimeridian),
 });
 
 /**
- * Maps a field name in {@link ProjectionData} to its corresponding uniform name in {@link ProjectionPreludeUniformsType}.
+ * Converts a {@link ProjectionData} object into the values expected by the projection prelude's uniforms.
  */
-export const projectionObjectToUniformMap: {[field in keyof ProjectionData]: keyof ProjectionPreludeUniformsType} = {
-    mainMatrix: 'u_projection_matrix',
-    tileMercatorCoords: 'u_projection_tile_mercator_coords',
-    clippingPlane: 'u_projection_clipping_plane',
-    projectionTransition: 'u_projection_transition',
-    fallbackMatrix: 'u_projection_fallback_matrix',
-};
+export const projectionUniformValues = (projectionData: ProjectionData): UniformValues<ProjectionPreludeUniformsType> => ({
+    'u_projection_matrix': projectionData.mainMatrix,
+    'u_projection_tile_mercator_coords': projectionData.tileMercatorCoords,
+    'u_projection_clipping_plane': projectionData.clippingPlane,
+    'u_projection_transition': projectionData.projectionTransition,
+    'u_projection_fallback_matrix': projectionData.fallbackMatrix,
+    'u_projection_clip_antimeridian': projectionData.clipAntimeridian ? 1 : 0,
+});

package/src/webgl/program/terrain_program.test.ts

@@ -7,7 +7,7 @@ describe('terrainUniformValues', () => {
     test('disables fog when in globe projection mode', () => {
         const eleDelta = 1.0;
         const fogMatrix = mat4.create();
-        const sky = new Sky({});
+        const sky = new Sky({}, {});
         const pitch = 45;
         const isGlobeMode = true;
         const uniformValues = terrainUniformValues(eleDelta, fogMatrix, sky, pitch, isGlobeMode);
@@ -22,7 +22,7 @@ describe('terrainUniformValues', () => {
     test('enables fog when not in globe projection mode', () => {
         const eleDelta = 1.0;
         const fogMatrix = mat4.create();
-        const sky = new Sky({});
+        const sky = new Sky({}, {});
         const pitch = 45;
         const isGlobeMode = false;
         const uniformValues = terrainUniformValues(eleDelta, fogMatrix, sky, pitch, isGlobeMode);

package/src/webgl/program.ts

@@ -14,7 +14,7 @@ import type {UniformBindings, UniformValues, UniformLocations} from './uniform_b
 import type {BinderUniform} from '../data/program_configuration.ts';
 import {terrainPreludeUniforms, type TerrainPreludeUniformsType} from './program/terrain_program.ts';
 import type {TerrainData} from '../render/terrain.ts';
-import {projectionObjectToUniformMap, type ProjectionPreludeUniformsType, projectionUniforms} from './program/projection_program.ts';
+import {type ProjectionPreludeUniformsType, projectionUniforms, projectionUniformValues} from './program/projection_program.ts';
 import type {ProjectionData} from '../geo/projection/projection_data.ts';
 
 export type DrawMode = WebGLRenderingContextBase['LINES'] | WebGLRenderingContextBase['TRIANGLES'] | WebGL2RenderingContext['LINE_STRIP'];
@@ -135,6 +135,8 @@ export class Program<Us extends UniformBindings> {
             const actual = gl.getAttribLocation(this.program, name);
             if (actual >= 0) {
                 this.attributes[name] = actual;
+            } else {
+                delete this.attributes[name];
             }
         }
 
@@ -202,9 +204,9 @@ export class Program<Us extends UniformBindings> {
         }
 
         if (projectionData) {
-            for (const fieldName in projectionData) {
-                const uniformName = projectionObjectToUniformMap[fieldName];
-                this.projectionUniforms[uniformName].set(projectionData[fieldName]);
+            const values = projectionUniformValues(projectionData);
+            for (const name in this.projectionUniforms) {
+                this.projectionUniforms[name].set(values[name]);
             }
         }
 

package/src/webgl/render_to_texture.test.ts

@@ -1,4 +1,4 @@
-import {beforeEach, describe, test, expect, vi, type Mock} from 'vitest';
+import {beforeEach, describe, test, expect, vi} from 'vitest';
 import {RenderToTexture} from './render_to_texture.ts';
 import type {Painter, RTTObject} from '../render/painter.ts';
 import type {LineStyleLayer} from '../style/style_layer/line_style_layer.ts';
@@ -155,8 +155,8 @@ describe('render to texture', () => {
         tile.rttObjects[0] = obj;
 
         const otherTileID = new OverscaledTileID(3, 0, 2, 2, 2);
-        (terrain.tileManager.getTerrainCoords as Mock).mockReturnValueOnce({[tile.tileID.key]: otherTileID});
-        (painter.releaseRTT as Mock).mockClear();
+        (vi.mocked(terrain.tileManager.getTerrainCoords)).mockReturnValueOnce({[tile.tileID.key]: otherTileID});
+        (vi.mocked(painter.releaseRTT)).mockClear();
 
         rtt.prepareForRender(style, 0);
 
@@ -218,7 +218,7 @@ describe('render to texture', () => {
 
     test('should clear tile cache on source state update', () => {
         const state = {revision: 0};
-        (style.tileManagers['maine'].getState as Mock).mockReturnValue(state);
+        (vi.mocked(style.tileManagers['maine'].getState)).mockReturnValue(state as any);
 
         tile.rttObjects[0] = {texture: {}, size: 512} as unknown as RTTObject;
         tile.rttFingerprint = {maine: '923#0'};
@@ -289,7 +289,7 @@ describe('render to texture', () => {
             }
         } as any as Style;
 
-        (terrain.tileManager.getTerrainCoords as Mock).mockClear();
+        (vi.mocked(terrain.tileManager.getTerrainCoords)).mockClear();
         rtt.prepareForRender(testStyle, 0);
 
         expect(maineTileManager.getVisibleCoordinates).toHaveBeenCalledTimes(1);

package/src/webgl/state.test.ts

@@ -20,7 +20,7 @@ describe('Value classes', () => {
             const v = new Constructor(context);
             expect(v).toBeTruthy();
             const currentV = v.get();
-            expect(typeof currentV).not.toBe('undefined');
+            expect(currentV).not.toBeTypeOf('undefined');
         });
 
         test('set', () => {

package/src/webgl/texture.test.ts

@@ -15,7 +15,7 @@ describe('Texture', () => {
             return new Context(createNullGL());
         }
 
-        function checkPixelStoreState(context: Context): void {
+        function expectPixelStoreState(context: Context): void {
             expect(context.pixelStoreUnpack.current).toEqual(context.pixelStoreUnpack.default);
             expect(context.pixelStoreUnpackFlipY.current).toEqual(context.pixelStoreUnpackFlipY.default);
             expect(context.pixelStoreUnpackPremultiplyAlpha.current).toEqual(context.pixelStoreUnpackPremultiplyAlpha.default);
@@ -26,7 +26,7 @@ describe('Texture', () => {
             // We test the Texture constructor's side effects
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             const _texture = new Texture(context, testImage, context.gl.RGBA, {premultiply: false});
-            checkPixelStoreState(context);
+            expectPixelStoreState(context);
         });
 
         test('premultiply=true', () => {
@@ -34,7 +34,7 @@ describe('Texture', () => {
             // We test the Texture constructor's side effects
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             const _texture = new Texture(context, testImage, context.gl.RGBA, {premultiply: true});
-            checkPixelStoreState(context);
+            expectPixelStoreState(context);
         });
     });
 

package/src/webgl/vertex_buffer.test.ts

@@ -71,7 +71,7 @@ describe('VertexBuffer', () => {
 
         expect(array.arrayBuffer.byteLength).toBe(0);
         expect(array.int16.buffer).not.toBe(originalBuffer);
-        expect(array.int16.length).toBe(0);
+        expect(array.int16).toHaveLength(0);
     });
 
     test('dynamic buffer preserves StructArray data after upload', () => {

package/build/rolldown_plugins.ts

@@ -1,18 +0,0 @@
-import {type Plugin} from 'rolldown';
-import {visualizer} from 'rollup-plugin-visualizer';
-
-const stats = process.env.BUNDLE === 'stats';
-
-export const plugins = (_production: boolean): Plugin[] => stats
-    ? (['treemap', 'sunburst', 'flamegraph', 'network'] as const).map(template =>
-        visualizer({
-            template,
-            title: `gl-js-${template}`,
-            filename: `staging/${template}.html`,
-            gzipSize: true,
-            brotliSize: true,
-            sourcemap: true,
-            open: true,
-        }) as unknown as Plugin
-    )
-    : [];

package/src/geo/projection/globe_projection_error_measurement.ts

@@ -1,229 +0,0 @@
-import {Color} from '@maplibre/maplibre-gl-style-spec';
-import {ColorMode} from '../../webgl/color_mode.ts';
-import {CullFaceMode} from '../../webgl/cull_face_mode.ts';
-import {DepthMode} from '../../webgl/depth_mode.ts';
-import {StencilMode} from '../../webgl/stencil_mode.ts';
-import {warnOnce} from '../../util/util.ts';
-import {projectionErrorMeasurementUniformValues} from '../../webgl/program/projection_error_measurement_program.ts';
-import {Mesh} from '../../render/mesh.ts';
-import {SegmentVector} from '../../data/segment.ts';
-import {PosArray, TriangleIndexArray} from '../../data/array_types.g.ts';
-import posAttributes from '../../data/pos_attributes.ts';
-import {type Framebuffer} from '../../webgl/framebuffer.ts';
-import {type ProjectionGPUContext} from './projection.ts';
-
-/**
- * For vector globe the vertex shader projects mercator coordinates to angular coordinates on a sphere.
- * This projection requires some inverse trigonometry `atan(exp(...))`, which is inaccurate on some GPUs (mainly on AMD and Nvidia).
- * The inaccuracy is severe enough to require a workaround. The uncorrected map is shifted north-south by up to several hundred meters in some latitudes.
- * Since the inaccuracy is hardware-dependant and may change in the future, we need to measure the error at runtime.
- *
- * Our approach relies on several assumptions:
- *
- * - the error is only present in the "latitude" component (longitude doesn't need any inverse trigonometry)
- * - the error is continuous and changes slowly with latitude
- * - at zoom levels where the error is noticeable, the error is more-or-less the same across the entire visible map area (and thus can be described with a single number)
- *
- * Solution:
- *
- * Every few frames, launch a GPU shader that measures the error for the current map center latitude, and writes it to a 1x1 texture.
- * Read back that texture, and offset the globe projection matrix according to the error (interpolating smoothly from old error to new error if needed).
- * The texture readback is done asynchronously using Pixel Pack Buffers (WebGL2) when possible, and has a few frames of latency, but that should not be a problem.
- *
- * General operation of this class each frame is:
- *
- * - render the error shader into a fbo, read that pixel into a PBO, place a fence
- * - wait a few frames to allow the GPU (and driver) to actually execute the shader
- * - wait for the fence to be signalled (guaranteeing the shader to actually be executed)
- * - read back the PBO's contents
- * - wait a few more frames
- * - repeat
- */
-export class ProjectionErrorMeasurement {
-    // We wait at least this many frames after measuring until we read back the value.
-    // After this period, we might wait more frames until a fence is signalled to make sure the rendering is completed.
-    private readonly _readbackWaitFrames = 4;
-    // We wait this many frames after *reading back* a measurement until we trigger measure again.
-    // We could in theory render the measurement pixel immediately, but we wait to make sure
-    // no pipeline stall happens.
-    private readonly _measureWaitFrames = 6;
-    private readonly _texWidth = 1;
-    private readonly _texHeight = 1;
-    private readonly _texFormat: number;
-    private readonly _texType: number;
-
-    private _fullscreenTriangle: Mesh;
-    private _fbo: Framebuffer;
-    private _resultBuffer: Uint8Array;
-    private _pbo: WebGLBuffer;
-    private _cachedRenderContext: ProjectionGPUContext;
-
-    private _measuredError: number = 0; // Result of last measurement
-    private _updateCount: number = 0;
-    private _lastReadbackFrame: number = -1000;
-
-    get awaitingQuery(): boolean {
-        return !!this._readbackQueue;
-    }
-
-    // There is never more than one readback waiting
-    private _readbackQueue: {
-        frameNumberIssued: number; // Frame number when the data was first computed
-        sync: WebGLSync;
-    } = null;
-
-    public constructor(renderContext: ProjectionGPUContext) {
-        this._cachedRenderContext = renderContext;
-
-        const context = renderContext.context;
-        const gl = context.gl;
-
-        this._texFormat = gl.RGBA;
-        this._texType = gl.UNSIGNED_BYTE;
-
-        const vertexArray = new PosArray();
-        vertexArray.emplaceBack(-1, -1);
-        vertexArray.emplaceBack(2, -1);
-        vertexArray.emplaceBack(-1, 2);
-        const indexArray = new TriangleIndexArray();
-        indexArray.emplaceBack(0, 1, 2);
-
-        this._fullscreenTriangle = new Mesh(
-            context.createVertexBuffer(vertexArray, posAttributes.members),
-            context.createIndexBuffer(indexArray),
-            SegmentVector.simpleSegment(0, 0, vertexArray.length, indexArray.length)
-        );
-
-        this._resultBuffer = new Uint8Array(4);
-
-        context.activeTexture.set(gl.TEXTURE1);
-
-        const texture = gl.createTexture();
-        gl.bindTexture(gl.TEXTURE_2D, texture);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
-        gl.texStorage2D(gl.TEXTURE_2D, 1, gl.RGBA8, this._texWidth, this._texHeight);
-
-        this._fbo = context.createFramebuffer(this._texWidth, this._texHeight, false, false);
-        this._fbo.colorAttachment.set(texture);
-
-        this._pbo = gl.createBuffer();
-        gl.bindBuffer(gl.PIXEL_PACK_BUFFER, this._pbo);
-        gl.bufferData(gl.PIXEL_PACK_BUFFER, 4, gl.STREAM_READ);
-        gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
-    }
-
-    public destroy(): void {
-        const gl = this._cachedRenderContext.context.gl;
-        this._fullscreenTriangle.destroy();
-        this._fbo.destroy();
-        gl.deleteBuffer(this._pbo);
-        this._fullscreenTriangle = null;
-        this._fbo = null;
-        this._pbo = null;
-        this._resultBuffer = null;
-    }
-
-    public updateErrorLoop(normalizedMercatorY: number, expectedAngleY: number): number {
-        const currentFrame = this._updateCount;
-
-        if (this._readbackQueue) {
-            // Try to read back if enough frames elapsed. Otherwise do nothing, just wait another frame.
-            if (currentFrame >= this._readbackQueue.frameNumberIssued + this._readbackWaitFrames) {
-                // Try to read back - it is possible that this method does nothing, then
-                // the readback queue will not be cleared and we will retry next frame.
-                this._tryReadback();
-            }
-        } else {
-            if (currentFrame >= this._lastReadbackFrame + this._measureWaitFrames) {
-                this._renderErrorTexture(normalizedMercatorY, expectedAngleY);
-            }
-        }
-
-        this._updateCount++;
-        return this._measuredError;
-    }
-
-    private _bindFramebuffer() {
-        const context = this._cachedRenderContext.context;
-        const gl = context.gl;
-        context.activeTexture.set(gl.TEXTURE1);
-        gl.bindTexture(gl.TEXTURE_2D, this._fbo.colorAttachment.get());
-        context.bindFramebuffer.set(this._fbo.framebuffer);
-    }
-
-    private _renderErrorTexture(input: number, outputExpected: number): void {
-        const context = this._cachedRenderContext.context;
-        const gl = context.gl;
-
-        // Update framebuffer contents
-        this._bindFramebuffer();
-        context.viewport.set([0, 0, this._texWidth, this._texHeight]);
-        context.clear({color: Color.transparent});
-
-        const program = this._cachedRenderContext.useProgram('projectionErrorMeasurement');
-
-        program.draw(context, gl.TRIANGLES,
-            DepthMode.disabled, StencilMode.disabled,
-            ColorMode.unblended, CullFaceMode.disabled,
-            projectionErrorMeasurementUniformValues(input, outputExpected), null, null,
-            '$clipping', this._fullscreenTriangle.vertexBuffer, this._fullscreenTriangle.indexBuffer,
-            this._fullscreenTriangle.segments);
-
-        // Read back into PBO
-        gl.bindBuffer(gl.PIXEL_PACK_BUFFER, this._pbo);
-        gl.readBuffer(gl.COLOR_ATTACHMENT0);
-        gl.readPixels(0, 0, this._texWidth, this._texHeight, this._texFormat, this._texType, 0);
-        gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
-        const sync = gl.fenceSync(gl.SYNC_GPU_COMMANDS_COMPLETE, 0);
-        gl.flush();
-
-        this._readbackQueue = {
-            frameNumberIssued: this._updateCount,
-            sync,
-        };
-    }
-
-    private _tryReadback(): void {
-        const gl = this._cachedRenderContext.context.gl;
-
-        if (!this._readbackQueue) {
-            return;
-        }
-
-        const waitResult = gl.clientWaitSync(this._readbackQueue.sync, 0, 0);
-
-        if (waitResult === gl.WAIT_FAILED) {
-            warnOnce('WebGL2 clientWaitSync failed.');
-            this._readbackQueue = null;
-            this._lastReadbackFrame = this._updateCount;
-            return;
-        }
-
-        if (waitResult === gl.TIMEOUT_EXPIRED) {
-            return; // Wait one more frame
-        }
-
-        gl.bindBuffer(gl.PIXEL_PACK_BUFFER, this._pbo);
-        gl.getBufferSubData(gl.PIXEL_PACK_BUFFER, 0, this._resultBuffer, 0, 4);
-        gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
-
-        // If we made it here, _resultBuffer contains the new measurement
-        this._readbackQueue = null;
-        this._measuredError = ProjectionErrorMeasurement._parseRGBA8float(this._resultBuffer);
-        this._lastReadbackFrame = this._updateCount;
-    }
-
-    private static _parseRGBA8float(buffer: Uint8Array): number {
-        let result = 0;
-        result += buffer[0] / 256.0;
-        result += buffer[1] / 65536.0;
-        result += buffer[2] / 16777216.0;
-        if (buffer[3] < 127.0) {
-            result = -result;
-        }
-        return result / 128.0;
-    }
-}

package/src/shaders/glsl/projection_error_measurement.fragment.glsl

@@ -1,5 +0,0 @@
-flat in vec4 v_output_error_encoded;
-
-void main() {
-    fragColor = v_output_error_encoded;
-}

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

@@ -1,2 +0,0 @@
-// This file is generated. Edit build/generate-shaders.ts, then run `npm run codegen`.
-export default 'flat in vec4 v_output_error_encoded;void main() {fragColor=v_output_error_encoded;}';

package/src/shaders/glsl/projection_error_measurement.vertex.glsl

@@ -1,22 +0,0 @@
-layout(location = 0) in vec2 a_pos;
-
-uniform highp float u_input;
-uniform highp float u_output_expected;
-
-flat out vec4 v_output_error_encoded;
-
-void main() {
-    float real_output = 2.0 * atan(exp(PI - (u_input * PI * 2.0))) - PI * 0.5;
-    // If we assume that the error visible on the map is never more than 1 km,
-    // then the angular error is always smaller than 1/6378 * 2PI = ~0.00098513
-    float error = real_output - u_output_expected;
-    float abs_error = abs(error) * 128.0; // Scale error by some large value for extra precision
-    // abs_error is assumed to be in range 0..1
-    v_output_error_encoded.x = min(floor(abs_error * 256.0), 255.0) / 255.0;
-    abs_error -= v_output_error_encoded.x;
-    v_output_error_encoded.y = min(floor(abs_error * 65536.0), 255.0) / 255.0;
-    abs_error -= v_output_error_encoded.x / 255.0;
-    v_output_error_encoded.z = min(floor(abs_error * 16777216.0), 255.0) / 255.0;
-    v_output_error_encoded.w = error >= 0.0 ? 1.0 : 0.0; // sign
-    gl_Position = vec4(a_pos, 0.0, 1.0);
-}

package/src/shaders/glsl/projection_error_measurement.vertex.glsl.g.ts

@@ -1,2 +0,0 @@
-// This file is generated. Edit build/generate-shaders.ts, then run `npm run codegen`.
-export default 'layout(location=0) in vec2 a_pos;uniform highp float u_input;uniform highp float u_output_expected;flat out vec4 v_output_error_encoded;void main() {float real_output=2.0*atan(exp(PI-(u_input*PI*2.0)))-PI*0.5;float error=real_output-u_output_expected;float abs_error=abs(error)*128.0;v_output_error_encoded.x=min(floor(abs_error*256.0),255.0)/255.0;abs_error-=v_output_error_encoded.x;v_output_error_encoded.y=min(floor(abs_error*65536.0),255.0)/255.0;abs_error-=v_output_error_encoded.x/255.0;v_output_error_encoded.z=min(floor(abs_error*16777216.0),255.0)/255.0;v_output_error_encoded.w=error >=0.0 ? 1.0 : 0.0;gl_Position=vec4(a_pos,0.0,1.0);}';

package/src/webgl/program/projection_error_measurement_program.ts

@@ -1,23 +0,0 @@
-import {Uniform1f} from '../uniform_binding.ts';
-import type {Context} from '../../webgl/context.ts';
-import type {UniformValues, UniformLocations} from '../uniform_binding.ts';
-
-export type ProjectionErrorMeasurementUniformsType = {
-    'u_input': Uniform1f;
-    'u_output_expected': Uniform1f;
-};
-
-const projectionErrorMeasurementUniforms = (context: Context, locations: UniformLocations): ProjectionErrorMeasurementUniformsType => ({
-    'u_input': new Uniform1f(context, locations.u_input),
-    'u_output_expected': new Uniform1f(context, locations.u_output_expected),
-});
-
-const projectionErrorMeasurementUniformValues = (
-    input: number,
-    outputExpected: number
-): UniformValues<ProjectionErrorMeasurementUniformsType> => ({
-    'u_input': input,
-    'u_output_expected': outputExpected,
-});
-
-export {projectionErrorMeasurementUniforms, projectionErrorMeasurementUniformValues};