Added pixelRatio parameter to camera and the frustum objects

Author: IanLilleyT

Apps/Sandcastle/gallery/Star Burst.html

@@ -93,11 +93,12 @@
 
     var drawingBufferWidth = scene.drawingBufferWidth;
     var drawingBufferHeight = scene.drawingBufferHeight;
+    var pixelRatio = scene.pixelRatio;
 
     var diff = Cesium.Cartesian3.subtract(entityPosition, camera.positionWC, new Cesium.Cartesian3());
     var distance = Cesium.Cartesian3.dot(camera.directionWC, diff);
 
-    var dimensions = camera.frustum.getPixelDimensions(drawingBufferWidth, drawingBufferHeight, distance, new Cesium.Cartesian2());
+    var dimensions = camera.frustum.getPixelDimensions(drawingBufferWidth, drawingBufferHeight, pixelRatio, distance, new Cesium.Cartesian2());
     Cesium.Cartesian2.multiplyByScalar(offset, Cesium.Cartesian2.maximumComponent(dimensions), offset);
 
     var labelOffset;

CHANGES.md

@@ -1,6 +1,14 @@
 Change Log
 ==========
 
+### 1.63 - 2019-11-01
+
+##### Additions :tada:
+* Added `pixelRatio` parameter to `Camera.getPixelSize`, `OrthographicFrustum.getPixelDimensions`, `OrthographicOffCenterFrustum.getPixelDimensions`, `PerspectiveFrustum.getPixelDimensions`, and `PerspectiveOffCenterFrustum.getPixelDimensions`. Pass in `scene.pixelRatio` for css pixel sizes or `1.0` for native device pixel sizes.
+
+##### Fixes :wrench:
+* Fixed css pixel usage for `BillboardCollection`, `Model`, `Primitive`, and `PointPrimtiveCollection`. [#8113](https://github.com/AnalyticalGraphicsInc/cesium/issues/8113)
+
 ### 1.62 - 2019-10-01
 
 ##### Deprecated :hourglass_flowing_sand:

Source/Core/OrthographicFrustum.js

@@ -209,21 +209,23 @@ define([
      *
      * @param {Number} drawingBufferWidth The width of the drawing buffer.
      * @param {Number} drawingBufferHeight The height of the drawing buffer.
+     * @param {Number} pixelRatio The scaling factor from pixel space to coordinate space.
      * @param {Number} distance The distance to the near plane in meters.
      * @param {Cartesian2} result The object onto which to store the result.
      * @returns {Cartesian2} The modified result parameter or a new instance of {@link Cartesian2} with the pixel's width and height in the x and y properties, respectively.
      *
      * @exception {DeveloperError} drawingBufferWidth must be greater than zero.
      * @exception {DeveloperError} drawingBufferHeight must be greater than zero.
+     * @exception {DeveloperError} pixelRatio must be greater than zero.
      *
      * @example
      * // Example 1
      * // Get the width and height of a pixel.
-     * var pixelSize = camera.frustum.getPixelDimensions(scene.drawingBufferWidth, scene.drawingBufferHeight, 0.0, new Cesium.Cartesian2());
+     * var pixelSize = camera.frustum.getPixelDimensions(scene.drawingBufferWidth, scene.drawingBufferHeight, scene.pixelRatio, 0.0, new Cesium.Cartesian2());
      */
-    OrthographicFrustum.prototype.getPixelDimensions = function(drawingBufferWidth, drawingBufferHeight, distance, result) {
+    OrthographicFrustum.prototype.getPixelDimensions = function(drawingBufferWidth, drawingBufferHeight, pixelRatio, distance, result) {
         update(this);
-        return this._offCenterFrustum.getPixelDimensions(drawingBufferWidth, drawingBufferHeight, distance, result);
+        return this._offCenterFrustum.getPixelDimensions(drawingBufferWidth, drawingBufferHeight, pixelRatio, distance, result);
     };
 
     /**

Source/Core/OrthographicOffCenterFrustum.js

@@ -283,19 +283,21 @@ define([
      *
      * @param {Number} drawingBufferWidth The width of the drawing buffer.
      * @param {Number} drawingBufferHeight The height of the drawing buffer.
+     * @param {Number} pixelRatio The scaling factor from pixel space to coordinate space.
      * @param {Number} distance The distance to the near plane in meters.
      * @param {Cartesian2} result The object onto which to store the result.
      * @returns {Cartesian2} The modified result parameter or a new instance of {@link Cartesian2} with the pixel's width and height in the x and y properties, respectively.
      *
      * @exception {DeveloperError} drawingBufferWidth must be greater than zero.
      * @exception {DeveloperError} drawingBufferHeight must be greater than zero.
+     * @exception {DeveloperError} pixelRatio must be greater than zero.
      *
      * @example
      * // Example 1
      * // Get the width and height of a pixel.
-     * var pixelSize = camera.frustum.getPixelDimensions(scene.drawingBufferWidth, scene.drawingBufferHeight, 0.0, new Cesium.Cartesian2());
+     * var pixelSize = camera.frustum.getPixelDimensions(scene.drawingBufferWidth, scene.drawingBufferHeight, scene.pixelRatio, 0.0, new Cesium.Cartesian2());
      */
-    OrthographicOffCenterFrustum.prototype.getPixelDimensions = function(drawingBufferWidth, drawingBufferHeight, distance, result) {
+    OrthographicOffCenterFrustum.prototype.getPixelDimensions = function(drawingBufferWidth, drawingBufferHeight, pixelRatio, distance, result) {
         update(this);
 
         //>>includeStart('debug', pragmas.debug);
@@ -308,6 +310,12 @@ define([
         if (drawingBufferHeight <= 0) {
             throw new DeveloperError('drawingBufferHeight must be greater than zero.');
         }
+        if (!defined(pixelRatio)) {
+            throw new DeveloperError('pixelRatio is required.');
+        }
+        if (pixelRatio <= 0) {
+            throw new DeveloperError('pixelRatio must be greater than zero.');
+        }
         if (!defined(distance)) {
             throw new DeveloperError('distance is required.');
         }
@@ -318,8 +326,8 @@ define([
 
         var frustumWidth = this.right - this.left;
         var frustumHeight = this.top - this.bottom;
-        var pixelWidth = frustumWidth / drawingBufferWidth;
-        var pixelHeight = frustumHeight / drawingBufferHeight;
+        var pixelWidth = pixelRatio * frustumWidth / drawingBufferWidth;
+        var pixelHeight = pixelRatio * frustumHeight / drawingBufferHeight;
 
         result.x = pixelWidth;
         result.y = pixelHeight;

Source/Core/PerspectiveFrustum.js

@@ -293,17 +293,19 @@ define([
      *
      * @param {Number} drawingBufferWidth The width of the drawing buffer.
      * @param {Number} drawingBufferHeight The height of the drawing buffer.
+     * @param {Number} pixelRatio The scaling factor from pixel space to coordinate space.
      * @param {Number} distance The distance to the near plane in meters.
      * @param {Cartesian2} result The object onto which to store the result.
      * @returns {Cartesian2} The modified result parameter or a new instance of {@link Cartesian2} with the pixel's width and height in the x and y properties, respectively.
      *
      * @exception {DeveloperError} drawingBufferWidth must be greater than zero.
      * @exception {DeveloperError} drawingBufferHeight must be greater than zero.
+     * @exception {DeveloperError} pixelRatio must be greater than zero.
      *
      * @example
      * // Example 1
      * // Get the width and height of a pixel.
-     * var pixelSize = camera.frustum.getPixelDimensions(scene.drawingBufferWidth, scene.drawingBufferHeight, 1.0, new Cesium.Cartesian2());
+     * var pixelSize = camera.frustum.getPixelDimensions(scene.drawingBufferWidth, scene.drawingBufferHeight, scene.pixelRatio, 1.0, new Cesium.Cartesian2());
      *
      * @example
      * // Example 2
@@ -314,11 +316,11 @@ define([
      * var toCenter = Cesium.Cartesian3.subtract(primitive.boundingVolume.center, position, new Cesium.Cartesian3());      // vector from camera to a primitive
      * var toCenterProj = Cesium.Cartesian3.multiplyByScalar(direction, Cesium.Cartesian3.dot(direction, toCenter), new Cesium.Cartesian3()); // project vector onto camera direction vector
      * var distance = Cesium.Cartesian3.magnitude(toCenterProj);
-     * var pixelSize = camera.frustum.getPixelDimensions(scene.drawingBufferWidth, scene.drawingBufferHeight, distance, new Cesium.Cartesian2());
+     * var pixelSize = camera.frustum.getPixelDimensions(scene.drawingBufferWidth, scene.drawingBufferHeight, scene.pixelRatio, distance, new Cesium.Cartesian2());
      */
-    PerspectiveFrustum.prototype.getPixelDimensions = function(drawingBufferWidth, drawingBufferHeight, distance, result) {
+    PerspectiveFrustum.prototype.getPixelDimensions = function(drawingBufferWidth, drawingBufferHeight, pixelRatio, distance, result) {
         update(this);
-        return this._offCenterFrustum.getPixelDimensions(drawingBufferWidth, drawingBufferHeight, distance, result);
+        return this._offCenterFrustum.getPixelDimensions(drawingBufferWidth, drawingBufferHeight, pixelRatio, distance, result);
     };
 
     /**

Source/Core/PerspectiveOffCenterFrustum.js

@@ -322,17 +322,19 @@ define([
      *
      * @param {Number} drawingBufferWidth The width of the drawing buffer.
      * @param {Number} drawingBufferHeight The height of the drawing buffer.
+     * @param {Number} pixelRatio The scaling factor from pixel space to coordinate space.
      * @param {Number} distance The distance to the near plane in meters.
      * @param {Cartesian2} result The object onto which to store the result.
      * @returns {Cartesian2} The modified result parameter or a new instance of {@link Cartesian2} with the pixel's width and height in the x and y properties, respectively.
      *
      * @exception {DeveloperError} drawingBufferWidth must be greater than zero.
      * @exception {DeveloperError} drawingBufferHeight must be greater than zero.
+     * @exception {DeveloperError} pixelRatio must be greater than zero.
      *
      * @example
      * // Example 1
      * // Get the width and height of a pixel.
-     * var pixelSize = camera.frustum.getPixelDimensions(scene.drawingBufferWidth, scene.drawingBufferHeight, 1.0, new Cesium.Cartesian2());
+     * var pixelSize = camera.frustum.getPixelDimensions(scene.drawingBufferWidth, scene.drawingBufferHeight, scene.pixelRatio, 1.0, new Cesium.Cartesian2());
      *
      * @example
      * // Example 2
@@ -343,9 +345,9 @@ define([
      * var toCenter = Cesium.Cartesian3.subtract(primitive.boundingVolume.center, position, new Cesium.Cartesian3());      // vector from camera to a primitive
      * var toCenterProj = Cesium.Cartesian3.multiplyByScalar(direction, Cesium.Cartesian3.dot(direction, toCenter), new Cesium.Cartesian3()); // project vector onto camera direction vector
      * var distance = Cesium.Cartesian3.magnitude(toCenterProj);
-     * var pixelSize = camera.frustum.getPixelDimensions(scene.drawingBufferWidth, scene.drawingBufferHeight, distance, new Cesium.Cartesian2());
+     * var pixelSize = camera.frustum.getPixelDimensions(scene.drawingBufferWidth, scene.drawingBufferHeight, scene.pixelRatio, distance, new Cesium.Cartesian2());
      */
-    PerspectiveOffCenterFrustum.prototype.getPixelDimensions = function(drawingBufferWidth, drawingBufferHeight, distance, result) {
+    PerspectiveOffCenterFrustum.prototype.getPixelDimensions = function(drawingBufferWidth, drawingBufferHeight, pixelRatio, distance, result) {
         update(this);
 
         //>>includeStart('debug', pragmas.debug);
@@ -358,6 +360,12 @@ define([
         if (drawingBufferHeight <= 0) {
             throw new DeveloperError('drawingBufferHeight must be greater than zero.');
         }
+        if (!defined(pixelRatio)) {
+            throw new DeveloperError('pixelRatio is required');
+        }
+        if (pixelRatio <= 0) {
+            throw new DeveloperError('pixelRatio must be greater than zero.');
+        }
         if (!defined(distance)) {
             throw new DeveloperError('distance is required.');
         }
@@ -368,9 +376,9 @@ define([
 
         var inverseNear = 1.0 / this.near;
         var tanTheta = this.top * inverseNear;
-        var pixelHeight = 2.0 * distance * tanTheta / drawingBufferHeight;
+        var pixelHeight = 2.0 * pixelRatio * distance * tanTheta / drawingBufferHeight;
         tanTheta = this.right * inverseNear;
-        var pixelWidth = 2.0 * distance * tanTheta / drawingBufferWidth;
+        var pixelWidth = 2.0 * pixelRatio * distance * tanTheta / drawingBufferWidth;
 
         result.x = pixelWidth;
         result.y = pixelHeight;

Source/Scene/BillboardCollection.js

@@ -1467,7 +1467,7 @@ define([
     function updateBoundingVolume(collection, frameState, boundingVolume) {
         var pixelScale = 1.0;
         if (!collection._allSizedInMeters || collection._maxPixelOffset !== 0.0) {
-            pixelScale = frameState.camera.getPixelSize(boundingVolume, frameState.context.drawingBufferWidth, frameState.context.drawingBufferHeight);
+            pixelScale = frameState.camera.getPixelSize(boundingVolume, frameState.context.drawingBufferWidth, frameState.context.drawingBufferHeight, frameState.pixelRatio);
         }
 
         var size = pixelScale * collection._maxScale * collection._maxSize * 2.0;

Source/Scene/Camera.js

@@ -2670,9 +2670,10 @@ define([
      * @param {BoundingSphere} boundingSphere The bounding sphere in world coordinates.
      * @param {Number} drawingBufferWidth The drawing buffer width.
      * @param {Number} drawingBufferHeight The drawing buffer height.
+     * @param {Number} pixelRatio The scaling factor from pixel space to coordinate space.
      * @returns {Number} The pixel size in meters.
      */
-    Camera.prototype.getPixelSize = function(boundingSphere, drawingBufferWidth, drawingBufferHeight) {
+    Camera.prototype.getPixelSize = function(boundingSphere, drawingBufferWidth, drawingBufferHeight, pixelRatio) {
         //>>includeStart('debug', pragmas.debug);
         if (!defined(boundingSphere)) {
             throw new DeveloperError('boundingSphere is required.');
@@ -2683,10 +2684,13 @@ define([
         if (!defined(drawingBufferHeight)) {
             throw new DeveloperError('drawingBufferHeight is required.');
         }
+        if (!defined(pixelRatio)) {
+            throw new DeveloperError('pixelRatio is required.');
+        }
         //>>includeEnd('debug');
 
         var distance = this.distanceToBoundingSphere(boundingSphere);
-        var pixelSize = this.frustum.getPixelDimensions(drawingBufferWidth, drawingBufferHeight, distance, scratchPixelSize);
+        var pixelSize = this.frustum.getPixelDimensions(drawingBufferWidth, drawingBufferHeight, pixelRatio, distance, scratchPixelSize);
         return Math.max(pixelSize.x, pixelSize.y);
     };
 

Source/Scene/Model.js

@@ -4378,7 +4378,7 @@ define([
     function scaleInPixels(positionWC, radius, frameState) {
         scratchBoundingSphere.center = positionWC;
         scratchBoundingSphere.radius = radius;
-        return frameState.camera.getPixelSize(scratchBoundingSphere, frameState.context.drawingBufferWidth, frameState.context.drawingBufferHeight);
+        return frameState.camera.getPixelSize(scratchBoundingSphere, frameState.context.drawingBufferWidth, frameState.context.drawingBufferHeight, frameState.pixelRatio);
     }
 
     var scratchPosition = new Cartesian3();

Source/Scene/Picking.js

@@ -139,7 +139,7 @@ define([
             Cartesian3.fromElements(origin.z, origin.x, origin.y, origin);
         }
 
-        var pixelSize = frustum.getPixelDimensions(viewport.width, viewport.height, 1.0, scratchOrthoPixelSize);
+        var pixelSize = frustum.getPixelDimensions(viewport.width, viewport.height, 1.0, 1.0, scratchOrthoPixelSize);
 
         var ortho = scratchOrthoPickingFrustum;
         ortho.right = pixelSize.x * 0.5;
@@ -169,7 +169,7 @@ define([
         var xDir = x * near * tanTheta;
         var yDir = y * near * tanPhi;
 
-        var pixelSize = frustum.getPixelDimensions(viewport.width, viewport.height, 1.0, scratchPerspPixelSize);
+        var pixelSize = frustum.getPixelDimensions(viewport.width, viewport.height, 1.0, 1.0, scratchPerspPixelSize);
         var pickWidth = pixelSize.x * width * 0.5;
         var pickHeight = pixelSize.y * height * 0.5;
 

Source/Scene/PointPrimitiveCollection.js

@@ -720,7 +720,7 @@ define([
     }
 
     function updateBoundingVolume(collection, frameState, boundingVolume) {
-        var pixelSize = frameState.camera.getPixelSize(boundingVolume, frameState.context.drawingBufferWidth, frameState.context.drawingBufferHeight);
+        var pixelSize = frameState.camera.getPixelSize(boundingVolume, frameState.context.drawingBufferWidth, frameState.context.drawingBufferHeight, frameState.pixelRatio);
         var size = pixelSize * collection._maxPixelSize;
         boundingVolume.radius += size;
     }

Source/Scene/Primitive.js

@@ -1786,7 +1786,7 @@ define([
             for (i = 0; i < length; ++i) {
                 boundingSphere = primitive._boundingSpheres[i];
                 var boundingSphereWC = primitive._boundingSphereWC[i];
-                var pixelSizeInMeters = frameState.camera.getPixelSize(boundingSphere, frameState.context.drawingBufferWidth, frameState.context.drawingBufferHeight);
+                var pixelSizeInMeters = frameState.camera.getPixelSize(boundingSphere, frameState.context.drawingBufferWidth, frameState.context.drawingBufferHeight, frameState.pixelRatio);
                 var sizeInMeters = pixelSizeInMeters * pixelSize;
                 boundingSphereWC.radius = boundingSphere.radius + sizeInMeters;
             }

Specs/Core/OrthographicFrustumSpec.js

@@ -149,32 +149,58 @@ describe('Core/OrthographicFrustum', function() {
 
     it('get pixel dimensions throws without canvas height', function() {
         expect(function() {
-            return frustum.getPixelDimensions(1.0, undefined, 0.0, new Cartesian2());
+            return frustum.getPixelDimensions(1.0, undefined, 1.0, 0.0, new Cartesian2());
         }).toThrowDeveloperError();
     });
 
     it('get pixel dimensions throws without canvas width', function() {
         expect(function() {
-            return frustum.getPixelDimensions(undefined, 1.0, 0.0, new Cartesian2());
+            return frustum.getPixelDimensions(undefined, 1.0, 1.0, 0.0, new Cartesian2());
         }).toThrowDeveloperError();
     });
 
     it('get pixel dimensions throws with canvas width less than or equal to zero', function() {
         expect(function() {
-            return frustum.getPixelDimensions(0.0, 1.0, 0.0, new Cartesian2());
+            return frustum.getPixelDimensions(0.0, 1.0, 1.0, 0.0, new Cartesian2());
         }).toThrowDeveloperError();
     });
 
     it('get pixel dimensions throws with canvas height less than or equal to zero', function() {
         expect(function() {
-            return frustum.getPixelDimensions(1.0, 0.0, 0.0, new Cartesian2());
+            return frustum.getPixelDimensions(1.0, 0.0, 1.0, 0.0, new Cartesian2());
+        }).toThrowDeveloperError();
+    });
+
+    it('get pixel dimensions throws without pixel ratio', function() {
+        expect(function() {
+            return frustum.getPixelDimensions(1.0, 1.0, undefined, 0.0, new Cartesian2());
+        }).toThrowDeveloperError();
+    });
+
+    it('get pixel dimensions throws with pixel ratio less than or equal to zero', function() {
+        expect(function() {
+            return frustum.getPixelDimensions(1.0, 1.0, 0.0, 0.0, new Cartesian2());
         }).toThrowDeveloperError();
     });
 
     it('get pixel dimensions', function() {
-        var pixelSize = frustum.getPixelDimensions(1.0, 1.0, 0.0, new Cartesian2());
-        expect(pixelSize.x).toEqual(2.0);
-        expect(pixelSize.y).toEqual(2.0);
+        var dimensions = new Cartesian2(1.0, 1.0);
+        var pixelRatio = 1.0;
+        var distance = 1.0;
+        var pixelSize = frustum.getPixelDimensions(dimensions.x, dimensions.y, pixelRatio, distance, new Cartesian2());
+        var expected = frustum._offCenterFrustum.getPixelDimensions(dimensions.x, dimensions.y, pixelRatio, distance, new Cartesian2());
+        expect(pixelSize.x).toEqual(expected.x);
+        expect(pixelSize.y).toEqual(expected.y);
+    });
+
+    it('get pixel dimensions with pixel ratio', function() {
+        var dimensions = new Cartesian2(1.0, 1.0);
+        var pixelRatio = 2.0;
+        var distance = 1.0;
+        var pixelSize = frustum.getPixelDimensions(dimensions.x, dimensions.y, pixelRatio, distance, new Cartesian2());
+        var expected = frustum._offCenterFrustum.getPixelDimensions(dimensions.x, dimensions.y, pixelRatio, distance, new Cartesian2());
+        expect(pixelSize.x).toEqual(expected.x);
+        expect(pixelSize.y).toEqual(expected.y);
     });
 
     it('equals', function() {