add raster-resampling raster paint property

debug/image.html

@@ -36,12 +36,15 @@
  "id": "background",
  "type": "background",
  "paint": {
- "background-color": "rgb(4,7,14)"
+ "background-color": "rgb(128,128,128)"
  }
  }, {
  "id": "image",
  "type": "raster",
- "source": "image"
+ "source": "image",
+ "paint": {
+ "raster-resampling": "nearest"
+ }
  }]
 };
 

src/render/draw_raster.js

@@ -56,18 +56,20 @@ function drawRaster(painter: Painter, sourceCache: SourceCache, layer: RasterSty
 
  let parentScaleBy, parentTL;
 
+ const textureFilter = layer.paint.get('raster-resampling') === 'nearest' ? gl.NEAREST : gl.LINEAR;
+
  context.activeTexture.set(gl.TEXTURE0);
- tile.texture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE, gl.LINEAR_MIPMAP_NEAREST);
+ tile.texture.bind(textureFilter, gl.CLAMP_TO_EDGE, gl.LINEAR_MIPMAP_NEAREST);
 
  context.activeTexture.set(gl.TEXTURE1);
 
  if (parentTile) {
- parentTile.texture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE, gl.LINEAR_MIPMAP_NEAREST);
+ parentTile.texture.bind(textureFilter, gl.CLAMP_TO_EDGE, gl.LINEAR_MIPMAP_NEAREST);
  parentScaleBy = Math.pow(2, parentTile.tileID.overscaledZ - tile.tileID.overscaledZ);
  parentTL = [tile.tileID.canonical.x * parentScaleBy % 1, tile.tileID.canonical.y * parentScaleBy % 1];
 
  } else {
- tile.texture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE, gl.LINEAR_MIPMAP_NEAREST);
+ tile.texture.bind(textureFilter, gl.CLAMP_TO_EDGE, gl.LINEAR_MIPMAP_NEAREST);
  }
 
  // cross-fade parameters

src/style-spec/reference/v8.json

@@ -5013,6 +5013,32 @@
  },
  "property-type": "data-constant"
  },
