@scoova/mgl 1.0.0

package/src/render/render_to_texture.test.ts

@@ -0,0 +1,151 @@
+import {RenderToTexture} from './render_to_texture';
+import type {Painter} from './painter';
+import type {LineStyleLayer} from '../style/style_layer/line_style_layer';
+import type {SymbolStyleLayer} from '../style/style_layer/symbol_style_layer';
+import {Context} from '../gl/context';
+import {ColorMode} from '../gl/color_mode';
+import {Terrain} from './terrain';
+import {Style} from '../style/style';
+import {Tile} from '../source/tile';
+import {Map} from '../ui/map';
+import {OverscaledTileID} from '../source/tile_id';
+import {SourceCache} from '../source/source_cache';
+import {TerrainSpecification} from '@maplibre/maplibre-gl-style-spec';
+import {FillStyleLayer} from '../style/style_layer/fill_style_layer';
+import {RasterStyleLayer} from '../style/style_layer/raster_style_layer';
+import {HillshadeStyleLayer} from '../style/style_layer/hillshade_style_layer';
+import {BackgroundStyleLayer} from '../style/style_layer/background_style_layer';
+
+describe('render to texture', () => {
+    const gl = document.createElement('canvas').getContext('webgl');
+    jest.spyOn(gl, 'checkFramebufferStatus').mockReturnValue(gl.FRAMEBUFFER_COMPLETE);
+    const backgroundLayer = {
+        id: 'maine-background',
+        type: 'background',
+        source: 'maine',
+        isHidden: () => false
+    } as any as BackgroundStyleLayer;
+    const fillLayer = {
+        id: 'maine-fill',
+        type: 'fill',
+        source: 'maine',
+        isHidden: () => false
+    } as any as FillStyleLayer;
+    const rasterLayer = {
+        id: 'maine-raster',
+        type: 'raster',
+        source: 'maine',
+        isHidden: () => false
+    } as any as RasterStyleLayer;
+    const hillshadeLayer = {
+        id: 'maine-hillshade',
+        type: 'line',
+        source: 'maine',
+        isHidden: () => false
+    } as any as HillshadeStyleLayer;
+    const lineLayer = {
+        id: 'maine-line',
+        type: 'line',
+        source: 'maine',
+        isHidden: () => false
+    } as any as LineStyleLayer;
+    const symbolLayer = {
+        id: 'maine-symbol',
+        type: 'symbol',
+        source: 'maine',
+        layout: {
+            'text-field': 'maine',
+            'symbol-placement': 'line'
+        },
+        isHidden: () => false
+    } as any as SymbolStyleLayer;
+
+    let layersDrawn = 0;
+    const painter = {
+        layersDrawn: 0,
+        context: new Context(gl),
+        transform: {zoom: 10, calculatePosMatrix: () => {}, calculateFogMatrix: () => {}},
+        colorModeForRenderPass: () => ColorMode.alphaBlended,
+        useProgram: () => { return {draw: () => { layersDrawn++; }}; },
+        _renderTileClippingMasks: () => {},
+        renderLayer: () => {}
+    } as any as Painter;
+    const map = {painter} as Map;
+
+    const tile = new Tile(new OverscaledTileID(3, 0, 2, 1, 2), 512);
+    const sourceCache = {
+        _source: {minzoom: 0, maxzoom: 2},
+        getTileByID: (_id) => tile,
+        getVisibleCoordinates: () => [tile.tileID]
+    } as SourceCache;
+
+    const style = {
+        sourceCaches: {'maine': {getVisibleCoordinates: () => [tile.tileID]}},
+        _order: ['maine-fill', 'maine-symbol'],
+        _layers: {
+            'maine-background': backgroundLayer,
+            'maine-fill': fillLayer,
+            'maine-raster': rasterLayer,
+            'maine-hillshade': hillshadeLayer,
+            'maine-line': lineLayer,
+            'maine-symbol': symbolLayer
+        }
+    } as any as Style;
+    painter.style = style;
+    map.style = style;
+    style.map = map;
+
+    const terrain = new Terrain(painter, sourceCache, {} as any as TerrainSpecification);
+    terrain.sourceCache.getRenderableTiles = () => [tile];
+    terrain.sourceCache.getTerrainCoords = () => { return {[tile.tileID.key]: tile.tileID}; };
+    map.terrain = terrain;
+
+    const rtt = new RenderToTexture(painter, terrain);
+    rtt.prepareForRender(style, 0);
+    painter.renderToTexture = rtt;
+
+    test('check state', () => {
+        expect(rtt._renderableTiles.map(t => t.tileID.key)).toStrictEqual(['923']);
+        expect(rtt._coordsDescendingInv).toEqual({'maine': {'923': [{'canonical': {'key': '922', 'x': 1, 'y': 2, 'z': 2}, 'key': '923', 'overscaledZ': 3, 'wrap': 0}]}});
+        expect(rtt._coordsDescendingInvStr).toStrictEqual({maine: {'923': '923'}});
+    });
+
+    test('should render text after a line by not adding the text to the stack', () => {
+        style._order = ['maine-fill', 'maine-symbol'];
+        rtt.prepareForRender(style, 0);
+        layersDrawn = 0;
+        expect(rtt._renderableLayerIds).toStrictEqual(['maine-fill', 'maine-symbol']);
+        expect(rtt.renderLayer(fillLayer)).toBeTruthy();
+        expect(rtt.renderLayer(symbolLayer)).toBeFalsy();
+        expect(layersDrawn).toBe(1);
+    });
+
+    test('render symbol between rtt layers', () => {
+        style._order = ['maine-background', 'maine-fill', 'maine-raster', 'maine-hillshade', 'maine-symbol', 'maine-line', 'maine-symbol'];
+        rtt.prepareForRender(style, 0);
+        layersDrawn = 0;
+        expect(rtt._renderableLayerIds).toStrictEqual(['maine-background', 'maine-fill', 'maine-raster', 'maine-hillshade', 'maine-symbol', 'maine-line', 'maine-symbol']);
+        expect(rtt.renderLayer(backgroundLayer)).toBeTruthy();
+        expect(rtt.renderLayer(fillLayer)).toBeTruthy();
+        expect(rtt.renderLayer(rasterLayer)).toBeTruthy();
+        expect(rtt.renderLayer(hillshadeLayer)).toBeTruthy();
+        expect(rtt.renderLayer(symbolLayer)).toBeFalsy();
+        expect(rtt.renderLayer(lineLayer)).toBeTruthy();
+        expect(rtt.renderLayer(symbolLayer)).toBeFalsy();
+        expect(layersDrawn).toBe(2);
+    });
+
+    test('render more symbols between rtt layers', () => {
+        style._order = ['maine-background', 'maine-symbol', 'maine-hillshade', 'maine-symbol', 'maine-line', 'maine-symbol'];
+        rtt.prepareForRender(style, 0);
+        layersDrawn = 0;
+        expect(rtt._renderableLayerIds).toStrictEqual(['maine-background', 'maine-symbol', 'maine-hillshade', 'maine-symbol', 'maine-line', 'maine-symbol']);
+        expect(rtt.renderLayer(backgroundLayer)).toBeTruthy();
+        expect(rtt.renderLayer(symbolLayer)).toBeFalsy();
+        expect(rtt.renderLayer(hillshadeLayer)).toBeTruthy();
+        expect(rtt.renderLayer(symbolLayer)).toBeFalsy();
+        expect(rtt.renderLayer(lineLayer)).toBeTruthy();
+        expect(rtt.renderLayer(symbolLayer)).toBeFalsy();
+        expect(layersDrawn).toBe(3);
+    });
+});

