maplibre · HarelM · May 12, 2022 · Jun 2, 2021 · Jun 2, 2021 · Jun 2, 2021
diff --git a/build/generate-style-spec.ts b/build/generate-style-spec.ts
@@ -197,6 +197,8 @@ ${objectDeclaration('StyleSpecification', spec.$root)}
 
 ${objectDeclaration('LightSpecification', spec.light)}
 
+${objectDeclaration('TerrainSpecification', spec.terrain)}
+
 ${spec.source.map(key => objectDeclaration(sourceTypeName(key), spec[key])).join('\n\n')}
 
 export type SourceSpecification =

diff --git a/debug/terrain.html b/debug/terrain.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>MapLibre GL JS debug page for terrian</title>
+    <meta charset='utf-8'>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <link rel='stylesheet' href='../dist/maplibre-gl.css' />
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+
+        html,
+        body,
+        #map {
+            height: 100%;
+        }
+    </style>
+</head>
+
+<body>
+    <div id='map'></div>
+
+    <script src='../dist/maplibre-gl-dev.js'></script>
+    <script>
+        var map = window.map = new maplibregl.Map({
+            container: 'map',
+            zoom: 12,
+            center: [11.39085, 47.27574],
+            pitch: 52,
+            hash: true,
+            style: {
+                version: 8,
+                sources: {
+                    osm: {
+                        type: 'raster',
+                        tiles: ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'],
+                        tileSize: 256,
+                        attribution: '&copy; OpenStreetMap Contributors',
+                        maxzoom: 19
+                    },
+                    terrainSource: {
+                        type: 'raster-dem',
+                        url: 'https://demotiles.maplibre.org/terrain-tiles/tiles.json',
+                        tileSize: 256
+                    },
+                    hillshadeSource: {
+                        type: 'raster-dem',
+                        url: 'https://demotiles.maplibre.org/terrain-tiles/tiles.json',
+                        tileSize: 256
+                    },
+                },
+                layers: [
+                    {
+                        id: 'osm',
+                        type: 'raster',
+                        source: 'osm'
+                    },
+                    {
+                        id: 'hills',
+                        type: 'hillshade',
+                        source: 'hillshadeSource',
+                        layout: {'visibility': 'visible'},
+                        paint: {'hillshade-shadow-color': '#473B24'}
+                    }
+                ],
+                terrain: {
+                    source: 'terrainSource',
+                    exaggeration: 1
+                }
+            },
+            maxZoom: 18,
+            maxPitch: 85
+        });
+
+        map.addControl(new maplibregl.NavigationControl({
+            visualizePitch: true,
+            showZoom: true,
+            showCompass: true
+        }));
+
+        map.addControl(
+            new maplibregl.TerrainControl({
+                source: 'terrainSource',
+                exaggeration: 1
+            })
+        );
+    </script>
+</body>
+
+</html>
diff --git a/src/css/maplibre-gl.css b/src/css/maplibre-gl.css
@@ -308,6 +308,26 @@
     }
 }
 
