From 53225f08ec7a7287646cecf955054e6d992f5df3 Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Thu, 30 Nov 2017 16:19:06 -0500
Subject: [PATCH] more tweaks to unsharp mask

---
 css/80_app.css                 | 18 ++++++++++--------
 modules/renderer/background.js | 33 ++++++++++++++++++---------------
 modules/ui/background.js       |  5 +++--
 3 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index 0435e46c0..743d698bb 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -2662,7 +2662,17 @@ img.tile {
     user-select: none;
 
     opacity: 0;
+}
 
+img.tile-loaded {
+    opacity: 1;
+}
+
+img.tile-removing {
+    opacity: 0;
+}
+
+div:not(.layer-mask) > img.tile {
     -webkit-transition: opacity 200ms linear;
     transition: opacity 200ms linear;
     -moz-transition: opacity 200ms linear;
@@ -2696,14 +2706,6 @@ img.tile-debug {
     outline: 1px solid red;
 }
 
-img.tile-loaded {
-    opacity: 1;
-}
-
-img.tile-removing {
-    opacity: 0;
-}
-
 
 /* Map
 ------------------------------------------------------- */
diff --git a/modules/renderer/background.js b/modules/renderer/background.js
index 8fd9720be..bf3940e84 100644
--- a/modules/renderer/background.js
+++ b/modules/renderer/background.js
@@ -1,6 +1,7 @@
 import _find from 'lodash-es/find';
 
 import { dispatch as d3_dispatch } from 'd3-dispatch';
+import { interpolateNumber as d3_interpolateNumber } from 'd3-interpolate';
 import { select as d3_select } from 'd3-selection';
 
 import { data } from '../../data';
@@ -22,11 +23,17 @@ export function rendererBackground(context) {
 
     function background(selection) {
         var baseFilter = '';
+        var blur, contrast;
+
         if (_brightness !== 1) {
             baseFilter += 'brightness(' + _brightness + ')';
         }
-        if (_sharpness !== 1) {
-            baseFilter += 'contrast(1.25)';// + _sharpness + ')';
+        if (_sharpness < 1) {  // gaussian blur
+            blur = d3_interpolateNumber(0.5, 5)(1 - _sharpness);
+            baseFilter += 'blur(' + blur + 'px)';
+        } else if (_sharpness > 1) {
+            contrast = d3_interpolateNumber(1, 1.5)(_sharpness - 1);
+            baseFilter += 'contrast(' + contrast + ')';
         }
 
         var base = selection.selectAll('.layer-background')
@@ -52,30 +59,26 @@ export function rendererBackground(context) {
 
         var maskFilter = '';
         var mixBlendMode = '';
-        if (_sharpness !== 1) {
-            var blur = Math.abs(_sharpness - 1) * 10;
-            maskFilter += 'blur(' + blur + 'px)';
+        if (_sharpness > 1) {  // apply unsharp mask
+            mixBlendMode = 'overlay';
+            maskFilter = 'saturate(0)';
 
-            if (_sharpness > 1) {
-                maskFilter += 'invert(1)';
-                mixBlendMode = 'overlay';
-            } else {
-                mixBlendMode = 'normal';
-            }
+            blur = d3_interpolateNumber(3, 0.5)(_sharpness - 1);
+            maskFilter += 'blur(' + blur + 'px) invert(1)';
 
-            // var contrast = 1 / (_sharpness || 0.1);
-            maskFilter += 'contrast(0.75)';// + contrast + ')';
+            contrast = d3_interpolateNumber(0, 1)(_sharpness - 1);
+            maskFilter += 'contrast(' + contrast + ')';
         }
 
         var mask = base.selectAll('.layer-unsharp-mask')
-            .data(_sharpness !== 1 ? [0] : []);
+            .data(_sharpness > 1 ? [0] : []);
 
         mask.exit()
             .remove();
 
         mask.enter()
             .append('div')
-            .attr('class', 'layer layer-unsharp-mask')
+            .attr('class', 'layer layer-mask layer-unsharp-mask')
             .merge(mask)
             .call(baseLayer)
             .style('-webkit-filter', maskFilter || null)
diff --git a/modules/ui/background.js b/modules/ui/background.js
index 0b4251c88..0739ba407 100644
--- a/modules/ui/background.js
+++ b/modules/ui/background.js
@@ -10,6 +10,7 @@ import {
     select as d3_select
 } from 'd3-selection';
 
+
 import { d3keybinding as d3_keybinding } from '../lib/d3.keybinding.js';
 
 import { t, textDirection } from '../util/locale';
@@ -71,7 +72,7 @@ export function uiBackground(context) {
             d = d3_event.target.value;
         }
 
-        d = clamp(d, 0.5, 2);
+        d = clamp(d, 0.25, 2);
         context.background().sharpness(d);
 
         _displayOptions.selectAll('.sharpness-input')
@@ -299,7 +300,7 @@ export function uiBackground(context) {
             .append('input')
             .attr('class', 'sharpness-input')
             .attr('type', 'range')
-            .attr('min', '0.5')
+            .attr('min', '0.25')
             .attr('max', '2')
             .attr('step', '0.05')
             .property('value', _sharpness)