package/src/render/render_to_texture.ts

@@ -0,0 +1,197 @@
+import {Painter} from './painter';
+import {Tile} from '../source/tile';
+import {Color} from '@maplibre/maplibre-gl-style-spec';
+import {OverscaledTileID} from '../source/tile_id';
+import {drawTerrain} from './draw_terrain';
+import {Style} from '../style/style';
+import {Terrain} from './terrain';
+import {RenderPool} from '../gl/render_pool';
+import {Texture} from './texture';
+import type {StyleLayer} from '../style/style_layer';
+
+/**
+ * lookup table which layers should rendered to texture
+ */
+const LAYERS: { [keyof in StyleLayer['type']]?: boolean } = {
+    background: true,
+    fill: true,
+    line: true,
+    raster: true,
+    hillshade: true
+};
+
+/**
+ * @internal
+ * A helper class to help define what should be rendered to texture and how
+ */
+export class RenderToTexture {
+    painter: Painter;
+    terrain: Terrain;
+    pool: RenderPool;
+    /**
+     * coordsDescendingInv contains a list of all tiles which should be rendered for one render-to-texture tile
+     * e.g. render 4 raster-tiles with size 256px to the 512px render-to-texture tile
+     */
+    _coordsDescendingInv: {[_: string]: {[_:string]: Array<OverscaledTileID>}};
+    /**
+     * create a string representation of all to tiles rendered to render-to-texture tiles
+     * this string representation is used to check if tile should be re-rendered.
+     */
+    _coordsDescendingInvStr: {[_: string]: {[_:string]: string}};
+    /**
+     * store for render-stacks
+     * a render stack is a set of layers which should be rendered into one texture
+     * every stylesheet can have multiple stacks. A new stack is created if layers which should
+     * not rendered to texture sit between layers which should rendered to texture. e.g. hillshading or symbols
+     */
+    _stacks: Array<Array<string>>;
+    /**
+     * remember the previous processed layer to check if a new stack is needed
+     */
+    _prevType: string;
+    /**
+     * a list of tiles that can potentially rendered
+     */
+    _renderableTiles: Array<Tile>;
+    /**
+     * a list of tiles that should be rendered to screen in the next render-call
+     */
+    _rttTiles: Array<Tile>;
+    /**
+     * a list of all layer-ids which should be rendered
+     */
+    _renderableLayerIds: Array<string>;
+
+    constructor(painter: Painter, terrain: Terrain) {
+        this.painter = painter;
+        this.terrain = terrain;
+        this.pool = new RenderPool(painter.context, 30, terrain.sourceCache.tileSize * terrain.qualityFactor);
+    }
+
+    destruct() {
+        this.pool.destruct();
+    }
+
+    getTexture(tile: Tile): Texture {
+        return this.pool.getObjectForId(tile.rtt[this._stacks.length - 1].id).texture;
+    }
+
+    prepareForRender(style: Style, zoom: number) {
+        this._stacks = [];
+        this._prevType = null;
+        this._rttTiles = [];
+        this._renderableTiles = this.terrain.sourceCache.getRenderableTiles();
+        this._renderableLayerIds = style._order.filter(id => !style._layers[id].isHidden(zoom));
+
+        this._coordsDescendingInv = {};
+        for (const id in style.sourceCaches) {
+            this._coordsDescendingInv[id] = {};
+            const tileIDs = style.sourceCaches[id].getVisibleCoordinates();
+            for (const tileID of tileIDs) {
+                const keys = this.terrain.sourceCache.getTerrainCoords(tileID);
+                for (const key in keys) {
+                    if (!this._coordsDescendingInv[id][key]) this._coordsDescendingInv[id][key] = [];
+                    this._coordsDescendingInv[id][key].push(keys[key]);
+                }
+            }
+        }
+
+        this._coordsDescendingInvStr = {};
+        for (const id of style._order) {
+            const layer = style._layers[id], source = layer.source;
+            if (LAYERS[layer.type]) {
+                if (!this._coordsDescendingInvStr[source]) {
+                    this._coordsDescendingInvStr[source] = {};
+                    for (const key in this._coordsDescendingInv[source])
+                        this._coordsDescendingInvStr[source][key] = this._coordsDescendingInv[source][key].map(c => c.key).sort().join();
+                }
+            }
+        }
+
+        // check tiles to render
+        for (const tile of this._renderableTiles) {
+            for (const source in this._coordsDescendingInvStr) {
+                // rerender if there are more coords to render than in the last rendering
+                const coords = this._coordsDescendingInvStr[source][tile.tileID.key];
+                if (coords && coords !== tile.rttCoords[source]) tile.rtt = [];
+            }
+        }
+    }
+
+    /**
+     * due that switching textures is relatively slow, the render
+     * layer-by-layer context is not practicable. To bypass this problem
+     * this lines of code stack all layers and later render all at once.
+     * Because of the stylesheet possibility to mixing render-to-texture layers
+     * and 'live'-layers (f.e. symbols) it is necessary to create more stacks. For example
+     * a symbol-layer is in between of fill-layers.
+     * @param layer - the layer to render
+     * @returns if true layer is rendered to texture, otherwise false
+     */
+    renderLayer(layer: StyleLayer): boolean {
+        if (layer.isHidden(this.painter.transform.zoom)) return false;
+
+        const type = layer.type;
+        const painter = this.painter;
+        const isLastLayer = this._renderableLayerIds[this._renderableLayerIds.length - 1] === layer.id;
+
+        // remember background, fill, line & raster layer to render into a stack
+        if (LAYERS[type]) {
+            // create a new stack if previous layer was not rendered to texture (f.e. symbols)
+            if (!this._prevType || !LAYERS[this._prevType]) this._stacks.push([]);
+            // push current render-to-texture layer to render-stack
+            this._prevType = type;
+            this._stacks[this._stacks.length - 1].push(layer.id);
+            // rendering is done later, all in once
+            if (!isLastLayer) return true;
+        }
+
+        // in case a stack is finished render all collected stack-layers into a texture
+        if (LAYERS[this._prevType] || (LAYERS[type] && isLastLayer)) {
+            this._prevType = type;
+            const stack = this._stacks.length - 1, layers = this._stacks[stack] || [];
+            for (const tile of this._renderableTiles) {
+                // if render pool is full draw current tiles to screen and free pool
+                if (this.pool.isFull()) {
+                    drawTerrain(this.painter, this.terrain, this._rttTiles);
+                    this._rttTiles = [];
+                    this.pool.freeAllObjects();
+                }
+                this._rttTiles.push(tile);
+                // check for cached PoolObject
+                if (tile.rtt[stack]) {
+                    const obj = this.pool.getObjectForId(tile.rtt[stack].id);
+                    if (obj.stamp === tile.rtt[stack].stamp) {
+                        this.pool.useObject(obj);
+                        continue;
+                    }
+                }
+                // get free PoolObject
+                const obj = this.pool.getOrCreateFreeObject();
+                this.pool.useObject(obj);
+                this.pool.stampObject(obj);
+                tile.rtt[stack] = {id: obj.id, stamp: obj.stamp};
+                // prepare PoolObject for rendering
+                painter.context.bindFramebuffer.set(obj.fbo.framebuffer);
+                painter.context.clear({color: Color.transparent, stencil: 0});
+                painter.currentStencilSource = undefined;
+                for (let l = 0; l < layers.length; l++) {
+                    const layer = painter.style._layers[layers[l]];
+                    const coords = layer.source ? this._coordsDescendingInv[layer.source][tile.tileID.key] : [tile.tileID];
+                    painter.context.viewport.set([0, 0, obj.fbo.width, obj.fbo.height]);
+                    painter._renderTileClippingMasks(layer, coords);
+                    painter.renderLayer(painter, painter.style.sourceCaches[layer.source], layer, coords);
+                    if (layer.source) tile.rttCoords[layer.source] = this._coordsDescendingInvStr[layer.source][tile.tileID.key];
+                }
+            }
+            drawTerrain(this.painter, this.terrain, this._rttTiles);
+            this._rttTiles = [];
+            this.pool.freeAllObjects();
+
+            return LAYERS[type];
+        }
+
+        return false;
+    }
+
+}

