Honor devicePixelRatio take 3

CHANGES.md

@@ -13,6 +13,12 @@ Change Log
 * Added `getAbsoluteUri` helper function.
 * Added `VRButton` which is a simple, single-button widget that toggles VR mode. It is off by default. To enable the button, set the `vrButton` option to `Viewer` to `true`. Only Cardboard for mobile is supported. More VR devices will be supported when the WebVR API is more stable.
 * Added `Scene.useWebVR` to switch the scene to use stereoscopic rendering.
+* Cesium now honors `window.devicePixelRatio` on browsers that support the CSS `imageRendering` attribute.  This greatly improves performance on mobile devices and high DPI displays by rendering at the browser-recommended resolution. This also reduces bandwidth usage and increases battery life in these cases.  To enable the previous behavior, use the following code:
+    ```javascript
+    if(Cesium.FeatureDetection.supportsImageRenderingPixelated()){
+        viewer.resolutionScale = window.devicePixelRatio;
+    }
+    ```
 
 ### 1.17 - 2016-01-04
 

Source/Core/FeatureDetection.js

@@ -156,6 +156,28 @@ define([
         return hasPointerEvents;
     }
 
+    var imageRenderingValueResult;
+    var supportsImageRenderingPixelatedResult;
+    function supportsImageRenderingPixelated() {
+        if (!defined(supportsImageRenderingPixelatedResult)) {
+            var canvas = document.createElement('canvas');
+            canvas.setAttribute('style',
+                                'image-rendering: -moz-crisp-edges;' +
+                                'image-rendering: pixelated;');
+            //canvas.style.imageRendering will be undefined, null or an empty string on unsupported browsers.
+            var tmp = canvas.style.imageRendering;
+            supportsImageRenderingPixelatedResult = defined(tmp) && tmp !== '';
+            if (supportsImageRenderingPixelatedResult) {
+                imageRenderingValueResult = tmp;
+            }
+        }
+        return supportsImageRenderingPixelatedResult;
+    }
+
+    function imageRenderingValue() {
+        return supportsImageRenderingPixelated() ? imageRenderingValueResult : undefined;
+    }
+
     /**
      * A set of functions to detect whether the current browser supports
      * various features.
@@ -175,7 +197,9 @@ define([
         firefoxVersion : firefoxVersion,
         isWindows : isWindows,
         hardwareConcurrency : defaultValue(theNavigator.hardwareConcurrency, 3),
-        supportsPointerEvents : supportsPointerEvents
+        supportsPointerEvents : supportsPointerEvents,
+        supportsImageRenderingPixelated: supportsImageRenderingPixelated,
+        imageRenderingValue: imageRenderingValue
     };
 
     /**
@@ -213,4 +237,4 @@ define([
     };
 
     return FeatureDetection;
-});
+});

Source/Widgets/CesiumWidget/CesiumWidget.js

@@ -10,6 +10,7 @@ define([
         '../../Core/destroyObject',
         '../../Core/DeveloperError',
         '../../Core/Ellipsoid',
+        '../../Core/FeatureDetection',
         '../../Core/formatError',
         '../../Core/requestAnimationFrame',
         '../../Core/ScreenSpaceEventHandler',
@@ -33,6 +34,7 @@ define([
         destroyObject,
         DeveloperError,
         Ellipsoid,
+        FeatureDetection,
         formatError,
         requestAnimationFrame,
         ScreenSpaceEventHandler,
@@ -98,13 +100,16 @@ define([
         var canvas = widget._canvas;
         var width = canvas.clientWidth;
         var height = canvas.clientHeight;
-        var zoomFactor = defaultValue(window.devicePixelRatio, 1.0) * widget._resolutionScale;
+        var resolutionScale = widget._resolutionScale;
+        if (!widget._supportsImageRenderingPixelated) {
+            resolutionScale *= defaultValue(window.devicePixelRatio, 1.0);
+        }
 
         widget._canvasWidth = width;
         widget._canvasHeight = height;
 
-        width *= zoomFactor;
-        height *= zoomFactor;
+        width *= resolutionScale;
+        height *= resolutionScale;
 
         canvas.width = width;
         canvas.height = height;
@@ -205,6 +210,12 @@ define([
         container.appendChild(element);
 
         var canvas = document.createElement('canvas');
+        var supportsImageRenderingPixelated = FeatureDetection.supportsImageRenderingPixelated();
+        this._supportsImageRenderingPixelated = supportsImageRenderingPixelated;
+        if (supportsImageRenderingPixelated) {
+            canvas.style.imageRendering = FeatureDetection.imageRenderingValue();
+        }
+
         canvas.oncontextmenu = function() {
             return false;
         };

Specs/Core/FeatureDetectionSpec.js

@@ -89,4 +89,14 @@ defineSuite([
             console.log('detected Firefox ' + firefoxVersion.join('.'));
         }
     });
+
+    it('detects imageRendering support', function() {
+        var supportsImageRenderingPixelated = FeatureDetection.supportsImageRenderingPixelated();
+        expect(typeof supportsImageRenderingPixelated).toEqual('boolean');
+        if (supportsImageRenderingPixelated) {
+            expect(FeatureDetection.imageRenderingValue()).toBeDefined();
+        } else {
+            expect(FeatureDetection.imageRenderingValue()).not.toBeDefined();
+        }
+    });
 });