add raster-scaling 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-scaling": "nearest"
+        }
     }]
 };
 

src/render/draw_raster.js

@@ -56,18 +56,29 @@ function drawRaster(painter: Painter, sourceCache: SourceCache, layer: RasterSty
 
         let parentScaleBy, parentTL;
 
+        let textureFilter;
+        switch (layer.paint.get('raster-scaling')) {
+        case 'nearest':
+            textureFilter = gl.NEAREST;
+            break;
+        case 'linear':
+        default:
+            textureFilter = gl.LINEAR;
+            break;
+        }
+
         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/source/image_source.js

@@ -198,7 +198,7 @@ class ImageSource extends Evented implements Source {
 
         if (!this.texture) {
             this.texture = new Texture(context, this.image, gl.RGBA);
-            this.texture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
+            this.texture.bind(gl.NEAREST, gl.CLAMP_TO_EDGE);
         }
 
         for (const w in this.tiles) {

src/style-spec/reference/v8.json

@@ -4131,6 +4131,27 @@
         "data-driven styling": {}
       }
     },
+    "raster-scaling": {
+      "type": "enum",
+      "doc": "The raster scaling to use for overscaling",
+      "values": {
+        "linear": {
+          "doc": "(Bi)linear filtering"
+        },
+        "nearest": {
+          "doc": "Nearest neighbor filtering"
+        }
+      },
+      "default": "linear",
+      "function": "piecewise-constant",
+      "zoom-function": true,
+      "sdk-support": {
+        "basic functionality": {
+          "js": "0.45.0"
+        },
+        "data-driven styling": {}
+      }
+    },
     "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-scaling": 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-scaling": new DataConstantProperty(styleSpec["paint_raster"]["raster-scaling"]),
     "raster-fade-duration": new DataConstantProperty(styleSpec["paint_raster"]["raster-fade-duration"]),
 });
 

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

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

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

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

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

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