maplibre-gl 3.1.0 → 3.2.0-pre.2

package/src/render/painter.ts

@@ -1,66 +1,52 @@
-import browser from '../util/browser';
+import {browser} from '../util/browser';
 import {mat4, vec3} from 'gl-matrix';
-import SourceCache from '../source/source_cache';
-import EXTENT from '../data/extent';
-import pixelsToTileUnits from '../source/pixels_to_tile_units';
-import SegmentVector from '../data/segment';
+import {SourceCache} from '../source/source_cache';
+import {EXTENT} from '../data/extent';
+import {pixelsToTileUnits} from '../source/pixels_to_tile_units';
+import {SegmentVector} from '../data/segment';
 import {RasterBoundsArray, PosArray, TriangleIndexArray, LineStripIndexArray} from '../data/array_types.g';
 import rasterBoundsAttributes from '../data/raster_bounds_attributes';
 import posAttributes from '../data/pos_attributes';
-import ProgramConfiguration from '../data/program_configuration';
-import CrossTileSymbolIndex from '../symbol/cross_tile_symbol_index';
-import shaders from '../shaders/shaders';
-import Program from './program';
+import {ProgramConfiguration} from '../data/program_configuration';
+import {CrossTileSymbolIndex} from '../symbol/cross_tile_symbol_index';
+import {shaders} from '../shaders/shaders';
+import {Program} from './program';
 import {programUniforms} from './program/program_uniforms';
-import Context from '../gl/context';
-import DepthMode from '../gl/depth_mode';
-import StencilMode from '../gl/stencil_mode';
-import ColorMode from '../gl/color_mode';
-import CullFaceMode from '../gl/cull_face_mode';
-import Texture from './texture';
+import {Context} from '../gl/context';
+import {DepthMode} from '../gl/depth_mode';
+import {StencilMode} from '../gl/stencil_mode';
+import {ColorMode} from '../gl/color_mode';
+import {CullFaceMode} from '../gl/cull_face_mode';
+import {Texture} from './texture';
 import {clippingMaskUniformValues} from './program/clipping_mask_program';
 import {Color} from '@maplibre/maplibre-gl-style-spec';
-import symbol from './draw_symbol';
-import circle from './draw_circle';
-import heatmap from './draw_heatmap';
-import line from './draw_line';
-import fill from './draw_fill';
-import fillExtrusion from './draw_fill_extrusion';
-import hillshade from './draw_hillshade';
-import raster from './draw_raster';
-import background from './draw_background';
-import debug, {drawDebugPadding, selectDebugSource} from './draw_debug';
-import custom from './draw_custom';
+import {drawSymbols} from './draw_symbol';
+import {drawCircles} from './draw_circle';
+import {drawHeatmap} from './draw_heatmap';
+import {drawLine} from './draw_line';
+import {drawFill} from './draw_fill';
+import {drawFillExtrusion} from './draw_fill_extrusion';
+import {drawHillshade} from './draw_hillshade';
+import {drawRaster} from './draw_raster';
+import {drawBackground} from './draw_background';
+import {drawDebug, drawDebugPadding, selectDebugSource} from './draw_debug';
+import {drawCustom} from './draw_custom';
 import {drawDepth, drawCoords} from './draw_terrain';
 import {OverscaledTileID} from '../source/tile_id';
 
-const draw = {
-    symbol,
-    circle,
-    heatmap,
-    line,
-    fill,
-    'fill-extrusion': fillExtrusion,
-    hillshade,
-    raster,
-    background,
-    debug,
-    custom
-};
-
-import type Transform from '../geo/transform';
-import type Tile from '../source/tile';
-import type Style from '../style/style';
-import type StyleLayer from '../style/style_layer';
+import type {Transform} from '../geo/transform';
+import type {Tile} from '../source/tile';
+import type {Style} from '../style/style';
+import type {StyleLayer} from '../style/style_layer';
 import type {CrossFaded} from '../style/properties';
