Merge pull request #8227 from AnalyticalGraphicsInc/cssPixelFix

Fixed pixel size for polylines and point clouds under different resolutions

Author: lilleyse

CHANGES.md

@@ -33,6 +33,7 @@ Change Log
 * Fixed alpha equation for `BlendingState.ALPHA_BLEND` and `BlendingState.ADDITIVE_BLEND`. [#8202](https://github.com/AnalyticalGraphicsInc/cesium/pull/8202)
 * Fixed atmosphere brightness when High Dynamic Range is disabled. [#8149](https://github.com/AnalyticalGraphicsInc/cesium/issues/8149)
 * Fixed brightness levels for procedural Image Based Lighting. [#7803](https://github.com/AnalyticalGraphicsInc/cesium/issues/7803)
+* Made pixel sizes consistent for polylines and point clouds when rendering at different pixel ratios. [#8113](https://github.com/AnalyticalGraphicsInc/cesium/issues/8113)
 
 ### 1.61 - 2019-09-03
 

Source/DataSources/PolylineDashMaterialProperty.js

@@ -29,7 +29,7 @@ define([
      * @param {Object} [options] Object with the following properties:
      * @param {Property} [options.color=Color.WHITE] A Property specifying the {@link Color} of the line.
      * @param {Property} [options.gapColor=Color.TRANSPARENT] A Property specifying the {@link Color} of the gaps in the line.
-     * @param {Property} [options.dashLength=16.0] A numeric Property specifying the length of the dash pattern in pixel.s
+     * @param {Property} [options.dashLength=16.0] A numeric Property specifying the length of the dash pattern in pixels.
      * @param {Property} [options.dashPattern=255.0] A numeric Property specifying a 16 bit pattern for the dash
      */
     function PolylineDashMaterialProperty(options) {

Source/Renderer/AutomaticUniforms.js

@@ -1665,18 +1665,18 @@ define([
         /**
          * An automatic GLSL uniform representing the ratio of canvas coordinate space to canvas pixel space.
          *
-         * @alias czm_resolutionScale
+         * @alias czm_pixelRatio
          * @namespace
          * @glslUniform
          *
          * @example
-         * uniform float czm_resolutionScale;
+         * uniform float czm_pixelRatio;
          */
-        czm_resolutionScale : new AutomaticUniform({
+        czm_pixelRatio : new AutomaticUniform({
             size : 1,
             datatype : WebGLConstants.FLOAT,
             getValue : function(uniformState) {
-                return uniformState.resolutionScale;
+                return uniformState.pixelRatio;
             }
         }),
 

Source/Renderer/UniformState.js

@@ -158,7 +158,7 @@ define([
         this._cameraUp = new Cartesian3();
         this._frustum2DWidth = 0.0;
         this._eyeHeight2D = new Cartesian2();
-        this._resolutionScale = 1.0;
+        this._pixelRatio = 1.0;
         this._orthographicIn3D = false;
         this._backgroundColor = new Color();
 
@@ -813,9 +813,9 @@ define([
          * @memberof UniformState.prototype
          * @type {Number}
          */
-        resolutionScale : {
+        pixelRatio : {
             get : function() {
-                return this._resolutionScale;
+                return this._pixelRatio;
             }
         },
 
@@ -1118,9 +1118,7 @@ define([
     UniformState.prototype.update = function(frameState) {
         this._mode = frameState.mode;
         this._mapProjection = frameState.mapProjection;
-
-        var canvas = frameState.context._canvas;
-        this._resolutionScale = canvas.width / canvas.clientWidth;
+        this._pixelRatio = frameState.pixelRatio;
 
         var camera = frameState.camera;
         this.updateCamera(camera);

Source/Scene/FrameState.js

@@ -157,7 +157,7 @@ define([
         this.maximumScreenSpaceError = undefined;
 
         /**
-         * Ratio between a pixel and a density-independent pixel. Provides a standard unity of
+         * Ratio between a pixel and a density-independent pixel. Provides a standard unit of
          * measure for real pixel measurements appropriate to a particular device.
          *
          * @type {Number}

Source/Scene/LabelCollection.js

@@ -864,7 +864,7 @@ define([
         }
 
         var uniformState = context.uniformState;
-        var resolutionScale = uniformState.resolutionScale;
+        var resolutionScale = uniformState.pixelRatio;
         var resolutionChanged = this._resolutionScale !== resolutionScale;
         this._resolutionScale = resolutionScale;
 

Source/Scene/PointCloud.js

@@ -782,6 +782,8 @@ define([
             u_pointSizeAndTimeAndGeometricErrorAndDepthMultiplier : function() {
                 var scratch = scratchPointSizeAndTimeAndGeometricErrorAndDepthMultiplier;
                 scratch.x = pointCloud._attenuation ? pointCloud.maximumAttenuation : pointCloud._pointSize;
+                scratch.x *= frameState.pixelRatio;
+
                 scratch.y = pointCloud.time;
 
                 if (pointCloud._attenuation) {
@@ -1145,7 +1147,7 @@ define([
         }
 
         if (hasPointSizeStyle) {
-            vs += '    gl_PointSize = getPointSizeFromStyle(position, position_absolute, color, normal); \n';
+            vs += '    gl_PointSize = getPointSizeFromStyle(position, position_absolute, color, normal) * czm_pixelRatio; \n';
         } else if (attenuation) {
             vs += '    vec4 positionEC = czm_modelView * vec4(position, 1.0); \n' +
                   '    float depth = -positionEC.z; \n' +

Source/Scene/PointCloudEyeDomeLighting.js

@@ -243,7 +243,7 @@ define([
         }
 
         this._strength = pointCloudShading.eyeDomeLightingStrength;
-        this._radius = pointCloudShading.eyeDomeLightingRadius;
+        this._radius = pointCloudShading.eyeDomeLightingRadius * frameState.pixelRatio;
 
         var dirty = createResources(this, frameState.context);
 

Source/Scene/Scene.js

@@ -1620,7 +1620,7 @@ define([
         },
 
         /**
-         * Ratio between a pixel and a density-independent pixel. Provides a standard unity of
+         * Ratio between a pixel and a density-independent pixel. Provides a standard unit of
          * measure for real pixel measurements appropriate to a particular device.
          *
          * @memberof Scene.prototype

Source/Shaders/BillboardCollectionVS.glsl

@@ -56,7 +56,7 @@ vec4 addScreenSpaceOffset(vec4 positionEC, vec2 imageSize, float scale, vec2 dir
 {
     // Note the halfSize cannot be computed in JavaScript because it is sent via
     // compressed vertex attributes that coerce it to an integer.
-    vec2 halfSize = imageSize * scale * czm_resolutionScale * 0.5;
+    vec2 halfSize = imageSize * scale * czm_pixelRatio * 0.5;
     halfSize *= ((direction * 2.0) - 1.0);
 
     vec2 originTranslate = origin * abs(halfSize);
@@ -102,7 +102,7 @@ vec4 addScreenSpaceOffset(vec4 positionEC, vec2 imageSize, float scale, vec2 dir
     }
 
     positionEC.xy += translate * mpp;
-    positionEC.xy += (pixelOffset * czm_resolutionScale) * mpp;
+    positionEC.xy += (pixelOffset * czm_pixelRatio) * mpp;
     return positionEC;
 }