package/src/render/terrain.test.ts

@@ -0,0 +1,322 @@
+import Point from '@mapbox/point-geometry';
+import {Terrain} from './terrain';
+import {Context} from '../gl/context';
+import {RGBAImage} from '../util/image';
+import type {SourceCache} from '../source/source_cache';
+import {OverscaledTileID} from '../source/tile_id';
+import type {TerrainSpecification} from '@maplibre/maplibre-gl-style-spec';
+import type {DEMData} from '../data/dem_data';
+import {Tile} from '../source/tile';
+import {Painter} from './painter';
+import {mat4} from 'gl-matrix';
+import {LngLat} from '../geo/lng_lat';
+import {MAX_TILE_ZOOM, MIN_TILE_ZOOM} from '../util/util';
+
+describe('Terrain', () => {
+    let gl: WebGLRenderingContext;
+
+    beforeEach(() => {
+        gl = document.createElement('canvas').getContext('webgl');
+        jest.spyOn(gl, 'checkFramebufferStatus').mockReturnValue(gl.FRAMEBUFFER_COMPLETE);
+        jest.spyOn(gl, 'readPixels').mockImplementation((_1, _2, _3, _4, _5, _6, rgba) => {
+            rgba[0] = 0;
+            rgba[1] = 0;
+            rgba[2] = 255;
+            rgba[3] = 255;
+        });
+    });
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+
+    test('pointCoordinate should not return null', () => {
+        expect.assertions(2);
+        const painter = {
+            context: new Context(gl),
+            width: 1,
+            height: 1,
+            pixelRatio: 1,
+            transform: {center: {lng: 0}},
+            maybeDrawDepthAndCoords: jest.fn(),
+        } as any as Painter;
+        const sourceCache = {} as SourceCache;
+        const getTileByID = (tileID) : Tile => {
+            if (tileID !== 'abcd') {
+                return null as any as Tile;
+            }
+            return {
+                tileID: {
+                    canonical: {
+                        x: 0,
+                        y: 0,
+                        z: 0
+                    }
+                }
+            } as any as Tile;
+        };
+        const terrain = new Terrain(painter, sourceCache, {} as any as TerrainSpecification);
+        terrain.sourceCache.getTileByID = getTileByID;
+        terrain.coordsIndex.push('abcd');
+
+        const coordinate = terrain.pointCoordinate(new Point(0, 0));
+
+        expect(coordinate).not.toBeNull();
+        expect(painter.maybeDrawDepthAndCoords).toHaveBeenCalled();
+
+    });
+
+    const setupMercatorOverflow = (pixelRatio: number = 1) => {
+        const WORLD_WIDTH = 4;
+        const painter = {
+            context: new Context(gl),
+            width: WORLD_WIDTH,
+            height: 1,
+            maybeDrawDepthAndCoords: jest.fn(),
+            pixelRatio,
+        } as any as Painter;
+        const sourceCache = {} as SourceCache;
+        const terrain = new Terrain(painter, sourceCache, {} as any as TerrainSpecification);
+        const tileIdsToWraps = {a: -1, b: 0, c: 1, d: 2};
+        terrain.sourceCache.getTileByID = (id) => {
+            return {
+                tileID: {
+                    canonical: {x: 0, y: 0, z: 0},
+                    wrap: tileIdsToWraps[id]
+                }
+            } as any as Tile;
+        };
+        terrain.getElevation = () => 0;
+        terrain.coordsIndex = Object.keys(tileIdsToWraps);
+        jest.spyOn(gl, 'readPixels').mockImplementation((x, _2, _3, _4, _5, _6, rgba) => {
+            rgba[0] = 0;
+            rgba[1] = 0;
+            rgba[2] = 0;
+            rgba[3] = 255 - x / pixelRatio;
+        });
+        return terrain;
+    };
+
+    test(
+        `pointCoordinate should return negative mercator x
+        if the point is on the LEFT outside the central globe`,
+        () => {
+            expect.assertions(2);
+            const pointX = 0;
+            const terrain = setupMercatorOverflow();
+            const coordinate = terrain.pointCoordinate(new Point(pointX, 0));
+
+            expect(coordinate.x).toBe(-1);
+            expect(terrain.painter.maybeDrawDepthAndCoords).toHaveBeenCalled();
+        });
+
+    test(
+        `pointCoordinate should return mercator x greater than 1
+        if the point is on the RIGHT outside the central globe`,
+        () => {
+            expect.assertions(2);
+            const pointX = 3;
+            const terrain = setupMercatorOverflow();
+            const coordinate = terrain.pointCoordinate(new Point(pointX, 0));
+
+            expect(coordinate.x).toBe(2);
+            expect(terrain.painter.maybeDrawDepthAndCoords).toHaveBeenCalled();
+        });
+
+    test(
+        'pointCoordinate should respect painter.pixelRatio',
+        () => {
+            const terrain = setupMercatorOverflow(2);
+
+            let pointX = 0;
+            let coordinate = terrain.pointCoordinate(new Point(pointX, 0));
+            expect(coordinate.x).toBe(-1);
+            expect(terrain.painter.maybeDrawDepthAndCoords).toHaveBeenCalled();
+
+            pointX = 3;
+            coordinate = terrain.pointCoordinate(new Point(pointX, 0));
+            expect(coordinate.x).toBe(2);
+            expect(terrain.painter.maybeDrawDepthAndCoords).toHaveBeenCalled();
+        });
+
+    test('Calculate tile minimum and maximum elevation', () => {
+        const tileID = new OverscaledTileID(5, 0, 5, 17, 11);
+        const tile = new Tile(tileID, 256);
+        tile.dem = {
+            min: 0,
+            max: 100,
+            getPixels: () => new RGBAImage({width: 1, height: 1}, new Uint8Array(1 * 4)),
+            getUnpackVector: () => [6553.6, 25.6, 0.1, 10000.0],
+        } as any as DEMData;
+        const painter = {
+            context: new Context(gl),
+            width: 1,
+            height: 1,
+            getTileTexture: () => null
+        } as any as Painter;
+        const sourceCache = {
+            _source: {maxzoom: 12},
+            _cache: {max: 10},
+            getTileByID: () => {
+                return tile;
+            },
+        } as any as SourceCache;
+        const terrain = new Terrain(
+            painter,
+            sourceCache,
+            {exaggeration: 2} as any as TerrainSpecification,
+        );
+
+        terrain.sourceCache._tiles[tileID.key] = tile;
+        const {minElevation, maxElevation} = terrain.getMinMaxElevation(tileID);
+
+        expect(minElevation).toBe(0);
+        expect(maxElevation).toBe(200);
+    });
+
+    test('Return null elevation values when no tile', () => {
+        const tileID = new OverscaledTileID(5, 0, 5, 17, 11);
+        const painter = {
+            context: new Context(gl),
+            width: 1,
+            height: 1,
+            getTileTexture: () => null
+        } as any as Painter;
+        const sourceCache = {
+            _source: {maxzoom: 12},
+            _cache: {max: 10},
+            getTileByID: () => null,
+        } as any as SourceCache;
+        const terrain = new Terrain(
+            painter,
+            sourceCache,
+            {exaggeration: 2} as any as TerrainSpecification,
+        );
+
+        const minMaxNoTile = terrain.getMinMaxElevation(tileID);
+
+        expect(minMaxNoTile.minElevation).toBeNull();
+        expect(minMaxNoTile.maxElevation).toBeNull();
+    });
+
+    test('Return null elevation values when no DEM', () => {
+        const tileID = new OverscaledTileID(5, 0, 5, 17, 11);
+        const tile = new Tile(tileID, 256);
+        tile.dem = null as any as DEMData;
+        const painter = {
+            context: new Context(gl),
+            width: 1,
+            height: 1,
+            getTileTexture: () => null
+        } as any as Painter;
+        const sourceCache = {
+            _source: {maxzoom: 12},
+            _cache: {max: 10},
+            getTileByID: () => {
+                return tile;
+            },
+        } as any as SourceCache;
+        const terrain = new Terrain(
+            painter,
+            sourceCache,
+            {exaggeration: 2} as any as TerrainSpecification,
+        );
+        const minMaxNoDEM = terrain.getMinMaxElevation(tileID);
+
+        expect(minMaxNoDEM.minElevation).toBeNull();
+        expect(minMaxNoDEM.maxElevation).toBeNull();
+    });
+
+    test('create mesh with border', () => {
+        let actualIndexArray;
+        let actualVertexArray;
+        const painter = {
+            context: {
+                createIndexBuffer: array => { actualIndexArray = Array.from(array.uint16); },
+                createVertexBuffer: array => { actualVertexArray = Array.from(array.int16); }
+            },
+            width: 1,
+            height: 1,
+        } as any as Painter;
+        const sourceCache = {
+            _source: {maxzoom: 12},
+            _cache: {max: 10}
+        } as any as SourceCache;
+        const terrain = new Terrain(
+            painter,
+            sourceCache,
+            {exaggeration: 1} as any as TerrainSpecification,
+        );
+        terrain.meshSize = 4;
+        terrain.getTerrainMesh();
+        expect(terrain.getMeshFrameDelta(16)).toBe(122.16256373312942);
+        expect(actualIndexArray).toStrictEqual([0, 5, 6, 0, 6, 1, 1, 6, 7, 1, 7, 2, 2, 7, 8, 2, 8, 3, 3, 8, 9, 3, 9, 4, 5, 10, 11, 5, 11, 6, 6, 11, 12, 6, 12, 7, 7, 12, 13, 7, 13, 8, 8, 13, 14, 8, 14, 9, 10, 15, 16, 10, 16, 11, 11, 16, 17, 11, 17, 12, 12, 17, 18, 12, 18, 13, 13, 18, 19, 13, 19, 14, 15, 20, 21, 15, 21, 16, 16, 21, 22, 16, 22, 17, 17, 22, 23, 17, 23, 18, 18, 23, 24, 18, 24, 19, 35, 36, 38, 35, 38, 37, 25, 28, 26, 25, 27, 28, 37, 38, 40, 37, 40, 39, 27, 30, 28, 27, 29, 30, 39, 40, 42, 39, 42, 41, 29, 32, 30, 29, 31, 32, 41, 42, 44, 41, 44, 43, 31, 34, 32, 31, 33, 34, 45, 46, 48, 45, 48, 47, 55, 58, 56, 55, 57, 58, 47, 48, 50, 47, 50, 49, 57, 60, 58, 57, 59, 60, 49, 50, 52, 49, 52, 51, 59, 62, 60, 59, 61, 62, 51, 52, 54, 51, 54, 53, 61, 64, 62, 61, 63, 64, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
+        expect(actualVertexArray).toStrictEqual([0, 0, 0, 2048, 0, 0, 4096, 0, 0, 6144, 0, 0, 8192, 0, 0, 0, 2048, 0, 2048, 2048, 0, 4096, 2048, 0, 6144, 2048, 0, 8192, 2048, 0, 0, 4096, 0, 2048, 4096, 0, 4096, 4096, 0, 6144, 4096, 0, 8192, 4096, 0, 0, 6144, 0, 2048, 6144, 0, 4096, 6144, 0, 6144, 6144, 0, 8192, 6144, 0, 0, 8192, 0, 2048, 8192, 0, 4096, 8192, 0, 6144, 8192, 0, 8192, 8192, 0, 0, 0, 0, 0, 0, 1, 2048, 0, 0, 2048, 0, 1, 4096, 0, 0, 4096, 0, 1, 6144, 0, 0, 6144, 0, 1, 8192, 0, 0, 8192, 0, 1, 0, 8192, 0, 0, 8192, 1, 2048, 8192, 0, 2048, 8192, 1, 4096, 8192, 0, 4096, 8192, 1, 6144, 8192, 0, 6144, 8192, 1, 8192, 8192, 0, 8192, 8192, 1, 0, 0, 0, 0, 0, 1, 0, 2048, 0, 0, 2048, 1, 0, 4096, 0, 0, 4096, 1, 0, 6144, 0, 0, 6144, 1, 0, 8192, 0, 0, 8192, 1, 8192, 0, 0, 8192, 0, 1, 8192, 2048, 0, 8192, 2048, 1, 8192, 4096, 0, 8192, 4096, 1, 8192, 6144, 0, 8192, 6144, 1, 8192, 8192, 0, 8192, 8192, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
+    });
+
+    test('interpolation works', () => {
+        const mockTerrain = {
+            getDEMElevation: Terrain.prototype.getDEMElevation,
+            getTerrainData() {
+                return {
+                    // eslint-disable-next-line camelcase
+                    u_terrain_matrix: mat4.create(),
+                    tile: {
+                        dem: {
+                            dim: 1,
+                            get(x:number, y:number) {
+                                expect(x % 1).toBe(0);
+                                expect(y % 1).toBe(0);
+                                return 100 * x + 10 * y;
+                            }
+                        }
+                    }
+                };
+            }
+        };
+        expect(mockTerrain.getDEMElevation(null, 0, 0)).toBeCloseTo(0);
+        expect(mockTerrain.getDEMElevation(null, 1, 1)).toBeCloseTo(110);
+        expect(mockTerrain.getDEMElevation(null, 0, 0.5)).toBeCloseTo(5);
+        expect(mockTerrain.getDEMElevation(null, 1, 0.5)).toBeCloseTo(105);
+        expect(mockTerrain.getDEMElevation(null, 0.5, 0)).toBeCloseTo(50);
+        expect(mockTerrain.getDEMElevation(null, 0.5, 1)).toBeCloseTo(60);
+        expect(mockTerrain.getDEMElevation(null, 0.4, 0.2)).toBeCloseTo(42);
+    });
+
+    test('getElevationForLngLatZoom with lng less than -180 wraps correctly', () => {
+        const terrain = new Terrain(null, {} as any, {} as any);
+
+        const OVERSCALETILEID_DOES_NOT_THROW = 4;
+        terrain.getElevation = () => OVERSCALETILEID_DOES_NOT_THROW;
+        expect(terrain.getElevationForLngLatZoom(new LngLat(-183, 40), 0)).toBe(OVERSCALETILEID_DOES_NOT_THROW);
+    });
+
+    test('getMinTileElevationForLngLatZoom with lng less than -180 wraps correctly', () => {
+        const terrain = new Terrain(null, {} as any, {} as any);
+
+        const OVERSCALETILEID_DOES_NOT_THROW = 4;
+        terrain.getMinMaxElevation = () => ({minElevation: OVERSCALETILEID_DOES_NOT_THROW, maxElevation: 42});
+        expect(terrain.getMinTileElevationForLngLatZoom(new LngLat(-183, 40), 0)).toBe(OVERSCALETILEID_DOES_NOT_THROW);
+    });
+
+    describe('getElevationForLngLatZoom returns 0 for out of bounds', () => {
+        const terrain = new Terrain(null, {} as any, {} as any);
+
+        test('lng', () => {
+            expect(terrain.getElevationForLngLatZoom(new LngLat(180, 0), 0)).toBe(0);
+        });
+
+        test('lat', () => {
+            expect(terrain.getElevationForLngLatZoom(new LngLat(0, 88), 0)).toBe(0);
+        });
+
+        test('zoom', () => {
+            expect(terrain.getElevationForLngLatZoom(new LngLat(0, 0), MIN_TILE_ZOOM - 1)).toBe(0);
+        });
+
+        test('zoom', () => {
+            expect(terrain.getElevationForLngLatZoom(new LngLat(0, 0), MAX_TILE_ZOOM + 1)).toBe(0);
+        });
+    });
+
+});