+@svg-load ctrl-terrain url("svg/maplibregl-ctrl-terrain.svg") {
+    fill: #333;
+    #stroke { display: none; }
+}
+
+@svg-load ctrl-terrain-enabled url("svg/maplibregl-ctrl-terrain.svg") {
+    fill: #33b5e5;
+    #stroke { display: none; }
+}
+
+.maplibregl-ctrl button.maplibregl-ctrl-terrain .maplibregl-ctrl-icon,
+.mapboxgl-ctrl button.mapboxgl-ctrl-terrain .mapboxgl-ctrl-icon {
+    background-image: svg-inline(ctrl-terrain);
+}
+
+.maplibregl-ctrl button.maplibregl-ctrl-terrain-enabled .maplibregl-ctrl-icon,
+.mapboxgl-ctrl button.mapboxgl-ctrl-terrain-enabled .mapboxgl-ctrl-icon {
+    background-image: svg-inline(ctrl-terrain-enabled);
+}
+
 @svg-load ctrl-geolocate url("svg/maplibregl-ctrl-geolocate.svg") {
     fill: #333;
     #stroke { display: none; }

diff --git a/src/css/svg/maplibregl-ctrl-terrain.svg b/src/css/svg/maplibregl-ctrl-terrain.svg
diff --git a/src/data/bucket/fill_extrusion_attributes.ts b/src/data/bucket/fill_extrusion_attributes.ts
@@ -5,5 +5,9 @@ const layout = createLayout([
     {name: 'a_normal_ed',    components: 4, type: 'Int16'},
 ], 4);
 
+export const centroidAttributes = createLayout([
+    {name: 'a_centroid', components: 2, type: 'Int16'}
+], 4);
+
 export default layout;
 export const {members, size, alignment} = layout;
diff --git a/src/data/bucket/fill_extrusion_bucket.ts b/src/data/bucket/fill_extrusion_bucket.ts
@@ -1,6 +1,6 @@
-import {FillExtrusionLayoutArray} from '../array_types.g';
+import {FillExtrusionLayoutArray, PosArray} from '../array_types.g';
 
-import {members as layoutAttributes} from './fill_extrusion_attributes';
+import {members as layoutAttributes, centroidAttributes} from './fill_extrusion_attributes';
 import SegmentVector from '../segment';
 import {ProgramConfigurationSet} from '../program_configuration';
 import {TriangleIndexArray} from '../index_array_type';
@@ -63,6 +63,9 @@ class FillExtrusionBucket implements Bucket {
     layoutVertexArray: FillExtrusionLayoutArray;
     layoutVertexBuffer: VertexBuffer;
 
+    centroidVertexArray: PosArray;
+    centroidVertexBuffer: VertexBuffer;
+
     indexArray: TriangleIndexArray;
     indexBuffer: IndexBuffer;
 
@@ -81,11 +84,11 @@ class FillExtrusionBucket implements Bucket {
         this.hasPattern = false;
 
         this.layoutVertexArray = new FillExtrusionLayoutArray();
+        this.centroidVertexArray = new PosArray();
         this.indexArray = new TriangleIndexArray();
         this.programConfigurations = new ProgramConfigurationSet(options.layers, options.zoom);
         this.segments = new SegmentVector();
         this.stateDependentLayerIds = this.layers.filter((l) => l.isStateDependent()).map((l) => l.id);
-
     }
 
     populate(features: Array<IndexedFeature>, options: PopulateParameters, canonical: CanonicalTileID) {
@@ -131,7 +134,7 @@ class FillExtrusionBucket implements Bucket {
     }
 
     isEmpty() {
-        return this.layoutVertexArray.length === 0;
+        return this.layoutVertexArray.length === 0 && this.centroidVertexArray.length === 0;
     }
 
     uploadPending() {
@@ -141,6 +144,7 @@ class FillExtrusionBucket implements Bucket {
     upload(context: Context) {
         if (!this.uploaded) {
             this.layoutVertexBuffer = context.createVertexBuffer(this.layoutVertexArray, layoutAttributes);
+            this.centroidVertexBuffer = context.createVertexBuffer(this.centroidVertexArray, centroidAttributes.members, true);
             this.indexBuffer = context.createIndexBuffer(this.indexArray);
         }
         this.programConfigurations.upload(context);
@@ -153,9 +157,11 @@ class FillExtrusionBucket implements Bucket {
         this.indexBuffer.destroy();
         this.programConfigurations.destroy();
         this.segments.destroy();
+        this.centroidVertexBuffer.destroy();
     }
 
     addFeature(feature: BucketFeature, geometry: Array<Array<Point>>, index: number, canonical: CanonicalTileID, imagePositions: {[_: string]: ImagePosition}) {
+        const centroid = {x: 0, y: 0, vertexCount: 0};
         for (const polygon of classifyRings(geometry, EARCUT_MAX_RINGS)) {
             let numVertices = 0;
             for (const ring of polygon) {
@@ -191,11 +197,17 @@ class FillExtrusionBucket implements Bucket {
 
                             addVertex(this.layoutVertexArray, p1.x, p1.y, perp.x, perp.y, 0, 0, edgeDistance);
                             addVertex(this.layoutVertexArray, p1.x, p1.y, perp.x, perp.y, 0, 1, edgeDistance);
+                            centroid.x += 2 * p1.x;
+                            centroid.y += 2 * p1.y;
+                            centroid.vertexCount += 2;
 
                             edgeDistance += dist;
 
                             addVertex(this.layoutVertexArray, p2.x, p2.y, perp.x, perp.y, 0, 0, edgeDistance);
                             addVertex(this.layoutVertexArray, p2.x, p2.y, perp.x, perp.y, 0, 1, edgeDistance);
+                            centroid.x += 2 * p2.x;
+                            centroid.y += 2 * p2.y;
+                            centroid.vertexCount += 2;
 
                             const bottomRight = segment.vertexLength;
 
@@ -212,6 +224,7 @@ class FillExtrusionBucket implements Bucket {
                         }
                     }
                 }
+
             }
 
             if (segment.vertexLength + numVertices > SegmentVector.MAX_VERTEX_ARRAY_LENGTH) {
@@ -240,10 +253,14 @@ class FillExtrusionBucket implements Bucket {
                     const p = ring[i];
 
                     addVertex(this.layoutVertexArray, p.x, p.y, 0, 0, 1, 1, 0);
+                    centroid.x += p.x;
+                    centroid.y += p.y;
+                    centroid.vertexCount += 1;
 
                     flattened.push(p.x);
                     flattened.push(p.y);
                 }
+
             }
 
             const indices = earcut(flattened, holeIndices);
@@ -261,6 +278,13 @@ class FillExtrusionBucket implements Bucket {
             segment.vertexLength += numVertices;
         }
 
+        // remember polygon centroid to calculate elevation in GPU
+        for (let i = 0; i < centroid.vertexCount; i++) {
+            this.centroidVertexArray.emplaceBack(
+                Math.floor(centroid.x / centroid.vertexCount),
+                Math.floor(centroid.y / centroid.vertexCount)
+            );
+        }
         this.programConfigurations.populatePaintArrays(this.layoutVertexArray.length, feature, index, imagePositions, canonical);
     }
 }

diff --git a/src/data/dem_data.test.ts b/src/data/dem_data.test.ts
@@ -222,13 +222,26 @@ describe('DEMData is correctly serialized and deserialized', () => {
         const dem0 = new DEMData('0', imageData0, 'mapbox');
         const serialized = serialize(dem0);
 
+        // calculate min/max values
+        let min = Number.MAX_SAFE_INTEGER;
+        let max = Number.MIN_SAFE_INTEGER;
+        for (let x = 0; x < 4; x++) {
+            for (let y = 0; y < 4; y++) {
+                const ele = dem0.get(x, y);
+                if (ele > max) max = ele;
+                if (ele < min) min = ele;
+            }
+        }
+
         expect(serialized).toEqual({
             $name: 'DEMData',
             uid: '0',
             dim: 4,
             stride: 6,
             data: dem0.data,
-            encoding: 'mapbox'
+            encoding: 'mapbox',
+            max,
+            min,
         });
 
         const transferrables = [];

diff --git a/src/data/dem_data.ts b/src/data/dem_data.ts
@@ -18,6 +18,8 @@ export default class DEMData {
     data: Uint32Array;
     stride: number;
     dim: number;
+    min: number;
+    max: number;
     encoding: 'mapbox' | 'terrarium';
 
     // RGBAImage data has uniform 1px padding on all sides: square tile edge size defines stride
@@ -52,6 +54,17 @@ export default class DEMData {
         this.data[this._idx(dim, -1)] = this.data[this._idx(dim - 1, 0)];
         this.data[this._idx(-1, dim)] = this.data[this._idx(0, dim - 1)];
         this.data[this._idx(dim, dim)] = this.data[this._idx(dim - 1, dim - 1)];
+
+        // calculate min/max values
+        this.min = Number.MAX_SAFE_INTEGER;
+        this.max = Number.MIN_SAFE_INTEGER;
+        for (let x = 0; x < dim; x++) {
+            for (let y = 0; y < dim; y++) {
+                const ele = this.get(x, y);
+                if (ele > this.max) this.max = ele;
+                if (ele < this.min) this.min = ele;
+            }
+        }
     }
 
     get(x: number, y: number) {

diff --git a/src/geo/transform.test.ts b/src/geo/transform.test.ts
@@ -3,6 +3,7 @@ import Transform from './transform';
 import LngLat from './lng_lat';
 import {OverscaledTileID, CanonicalTileID} from '../source/tile_id';
 import {fixedLngLat, fixedCoord} from '../../test/unit/lib/fixed';
+import type Terrain from '../render/terrain';
 
 describe('transform', () => {
     test('creates a transform', () => {
@@ -340,7 +341,6 @@ describe('transform', () => {
     });
 
     test('maintains high float precision when calculating matrices', () => {
-
         const transform = new Transform(0, 22, 0, 60, true);
         transform.resize(200.25, 200.25);
         transform.zoom = 20.25;
@@ -352,4 +352,59 @@ describe('transform', () => {
         expect(transform.glCoordMatrix[0].toString().length).toBeGreaterThan(10);
         expect(transform.maxPitchScaleFactor()).toBeCloseTo(2.366025418080343, 10);
     });
+
+    test('recalcuateZoom', () => {
+        const transform = new Transform(0, 22, 0, 60, true);
+        transform.elevation = 200;
+        transform.center = new LngLat(10.0, 50.0);
+        transform.zoom = 14;
+        transform.resize(512, 512);
+
+        // expect same values because of no elevation change
+        transform.getElevation = () => 200;
+        transform.recalculateZoom(null);
+        expect(transform.zoom).toBe(14);
+
+        // expect new zoom because of elevation change
+        transform.getElevation = () => 400;
+        transform.recalculateZoom(null);
+        expect(transform.zoom).toBe(14.127997275621933);
+        expect(transform.elevation).toBe(400);
+        expect(transform._center.lng).toBe(10.00000000000071);
+        expect(transform._center.lat).toBe(50.00000000000017);
+    });
+
+    test('pointCoordinate with terrain when returning null should fall back to 2D', () => {
+        const transform = new Transform(0, 22, 0, 60, true);
+        transform.resize(500, 500);
+        const terrain = {
+            pointCoordinate: () => null
+        } as any as Terrain;
+        const coordinate = transform.pointCoordinate(new Point(0, 0), terrain);
+
+        expect(coordinate).toBeDefined();
+    });
+
+    test('horizon', () => {
+        const transform = new Transform(0, 22, 0, 85, true);
+        transform.resize(500, 500);
+        transform.pitch = 75;
+        const horizon = transform.getHorizon();
+
+        expect(horizon).toBeCloseTo(170.8176101748407, 10);
+    });
+
+    test('getBounds with horizon', () => {
+        const transform = new Transform(0, 22, 0, 85, true);
+        transform.resize(500, 500);
+
+        transform.pitch = 60;
+        expect(transform.getBounds().getNorthWest().toArray()).toStrictEqual(transform.pointLocation(new Point(0, 0)).toArray());
+
+        transform.pitch = 75;
+        const top = Math.max(0, transform.height / 2 - transform.getHorizon());
+        expect(top).toBeCloseTo(79.1823898251593, 10);
+        expect(transform.getBounds().getNorthWest().toArray()).toStrictEqual(transform.pointLocation(new Point(0, top)).toArray());
+    });
+
 });