3D Terrain significantly decrease performance of the map

[AEiosApp]

maplibre-gl-js version: 4.5.0 browser: Chrome, Android WebView with Chrome version 60

Steps to Trigger Behavior

1. Define terrain source, type of 'raster-dem' in the style (do not add 'terrain' configuration to the style)
2. Create new map in your app, on map 'load' event - add terrain control with a terrain source defined in the style
3. Check the map working with terrain disabled - should work fast & smooth
4. Click on the 'terrain' control button to enable terrain - check the map working with terrain - should work slow
5. Click again on the 'terrain' control button to disable terrain - check the map again - should work fast & smooth

Link to Demonstration

Hey guys, thanks a lot for the 3D terrain support, it is really great!

However, I'm facing a performance issue when I use it. Please, see the video below:

• it's an Android hybrid app, so npm maplibre-gl is used here with an Android WebView browser (same behavior in Chrome browser on my Mac)
• video made with real Android device (not a simulator)
• when terrain is disabled (only vector map with hillshades) - everything works smooth and fast
• when I turn on terrain (with a terrain control button at timestamp 0:07):
• • I make same gestures to move / zoom map, but responce time is almost 1 second
• • cpu & memory usage is growing (see performance monitor on the video)
• • my terrain tiles are pretty small, about 1 MB of data in total
• when I turn off terrian (at timestamp 0:30), immediately:
• • I make same gestures to move / zoom map and everything works smooth and fast again
• • cpu & memory usage decreases

Is there a chanse to figure out with the performance? Because of this issue, we can't use this great feature in production.

Let me know if you'd like me to provide more information or make more tests.

https://github.com/user-attachments/assets/67df8c6a-6aa0-445d-bee7-b3c2c1f391ad

Style sample

{
  "version": 8,
  "name": "App Raster",
  "sources": {
    "raster-tiles": {
      "type": "raster",
      "tiles": ["https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png"],
      "tileSize": 256
    },
    "terrainSource": {
      "type": "raster-dem",
      "url": "./hillshades/budapest/terrainTiles.json",
      "tileSize": 256
    },
    "hillshadeSource": {
      "type": "raster-dem",
      "url": "./hillshades/budapest/terrainTiles.json",
      "tileSize": 256
    }
  },
  "layers": [
    {
      "id": "simple-tiles",
      "type": "raster",
      "source": "raster-tiles",
      "minzoom": 0,
      "maxzoom": 22
    },
    {
      "id": "hills",
      "type": "hillshade",
      "source": "hillshadeSource",
      "layout": { "visibility": "visible" },
      "paint": { "hillshade-shadow-color": "#473B24" }
    }
  ]
}

Code sample

import { Map, TerrainControl } from 'maplibre-gl'

let map = new Map({
        container: 'mapContainer',
        center: [11.39085, 47.27574],
        style: mapStyle as StyleSpecification,
        zoom: this.$preset.defMap.zoom,
        pitch: this.$preset.defMap.pitch,
        bearing: this.$preset.defMap.bearing,
        attributionControl: false,
        hash: true,
      });

map.on('load', () => {
        map.addControl(
          new TerrainControl({
            source: 'terrainSource',
            exaggeration: 1,
          })
      );
});

[HarelM]

This is a known limitation of the terrain implementation (along other issues). You are welcome to dig into it and open a PR if you find ways to improve the performance.

[AEiosApp]

I've made few more tests and localized the issue a bit more.

1. Issue is only on Android browser - WebView with Chrome 60+ Same code works fine:

• on Chrome on Macbook
• on WkWebview (Safari like) on iPhone

Don't think it's a lack of memory or CPU of my Android device, I'm using Xiaomi Note 12 Pro 5G with:

• 6GB RAM and 2.6GHz CPU

2. Issue depends on the map zoom level If my map tiles includes zoom levels 0 to 14:

• on zoom 10 - everything works fine
• on zoom 13 - it becomes slower
• on zoom 17 - it is extremely slow and laggy