+ "raster-resampling": {
+ "type": "enum",
+ "doc": "The resampling/interpolation method to use for overscaling, also known as texture magnification filter",
+ "values": {
+ "linear": {
+ "doc": "(Bi)linear filtering interpolates pixel values using the weighted average of the four closest original source pixels creating a smooth but blurry look when overscaled"
+ },
+ "nearest": {
+ "doc": "Nearest neighbor filtering interpolates pixel values using the nearest original source pixel creating a sharp but pixelated look when overscaled"
+ }
+ },
+ "default": "linear",
+ "sdk-support": {
+ "basic functionality": {
+ "js": "0.47.0"
+ },
+ "data-driven styling": {}
+ },
+ "expression": {
+ "interpolated": false,
+ "parameters": [
+ "zoom"
+ ]
+ },
+ "property-type": "data-constant"
+ },
  "raster-fade-duration": {
  "type": "number",
  "default": 300,

src/style/style_layer/raster_style_layer_properties.js

@@ -22,6 +22,7 @@ export type PaintProps = {|
  "raster-brightness-max": DataConstantProperty<number>,
  "raster-saturation": DataConstantProperty<number>,
  "raster-contrast": DataConstantProperty<number>,
+ "raster-resampling": DataConstantProperty<"linear" | "nearest">,
  "raster-fade-duration": DataConstantProperty<number>,
 |};
 
@@ -32,6 +33,7 @@ const paint: Properties<PaintProps> = new Properties({
  "raster-brightness-max": new DataConstantProperty(styleSpec["paint_raster"]["raster-brightness-max"]),
  "raster-saturation": new DataConstantProperty(styleSpec["paint_raster"]["raster-saturation"]),
  "raster-contrast": new DataConstantProperty(styleSpec["paint_raster"]["raster-contrast"]),
+ "raster-resampling": new DataConstantProperty(styleSpec["paint_raster"]["raster-resampling"]),
  "raster-fade-duration": new DataConstantProperty(styleSpec["paint_raster"]["raster-fade-duration"]),
 });
 

test/README.md

@@ -13,7 +13,7 @@ There are two test suites associated with Mapbox GL JS
  To run individual tests:
 
  - Unit tests: `yarn test-unit path/to/file.test.js` where the path begins within the `/test/unit/` directory
- - Render tests: `yarn test-render render-test-name`
+ - Render tests: `yarn test-render render-test-name` (e.g. `yarn test-render background-color/default`)
 
 ## Writing Unit Tests
 

test/integration/render-tests/image/raster-resampling/style.json

@@ -0,0 +1,49 @@
+{
+ "version": 8,
+ "metadata": {
+ "test": {
+ "width": 64,
+ "height": 64
+ }
+ },
+ "center": [
+ -122.514526,
+ 37.562984
+ ],
+ "zoom": 20,
+ "sources": {
+ "image": {
+ "type": "image",
+ "coordinates": [
+ [
+ -122.51596391201019,
+ 37.56238816766053
+ ],
+ [
+ -122.51467645168304,
+ 37.56410183312965
+ ],
+ [
+ -122.51309394836426,
+ 37.563391708549425
+ ],
+ [
+ -122.51423120498657,
+ 37.56161849366671
+ ]
+ ],
+ "url": "local://image/0.png"
+ }
+ },
+ "layers": [
+ {
+ "id": "image",
+ "type": "raster",
+ "source": "image",
+ "paint": {
+ "raster-fade-duration": 0,
+ "raster-resampling": "nearest"
+ }
+ }
+ ]
+}

test/integration/render-tests/raster-resampling/default/style.json

@@ -0,0 +1,33 @@
+{
+ "version": 8,
+ "metadata": {
+ "test": {
+ "height": 256
+ }
+ },
+ "center": [
+ 13.418056,
+ 52.499167
+ ],
+ "zoom": 20,
+ "sources": {
+ "satellite": {
+ "type": "raster",
+ "tiles": [
+ "local://tiles/{z}-{x}-{y}.satellite.png"
+ ],
+ "maxzoom": 17,
+ "tileSize": 256
+ }
+ },
+ "layers": [
+ {
+ "id": "raster",
+ "type": "raster",
+ "source": "satellite",
+ "paint": {
+ "raster-fade-duration": 0
+ }
+ }
+ ]
+}

test/integration/render-tests/raster-resampling/function/style.json

@@ -0,0 +1,45 @@
+{
+ "version": 8,
+ "metadata": {
+ "test": {
+ "height": 256
+ }
+ },
+ "center": [
+ 13.418056,
+ 52.499167
+ ],
+ "zoom": 20,
+ "sources": {
+ "satellite": {
+ "type": "raster",
+ "tiles": [
+ "local://tiles/{z}-{x}-{y}.satellite.png"
+ ],
+ "maxzoom": 17,
+ "tileSize": 256
+ }
+ },
+ "layers": [
+ {
+ "id": "raster",
+ "type": "raster",
+ "source": "satellite",
+ "paint": {
+ "raster-fade-duration": 0,
+ "raster-resampling": {
+ "stops": [
+ [
+ 19,
+ "linear"
+ ],
+ [
+ 20,
+ "nearest"
+ ]
+ ]
+ }
+ }
+ }
+ ]
+}

test/integration/render-tests/raster-resampling/literal/style.json

@@ -0,0 +1,34 @@
+{
+ "version": 8,
+ "metadata": {
+ "test": {
+ "height": 256
+ }
+ },
+ "center": [
+ 13.418056,
+ 52.499167
+ ],
+ "zoom": 20,
+ "sources": {
+ "satellite": {
+ "type": "raster",
+ "tiles": [
+ "local://tiles/{z}-{x}-{y}.satellite.png"
+ ],
+ "maxzoom": 17,
+ "tileSize": 256
+ }
+ },
+ "layers": [
+ {
+ "id": "raster",
+ "type": "raster",
+ "source": "satellite",
+ "paint": {
+ "raster-fade-duration": 0,
+ "raster-resampling": "nearest"
+ }
+ }
+ ]
+}