-import type LineAtlas from './line_atlas';
-import type ImageManager from './image_manager';
-import type GlyphManager from './glyph_manager';
-import type VertexBuffer from '../gl/vertex_buffer';
-import type IndexBuffer from '../gl/index_buffer';
+import type {LineAtlas} from './line_atlas';
+import type {ImageManager} from './image_manager';
+import type {GlyphManager} from './glyph_manager';
+import type {VertexBuffer} from '../gl/vertex_buffer';
+import type {IndexBuffer} from '../gl/index_buffer';
 import type {DepthRangeType, DepthMaskType, DepthFuncType} from '../gl/types';
 import type {ResolvedImage} from '@maplibre/maplibre-gl-style-spec';
-import RenderToTexture from './render_to_texture';
+import {RenderToTexture} from './render_to_texture';
 
 export type RenderPass = 'offscreen' | 'opaque' | 'translucent';
 
@@ -76,11 +62,8 @@ type PainterOptions = {
 
 /**
  * Initialize a new painter object.
- *
- * @param {Canvas} gl a webgl drawing context
- * @private
  */
-class Painter {
+export class Painter {
     context: Context;
     transform: Transform;
     renderToTexture: RenderToTexture;
@@ -149,8 +132,8 @@ class Painter {
      * for a new width and height value.
      */
     resize(width: number, height: number, pixelRatio: number) {
-        this.width = width * pixelRatio;
-        this.height = height * pixelRatio;
+        this.width = Math.floor(width * pixelRatio);
+        this.height = Math.floor(height * pixelRatio);
         this.pixelRatio = pixelRatio;
         this.context.viewport.set([0, 0, this.width, this.height]);
 
@@ -471,7 +454,7 @@ class Painter {
         if (this.options.showTileBoundaries) {
             const selectedSource = selectDebugSource(this.style, this.transform.zoom);
             if (selectedSource) {
-                draw.debug(this, selectedSource, selectedSource.getVisibleCoordinates());
+                drawDebug(this, selectedSource, selectedSource.getVisibleCoordinates());
             }
         }
 
@@ -489,16 +472,46 @@ class Painter {
         if (layer.type !== 'background' && layer.type !== 'custom' && !(coords || []).length) return;
         this.id = layer.id;
 
-        draw[layer.type](painter, sourceCache, layer as any, coords, this.style.placement.variableOffsets);
+        switch (layer.type) {
+            case 'symbol':
+                drawSymbols(painter, sourceCache, layer as any, coords, this.style.placement.variableOffsets);
+                break;
+            case 'circle':
+                drawCircles(painter, sourceCache, layer as any, coords);
+                break;
+            case 'heatmap':
+                drawHeatmap(painter, sourceCache, layer as any, coords);
+                break;
+            case 'line':
+                drawLine(painter, sourceCache, layer as any, coords);
+                break;
+            case 'fill':
+                drawFill(painter, sourceCache, layer as any, coords);
+                break;
+            case 'fill-extrusion':
+                drawFillExtrusion(painter, sourceCache, layer as any, coords);
+                break;
+            case 'hillshade':
+                drawHillshade(painter, sourceCache, layer as any, coords);
+                break;
+            case 'raster':
+                drawRaster(painter, sourceCache, layer as any, coords);
+                break;
+            case 'background':
+                drawBackground(painter, sourceCache, layer as any, coords);
+                break;
+            case 'custom':
+                drawCustom(painter, sourceCache, layer as any);
+                break;
+        }
     }
 
     /**
      * Transform a matrix to incorporate the *-translate and *-translate-anchor properties into it.
-     * @param inViewportPixelUnitsUnits True when the units accepted by the matrix are in viewport pixels instead of tile units.
-     * @returns {mat4} matrix
-     * @private
+     * @param inViewportPixelUnitsUnits - True when the units accepted by the matrix are in viewport pixels instead of tile units.
+     * @returns matrix
      */
-    translatePosMatrix(matrix: mat4, tile: Tile, translate: [number, number], translateAnchor: 'map' | 'viewport', inViewportPixelUnitsUnits?: boolean) {
+    translatePosMatrix(matrix: mat4, tile: Tile, translate: [number, number], translateAnchor: 'map' | 'viewport', inViewportPixelUnitsUnits?: boolean): mat4 {
         if (!translate[0] && !translate[1]) return matrix;
 
         const angle = inViewportPixelUnitsUnits ?
@@ -543,7 +556,6 @@ class Painter {
      * Checks whether a pattern image is needed, and if it is, whether it is not loaded.
      *
      * @returns true if a needed image is missing and rendering needs to be skipped.
-     * @private
      */
     isPatternMissing(image?: CrossFaded<ResolvedImage> | null): boolean {
         if (!image) return false;
@@ -617,6 +629,14 @@ class Painter {
             this.debugOverlayTexture.destroy();
         }
     }
-}
 
-export default Painter;
+    /*
+     * Return true if drawing buffer size is != from requested size.
+     * That means that we've reached GL limits somehow.
+     * Note: drawing buffer size changes only when canvas size changes
+     */
+    overLimit() {
+        const {drawingBufferWidth, drawingBufferHeight} = this.context.gl;
+        return this.width !== drawingBufferWidth || this.height !== drawingBufferHeight;
+    }
+}

package/src/render/program/background_program.ts

@@ -8,9 +8,9 @@ import {
 } from '../uniform_binding';
 import {extend} from '../../util/util';
 
-import type Painter from '../painter';
+import type {Painter} from '../painter';
 import type {UniformValues, UniformLocations} from '../uniform_binding';
-import type Context from '../../gl/context';
+import type {Context} from '../../gl/context';
 import type {Color, ResolvedImage} from '@maplibre/maplibre-gl-style-spec';
 import type {CrossFaded} from '../../style/properties';
 import type {CrossfadeParameters} from '../../style/evaluation_parameters';

package/src/render/program/circle_program.ts

@@ -1,12 +1,12 @@
 import {Uniform1i, Uniform1f, Uniform2f, UniformMatrix4f} from '../uniform_binding';
-import pixelsToTileUnits from '../../source/pixels_to_tile_units';
+import {pixelsToTileUnits} from '../../source/pixels_to_tile_units';
 
-import type Context from '../../gl/context';
+import type {Context} from '../../gl/context';
 import type {UniformValues, UniformLocations} from '../uniform_binding';
 import type {OverscaledTileID} from '../../source/tile_id';
-import type Tile from '../../source/tile';
-import type CircleStyleLayer from '../../style/style_layer/circle_style_layer';
-import type Painter from '../painter';
+import type {Tile} from '../../source/tile';
+import type {CircleStyleLayer} from '../../style/style_layer/circle_style_layer';
+import type {Painter} from '../painter';
 
 export type CircleUniformsType = {
     'u_camera_to_center_distance': Uniform1f;

package/src/render/program/clipping_mask_program.ts

@@ -1,6 +1,6 @@
 import {UniformMatrix4f} from '../uniform_binding';
 
-import type Context from '../../gl/context';
+import type {Context} from '../../gl/context';
 import type {UniformValues, UniformLocations} from '../uniform_binding';
 import {mat4} from 'gl-matrix';
 

package/src/render/program/collision_program.ts

@@ -1,10 +1,10 @@
 import {Uniform1f, Uniform2f, UniformMatrix4f} from '../uniform_binding';
-import pixelsToTileUnits from '../../source/pixels_to_tile_units';
+import {pixelsToTileUnits} from '../../source/pixels_to_tile_units';
 
-import type Context from '../../gl/context';
+import type {Context} from '../../gl/context';
 import type {UniformValues, UniformLocations} from '../uniform_binding';
-import type Transform from '../../geo/transform';
-import type Tile from '../../source/tile';
+import type {Transform} from '../../geo/transform';
+import type {Tile} from '../../source/tile';
 import {mat4} from 'gl-matrix';
 
 export type CollisionUniformsType = {

package/src/render/program/debug_program.ts

@@ -1,6 +1,6 @@
 import {UniformColor, UniformMatrix4f, Uniform1i, Uniform1f} from '../uniform_binding';
 
-import type Context from '../../gl/context';
+import type {Context} from '../../gl/context';
 import type {UniformValues, UniformLocations} from '../uniform_binding';
 import type {Color} from '@maplibre/maplibre-gl-style-spec';
 import {mat4} from 'gl-matrix';

package/src/render/program/fill_extrusion_program.ts

@@ -10,12 +10,12 @@ import {
 import {mat3, mat4, vec3} from 'gl-matrix';
 import {extend} from '../../util/util';
 
-import type Context from '../../gl/context';
-import type Painter from '../painter';
+import type {Context} from '../../gl/context';
+import type {Painter} from '../painter';
 import type {OverscaledTileID} from '../../source/tile_id';
 import type {UniformValues, UniformLocations} from '../uniform_binding';
 import type {CrossfadeParameters} from '../../style/evaluation_parameters';
-import type Tile from '../../source/tile';
+import type {Tile} from '../../source/tile';
 
 export type FillExtrusionUniformsType = {
     'u_matrix': UniformMatrix4f;

package/src/render/program/fill_program.ts

@@ -8,11 +8,11 @@ import {
 } from '../uniform_binding';
 import {extend} from '../../util/util';
 
-import type Painter from '../painter';
+import type {Painter} from '../painter';
 import type {UniformValues, UniformLocations} from '../uniform_binding';
-import type Context from '../../gl/context';
+import type {Context} from '../../gl/context';
 import type {CrossfadeParameters} from '../../style/evaluation_parameters';
-import type Tile from '../../source/tile';
+import type {Tile} from '../../source/tile';
 import {mat4} from 'gl-matrix';
 
 export type FillUniformsType = {

package/src/render/program/heatmap_program.ts

@@ -6,13 +6,13 @@ import {
     Uniform2f,
     UniformMatrix4f
 } from '../uniform_binding';
-import pixelsToTileUnits from '../../source/pixels_to_tile_units';
+import {pixelsToTileUnits} from '../../source/pixels_to_tile_units';
 
-import type Context from '../../gl/context';
-import type Tile from '../../source/tile';
+import type {Context} from '../../gl/context';
+import type {Tile} from '../../source/tile';
 import type {UniformValues, UniformLocations} from '../uniform_binding';
-import type Painter from '../painter';
-import type HeatmapStyleLayer from '../../style/style_layer/heatmap_style_layer';
+import type {Painter} from '../painter';
+import type {HeatmapStyleLayer} from '../../style/style_layer/heatmap_style_layer';
 
 export type HeatmapUniformsType = {
     'u_extrude_scale': Uniform1f;

package/src/render/program/hillshade_program.ts

@@ -8,15 +8,15 @@ import {
     UniformMatrix4f,
     Uniform4f
 } from '../uniform_binding';
-import EXTENT from '../../data/extent';
-import MercatorCoordinate from '../../geo/mercator_coordinate';
+import {EXTENT} from '../../data/extent';
+import {MercatorCoordinate} from '../../geo/mercator_coordinate';
 
-import type Context from '../../gl/context';
+import type {Context} from '../../gl/context';
 import type {UniformValues, UniformLocations} from '../uniform_binding';
-import type Tile from '../../source/tile';
-import type Painter from '../painter';
-import type HillshadeStyleLayer from '../../style/style_layer/hillshade_style_layer';
-import type DEMData from '../../data/dem_data';
+import type {Tile} from '../../source/tile';
+import type {Painter} from '../painter';
+import type {HillshadeStyleLayer} from '../../style/style_layer/hillshade_style_layer';
+import type {DEMData} from '../../data/dem_data';
 import type {OverscaledTileID} from '../../source/tile_id';
 
 export type HillshadeUniformsType = {

package/src/render/program/line_program.ts

@@ -1,14 +1,14 @@
 import {Uniform1i, Uniform1f, Uniform2f, Uniform3f, UniformMatrix4f} from '../uniform_binding';
-import pixelsToTileUnits from '../../source/pixels_to_tile_units';
+import {pixelsToTileUnits} from '../../source/pixels_to_tile_units';
 import {extend} from '../../util/util';
 
-import type Context from '../../gl/context';
+import type {Context} from '../../gl/context';
 import type {UniformValues, UniformLocations} from '../uniform_binding';
-import type Transform from '../../geo/transform';
-import type Tile from '../../source/tile';
+import type {Transform} from '../../geo/transform';
+import type {Tile} from '../../source/tile';
 import type {CrossFaded} from '../../style/properties';
-import type LineStyleLayer from '../../style/style_layer/line_style_layer';
-import type Painter from '../painter';
+import type {LineStyleLayer} from '../../style/style_layer/line_style_layer';
+import type {Painter} from '../painter';
 import type {CrossfadeParameters} from '../../style/evaluation_parameters';
 import {OverscaledTileID} from '../../source/tile_id';
 

package/src/render/program/pattern.ts

@@ -4,14 +4,14 @@ import {
     Uniform2f,
     Uniform3f
 } from '../uniform_binding';
-import pixelsToTileUnits from '../../source/pixels_to_tile_units';
+import {pixelsToTileUnits} from '../../source/pixels_to_tile_units';
 
-import type Painter from '../painter';
+import type {Painter} from '../painter';
 import type {OverscaledTileID} from '../../source/tile_id';
 import type {CrossFaded} from '../../style/properties';
 import type {CrossfadeParameters} from '../../style/evaluation_parameters';
 import type {UniformValues} from '../uniform_binding';
-import type Tile from '../../source/tile';
+import type {Tile} from '../../source/tile';
 import type {ResolvedImage} from '@maplibre/maplibre-gl-style-spec';
 
 type BackgroundPatternUniformsType = {

package/src/render/program/raster_program.ts

@@ -1,8 +1,8 @@
 import {Uniform1i, Uniform1f, Uniform2f, Uniform3f, UniformMatrix4f} from '../uniform_binding';
 
-import type Context from '../../gl/context';
+import type {Context} from '../../gl/context';
 import type {UniformValues, UniformLocations} from '../uniform_binding';
-import type RasterStyleLayer from '../../style/style_layer/raster_style_layer';
+import type {RasterStyleLayer} from '../../style/style_layer/raster_style_layer';
 import {mat4} from 'gl-matrix';
 
 export type RasterUniformsType = {

package/src/render/program/symbol_program.ts

@@ -1,8 +1,8 @@
 import {Uniform1i, Uniform1f, Uniform2f, UniformMatrix4f} from '../uniform_binding';
 import {extend} from '../../util/util';
 
-import type Context from '../../gl/context';
-import type Painter from '../painter';
+import type {Context} from '../../gl/context';
+import type {Painter} from '../painter';
 import type {UniformValues, UniformLocations} from '../uniform_binding';
 import {mat4} from 'gl-matrix';
 

package/src/render/program/terrain_program.ts

@@ -4,7 +4,7 @@ import {
     Uniform4f,
     UniformMatrix4f
 } from '../uniform_binding';
-import type Context from '../../gl/context';
+import type {Context} from '../../gl/context';
 import type {UniformValues, UniformLocations} from '../../render/uniform_binding';
 import {mat4} from 'gl-matrix';
 

package/src/render/program.ts

@@ -1,20 +1,20 @@
-import shaders from '../shaders/shaders';
-import ProgramConfiguration from '../data/program_configuration';
-import VertexArrayObject from './vertex_array_object';
-import Context from '../gl/context';
-
-import type SegmentVector from '../data/segment';
-import type VertexBuffer from '../gl/vertex_buffer';
-import type IndexBuffer from '../gl/index_buffer';
-import type DepthMode from '../gl/depth_mode';
-import type StencilMode from '../gl/stencil_mode';
-import type ColorMode from '../gl/color_mode';
-import type CullFaceMode from '../gl/cull_face_mode';
+import {shaders} from '../shaders/shaders';
+import {ProgramConfiguration} from '../data/program_configuration';
+import {VertexArrayObject} from './vertex_array_object';
+import {Context} from '../gl/context';
+
+import type {SegmentVector} from '../data/segment';
+import type {VertexBuffer} from '../gl/vertex_buffer';
+import type {IndexBuffer} from '../gl/index_buffer';
+import type {DepthMode} from '../gl/depth_mode';
+import type {StencilMode} from '../gl/stencil_mode';
+import type {ColorMode} from '../gl/color_mode';
+import type {CullFaceMode} from '../gl/cull_face_mode';
 import type {UniformBindings, UniformValues, UniformLocations} from './uniform_binding';
 import type {BinderUniform} from '../data/program_configuration';
 import {terrainPreludeUniforms, TerrainPreludeUniformsType} from './program/terrain_program';
 import type {TerrainData} from '../render/terrain';
-import Terrain from '../render/terrain';
+import {Terrain} from '../render/terrain';
 
 export type DrawMode = WebGLRenderingContextBase['LINES'] | WebGLRenderingContextBase['TRIANGLES'] | WebGL2RenderingContext['LINE_STRIP'];
 
@@ -28,7 +28,11 @@ function getTokenizedAttributesAndUniforms(array: Array<string>): Array<string>
     }
     return result;
 }
-class Program<Us extends UniformBindings> {
+
+/**
+ * A webgl program to execute in the GPU space
+ */
+export class Program<Us extends UniformBindings> {
     program: WebGLProgram;
     attributes: {[_: string]: number};
     numAttributes: number;
@@ -212,5 +216,3 @@ class Program<Us extends UniformBindings> {
         }
     }
 }
-
-export default Program;

package/src/render/render_to_texture.test.ts

@@ -1,21 +1,21 @@
-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 {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 gl from 'gl';
-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 {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 {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';
+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 backgroundLayer = {

package/src/render/render_to_texture.ts

@@ -1,13 +1,13 @@
-import Painter from './painter';
-import Tile from '../source/tile';
+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';
+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 } = {
@@ -21,7 +21,7 @@ const LAYERS: { [keyof in StyleLayer['type']]?: boolean } = {
 /**
  * RenderToTexture
  */
-export default class RenderToTexture {
+export class RenderToTexture {
     painter: Painter;
     terrain: Terrain;
     pool: RenderPool;
@@ -108,8 +108,8 @@ export default class RenderToTexture {
      * 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 {StyleLayer} layer the layer to render
-     * @returns {boolean} if true layer is rendered to texture, otherwise false
+     * @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;

package/src/render/terrain.test.ts

@@ -1,15 +1,16 @@
 import Point from '@mapbox/point-geometry';
-import Terrain from './terrain';
+import {Terrain} from './terrain';
 import gl from 'gl';
-import Context from '../gl/context';
+import {Context} from '../gl/context';
 import {RGBAImage} from '../util/image';
-import Texture from './texture';
-import type SourceCache from '../source/source_cache';
+import {Texture} from './texture';
+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 type {DEMData} from '../data/dem_data';
+import {Tile} from '../source/tile';
+import {Painter} from './painter';
+import {mat4} from 'gl-matrix';
 
 describe('Terrain', () => {
     test('pointCoordiate should not return null', () => {
@@ -162,4 +163,34 @@ describe('Terrain', () => {
         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);
+    });
+
 });