maplibre-gl 2.1.8 → 2.2.0-pre.2

package/src/geo/transform.ts

@@ -5,12 +5,13 @@ import Point from '@mapbox/point-geometry';
 import {wrap, clamp} from '../util/util';
 import {number as interpolate} from '../style-spec/util/interpolate';
 import EXTENT from '../data/extent';
-import {vec4, mat4, mat2, vec2} from 'gl-matrix';
+import {vec3, vec4, mat4, mat2, vec2} from 'gl-matrix';
 import {Aabb, Frustum} from '../util/primitives';
 import EdgeInsets from './edge_insets';
 
 import {UnwrappedTileID, OverscaledTileID, CanonicalTileID} from '../source/tile_id';
 import type {PaddingOptions} from './edge_insets';
+import Terrain from '../render/terrain';
 
 /**
  * A single transform, generally used for a single tile to be
@@ -31,14 +32,17 @@ class Transform {
     zoomFraction: number;
     pixelsToGLUnits: [number, number];
     cameraToCenterDistance: number;
+    cameraToSeaLevelDistance: number;
     mercatorMatrix: mat4;
     projMatrix: mat4;
     invProjMatrix: mat4;
     alignedProjMatrix: mat4;
     pixelMatrix: mat4;
+    pixelMatrix3D: mat4;
     pixelMatrixInverse: mat4;
     glCoordMatrix: mat4;
     labelPlaneMatrix: mat4;
+    freezeElevation: boolean;
     _fov: number;
     _pitch: number;
     _zoom: number;
@@ -49,6 +53,8 @@ class Transform {
     _minPitch: number;
     _maxPitch: number;
     _center: LngLat;
+    _elevation: number;
+    _pixelPerMeter: number;
     _edgeInsets: EdgeInsets;
     _constraining: boolean;
     _posMatrixCache: {[_: string]: mat4};
@@ -57,6 +63,7 @@ class Transform {
     constructor(minZoom?: number, maxZoom?: number, minPitch?: number, maxPitch?: number, renderWorldCopies?: boolean) {
         this.tileSize = 512; // constant
         this.maxValidLatitude = 85.051129; // constant
+        this.freezeElevation = false;
 
         this._renderWorldCopies = renderWorldCopies === undefined ? true : !!renderWorldCopies;
         this._minZoom = minZoom || 0;
@@ -70,6 +77,7 @@ class Transform {
         this.width = 0;
         this.height = 0;
         this._center = new LngLat(0, 0);
+        this._elevation = 0;
         this.zoom = 0;
         this.angle = 0;
         this._fov = 0.6435011087932844;
@@ -87,6 +95,7 @@ class Transform {
         clone.width = this.width;
         clone.height = this.height;
         clone._center = this._center;
+        clone._elevation = this._elevation;
         clone.zoom = this.zoom;
         clone.angle = this.angle;
         clone._fov = this._fov;
@@ -207,6 +216,14 @@ class Transform {
         this._calcMatrices();
     }
 
+    get elevation(): number { return this._elevation; }
+    set elevation(elevation: number) {
+        if (elevation === this._elevation) return;
+        this._elevation = elevation;
+        this._constrain();
+        this._calcMatrices();
+    }
+
     get padding(): PaddingOptions { return this._edgeInsets.toJSON(); }
     set padding(padding: PaddingOptions) {
         if (this._edgeInsets.equals(padding)) return;
@@ -322,6 +339,7 @@ class Transform {
             roundZoom?: boolean;
             reparseOverscaled?: boolean;
             renderWorldCopies?: boolean;
+            terrain?: Terrain;
         }
     ): Array<OverscaledTileID> {
         let z = this.coveringZoomLevel(options);
@@ -330,23 +348,24 @@ class Transform {
         if (options.minzoom !== undefined && z < options.minzoom) return [];
         if (options.maxzoom !== undefined && z > options.maxzoom) z = options.maxzoom;
 
+        const cameraCoord = this.pointCoordinate(this.getCameraPoint());
         const centerCoord = MercatorCoordinate.fromLngLat(this.center);
         const numTiles = Math.pow(2, z);
+        const cameraPoint = [numTiles * cameraCoord.x, numTiles * cameraCoord.y, 0];
         const centerPoint = [numTiles * centerCoord.x, numTiles * centerCoord.y, 0];
         const cameraFrustum = Frustum.fromInvProjectionMatrix(this.invProjMatrix, this.worldSize, z);
 
         // No change of LOD behavior for pitch lower than 60 and when there is no top padding: return only tile ids from the requested zoom level
         let minZoom = options.minzoom || 0;
         // Use 0.1 as an epsilon to avoid for explicit == 0.0 floating point checks
-        if (this.pitch <= 60.0 && this._edgeInsets.top < 0.1)
+        if (!options.terrain && this.pitch <= 60.0 && this._edgeInsets.top < 0.1)
             minZoom = z;
 
-        // There should always be a certain number of maximum zoom level tiles surrounding the center location
-        const radiusOfMaxLvlLodInTiles = 3;
+        // There should always be a certain number of maximum zoom level tiles surrounding the center location in 2D or in front of the camera in 3D
+        const radiusOfMaxLvlLodInTiles = options.terrain ? 2 / Math.min(this.tileSize, options.tileSize) * this.tileSize : 3;
 
         const newRootTile = (wrap: number): any => {
             return {
-                // All tiles are on zero elevation plane => z difference is zero
                 aabb: new Aabb([wrap * numTiles, 0, 0], [(wrap + 1) * numTiles, numTiles, 0]),
                 zoom: 0,
                 x: 0,
@@ -388,8 +407,9 @@ class Transform {
                 fullyVisible = intersectResult === 2;
             }
 
-            const distanceX = it.aabb.distanceX(centerPoint);
-            const distanceY = it.aabb.distanceY(centerPoint);
+            const refPoint = options.terrain ? cameraPoint : centerPoint;
+            const distanceX = it.aabb.distanceX(refPoint);
+            const distanceY = it.aabb.distanceY(refPoint);
             const longestDim = Math.max(Math.abs(distanceX), Math.abs(distanceY));
 
             // We're using distance based heuristics to determine if a tile should be split into quadrants or not.
@@ -401,9 +421,12 @@ class Transform {
 
             // Have we reached the target depth or is the tile too far away to be any split further?
             if (it.zoom === maxZoom || (longestDim > distToSplit && it.zoom >= minZoom)) {
+                const dz = maxZoom - it.zoom, dx = cameraPoint[0] - 0.5 - (x << dz), dy = cameraPoint[1] - 0.5 - (y << dz);
                 result.push({
                     tileID: new OverscaledTileID(it.zoom === maxZoom ? overscaledZ : it.zoom, it.wrap, it.zoom, x, y),
-                    distanceSq: vec2.sqrLen([centerPoint[0] - 0.5 - x, centerPoint[1] - 0.5 - y])
+                    distanceSq: vec2.sqrLen([centerPoint[0] - 0.5 - x, centerPoint[1] - 0.5 - y]),
+                    // this variable is currently not used, but may be important to reduce the amount of loaded tiles
+                    tileDistanceToCamera: Math.sqrt(dx * dx + dy * dy)
                 });
                 continue;
             }
@@ -411,8 +434,22 @@ class Transform {
             for (let i = 0; i < 4; i++) {
                 const childX = (x << 1) + (i % 2);
                 const childY = (y << 1) + (i >> 1);
-
-                stack.push({aabb: it.aabb.quadrant(i), zoom: it.zoom + 1, x: childX, y: childY, wrap: it.wrap, fullyVisible});
+                const childZ = it.zoom + 1;
+                let quadrant = it.aabb.quadrant(i);
+                if (options.terrain) {
+                    const tileID = new OverscaledTileID(childZ, it.wrap, childZ, childX, childY);
+                    const tile = options.terrain.getTerrainData(tileID).tile;
+                    let minElevation = this.elevation, maxElevation = this.elevation;
+                    if (tile && tile.dem) {
+                        minElevation = tile.dem.min * options.terrain.exaggeration;
+                        maxElevation = tile.dem.max * options.terrain.exaggeration;
+                    }
+                    quadrant = new Aabb(
+                        [quadrant.min[0], quadrant.min[1], minElevation] as vec3,
+                        [quadrant.max[0], quadrant.max[1], maxElevation] as vec3
+                    );
+                }
+                stack.push({aabb: quadrant, zoom: childZ, x: childX, y: childY, wrap: it.wrap, fullyVisible});
             }
         }
 
@@ -446,6 +483,72 @@ class Transform {
 
     get point(): Point { return this.project(this.center); }
 
+    /**
+     * Updates the center-elevation value unless freezeElevation is activated.
+     * @param terrain the terrain
+     */
+    updateElevation(terrain?: Terrain) {
+        if (this.freezeElevation) return;
+        this.elevation = terrain ? this.getElevation(this._center, terrain) : 0;
+    }
+
+    /**
+     * get the elevation from terrain for the current zoomlevel.
+     * @param lnglat the location
+     * @param terrain the terrain
+     * @returns {Number} elevation in meters
+     */
+    getElevation(lnglat: LngLat, terrain: Terrain) {
+        const merc = MercatorCoordinate.fromLngLat(lnglat);
+        const worldSize = (1 << this.tileZoom) * EXTENT;
+        const mercX = merc.x * worldSize, mercY = merc.y * worldSize;
+        const tileX = Math.floor(mercX / EXTENT), tileY = Math.floor(mercY / EXTENT);
+        const tileID = new OverscaledTileID(this.tileZoom, 0, this.tileZoom, tileX, tileY);
+        return terrain.getElevation(tileID, mercX % EXTENT, mercY % EXTENT, EXTENT);
+    }
+
+    /**
+     * get the camera position in LngLat and altitudes in meter
+     * @returns {Object} An object with lngLat & altitude.
+     */
+    getCameraPosition(): {
+        lngLat: LngLat;
+        altitude: number;
+    } {
+        const lngLat = this.pointLocation(this.getCameraPoint());
+        const altitude = Math.cos(this._pitch) * this.cameraToCenterDistance / this._pixelPerMeter;
+        return {lngLat, altitude: altitude + this.elevation};
+    }
+
+    /**
+     * This method works in combination with freezeElevation activated.
+     * freezeElevtion is enabled during map-panning because during this the camera should sit in constant height.
+     * After panning finished, call this method to recalculate the zoomlevel for the current camera-height in current terrain.
+     * @param {Terrain} terrain the terrain
+     */
+    recalculateZoom(terrain: Terrain) {
+        // find position the camera is looking on
+        const center = this.pointLocation(this.centerPoint, terrain);
+        const elevation = this.getElevation(center, terrain);
+        const deltaElevation = this.elevation - elevation;
+        if (!deltaElevation) return;
+
+        // calculate mercator distance between camera & target
+        const cameraPosition = this.getCameraPosition();
+        const camera = MercatorCoordinate.fromLngLat(cameraPosition.lngLat, cameraPosition.altitude);
+        const target = MercatorCoordinate.fromLngLat(center, elevation);
+        const dx = camera.x - target.x, dy = camera.y - target.y, dz = camera.z - target.z;
+        const distance = Math.sqrt(dx * dx + dy * dy + dz * dz);
+
+        // from this distance we calculate the new zoomlevel
+        const zoom = this.scaleZoom(this.cameraToCenterDistance / distance / this.tileSize);
+
+        // update matrices
+        this._elevation = elevation;
+        this._center = center;
+        this.zoom = zoom;
+    }
+
     setLocationAtPoint(lnglat: LngLat, point: Point) {
         const a = this.pointCoordinate(point);
         const b = this.pointCoordinate(this.centerPoint);
@@ -462,31 +565,35 @@ class Transform {
     /**
      * Given a location, return the screen point that corresponds to it
      * @param {LngLat} lnglat location
+     * @param {Terrain} terrain optional terrain
      * @returns {Point} screen point
      * @private
      */
-    locationPoint(lnglat: LngLat) {
-        return this.coordinatePoint(this.locationCoordinate(lnglat));
+    locationPoint(lnglat: LngLat, terrain?: Terrain): Point {
+        return terrain ?
+            this.coordinatePoint(this.locationCoordinate(lnglat), this.getElevation(lnglat, terrain), this.pixelMatrix3D) :
+            this.coordinatePoint(this.locationCoordinate(lnglat));
     }
 
     /**
      * Given a point on screen, return its lnglat
      * @param {Point} p screen point
+     * @param {Terrain} terrain optional terrain
      * @returns {LngLat} lnglat location
      * @private
      */
-    pointLocation(p: Point) {
-        return this.coordinateLocation(this.pointCoordinate(p));
+    pointLocation(p: Point, terrain?: Terrain): LngLat {
+        return this.coordinateLocation(this.pointCoordinate(p, terrain));
     }
 
     /**
      * Given a geographical lnglat, return an unrounded
      * coordinate that represents it at this transform's zoom level.
      * @param {LngLat} lnglat
-     * @returns {Coordinate}
+     * @returns {MercatorCoordinate}
      * @private
      */
-    locationCoordinate(lnglat: LngLat) {
+    locationCoordinate(lnglat: LngLat): MercatorCoordinate {
         return MercatorCoordinate.fromLngLat(lnglat);
     }
 
@@ -496,11 +603,27 @@ class Transform {
      * @returns {LngLat} lnglat
      * @private
      */
-    coordinateLocation(coord: MercatorCoordinate) {
-        return coord.toLngLat();
+    coordinateLocation(coord: MercatorCoordinate): LngLat {
+        return coord && coord.toLngLat();
     }
 
-    pointCoordinate(p: Point) {
+    /**
+     * Given a Point, return its mercator coordinate.
+     * @param {Point} p the point
+     * @param {Terrain} terrain optional terrain
+     * @returns {LngLat} lnglat
+     * @private
+     */
+    pointCoordinate(p: Point, terrain?: Terrain): MercatorCoordinate {
+        // get point-coordinate from terrain coordinates framebuffer
+        if (terrain) {
+            const coordinate = terrain.pointCoordinate(p);
+            if (coordinate != null) {
+                return coordinate;
+            }
+        }
+
+        // calcuate point-coordinate on flat earth
         const targetZ = 0;
         // since we don't know the correct projected z value for the point,
         // unproject two points to get a line and then find the point on that
@@ -531,12 +654,14 @@ class Transform {
     /**
      * Given a coordinate, return the screen point that corresponds to it
      * @param {Coordinate} coord
+     * @params {number} elevation default = 0
+     * @params {mat4} pixelMatrix, default = this.pixelMatrix
      * @returns {Point} screen point
      * @private
      */
-    coordinatePoint(coord: MercatorCoordinate) {
-        const p = [coord.x * this.worldSize, coord.y * this.worldSize, 0, 1] as any;
-        vec4.transformMat4(p, p, this.pixelMatrix);
+    coordinatePoint(coord: MercatorCoordinate, elevation: number = 0, pixelMatrix = this.pixelMatrix): Point {
+        const p = [coord.x * this.worldSize, coord.y * this.worldSize, elevation, 1] as any;
+        vec4.transformMat4(p, p, pixelMatrix);
         return new Point(p[0] / p[3], p[1] / p[3]);
     }
 
@@ -546,9 +671,10 @@ class Transform {
      * @returns {LngLatBounds} Returns a {@link LngLatBounds} object describing the map's geographical bounds.
      */
     getBounds(): LngLatBounds {
+        const top = Math.max(0, this.height / 2 - this.getHorizon());
         return new LngLatBounds()
-            .extend(this.pointLocation(new Point(0, 0)))
-            .extend(this.pointLocation(new Point(this.width, 0)))
+            .extend(this.pointLocation(new Point(0, top)))
+            .extend(this.pointLocation(new Point(this.width, top)))
             .extend(this.pointLocation(new Point(this.width, this.height)))
             .extend(this.pointLocation(new Point(0, this.height)));
     }
@@ -564,6 +690,16 @@ class Transform {
         return new LngLatBounds([this.lngRange[0], this.latRange[0]], [this.lngRange[1], this.latRange[1]]);
     }
 
+    /**
+     * Calculate pixel height of the visible horizon in relation to map-center (e.g. height/2),
+     * multiplied by a static factor to simulate the earth-radius.
+     * The calculated value is the horizontal line from the camera-height to sea-level.
+     * @returns {number} Horizon above center in pixels.
+     */
+    getHorizon(): number {
+        return Math.tan(Math.PI / 2 - this._pitch) * this.cameraToCenterDistance * 0.85;
+    }
+
     /**
      * Sets or clears the map's geographical constraints.
      * @param {LngLatBounds} bounds A {@link LngLatBounds} object describing the new geographic boundaries of the map.
@@ -682,7 +818,23 @@ class Transform {
 
         const halfFov = this._fov / 2;
         const offset = this.centerOffset;
+        const x = this.point.x, y = this.point.y;
         this.cameraToCenterDistance = 0.5 / Math.tan(halfFov) * this.height;
+        this._pixelPerMeter = mercatorZfromAltitude(1, this.center.lat) * this.worldSize;
+
+        let m = mat4.identity(new Float64Array(16) as any);
+        mat4.scale(m, m, [this.width / 2, -this.height / 2, 1]);
+        mat4.translate(m, m, [1, -1, 0]);
+        this.labelPlaneMatrix = m;
+
+        m = mat4.identity(new Float64Array(16) as any);
+        mat4.scale(m, m, [1, -1, 1]);
+        mat4.translate(m, m, [-1, -1, 0]);
+        mat4.scale(m, m, [2 / this.width, 2 / this.height, 1]);
+        this.glCoordMatrix = m;
+
+        // calculate the camera to sea-level distance in pixel in respect of terrain
+        this.cameraToSeaLevelDistance = this.cameraToCenterDistance + this._elevation * this._pixelPerMeter / Math.cos(this._pitch);
 
         // Find the distance from the center point [width/2 + offset.x, height/2 + offset.y] to the
         // center top point [width/2 + offset.x, 0] in Z units, using the law of sines.
@@ -690,14 +842,20 @@ class Transform {
         // (the distance between[width/2, height/2] and [width/2 + 1, height/2])
         const groundAngle = Math.PI / 2 + this._pitch;
         const fovAboveCenter = this._fov * (0.5 + offset.y / this.height);
-        const topHalfSurfaceDistance = Math.sin(fovAboveCenter) * this.cameraToCenterDistance / Math.sin(clamp(Math.PI - groundAngle - fovAboveCenter, 0.01, Math.PI - 0.01));
-        const point = this.point;
-        const x = point.x, y = point.y;
+        const topHalfSurfaceDistance = Math.sin(fovAboveCenter) * this.cameraToSeaLevelDistance / Math.sin(clamp(Math.PI - groundAngle - fovAboveCenter, 0.01, Math.PI - 0.01));
+
+        // Find the distance from the center point to the horizon
+        const horizon = this.getHorizon();
+        const horizonAngle = Math.atan(horizon / this.cameraToCenterDistance);
+        const fovCenterToHorizon = 2 * horizonAngle * (0.5 + offset.y / (horizon * 2));
+        const topHalfSurfaceDistanceHorizon = Math.sin(fovCenterToHorizon) * this.cameraToSeaLevelDistance / Math.sin(clamp(Math.PI - groundAngle - fovCenterToHorizon, 0.01, Math.PI - 0.01));
 
         // Calculate z distance of the farthest fragment that should be rendered.
-        const furthestDistance = Math.cos(Math.PI / 2 - this._pitch) * topHalfSurfaceDistance + this.cameraToCenterDistance;
+        const furthestDistance = Math.cos(Math.PI / 2 - this._pitch) * topHalfSurfaceDistance + this.cameraToSeaLevelDistance;
+        const furthestDistanceHorizon = Math.cos(Math.PI / 2 - this._pitch) * topHalfSurfaceDistanceHorizon + this.cameraToSeaLevelDistance;
+
         // Add a bit extra to avoid precision problems when a fragment's distance is exactly `furthestDistance`
-        const farZ = furthestDistance * 1.01;
+        const farZ = Math.min(furthestDistance, furthestDistanceHorizon) * 1.01;
 
         // The larger the value of nearZ is
         // - the more depth precision is available for features (good)
@@ -709,10 +867,10 @@ class Transform {
         const nearZ = this.height / 50;
 
         // matrix for conversion from location to GL coordinates (-1 .. 1)
-        let m = new Float64Array(16) as any;
+        m = new Float64Array(16) as any;
         mat4.perspective(m, this._fov, this.width / this.height, nearZ, farZ);
 
-        //Apply center of perspective offset
+        // Apply center of perspective offset
         m[8] = -offset.x * 2 / this.width;
         m[9] = offset.y * 2 / this.height;
 
@@ -727,10 +885,18 @@ class Transform {
         this.mercatorMatrix = mat4.scale([] as any, m, [this.worldSize, this.worldSize, this.worldSize]);
 
         // scale vertically to meters per pixel (inverse of ground resolution):
-        mat4.scale(m, m, [1, 1, mercatorZfromAltitude(1, this.center.lat) * this.worldSize]);
+        mat4.scale(m, m, [1, 1, this._pixelPerMeter]);
+
+        // matrix for conversion from location to screen coordinates in 2D
+        this.pixelMatrix = mat4.multiply(new Float64Array(16) as any, this.labelPlaneMatrix, m);
 
+        // matrix for conversion from location to GL coordinates (-1 .. 1)
+        mat4.translate(m, m, [0, 0, -this.elevation]); // elevate camera over terrain
         this.projMatrix = m;
-        this.invProjMatrix = mat4.invert([] as any, this.projMatrix);
+        this.invProjMatrix = mat4.invert([] as any, m);
+
+        // matrix for conversion from location to screen coordinates in 2D
+        this.pixelMatrix3D = mat4.multiply(new Float64Array(16) as any, this.labelPlaneMatrix, m);
 
         // Make a second projection matrix that is aligned to a pixel grid for rendering raster tiles.
         // We're rounding the (floating point) x/y values to achieve to avoid rendering raster images to fractional
@@ -746,20 +912,6 @@ class Transform {
         mat4.translate(alignedM, alignedM, [ dx > 0.5 ? dx - 1 : dx, dy > 0.5 ? dy - 1 : dy, 0 ]);
         this.alignedProjMatrix = alignedM;
 
-        m = mat4.create();
-        mat4.scale(m, m, [this.width / 2, -this.height / 2, 1]);
-        mat4.translate(m, m, [1, -1, 0]);
-        this.labelPlaneMatrix = m;
-
-        m = mat4.create();
-        mat4.scale(m, m, [1, -1, 1]);
-        mat4.translate(m, m, [-1, -1, 0]);
-        mat4.scale(m, m, [2 / this.width, 2 / this.height, 1]);
-        this.glCoordMatrix = m;
-
-        // matrix for conversion from location to screen coordinates
-        this.pixelMatrix = mat4.multiply(new Float64Array(16) as any, this.labelPlaneMatrix, this.projMatrix);
-
         // inverse matrix for conversion from screen coordinaes to location
         m = mat4.invert(new Float64Array(16) as any, this.pixelMatrix);
         if (!m) throw new Error('failed to invert matrix');

package/src/index.ts

@@ -8,6 +8,7 @@ import AttributionControl from './ui/control/attribution_control';
 import LogoControl from './ui/control/logo_control';
 import ScaleControl from './ui/control/scale_control';
 import FullscreenControl from './ui/control/fullscreen_control';
+import TerrainControl from './ui/control/terrain_control';
 import Popup from './ui/popup';
 import Marker from './ui/marker';
 import Style from './style/style';
@@ -46,6 +47,7 @@ const exported = {
     LogoControl,
     ScaleControl,
     FullscreenControl,
+    TerrainControl,
     Popup,
     Marker,
     Style,

package/src/render/draw_background.ts

@@ -9,10 +9,11 @@ import {
 import type Painter from './painter';
 import type SourceCache from '../source/source_cache';
 import type BackgroundStyleLayer from '../style/style_layer/background_style_layer';
+import {OverscaledTileID} from '../source/tile_id';
 
 export default drawBackground;
 
-function drawBackground(painter: Painter, sourceCache: SourceCache, layer: BackgroundStyleLayer) {
+function drawBackground(painter: Painter, sourceCache: SourceCache, layer: BackgroundStyleLayer, coords?: Array<OverscaledTileID>) {
     const color = layer.paint.get('background-color');
     const opacity = layer.paint.get('background-opacity');
 
@@ -31,10 +32,8 @@ function drawBackground(painter: Painter, sourceCache: SourceCache, layer: Backg
     const stencilMode = StencilMode.disabled;
     const depthMode = painter.depthModeForSublayer(0, pass === 'opaque' ? DepthMode.ReadWrite : DepthMode.ReadOnly);
     const colorMode = painter.colorModeForRenderPass();
-
     const program = painter.useProgram(image ? 'backgroundPattern' : 'background');
-
-    const tileIDs = transform.coveringTiles({tileSize});
+    const tileIDs = coords ? coords : transform.coveringTiles({tileSize, terrain: painter.style.terrain});
 
     if (image) {
         context.activeTexture.set(gl.TEXTURE0);
@@ -43,13 +42,14 @@ function drawBackground(painter: Painter, sourceCache: SourceCache, layer: Backg
 
     const crossfade = layer.getCrossfadeParameters();
     for (const tileID of tileIDs) {
-        const matrix = painter.transform.calculatePosMatrix(tileID.toUnwrapped());
+        const matrix = coords ? tileID.posMatrix : painter.transform.calculatePosMatrix(tileID.toUnwrapped());
         const uniformValues = image ?
             backgroundPatternUniformValues(matrix, opacity, painter, image, {tileID, tileSize}, crossfade) :
             backgroundUniformValues(matrix, opacity, color);
+        const terrainData = painter.style.terrain && painter.style.terrain.getTerrainData(tileID);
 
         program.draw(context, gl.TRIANGLES, depthMode, stencilMode, colorMode, CullFaceMode.disabled,
-            uniformValues, layer.id, painter.tileExtentBuffer,
+            uniformValues, terrainData, layer.id, painter.tileExtentBuffer,
             painter.quadTriangleIndexBuffer, painter.tileExtentSegments);
     }
 }

package/src/render/draw_circle.ts

@@ -15,6 +15,7 @@ import type VertexBuffer from '../gl/vertex_buffer';
 import type IndexBuffer from '../gl/index_buffer';
 import type {UniformValues} from './uniform_binding';
 import type {CircleUniformsType} from './program/circle_program';
+import type {TerrainData} from '../render/terrain';
 
 export default drawCircles;
 
@@ -24,6 +25,7 @@ type TileRenderState = {
     layoutVertexBuffer: VertexBuffer;
     indexBuffer: IndexBuffer;
     uniformValues: UniformValues<CircleUniformsType>;
+    terrainData: TerrainData;
 };
 
 type SegmentsTileRenderState = {
@@ -66,6 +68,7 @@ function drawCircles(painter: Painter, sourceCache: SourceCache, layer: CircleSt
         const program = painter.useProgram('circle', programConfiguration);
         const layoutVertexBuffer = bucket.layoutVertexBuffer;
         const indexBuffer = bucket.indexBuffer;
+        const terrainData = painter.style.terrain && painter.style.terrain.getTerrainData(coord);
         const uniformValues = circleUniformValues(painter, coord, tile, layer);
 
         const state: TileRenderState = {
@@ -74,6 +77,7 @@ function drawCircles(painter: Painter, sourceCache: SourceCache, layer: CircleSt
             layoutVertexBuffer,
             indexBuffer,
             uniformValues,
+            terrainData
         };
 
         if (sortFeaturesByKey) {
@@ -100,11 +104,11 @@ function drawCircles(painter: Painter, sourceCache: SourceCache, layer: CircleSt
     }
 
     for (const segmentsState of segmentsRenderStates) {
-        const {programConfiguration, program, layoutVertexBuffer, indexBuffer, uniformValues} = segmentsState.state;
+        const {programConfiguration, program, layoutVertexBuffer, indexBuffer, uniformValues, terrainData} = segmentsState.state;
         const segments = segmentsState.segments;
 
         program.draw(context, gl.TRIANGLES, depthMode, stencilMode, colorMode, CullFaceMode.disabled,
-            uniformValues, layer.id,
+            uniformValues, terrainData, layer.id,
             layoutVertexBuffer, indexBuffer, segments,
             layer.paint, painter.transform.zoom, programConfiguration);
     }

package/src/render/draw_collision_debug.ts

@@ -22,6 +22,7 @@ type TileBatch = {
     circleOffset: number;
     transform: mat4;
     invTransform: mat4;
+    coord: OverscaledTileID;
 };
 
 let quadTriangles: QuadTriangleArray;
@@ -60,7 +61,8 @@ function drawCollisionDebug(painter: Painter, sourceCache: SourceCache, layer: S
                 circleArray,
                 circleOffset,
                 transform,
-                invTransform
+                invTransform,
+                coord
             });
 
             circleCount += circleArray.length / 4;  // 4 values per circle
@@ -75,6 +77,7 @@ function drawCollisionDebug(painter: Painter, sourceCache: SourceCache, layer: S
                 posMatrix,
                 painter.transform,
                 tile),
+            painter.style.terrain && painter.style.terrain.getTerrainData(coord),
             layer.id, buffers.layoutVertexBuffer, buffers.indexBuffer,
             buffers.segments, null, painter.transform.zoom, null, null,
             buffers.collisionVertexBuffer);
@@ -132,6 +135,7 @@ function drawCollisionDebug(painter: Painter, sourceCache: SourceCache, layer: S
             painter.colorModeForRenderPass(),
             CullFaceMode.disabled,
             uniforms,
+            painter.style.terrain && painter.style.terrain.getTerrainData(batch.coord),
             layer.id,
             vertexBuffer,
             indexBuffer,

package/src/render/draw_debug.ts

@@ -77,15 +77,12 @@ function drawDebugTile(painter, sourceCache, coord: OverscaledTileID) {
     const stencilMode = StencilMode.disabled;
     const colorMode = painter.colorModeForRenderPass();
     const id = '$debug';
+    const terrainData = painter.style.terrain && painter.style.terrain.getTerrainData(coord);
 
     context.activeTexture.set(gl.TEXTURE0);
     // Bind the empty texture for drawing outlines
     painter.emptyTexture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
 
-    program.draw(context, gl.LINE_STRIP, depthMode, stencilMode, colorMode, CullFaceMode.disabled,
-        debugUniformValues(posMatrix, Color.red), id,
-        painter.debugBuffer, painter.tileBorderIndexBuffer, painter.debugSegments);
-
     const tileRawData = sourceCache.getTileByID(coord.key).latestRawTileData;
     const tileByteLength = (tileRawData && tileRawData.byteLength) || 0;
     const tileSizeKb = Math.floor(tileByteLength / 1024);
@@ -99,8 +96,11 @@ function drawDebugTile(painter, sourceCache, coord: OverscaledTileID) {
     drawTextToOverlay(painter, tileLabel);
 
     program.draw(context, gl.TRIANGLES, depthMode, stencilMode, ColorMode.alphaBlended, CullFaceMode.disabled,
-        debugUniformValues(posMatrix, Color.transparent, scaleRatio), id,
+        debugUniformValues(posMatrix, Color.transparent, scaleRatio), null, id,
         painter.debugBuffer, painter.quadTriangleIndexBuffer, painter.debugSegments);
+    program.draw(context, gl.LINE_STRIP, depthMode, stencilMode, colorMode, CullFaceMode.disabled,
+        debugUniformValues(posMatrix, Color.red), terrainData, id,
+        painter.debugBuffer, painter.tileBorderIndexBuffer, painter.debugSegments);
 }
 
 function drawTextToOverlay(painter: Painter, text: string) {

package/src/render/draw_fill.ts

@@ -81,6 +81,7 @@ function drawFillTiles(painter, sourceCache, layer, coords, depthMode, colorMode
 
         const programConfiguration = bucket.programConfigurations.get(layer.id);
         const program = painter.useProgram(programName, programConfiguration);
+        const terrainData = painter.style.terrain && painter.style.terrain.getTerrainData(coord);
 
         if (image) {
             painter.context.activeTexture.set(gl.TEXTURE0);
@@ -96,7 +97,9 @@ function drawFillTiles(painter, sourceCache, layer, coords, depthMode, colorMode
             if (posTo && posFrom) programConfiguration.setConstantPatternPositions(posTo, posFrom);
         }
 
-        const tileMatrix = painter.translatePosMatrix(coord.posMatrix, tile,
+        const terrainCoord = terrainData ? coord : null;
+        const posMatrix = terrainCoord ? terrainCoord.posMatrix : coord.posMatrix;
+        const tileMatrix = painter.translatePosMatrix(posMatrix, tile,
             layer.paint.get('fill-translate'), layer.paint.get('fill-translate-anchor'));
 
         if (!isOutline) {
@@ -115,7 +118,7 @@ function drawFillTiles(painter, sourceCache, layer, coords, depthMode, colorMode
         }
 
         program.draw(painter.context, drawMode, depthMode,
-            painter.stencilModeForClipping(coord), colorMode, CullFaceMode.disabled, uniformValues,
+            painter.stencilModeForClipping(coord), colorMode, CullFaceMode.disabled, uniformValues, terrainData,
             layer.id, bucket.layoutVertexBuffer, indexBuffer, segments,
             layer.paint, painter.transform.zoom, programConfiguration);
     }