maplibre-gl 6.2.0 → 6.3.0

package/src/util/evented.test.ts

@@ -1,8 +1,13 @@
 import {describe, test, expect, vi} from 'vitest';
 import {Event, Evented} from './evented.ts';
 
+class StubbedEvent extends Event<'a' | 'b'> {
+    foo?: string;
+    foz?: string;
+}
+
 // `Evented` is abstract, so use a minimal concrete subclass to exercise its behavior.
-class StubbedEvented extends Evented {}
+class StubbedEvented extends Evented<Record<StubbedEvent['type'], StubbedEvent>> {}
 
 describe('Evented', () => {
 
@@ -10,8 +15,8 @@ describe('Evented', () => {
         const evented = new StubbedEvented();
         const listener = vi.fn();
         evented.on('a', listener);
-        evented.fire(new Event('a'));
-        evented.fire(new Event('a'));
+        evented.fire(new StubbedEvent('a'));
+        evented.fire(new StubbedEvent('a'));
         expect(listener).toHaveBeenCalledTimes(2);
     });
 
@@ -19,8 +24,8 @@ describe('Evented', () => {
         const evented = new StubbedEvented();
         const listener = vi.fn();
         evented.once('a', listener);
-        evented.fire(new Event('a'));
-        evented.fire(new Event('a'));
+        evented.fire(new StubbedEvent('a'));
+        evented.fire(new StubbedEvent('a'));
         expect(listener).toHaveBeenCalledTimes(1);
         expect(evented.listens('a')).toBeFalsy();
     });
@@ -29,17 +34,17 @@ describe('Evented', () => {
         const evented = new StubbedEvented();
         const listener = vi.fn();
         const subscription = evented.on('a', listener);
-        evented.fire(new Event('a'));
+        evented.fire(new StubbedEvent('a'));
         subscription.unsubscribe();
-        evented.fire(new Event('a'));
+        evented.fire(new StubbedEvent('a'));
         expect(listener).toHaveBeenCalledTimes(1);
     });
 
     test('returns a promise when no listener is provided to "once" method', async () => {
         const evented = new StubbedEvented();
         const promise = evented.once('a');
-        evented.fire(new Event('a'));
-        evented.fire(new Event('a'));
+        evented.fire(new StubbedEvent('a'));
+        evented.fire(new StubbedEvent('a'));
         await promise;
         expect(evented.listens('a')).toBeFalsy();
 
@@ -50,7 +55,7 @@ describe('Evented', () => {
         evented.on('a', (data) => {
             expect(data.foo).toBe('bar');
         });
-        evented.fire(new Event('a', {foo: 'bar'}));
+        evented.fire(new StubbedEvent('a', {foo: 'bar'}));
 
     });
 
@@ -59,7 +64,7 @@ describe('Evented', () => {
         evented.on('a', (data) => {
             expect(data.target).toBe(evented);
         });
-        evented.fire(new Event('a'));
+        evented.fire(new StubbedEvent('a'));
 
     });
 
@@ -68,7 +73,7 @@ describe('Evented', () => {
         evented.on('a', (data) => {
             expect(data.type).toBe('a');
         });
-        evented.fire(new Event('a'));
+        evented.fire(new StubbedEvent('a'));
 
     });
 
@@ -77,7 +82,7 @@ describe('Evented', () => {
         const listener = vi.fn();
         evented.on('a', listener);
         evented.off('a', listener);
-        evented.fire(new Event('a'));
+        evented.fire(new StubbedEvent('a'));
         expect(listener).not.toHaveBeenCalled();
     });
 
@@ -86,7 +91,7 @@ describe('Evented', () => {
         const listener = vi.fn();
         evented.once('a', listener);
         evented.off('a', listener);
-        evented.fire(new Event('a'));
+        evented.fire(new StubbedEvent('a'));
         expect(listener).not.toHaveBeenCalled();
     });
 
@@ -95,9 +100,9 @@ describe('Evented', () => {
         const listener = vi.fn();
         evented.once('a', () => {
             listener();
-            evented.fire(new Event('a'));
+            evented.fire(new StubbedEvent('a'));
         });
-        evented.fire(new Event('a'));
+        evented.fire(new StubbedEvent('a'));
         expect(listener).toHaveBeenCalledTimes(1);
     });
 
@@ -124,7 +129,7 @@ describe('Evented', () => {
         evented.on('a', () => {
             evented.on('a', nestedListener);
         });
-        evented.fire(new Event('a'));
+        evented.fire(new StubbedEvent('a'));
 
         expect(nestedListener).not.toHaveBeenCalled();
     });
@@ -147,7 +152,7 @@ describe('Evented', () => {
         evented.on('a', listenerA);
         evented.on('a', listenerB);
         evented.on('a', listenerA);
-        evented.fire(new Event('a'));
+        evented.fire(new StubbedEvent('a'));
         expect(listenerA).toHaveBeenCalledTimes(1);
         expect(order).toEqual(['A', 'B']);
 
@@ -162,8 +167,8 @@ describe('evented parents', () => {
         const eventedSink = new StubbedEvented();
         eventedSource.setEventedParent(eventedSink);
         eventedSink.on('a', listener);
-        eventedSource.fire(new Event('a'));
-        eventedSource.fire(new Event('a'));
+        eventedSource.fire(new StubbedEvent('a'));
+        eventedSource.fire(new StubbedEvent('a'));
         expect(listener).toHaveBeenCalledTimes(2);
     });
 
@@ -174,7 +179,7 @@ describe('evented parents', () => {
         eventedSink.on('a', (data) => {
             expect(data.foo).toBe('bar');
         });
-        eventedSource.fire(new Event('a', {foo: 'bar'}));
+        eventedSource.fire(new StubbedEvent('a', {foo: 'bar'}));
 
     });
 
@@ -185,7 +190,7 @@ describe('evented parents', () => {
         eventedSink.on('a', (data) => {
             expect(data.foz).toBe('baz');
         });
-        eventedSource.fire(new Event('a', {foo: 'bar'}));
+        eventedSource.fire(new StubbedEvent('a', {foo: 'bar'}));
 
     });
 
@@ -196,7 +201,7 @@ describe('evented parents', () => {
         eventedSink.on('a', (data) => {
             expect(data.foz).toBe('baz');
         });
-        eventedSource.fire(new Event('a', {foo: 'bar'}));
+        eventedSource.fire(new StubbedEvent('a', {foo: 'bar'}));
 
     });
 
@@ -208,7 +213,7 @@ describe('evented parents', () => {
         eventedSink.on('a', (data) => {
             expect(data.target).toBe(eventedSource);
         });
-        eventedSource.fire(new Event('a'));
+        eventedSource.fire(new StubbedEvent('a'));
 
     });
 
@@ -219,7 +224,7 @@ describe('evented parents', () => {
         eventedSink.on('a', listener);
         eventedSource.setEventedParent(eventedSink);
         eventedSource.setEventedParent(null);
-        eventedSource.fire(new Event('a'));
+        eventedSource.fire(new StubbedEvent('a'));
         expect(listener).not.toHaveBeenCalled();
     });
 
@@ -236,11 +241,11 @@ describe('evented parents', () => {
         const eventedSource = new StubbedEvented();
         const eventedParent = new StubbedEvented();
         let i = 0;
-        eventedSource.setEventedParent(eventedParent, () => i++);
+        eventedSource.setEventedParent(eventedParent, () => ({counter: i++}));
         eventedSource.on('a', () => {});
-        eventedSource.fire(new Event('a'));
+        eventedSource.fire(new StubbedEvent('a'));
         expect(i).toBe(1);
-        eventedSource.fire(new Event('a'));
+        eventedSource.fire(new StubbedEvent('a'));
         expect(i).toBe(2);
 
     });

package/src/util/evented.ts

@@ -3,11 +3,26 @@ import {extend, type Subscription} from './util.ts';
 /**
  * A listener method used as a callback to events
  */
-export type Listener = (a: any) => any;
+export type Listener<E extends Event = Event> = (event: E) => any;
 
-type Listeners<EventType extends Record<string, any>> = {[_ in keyof EventType]?: Listener[]};
+/**
+ * A mapping between event names and the event each of them carries.
+ */
+export type EventTypeMap = Record<string, Event>;
+
+/**
+ * The event names of an {@link EventTypeMap}.
+ */
+export type EventNames<EventType extends EventTypeMap> = Extract<keyof EventType, string>;
 
-function _addEventListener<T extends Record<string, any>>(type: keyof T, listener: Listener, listenerList: Listeners<T>) {
+/**
+ * Properties merged into every event bubbled up to an evented parent.
+ */
+export type EventedParentData = Record<string, unknown>;
+
+type Listeners<EventType extends EventTypeMap> = {[K in keyof EventType]?: Array<Listener<EventType[K]>>};
+
+function _addEventListener<T extends EventTypeMap, K extends EventNames<T>>(type: K, listener: Listener<T[K]>, listenerList: Listeners<T>) {
     const listenerExists = listenerList[type]?.includes(listener);
     if (!listenerExists) {
         listenerList[type] ||= [];
@@ -15,7 +30,7 @@ function _addEventListener<T extends Record<string, any>>(type: keyof T, listene
     }
 }
 
-function _removeEventListener<T extends Record<string, any>>(type: keyof T, listener: Listener, listenerList: Listeners<T>) {
+function _removeEventListener<T extends EventTypeMap, K extends EventNames<T>>(type: K, listener: Listener<T[K]>, listenerList: Listeners<T>) {
     if (listenerList?.[type]) {
         const index = listenerList[type].indexOf(listener);
         if (index !== -1) {
@@ -27,15 +42,15 @@ function _removeEventListener<T extends Record<string, any>>(type: keyof T, list
 /**
  * The event class
  */
-export class Event {
-    readonly type: string;
+export class Event<TType extends string = string> {
+    readonly type: TType;
     /**
      * The object that fired the event. Set when the event is fired, and narrowed to a more
      * specific type (e.g. `Map`, `Marker`) by the event subclasses.
      */
     target?: unknown;
 
-    constructor(type: string, data: any = {}) {
+    constructor(type: TType, data: object = {}) {
         extend(this, data);
         this.type = type;
     }
@@ -48,24 +63,31 @@ type ErrorLike = {
 /**
  * An error event
  */
-export class ErrorEvent extends Event {
+export class ErrorEvent extends Event<'error'> {
     error: ErrorLike;
 
-    constructor(error: ErrorLike, data: any = {}) {
+    constructor(error: ErrorLike, data: object = {}) {
         super('error', extend({error}, data));
     }
 }
 
+/**
+ * The event map of an {@link Evented} that only reports errors.
+ */
+export type ErrorEventType = {
+    error: ErrorEvent;
+};
+
 /**
  * Methods mixed in to other classes for event capabilities.
  *
  * @group Event Related
  */
-export abstract class Evented<EventType extends Record<string, any> = Record<string, any>> {
-    _listeners: Listeners<EventType>;
-    _oneTimeListeners: Listeners<EventType>;
-    _eventedParent: Evented;
-    _eventedParentData: any | (() => any);
+export abstract class Evented<EventType extends EventTypeMap = EventTypeMap> {
+    _listeners?: Listeners<EventType>;
+    _oneTimeListeners?: Listeners<EventType>;
+    _eventedParent?: Evented;
+    _eventedParentData?: EventedParentData | (() => EventedParentData);
 
     /**
      * Adds a listener to a specified event type.
@@ -75,7 +97,7 @@ export abstract class Evented<EventType extends Record<string, any> = Record<str
      * The listener function is called with the data object passed to `fire`,
      * extended with `target` and `type` properties.
      */
-    on<T extends keyof EventType>(type: T, listener: (event: EventType[T]) => void): Subscription {
+    on<T extends EventNames<EventType>>(type: T, listener: (event: EventType[T]) => void): Subscription {
         this._listeners ||= {};
         _addEventListener(type, listener, this._listeners);
 
@@ -92,7 +114,7 @@ export abstract class Evented<EventType extends Record<string, any> = Record<str
      * @param type - The event type to remove listeners for.
      * @param listener - The listener function to remove.
      */
-    off<T extends keyof EventType>(type: T, listener: (event: EventType[T]) => void): this {
+    off<T extends EventNames<EventType>>(type: T, listener: (event: EventType[T]) => void): this {
         _removeEventListener(type, listener, this._listeners);
         _removeEventListener(type, listener, this._oneTimeListeners);
 
@@ -107,7 +129,7 @@ export abstract class Evented<EventType extends Record<string, any> = Record<str
      * @param type - The event type to listen for.
      * @returns a promise that resolves with the event
      */
-    once<T extends keyof EventType>(type: T): Promise<EventType[T]>;
+    once<T extends EventNames<EventType>>(type: T): Promise<EventType[T]>;
     /**
      * Adds a listener that will be called only once to a specified event type.
      *
@@ -117,8 +139,8 @@ export abstract class Evented<EventType extends Record<string, any> = Record<str
      * @param listener - The function to be called when the event is fired the first time.
      * @returns `this` when a listener is provided
      */
-    once<T extends keyof EventType>(type: T, listener: (event: EventType[T]) => void): this; 
-    once<T extends keyof EventType>(type: T, listener?: (event: EventType[T]) => void): this | Promise<EventType[T]> {
+    once<T extends EventNames<EventType>>(type: T, listener: (event: EventType[T]) => void): this;
+    once<T extends EventNames<EventType>>(type: T, listener?: (event: EventType[T]) => void): this | Promise<EventType[T]> {
         if (!listener) {
             return new Promise((resolve) => this.once(type, resolve));
         }
@@ -128,44 +150,48 @@ export abstract class Evented<EventType extends Record<string, any> = Record<str
         return this;
     }
 
-    fire(event: Event | string, properties?: any): this {
-        // Compatibility with (type: string, properties: Object) signature from previous versions.
-        // See https://github.com/mapbox/mapbox-gl-js/issues/6522,
-        //     https://github.com/mapbox/mapbox-gl-draw/issues/766
-        if (typeof event === 'string') {
-            event = new Event(event, properties || {});
-        }
-
-        const type = event.type;
+    /**
+     * Calls every listener registered for the event's type.
+     */
+    fire(event: EventType[EventNames<EventType>]): this;
+    /**
+     * Compatibility with the (type: string, properties: Object) signature from previous versions.
+     * See https://github.com/mapbox/mapbox-gl-js/issues/6522,
+     *     https://github.com/mapbox/mapbox-gl-draw/issues/766
+     */
+    fire(type: EventNames<EventType>, properties?: object): this;
+    fire(event: EventType[EventNames<EventType>] | EventNames<EventType>, properties?: object): this {
+        const firedEvent: Event = typeof event === 'string' ? new Event(event, properties || {}) : event;
+        const type = firedEvent.type as EventNames<EventType>;
 
         if (this.listens(type)) {
-            event.target = this;
+            firedEvent.target = this;
 
             // make sure adding or removing listeners inside other listeners won't cause an infinite loop
-            const listeners = this._listeners?.[type] ? this._listeners[type].slice() : [];
+            const listeners = this._listeners?.[type]?.slice() ?? [];
             for (const listener of listeners) {
-                listener.call(this, event);
+                listener.call(this, firedEvent);
             }
 
-            const oneTimeListeners = this._oneTimeListeners?.[type] ? this._oneTimeListeners[type].slice() : [];
+            const oneTimeListeners = this._oneTimeListeners?.[type]?.slice() ?? [];
             for (const listener of oneTimeListeners) {
                 _removeEventListener(type, listener, this._oneTimeListeners);
-                listener.call(this, event);
+                listener.call(this, firedEvent);
             }
 
             const parent = this._eventedParent;
             if (parent) {
                 extend(
-                    event,
+                    firedEvent,
                     typeof this._eventedParentData === 'function' ? this._eventedParentData() : this._eventedParentData
                 );
-                parent.fire(event);
+                parent.fire(firedEvent);
             }
 
         // To ensure that no error events are dropped, print them to the
         // console if they have no listeners.
-        } else if (event instanceof ErrorEvent) {
-            console.error(event.error);
+        } else if (firedEvent instanceof ErrorEvent) {
+            console.error(firedEvent.error);
         }
 
         return this;
@@ -177,18 +203,18 @@ export abstract class Evented<EventType extends Record<string, any> = Record<str
      * @param type - The event type
      * @returns `true` if there is at least one registered listener for specified event type, `false` otherwise
      */
-    listens(type: string): boolean {
-        return (
-            (this._listeners?.[type]?.length > 0) ||
-            (this._oneTimeListeners?.[type]?.length > 0) ||
-            (this._eventedParent?.listens(type))
+    listens(type: EventNames<EventType>): boolean {
+        return Boolean(
+            this._listeners?.[type]?.length ||
+            this._oneTimeListeners?.[type]?.length ||
+            this._eventedParent?.listens(type)
         );
     }
 
     /**
      * Bubble all events fired by this instance of Evented to this parent instance of Evented.
      */
-    setEventedParent(parent?: Evented | null, data?: any | (() => any)): this {
+    setEventedParent(parent?: Evented | null, data?: EventedParentData | (() => EventedParentData)): this {
         this._eventedParent = parent;
         this._eventedParentData = data;
 

package/src/util/test/null_gl.ts

@@ -70,6 +70,16 @@ export class NullWebGL2RenderingContext {
     INT: number = 0x1404;
     UNSIGNED_INT: number = 0x1405;
     FLOAT: number = 0x1406;
+    FLOAT_VEC2: number = 0x8B50;
+    FLOAT_VEC3: number = 0x8B51;
+    FLOAT_VEC4: number = 0x8B52;
+    INT_VEC2: number = 0x8B53;
+    INT_VEC3: number = 0x8B54;
+    INT_VEC4: number = 0x8B55;
+    UNSIGNED_INT_VEC2: number = 0x8DC6;
+    UNSIGNED_INT_VEC3: number = 0x8DC7;
+    UNSIGNED_INT_VEC4: number = 0x8DC8;
+    ACTIVE_ATTRIBUTES: number = 0x8B89;
     ALPHA: number = 0x1906;
     RGB: number = 0x1907;
     RGBA: number = 0x1908;

package/src/util/test/util.ts

@@ -5,6 +5,7 @@ import {extend} from '../../util/util.ts';
 import {type Dispatcher} from '../../util/dispatcher.ts';
 import {type IActor} from '../actor.ts';
 import {Evented} from '../evented.ts';
+import {type SourceEventType} from '../../ui/events.ts';
 import {type SourceSpecification, type StyleSpecification, type TerrainSpecification} from '@maplibre/maplibre-gl-style-spec';
 import {MercatorTransform} from '../../geo/projection/mercator_transform.ts';
 import {RequestManager} from '../request_manager.ts';
@@ -197,7 +198,7 @@ export const sleep: (milliseconds?: number) => Promise<void> = (milliseconds: nu
     return new Promise<void>(resolve => setTimeout(resolve, milliseconds));
 };
 
-export function waitForMetadataEvent(source: Evented): Promise<void> {
+export function waitForMetadataEvent(source: Evented<SourceEventType>): Promise<void> {
     return new Promise((resolve) => {
         source.on('data', (e) => {
             if (e.sourceDataType === 'metadata') {

package/src/util/util.test.ts

@@ -78,7 +78,7 @@ describe('util', () => {
 
     test('bezier', () => {
         const curve = bezier(0, 0, 0.25, 1);
-        expect(curve instanceof Function).toBeTruthy();
+        expect(curve).toBeInstanceOf(Function);
         expect(curve(0)).toBe(0);
         expect(curve(1)).toBe(1);
         expect(curve(0.5)).toBe(0.8230854638965502);

package/src/util/web_worker_transfer.test.ts

@@ -39,8 +39,8 @@ describe('web worker transfer', () => {
         const serializableMock = new SerializableMock(10);
         const transferables = [];
         const deserialized = deserialize(serialize(serializableMock, transferables)) as SerializableMock;
-        expect(deserialize(serialize(serializableMock, transferables)) instanceof SerializableMock).toBeTruthy();
-        expect(serializableMock.dataView instanceof DataView).toBeTruthy();
+        expect(deserialize(serialize(serializableMock, transferables))).toBeInstanceOf(SerializableMock);
+        expect(serializableMock.dataView).toBeInstanceOf(DataView);
 
         expect(serializableMock !== deserialized).toBeTruthy();
         expect(deserialized.constructor === SerializableMock).toBeTruthy();
@@ -51,7 +51,7 @@ describe('web worker transfer', () => {
         expect(transferables[1] === serializableMock.dataView.buffer).toBeTruthy();
         expect(deserialized._cached === undefined).toBeTruthy();
         expect(deserialized.squared() === 100).toBeTruthy();
-        expect(deserialized.dataView instanceof DataView).toBeTruthy();
+        expect(deserialized.dataView).toBeInstanceOf(DataView);
         expect(deserialized.array).toEqual(serializableMock.array);
     });
 
@@ -61,7 +61,7 @@ describe('web worker transfer', () => {
         register('Anon', Klass);
         const x = new Klass();
         const deserialized = deserialize(serialize(x));
-        expect(deserialized instanceof Klass).toBeTruthy();
+        expect(deserialized).toBeInstanceOf(Klass);
     });
 
     test('null', () => {
@@ -94,7 +94,7 @@ describe('web worker transfer', () => {
         expect(!customSerialization._deserialized).toBeTruthy();
 
         const deserialized = deserialize(serialize(customSerialization)) as CustomSerialization;
-        expect(deserialize(serialize(customSerialization)) instanceof CustomSerialization).toBeTruthy();
+        expect(deserialize(serialize(customSerialization))).toBeInstanceOf(CustomSerialization);
         expect(deserialized.id).toBe(customSerialization.id);
         expect(deserialized._deserialized).toBeTruthy();
     });

package/src/webgl/context.ts

@@ -177,6 +177,26 @@ export class Context {
         this.pixelStoreUnpackFlipY.dirty = true;
     }
 
+    /**
+     * Reset some GL state to default values before handing users the raw context, as we do for
+     * custom layers and WebGL style images, to avoid hard-to-debug bugs in their code.
+     *
+     * MapLibre restores all of its own state afterwards, so the only state worth resetting first
+     * is state users would be surprised to find dirty: `CULL_FACE`, `TEXTURE0` and the three
+     * `UNPACK_` settings, whose defaults are meaningful enough that most code assumes them.
+     * The vertex array is unbound rather than reset, so that MapLibre never has to track it and
+     * a user's `vertexAttribPointer` calls cannot land on one of ours.
+     */
+    setCustomLayerDefaults(): void {
+        this.unbindVAO();
+
+        this.cullFace.setDefault();
+        this.activeTexture.setDefault();
+        this.pixelStoreUnpack.setDefault();
+        this.pixelStoreUnpackPremultiplyAlpha.setDefault();
+        this.pixelStoreUnpackFlipY.setDefault();
+    }
+
     createIndexBuffer(array: TriangleIndexArray | LineIndexArray | LineStripIndexArray, dynamicDraw?: boolean): IndexBuffer {
         return new IndexBuffer(this, array, dynamicDraw);
     }

package/src/webgl/draw/draw_raster.ts

@@ -5,7 +5,11 @@ import {now} from '../../util/time_control.ts';
 import {StencilMode} from '../stencil_mode.ts';
 import {DepthMode} from '../depth_mode.ts';
 import {CullFaceMode} from '../cull_face_mode.ts';
-import {rasterUniformValues} from '../program/raster_program.ts';
+import {
+    identityPerspectiveTransform,
+    rasterUniformValues,
+    type RasterPerspectiveTransform
+} from '../program/raster_program.ts';
 import {EXTENT} from '../../data/extent.ts';
 import {FadingDirections} from '../../tile/tile.ts';
 import Point from '@mapbox/point-geometry';
@@ -59,16 +63,16 @@ export function drawRaster(painter: Painter, tileManager: TileManager, layer: Ra
     // Stencil mask and two-pass is not used for ImageSource sources regardless of projection.
     if (source instanceof ImageSource) {
         // Image source - no stencil is used
-        drawTiles(painter, tileManager, layer, tileIDs, null, false, false, source.tileCoords, source.flippedWindingOrder, isRenderingToTexture);
+        drawTiles(painter, tileManager, layer, tileIDs, null, false, false, source.tileCoords, source.perspectiveTransform, source.flippedWindingOrder, isRenderingToTexture);
     } else if (useSubdivision) {
         // Two-pass rendering
         const [stencilBorderless, stencilBorders, coords] = painter.stencilConfigForOverlapTwoPass(tileIDs);
-        drawTiles(painter, tileManager, layer, coords, stencilBorderless, false, true, cornerCoords, false, isRenderingToTexture); // draw without borders
-        drawTiles(painter, tileManager, layer, coords, stencilBorders, true, true, cornerCoords, false, isRenderingToTexture); // draw with borders
+        drawTiles(painter, tileManager, layer, coords, stencilBorderless, false, true, cornerCoords, identityPerspectiveTransform, false, isRenderingToTexture); // draw without borders
+        drawTiles(painter, tileManager, layer, coords, stencilBorders, true, true, cornerCoords, identityPerspectiveTransform, false, isRenderingToTexture); // draw with borders
     } else {
         // Simple rendering
         const [stencil, coords] = painter.getStencilConfigForOverlapAndUpdateStencilID(tileIDs);
-        drawTiles(painter, tileManager, layer, coords, stencil, false, true, cornerCoords, false, isRenderingToTexture);
+        drawTiles(painter, tileManager, layer, coords, stencil, false, true, cornerCoords, identityPerspectiveTransform, false, isRenderingToTexture);
     }
 }
 
@@ -81,6 +85,7 @@ function drawTiles(
     useBorder: boolean,
     allowPoles: boolean,
     corners: Point[],
+    perspectiveTransform: RasterPerspectiveTransform,
     flipCullfaceMode: boolean = false,
     isRenderingToTexture: boolean = false) {
     const minTileZ = coords[coords.length - 1].overscaledZ;
@@ -133,7 +138,7 @@ function drawTiles(
 
         const terrainData = painter.getTerrainDataForTile(coord, isRenderingToTexture);
         const projectionData = transform.getProjectionData({overscaledTileID: coord, aligned: align, applyGlobeMatrix: !isRenderingToTexture, applyTerrainMatrix: true});
-        const uniformValues = rasterUniformValues(parentTopLeft, parentScaleBy, fadeValues.fadeMix, layer, corners);
+        const uniformValues = rasterUniformValues(parentTopLeft, parentScaleBy, fadeValues.fadeMix, layer, corners, perspectiveTransform);
 
         const mesh = projection.getMeshFromTileID(context, coord.canonical, useBorder, allowPoles, 'raster');
         const stencilMode = stencilModes ? stencilModes[coord.overscaledZ] : StencilMode.disabled;

package/src/webgl/program/raster_program.ts

@@ -5,10 +5,18 @@ import type {UniformValues, UniformLocations} from '../uniform_binding.ts';
 import type {RasterStyleLayer} from '../../style/style_layer/raster_style_layer.ts';
 import type Point from '@mapbox/point-geometry';
 
+export type RasterPerspectiveTransform = [number, number, number];
+
+/**
+ * Affine texture coordinates represented as a homogeneous transform.
+ */
+export const identityPerspectiveTransform: RasterPerspectiveTransform = [0, 0, 1];
+
 export type RasterUniformsType = {
     'u_tl_parent': Uniform2f;
     'u_scale_parent': Uniform1f;
     'u_buffer_scale': Uniform1f;
+    'u_perspective_transform': Uniform3f;
     'u_fade_t': Uniform1f;
     'u_opacity': Uniform1f;
     'u_image0': Uniform1i;
@@ -26,6 +34,7 @@ const rasterUniforms = (context: Context, locations: UniformLocations): RasterUn
     'u_tl_parent': new Uniform2f(context, locations.u_tl_parent),
     'u_scale_parent': new Uniform1f(context, locations.u_scale_parent),
     'u_buffer_scale': new Uniform1f(context, locations.u_buffer_scale),
+    'u_perspective_transform': new Uniform3f(context, locations.u_perspective_transform),
     'u_fade_t': new Uniform1f(context, locations.u_fade_t),
     'u_opacity': new Uniform1f(context, locations.u_opacity),
     'u_image0': new Uniform1i(context, locations.u_image0),
@@ -48,6 +57,7 @@ const rasterUniformValues = (
     },
     layer: RasterStyleLayer,
     cornerCoords: Point[],
+    perspectiveTransform: RasterPerspectiveTransform,
 ): UniformValues<RasterUniformsType> => ({
     'u_tl_parent': parentTL,
     'u_scale_parent': parentScaleBy,
@@ -56,6 +66,7 @@ const rasterUniformValues = (
     // so that the texture coordinares for poles always lie beyond the edge of the texture.
     // Right now the coordinates are placed right at the texture border.
     'u_buffer_scale': 1,
+    'u_perspective_transform': perspectiveTransform,
     'u_fade_t': fade.mix,
     'u_opacity': fade.opacity * layer.paint.get('raster-opacity'),
     'u_image0': 0,