Terrain 3D (#1022)

* A working prototype, which adds 3d-terrain to maplibre-gl. Sadly, during the development i did no intermediate commits, so in this first commit all the following functionality is included: * allow MTK terrainRGB-tiles encoding with parameters: [6553.6, 25.6, 0.03, 10000.0]. In our opinion 0.1 for height-steps is to rough. * create a TerrainSourceCache.js class which is similar to SourceCache.js and holds all the terrain-tiles used for the 3D-mesh. If a terrainRGB tile is used in both, terrain & hillshading, it is loaded twice. This makes the whole process much more easy. * create a 3d-mesh in raster_dem_tile_worker_source.js with the martini library. * rewrite the draw logic to render all layers, except symbols, into a framebuffer. This framebuffer a later used as a texture onto the 3d-mesh. * rewrite symbol rendering to use 3d-coordinates. This is done with an extra a_ele shader parameter, because the z-value of the a_pos variable is already used for other things. * add the third dimension into the collision index. * create a terrain.html test-page. * render more tiles to avoid wholes on tiled maps at canvas bottom * Proof of concept! to get mercator-coords from the 3d-mesh on screen. This is done with an extra framebuffer in which all tile coordinates are rendered in an encoded rgb value. Dont know why, but this framebuffer looks very inperformant. As advantage, grabbing coordinates from screen is very fast. It may help to render the framebuffer only every 100ms instead of every requestAnimationFrame? This logic is currently used in * map.project * map.unproject. Other usecases are: * elevate camera over terrain * use in mouse-events * use in queryRenderedFeatures * fix bug in picking correct coords from coordsFramebuffer * Add Depthbuffer to RTT Framebuffer * add z-dimension to circle layers * switch to regular grid, correct rendering below ZL14, remove visible tile-boundaries * fix raster-rendering, hacky performance improvement * add z-dimension to fill-extrusion * fix regular grid * hide symbols behind terrain * calculate elevation of symbol/circle/extrusion only once * render coords-framebuffer only on camera movement * improve performacne: render layers to texture only once * * raise camera to correct zoomlevel-distance over terrain * add exaggeration setting in TerrainSourceCache * fix farZ clipping-plane * set points: any declaration to Array<Object> * Add an elevation offset of 450m to put the dead sea into positive values * add yarn.lock file with martini entries * render tiles only if terrain is loaded * reuse framebuffer objects during rtt rendering * reuse regular-mesh in all tiles * add transform.elevation * create transform.invProjMatrix before elevation correcture * * move exaggeration calculation into shaders * new more performant encoding of the coords-framebuffer * some minor fixes, add map.addTerrain and map.removeTerrain * refactor texture rendering * decrease the number of framebuffers * decrease the number of framebuffer/texture switches * more caching and less re-rendering the old render-pipeline renders layer by layer, which is ok to render on display framebuffer, but when rendering into a textures it is more performant to render all necessary layers at once. * moved elevation-calculation to GPU This checkin is only for backup, so do not test! * changed elevation calculation from CPU to GPU This change had a big impact in performacne. To calculate the hight in CPU sometimes about 100ms per tile was needed. When loading a lot of tiles the framerate was really bad. This works now much better. NOTE: Currently only the Mesh elevation is moved to GPU, symbols are still calculated via the CPU. * refactor render to texture workflow below ZL 14 Until now, below ZL 14 (e.g. our Vector-Tile maxzoom) the tile-size increased with ZL, so ZL 1-14 had 1024px, ZL 15 2048px, ZL 16 4096px, and so on. This was very easy to program, but needed also a lot of GPU performacne and RAM. So now, the TerrainSourceCache holds tiles for each zoomlevel of the size 1024, and below ZL 14 in each is renderd a sub-region of ZL 14. * refactor the coords-framebuffer. Also the coords-framebuffer use a textures with 1024px in size. To avoid bluring the texture below ZL 14 an additional small texture is needed (u_coords_index) which holds in its RGBA values the tile quadrants of the sub-regions. NOTE: This is currently a work in progress! * fix calculate_visibility in overzoomed terrain-tiles * add very basic logic of loading tiles in respect of their elevation * correct unprojecting coordinates * correct calculation of elevation in CPU for different maxzoom settings * calcuate symbol visibility via a depth-framebuffer, because the coords-framebuffer visibility calculation gets to wired if terrain-tiles & vector-tiles has different maxzoom settings * fix symbol flickering * typo * move symbol/circle/fill_extrusion height calculation to GPU * bugfix when rerender tiles, closes #24 * * free GPU less aggressive * add deltaZoom setting to load less detailed terraintiles * fix bug in _emptyDemTexture * redraw only necesarry tiles (this still has bugs!) * bugfix with TerrainSourceCache.deltaZoom * * bugfix in u_terrain_matrix * remember texture-coords to know which tile has to rerender * disable raster fading if 3d is enabled * add linear interpolation * remove visible tile-boundaries * reimplement deltaZoom * fix marker wobbling & check visibility * some code cleanup * ... * use preloaded terraintiles when zooming in and out * ... * bugfix for empty render-to-texture stack * set LOD tile-loading in case of terrain3d * avoid double-rendering (because of fading logic) of raster tiles * calculate_visibility now checks visibility also some pixels above * ... * add code-documentation * remove mtk raster-dem tiles hack * add more minor fixes and add some comments * bugfix for collision-index calculation with disabled 3d, fixes #38 * revert old fill_extrusion_bucket centroid code, because new logic had bugs * fixes #36 * Update CHANGELOG.md * Revert "Update CHANGELOG.md" This reverts commit 0b81a41. * attribution fixes (from astridx) a1272d9 b9b0370 * Update .gitignore * fix missing new line lint complained about * first try (not finished) to leave the camera at the same height when dragging map. * Revert "attribution fixes (from astridx)" This reverts commit 2031d8e. * Create a TerrainControl to toggle terrain * fix tabs and comment * change exaggeration type to number. add options to control example * change terrain icon fill color when enabled remove second "flat/enabled" svg. used color from gps location button. * revert some merge changes * Revert package-lock.json for pull request * some improvements leave the camera in the same height during paning * set default pitch back to 65, because of too much labels & missing sky * fix "mismatched image size" errors in some of our stylesheets * add default values during tinySDF generation * fire "terrain" events * let use TerrainControl use terrain-Event * typo * may fix farZ clippingplane calculation * fix TileID-order of transform.coveringTiles result * call transform.updateElevation on every rendering * rerender rtt tiles on geojson.setData * freezeElevation while camera-easing * make tests running * speedup symbol-placement in 2D mode * ... * add first very poor TerrainSourceCache test * ... * show correct tileBoundaries & collisionBoxes in terrain * load LOD tiles in respect of terrain * rename getElevationWithExaggeration to getElevation * calculate tileDistanceToCamera form future-use in tile reduction algorithm * update terrain-test page to maxPitch = 85 * Fix some lint warnings * Fix some lint warnings * lint warning fixes * Improve typings, fix lint warnings * Add type to getElevation parameter * Update collision expected again? * calculate farZ clipping-plane in respect of transform.getHorizon * reduce number of loaded tiles * fix transform.locationPoint in 3d-mode * fix not rendered areas in high zoomlevels * fix typescript errors * fix mouse zoom & tilt logic in 2D * if last layer is a rtt layer, do not render it twice, fixes #1036 * correct calculation of queryRenderedFeatures coordinates in 3d-mode. fixes #1075 * Fix build typescript generation * remove fixme's and create issues for that * Small code fixes to avoid review comments * Fix lint * Fix draw_symbol unit test * Fix unit test * Remove console.log * Fix build * refacture TerrainSourceCache class * fix lint errors * add tests for sourceCache.usedForTerrain partent-tile-logic * minor fixes * Added some types and minor changes. * encapsulate a_centroid shader attributes to #TERRAIN3D preprocessor * remove terrain-instance from transform class, instead put as argument * add forgotten return statements * Add terrain to style spec (#1138) * Add terrain to style spec * Fix lint * Added a test in style to make sure the terrain is created. * fix lint * Added validator to terrain object * update some code-comments * do not upload fill-extrusion centroid vertextbuffer in 2d * transform.elevation setter: do not set unmodified state to let map.load event set correct map-location * fix minor bugs when enable/disable terrain * fix lint * add test for recalcuateZoom * Fixes related to console errors and some typings improvement in terrain branch (#1182) * Fixes related to console errors and some typings improvement * Fix lint * Added -1 for terrain calculation, added a test, fixed public field * Add typings * Use MapTiler terrain tiles (#1184) * Use MapTiler terrain tiles * Default location Innsbruck, add terrain control * Remove terrain_control debug page * remove freezeElevation event when disable terrain3d, fixes #1185 * Fixes #1186 - add typeof guard check * Terrain3D symbol cutoff at horizon (#1188) * implement collision-index perspective cutoff logic * getBounds calculate corners based on visible horizion * add tests * Use demotiles.maplibre.org (#1190) * Fix terrain source button (#1192) * When terrain is on, render last layer correct, fixes #1124 (#1189) * when terrain is on render last layer correct, fixes #1124 * Added test to verify the bug * Fix lint Co-authored-by: HarelM <harel.mazor@gmail.com> * Fix lint Co-authored-by: max demmelbauer <max@toursprung.com> Co-authored-by: Andrew Calcutt <acalcutt@techidiots.net> Co-authored-by: acalcutt <acalcutt@worcester.edu> Co-authored-by: HarelM <harel.mazor@gmail.com>
maplibre · May 12, 2022 · 5afb592 · 5afb592
1 parent 52a9f54
commit 5afb592
Show file tree

Hide file tree

Showing 92 changed files with 2,782 additions and 281 deletions.
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());
+    });
+
 });