Error occurred over-altitude terrain RGB raster tileset in Mapbox GL JS

[chingchai]

Hi, I use my DEM generate from Drone using OpenDroneMap. After that, I use gdal_warp to re-project my DSM to EPSG:3857 and transform the greyscale data into the RGB data using rio-rgbify and last step i use gdal2tiles.py to generate xyz tiles. But i got error when add tiles layer to Mapbox GL JS as the picture shown below.

        this.map.addSource("mydem", {
          type: "raster-dem",
          tiles: [
            "https://url/tiles/dem-rgb-v2/{z}/{x}/{y}.png",
          ],
          tileSize: 512,
          maxzoom: 18
        });
        this.map.setTerrain({ source: "mydem", exaggeration: 0.7 });

[Nitaym]

Hey, I'm seeing a very similar issue. My process is the same: gdalwarp to 3857, then rgbify.

Check out these edges that appear (left and center are rgbify, right is mapbox online for reference):

Here are the PNGs. rgbify:

From mapbox:

Using the tiles in 3D yields very similar results to what you're seeing:

[Nitaym]

Hey, for whoever runs into this in the future:

The problem is in gdal2tiles, where it resamples the images using conventional algorithms for image resizing (nearest neighbor, bilinear, etc). However, since terrainpng pixels are not really colors, but encoded elevation values, the resampling actually creates problems in the data - See images above.

I couldn't find any method that works with GDAL directly. Ended up tiling directly from python with rasterio, then converting the data to terrainpng per tile.

[Nitaym]

Quick note:

• Tiling with rgbify directly (to mbtiles) would work as well.
• Note that rgbify makes the conversion to 3857 while tiling - So no warp is needed beforehand.
• There's a bug in rgbify currently where it is hardcoded to use 512x512 tiles. If you're okay with that - Feel free to tile with rgbify

[Jrodseth]

Using nearest neighbor resampling when computing tiles via gdal2tiles will prevent interpolation between pixels.

e.g. gdal2tiles.py **-r near** --xyz -z 10-20 -tilesize=512 rgbify_input.tif ./tiles/

This won't produce spiking along boundaries where red and green band values change, but it instead will result in a blocky appearance at high zoom levels. Likely acceptable for some use cases.