SSE Independent from Resolution Density & Cesium Renders at Screen Res

CHANGES.md

@@ -5,6 +5,7 @@ Change Log
 
 ##### Additions :tada:
 * Added optional `index` parameter to `PrimitiveCollection.add`. [#8041](https://github.com/AnalyticalGraphicsInc/cesium/pull/8041)
+* Cesium now renders at native device resolution by default instead of CSS pixel resolution, to go back to the old behavior, `viewer.resolutionScale = 1.0 / window.devicePixelRatio`. [#8082](https://github.com/AnalyticalGraphicsInc/cesium/issues/8082)  
 
 ##### Fixes :wrench:
 * Fixed a crash when a glTF model used `KHR_texture_transform` without a sampler defined. [#7916](https://github.com/AnalyticalGraphicsInc/cesium/issues/7916)

Source/Scene/Cesium3DTile.js

@@ -731,6 +731,9 @@ define([
                 error -= dynamicError;
             }
         }
+
+        error /= frameState.pixelRatio;
+
         return error;
     };
 

Source/Scene/FrameState.js

@@ -156,6 +156,15 @@ define([
          */
         this.maximumScreenSpaceError = undefined;
 
+        /**
+         * Ratio between a pixel and a density-independent pixel. Provides a standard unity of
+         * measure for real pixel measurements appropriate to a particular device.
+         *
+         * @type {Number}
+         * @default 1.0
+         */
+        this.pixelRatio = 1.0;
+
         this.passes = {
             /**
              * <code>true</code> if the primitive should update for a render pass, <code>false</code> otherwise.

Source/Scene/QuadtreePrimitive.js

@@ -994,9 +994,11 @@ define([
         var error = (maxGeometricError * height) / (distance * sseDenominator);
 
         if (frameState.fog.enabled) {
-            error = error - CesiumMath.fog(distance, frameState.fog.density) * frameState.fog.sse;
+            error -= CesiumMath.fog(distance, frameState.fog.density) * frameState.fog.sse;
         }
 
+        error /= frameState.pixelRatio;
+
         return error;
     }
 
@@ -1016,9 +1018,11 @@ define([
         var error = maxGeometricError / pixelSize;
 
         if (frameState.fog.enabled && frameState.mode !== SceneMode.SCENE2D) {
-            error = error - CesiumMath.fog(tile._distance, frameState.fog.density) * frameState.fog.sse;
+            error -= CesiumMath.fog(tile._distance, frameState.fog.density) * frameState.fog.sse;
         }
 
+        error /= frameState.pixelRatio;
+
         return error;
     }
 

Source/Scene/Scene.js

@@ -1591,6 +1591,24 @@ define([
             }
         },
 
+        /**
+         * Ratio between a pixel and a density-independent pixel. Provides a standard unity of
+         * measure for real pixel measurements appropriate to a particular device.
+         *
+         * @memberof Scene.prototype
+         * @type {Number}
+         * @default 1.0
+         * @private
+         */
+        pixelRatio: {
+            get: function() {
+                return this._frameState.pixelRatio;
+            },
+            set: function(value) {
+                this._frameState.pixelRatio = value;
+            }
+        },
+
         /**
          * @private
          */

Source/Widgets/CesiumWidget/CesiumWidget.js

@@ -95,14 +95,21 @@ define([
         requestAnimationFrame(render);
     }
 
+    function configureSceneResolution(widget) {
+        var devicePixelRatio = window.devicePixelRatio;
+        var resolutionScale = widget._resolutionScale * devicePixelRatio;
+        if (defined(widget._scene)) {
+            widget._scene.pixelRatio = resolutionScale;
+        }
+
+        return resolutionScale;
+    }
+
     function configureCanvasSize(widget) {
         var canvas = widget._canvas;
         var width = canvas.clientWidth;
         var height = canvas.clientHeight;
-        var resolutionScale = widget._resolutionScale;
-        if (!widget._supportsImageRenderingPixelated) {
-            resolutionScale *= defaultValue(window.devicePixelRatio, 1.0);
-        }
+        var resolutionScale = configureSceneResolution(widget);
 
         widget._canvasWidth = width;
         widget._canvasHeight = height;
@@ -114,6 +121,7 @@ define([
         canvas.height = height;
 
         widget._canRender = width !== 0 && height !== 0;
+        widget._lastDevicePixelRatio = window.devicePixelRatio;
     }
 
     function configureCameraFrustum(widget) {
@@ -240,6 +248,7 @@ define([
         this._canvas = canvas;
         this._canvasWidth = 0;
         this._canvasHeight = 0;
+        this._lastDevicePixelRatio = 0;
         this._creditViewport = creditViewport;
         this._creditContainer = creditContainer;
         this._innerCreditContainer = innerCreditContainer;
@@ -271,6 +280,7 @@ define([
 
             scene.camera.constrainedAxis = Cartesian3.UNIT_Z;
 
+            configureSceneResolution(this);
             configureCameraFrustum(this);
 
             var ellipsoid = defaultValue(scene.mapProjection.ellipsoid, Ellipsoid.WGS84);
@@ -672,7 +682,7 @@ define([
         var canvas = this._canvas;
         var width = canvas.clientWidth;
         var height = canvas.clientHeight;
-        if (!this._forceResize && this._canvasWidth === width && this._canvasHeight === height) {
+        if (!this._forceResize && this._canvasWidth === width && this._canvasHeight === height && this._lastDevicePixelRatio === window.devicePixelRatio) {
             return;
         }
         this._forceResize = false;

Source/Widgets/Viewer/Viewer.js

@@ -709,7 +709,6 @@ Either specify options.terrainProvider instead or set options.baseLayerPicker to
         this._needTrackedEntityUpdate = false;
         this._selectedEntity = undefined;
         this._clockTrackedDataSource = undefined;
-        this._forceResize = false;
         this._zoomIsFlight = false;
         this._zoomTarget = undefined;
         this._zoomPromise = undefined;
@@ -1195,7 +1194,6 @@ Either specify options.terrainProvider instead or set options.baseLayerPicker to
             },
             set : function(value) {
                 this._cesiumWidget.resolutionScale = value;
-                this._forceResize = true;
             }
         },
 
@@ -1359,12 +1357,12 @@ Either specify options.terrainProvider instead or set options.baseLayerPicker to
         var animationExists = defined(this._animation);
         var timelineExists = defined(this._timeline);
 
-        if (!this._forceResize && width === this._lastWidth && height === this._lastHeight) {
+        cesiumWidget.resize();
+
+        if (width === this._lastWidth && height === this._lastHeight) {
             return;
         }
 
-        cesiumWidget.resize();
-        this._forceResize = false;
         var panelMaxHeight = height - 125;
         var baseLayerPickerDropDown = this._baseLayerPickerDropDown;
 

Specs/Scene/Cesium3DTilesetSpec.js

@@ -2228,12 +2228,14 @@ defineSuite([
 
             // Check that the feature is red
             var sourceRed;
+            var sourceGreen;
             var renderOptions = {
                 scene : scene,
                 time : new JulianDate(2457522.154792)
             };
             expect(renderOptions).toRenderAndCall(function(rgba) {
                 sourceRed = rgba[0];
+                sourceGreen = rgba[1];
             });
 
             expect(renderOptions).toRenderAndCall(function(rgba) {
@@ -2318,7 +2320,7 @@ defineSuite([
                 mixGreen = rgba[1];
                 expect(rgba[0]).toBeGreaterThan(replaceRed);
                 expect(rgba[0]).toBeLessThan(sourceRed);
-                expect(rgba[1]).toBeGreaterThan(50);
+                expect(rgba[1]).toBeGreaterThan(sourceGreen);
                 expect(rgba[1]).toBeLessThan(replaceGreen);
                 expect(rgba[2]).toBeLessThan(25);
                 expect(rgba[3]).toEqual(255);

Specs/Scene/QuadtreePrimitiveSpec.js

@@ -83,7 +83,8 @@ defineSuite([
                 mode: SceneMode.SCENE3D,
                 commandList: [],
                 cullingVolume: jasmine.createSpyObj('CullingVolume', ['computeVisibility']),
-                afterRender: []
+                afterRender: [],
+                pixelRatio: 1.0
             };
 
             frameState.cullingVolume.computeVisibility.and.returnValue(Intersect.INTERSECTING);

Specs/customizeJasmine.js

@@ -9,6 +9,9 @@ define([
     'use strict';
 
     return function (env, includedCategory, excludedCategory, webglValidation, webglStub, release) {
+        // set this for uniform test resolution across devices
+        window.devicePixelRatio = 1;
+
         function defineSuite(deps, name, suite, categories, focus) {
             /*global define,describe,fdescribe*/
             if (typeof suite === 'object' || typeof suite === 'string') {

Specs/spec-main.js

@@ -15,6 +15,9 @@
 (function() {
     'use strict';
 
+    // set this for uniform test resolution across devices
+    window.devicePixelRatio = 1;
+
     function getQueryParameter(name) {
         var match = new RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
         return match && decodeURIComponent(match[1].replace(/\+/g, ' '));