Implement resampling paint property to raster, hillshade, and color-relief layers (#7194)

* Add resampling handling to raster layer

* Remove debugging line

* Fix options in setPaintProperty

* Fix property typing in Resamplings

* Implement 'resampling' in renderers

raster (previously 'raster-resampling'), hillshade, color-relief

* Add 'resampling' render tests

raster, hillshade, color-relief

* Add resampling handling tests for RasterStyleLayer

* Fix resampling constructor handle RasterStyleLayer

* Clearer language in warning, tests

* Add resampling test when unequal in constructor

* Add CHANGELOG entry

* Update bundle size

* Update bundle size

* Simplify raster resampling handling

* Simplify resampling handling

Fall back to raster-resampling if resampling undefined

* Simplify further (undefined is inherent)

* Simplify resampling handling tests

* Add layer id to resampling warning

* Change console.warn to warnOnce

* Fix errant import auto-spacing

---------

Co-authored-by: Harel M <harel.mazor@gmail.com>

Author: larsmaxfield

CHANGELOG.md

@@ -3,6 +3,7 @@
 ### ✨ Features and improvements
 - Add Etag unmodified support to optimize vector tile reloading ([#7074](https://github.com/maplibre/maplibre-gl-js/pull/7074)) (by [@rivkamatan](https://github.com/rivkamatan and [@wayofthefuture](https://github.com/wayofthefuture))
 - Add `boxZoom.boxZoomEnd` option to customize the action after Shift-drag box selection ([#6397](https://github.com/maplibre/maplibre-gl-js/issues/6397))
+- Implement `resampling` paint property for raster, hillshade, and color-relief layers ([#7074](https://github.com/maplibre/maplibre-gl-js/pull/7194)) (by [@larsmaxfield](https://github.com/larsmaxfield))
 - Add updateable support for GeoJSON-VT ([#7172](https://github.com/maplibre/maplibre-gl-js/issues/7172)) (by [@wayofthefuture](https://github.com/wayofthefuture) and [HarelM](https://github.com/HarelM))
 - _...Add new stuff here..._
 

src/render/draw_color_relief.ts

@@ -55,6 +55,8 @@ function renderColorRelief(
     const program = painter.useProgram('colorRelief');
     const align = !painter.options.moving;
 
+    const textureFilter = layer.paint.get('resampling') === 'nearest' ?  gl.NEAREST : gl.LINEAR;
+
     let firstTile = true;
     let colorRampSize = 0;
 
@@ -86,10 +88,10 @@ function renderColorRelief(
         if (tile.demTexture) {
             const demTexture = tile.demTexture;
             demTexture.update(pixelData, {premultiply: false});
-            demTexture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
+            demTexture.bind(textureFilter, gl.CLAMP_TO_EDGE);
         } else {
             tile.demTexture = new Texture(context, pixelData, gl.RGBA, {premultiply: false});
-            tile.demTexture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
+            tile.demTexture.bind(textureFilter, gl.CLAMP_TO_EDGE);
         }
 
         const mesh = projection.getMeshFromTileID(context, coord.canonical, useBorder, true, 'raster');

src/render/draw_hillshade.ts

@@ -103,6 +103,8 @@ function prepareHillshade(
     const context = painter.context;
     const gl = context.gl;
 
+    const textureFilter = layer.paint.get('resampling') === 'nearest' ?  gl.NEAREST : gl.LINEAR;
+
     for (const coord of tileIDs) {
         const tile = tileManager.getTile(coord);
         const dem = tile.dem;
@@ -138,7 +140,7 @@ function prepareHillshade(
 
         if (!fbo) {
             const renderTexture = new Texture(context, {width: tileSize, height: tileSize, data: null}, gl.RGBA);
-            renderTexture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
+            renderTexture.bind(textureFilter, gl.CLAMP_TO_EDGE);
 
             fbo = tile.fbo = context.createFramebuffer(tileSize, tileSize, true, false);
             fbo.colorAttachment.set(renderTexture.texture);

src/render/draw_raster.ts

@@ -95,7 +95,8 @@ function drawTiles(
     const colorMode = painter.colorModeForRenderPass();
     const align = !painter.options.moving;
     const rasterOpacity = layer.paint.get('raster-opacity');
-    const rasterResampling = layer.paint.get('raster-resampling');
+    const resampling = layer.paint.get('resampling') ?? layer.paint.get('raster-resampling');
+    const textureFilter = resampling === 'nearest' ?  gl.NEAREST : gl.LINEAR;
     const fadeDuration = layer.paint.get('raster-fade-duration');
     const isTerrain = !!painter.style.map.terrain;
 
@@ -107,7 +108,6 @@ function drawTiles(
             rasterOpacity === 1 ? DepthMode.ReadWrite : DepthMode.ReadOnly, gl.LESS);
 
         const tile = tileManager.getTile(coord);
-        const textureFilter = rasterResampling === 'nearest' ?  gl.NEAREST : gl.LINEAR;
 
         // create and bind first texture
         context.activeTexture.set(gl.TEXTURE0);

src/style/style_layer/raster_style_layer.test.ts

@@ -0,0 +1,47 @@
+import {describe, test, expect, vi} from 'vitest';
+import {type LayerSpecification} from '@maplibre/maplibre-gl-style-spec';
+import {createStyleLayer} from '../create_style_layer';
+import {extend} from '../../util/util';
+
+function createLayerSpec(properties?): LayerSpecification {
+    return extend({
+        type: 'raster',
+        id: 'raster',
+        source: 'rasterSource'
+    }, properties);
+}
+
+describe('RasterStyleLayer correctly handles "resampling" and "raster-resampling" paint properties', () => {
+
+    test('"raster-resampling" is undefined when instantiated with "resampling"', () => {
+        const layerSpec = createLayerSpec();
+        const layer = createStyleLayer(layerSpec, {});
+    
+        const rasterResampling = layer.getPaintProperty('raster-resampling');
+        expect(rasterResampling).toEqual(undefined);
+    });
+
+    test('"resampling" is undefined when instantiated with "raster-resampling"', () => {
+        const layerSpec = createLayerSpec();
+        const layer = createStyleLayer(layerSpec, {});
+    
+        const resampling = layer.getPaintProperty('resampling');
+        expect(resampling).toEqual(undefined);
+    });
+
+    test('warns when both "resampling" and "raster-resampling" are specified upon instantiation', () => {
+        const originalWarn = console.warn;
+        console.warn = vi.fn();
+
+        const layerSpec = createLayerSpec({
+            paint: {
+                resampling: 'nearest',
+                'raster-resampling': 'nearest',
+            }
+        });
+        createStyleLayer(layerSpec, {});
+        expect(console.warn).toHaveBeenCalledTimes(1);
+        console.warn = originalWarn;
+    });
+
+});

src/style/style_layer/raster_style_layer.ts

@@ -1,4 +1,5 @@
 import {StyleLayer} from '../style_layer';
+import {warnOnce} from '../../util/util';
 
 import properties, {type RasterPaintPropsPossiblyEvaluated} from './raster_style_layer_properties.g';
 import {type Transitionable, type Transitioning, type PossiblyEvaluated} from '../properties';
@@ -14,6 +15,10 @@ export class RasterStyleLayer extends StyleLayer {
     paint: PossiblyEvaluated<RasterPaintProps, RasterPaintPropsPossiblyEvaluated>;
 
     constructor(layer: LayerSpecification, globalState: Record<string, any>) {
+        const resampling = layer.paint?.['resampling'];
+        if (resampling && layer.paint?.['raster-resampling']) {
+            warnOnce(`Raster layer "${layer.id}" paint properties "resampling" and "raster-resampling" are both specified, but only "resampling" needs to be specified. Defaulting to "resampling" (${resampling}).`);
+        }
         super(layer, properties, globalState);
     }
 }

test/integration/render/tests/resampling/color-relief/default/expected.png

@@ -0,0 +1,37 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "height": 256,
+      "width": 256
+    }
+  },
+  "center": [-113.26903, 35.9654],
+  "zoom": 15,
+  "sources": {
+    "source": {
+      "type": "raster-dem",
+      "tiles": [
+        "local://tiles/{z}-{x}-{y}.terrain.png"
+      ],
+      "maxzoom": 12,
+      "tileSize": 256
+    }
+  },
+  "layers": [
+    {
+      "id": "color-relief",
+      "type": "color-relief",
+      "source": "source",
+      "paint": {
+        "color-relief-color": [
+          "interpolate",
+          ["linear"],
+          ["elevation"],
+          1310, "#000",
+          1430, "#FFF"
+        ]
+      }
+    }
+  ]
+}

test/integration/render/tests/resampling/color-relief/default/style.json

@@ -0,0 +1,49 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "height": 256,
+      "width": 256
+    }
+  },
+  "center": [-113.26903, 35.9654],
+  "zoom": 15,
+  "sources": {
+    "source": {
+      "type": "raster-dem",
+      "tiles": [
+        "local://tiles/{z}-{x}-{y}.terrain.png"
+      ],
+      "maxzoom": 12,
+      "tileSize": 256
+    }
+  },
+  "layers": [
+    {
+      "id": "color-relief",
+      "type": "color-relief",
+      "source": "source",
+      "paint": {
+        "color-relief-color": [
+          "interpolate",
+          ["linear"],
+          ["elevation"],
+          1310, "#000",
+          1430, "#FFF"
+        ],
+        "resampling": {
+          "stops": [
+            [
+              14,
+              "linear"
+            ],
+            [
+              15,
+              "nearest"
+            ]
+          ]
+        }
+      }
+    }
+  ]
+}