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",
+      "values": {
+        "linear": {
+          "doc": "(Bi)linear filtering creating a smooth but blurry look"
+        },
+        "nearest": {
+          "doc": "Nearest neighbor filtering creating a sharp but pixelated look"
+        }
+      },
+      "default": "linear",
+      "sdk-support": {
+        "basic functionality": {
+          "js": "0.46.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"
+      }
+    }
+  ]
+}