Pixel edge artifacts in hillshade

[larsmaxfield]

Hi @jo-chemla, responding to your question in:

• Add resampling paint property to color relief, hillshade layers maplibre-style-spec#1447 (comment)

I'm asking because I'm seeing this kind of artifact, where pixel edges appear for a raster-dem source hillshade layer at both high zoom levels, and for intermediate zooms. At the moment, in the draw_hillshade.ts, see code link and sample belox I see gl.NEAREST being used, hence my question. Please tell me if this comment should rather be done on the gl-js thread.

maplibre-gl-js/src/render/draw_hillshade.ts

Lines 126 to 133 in 594ea20

	if (tile.demTexture) {
	const demTexture = tile.demTexture;
	demTexture.update(pixelData, {premultiply: false});
	demTexture.bind(gl.NEAREST, gl.CLAMP_TO_EDGE);
	} else {
	tile.demTexture = new Texture(context, pixelData, gl.RGBA, {premultiply: false});
	tile.demTexture.bind(gl.NEAREST, gl.CLAMP_TO_EDGE);
	}

        if (tile.demTexture) {
            const demTexture = tile.demTexture;
            demTexture.update(pixelData, {premultiply: false});
            demTexture.bind(gl.NEAREST, gl.CLAMP_TO_EDGE);
        } else {
            tile.demTexture = new Texture(context, pixelData, gl.RGBA, {premultiply: false});
            tile.demTexture.bind(gl.NEAREST, gl.CLAMP_TO_EDGE);
        }

The artifacts don't appear at maximum zoom, correct? If so, I think the cause is the downsamping filter used in tiling/pyramiding the source heightmap.

Assuming you're first encoding the heightmap to terrain RGB and then tiling the image, you should use nearest neighbor or an equivalent non-interpolating filter. RGB-encoded values that are interpolated are effectively nonsense.

I remember a similar thread with spikes in the terrain which were shown to have been caused by the tiling downsamping. Can't find that at the moment.

[jo-chemla]

Hi Lars, thanks for opening this discussion!

Actually, the source I'm using is not a terrainrgb or terrarium tileset, but a COG I produced with gdal_translate and stream via the geomatico/maplibre-cog-protocol (where height altitude raw data is color-coded to terrainrgb natively, but i also tested, with terrarium encoding thanks to their team suggestion at geomatico/maplibre-cog-protocol#25 (comment)). The COG was produced according to their recommendations, with different variations of resampling, blocksize

gdalwarp /srv/<source>.tif /srv/<target>.tiff -of COG -co BLOCKSIZE=256 -co TILING_SCHEME=GoogleMapsCompatible -co COMPRESS=DEFLATE -co RESAMPLING=BILINEAR -co OVERVIEW_RESAMPLING=NEAREST -co OVERVIEWS=IGNORE_EXISTING -co ADD_ALPHA=NO -dstnodata NaN

Edit: after careful reprocessing, it is possible i was missing the tiling-scheme, it now does look like this grid is gone. Will confirm tomorrow!

PS: Might be this thread #4903 you had in mind?

Details

# WORKS 
gdal_translate dura_scaled.tif dura_final-8.cog.tif -of COG -a_srs EPSG:3857 -a_gt 0.01 2.0 0 -0.01 0 -2.0 -co BLOCKSIZE=256 -co TILING_SCHEME=GoogleMapsCompatible -co COMPRESS=DEFLATE -co RESAMPLING=BILINEAR -co OVERVIEW_RESAMPLING=NEAREST -co OVERVIEWS=IGNORE_EXISTING -co ADD_ALPHA=NO

# DOES NOT WORK
gdal_translate -of COG -co BIGTIFF=YES -co COMPRESS=DEFLATE -co PREDICTOR=2 -co RESAMPLING=AVERAGE -co OVERVIEW_RESAMPLING=AVERAGE -b 1 -a_nodata -9999 -colorinterp_1 gray -a_srs EPSG:3857 -a_gt 0 2 0 0 0 -2 -a_scale 1000 DuraEuropos_Synagogue_DSM.tiff DuraEuropos_Synagogue_DSM.cog.tiff


# Attempt mixing: 
gdal_translate -of COG -co BIGTIFF=YES -a_srs EPSG:3857 -a_gt 0.01 2.0 0 -0.01 0 -2.0 -co BLOCKSIZE=256 -co TILING_SCHEME=GoogleMapsCompatible -co COMPRESS=DEFLATE -co RESAMPLING=BILINEAR -co OVERVIEW_RESAMPLING=NEAREST -co PREDICTOR=3 -co OVERVIEWS=IGNORE_EXISTING -co ADD_ALPHA=NO  -b 1 -a_nodata nan -colorinterp_1 gray -a_scale -4000 DuraEuropos_Synagogue_W_0.5mm_DSM.tiff dura_final-9.cog.tif

[larsmaxfield]

Ah I see, hopefully it's indeed solved. And the thread I was thinking of was #7048, but good find with #4903 as well 😄