Merge pull request #7626 from AnalyticalGraphicsInc/polyline-glow-taper

Add tapered glowing lines as an option on PolylineGlowMaterial.
CesiumGS · Apr 24, 2019 · c9ed255 · c9ed255
2 parents deb3043 + d6790a1
commit c9ed255
Show file tree

Hide file tree

Showing 13 changed files with 100 additions and 34 deletions.
diff --git a/Apps/Sandcastle/gallery/CZML Polyline.html b/Apps/Sandcastle/gallery/CZML Polyline.html
@@ -10,10 +10,12 @@
     <script type="text/javascript" src="../Sandcastle-header.js"></script>
     <script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.20/require.js"></script>
     <script type="text/javascript">
-    require.config({
-        baseUrl : '../../../Source',
-        waitSeconds : 60
-    });
+        if(typeof require === 'function') {
+            require.config({
+                baseUrl : '../../../Source',
+                waitSeconds : 120
+            });
+        }
     </script>
 </head>
 <body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
@@ -65,9 +67,10 @@
         "material" : {
             "polylineGlow" : {
                 "color" : {
-                    "rgba" : [0, 0, 255, 255]
+                    "rgba" : [100, 149, 237, 255]
                 },
-                "glowPower" : 0.2
+                "glowPower" : 0.2,
+                "taperPower" : 0.5
             }
         },
         "width" : 10

diff --git a/Apps/Sandcastle/gallery/HeadingPitchRoll.html b/Apps/Sandcastle/gallery/HeadingPitchRoll.html
@@ -10,10 +10,12 @@
     <script type="text/javascript" src="../Sandcastle-header.js"></script>
     <script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.20/require.js"></script>
     <script type="text/javascript">
-    require.config({
-        baseUrl : '../../../Source',
-        waitSeconds : 60
-    });
+        if(typeof require === 'function') {
+            require.config({
+                baseUrl : '../../../Source',
+                waitSeconds : 120
+            });
+        }
     </script>
 </head>
 <body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
@@ -92,6 +94,7 @@ <h1>Loading...</h1>
         resolution : 1,
         material : new Cesium.PolylineGlowMaterialProperty({
             glowPower : 0.3,
+            taperPower : 0.3,
             color : Cesium.Color.PALEGOLDENROD
         })
     }

diff --git a/Apps/Sandcastle/gallery/Materials.html b/Apps/Sandcastle/gallery/Materials.html
@@ -10,10 +10,12 @@
     <script type="text/javascript" src="../Sandcastle-header.js"></script>
     <script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.20/require.js"></script>
     <script type="text/javascript">
-    require.config({
-        baseUrl : '../../../Source',
-        waitSeconds : 60
-    });
+        if(typeof require === 'function') {
+            require.config({
+                baseUrl : '../../../Source',
+                waitSeconds : 120
+            });
+        }
     </script>
 </head>
 <body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
@@ -288,7 +290,9 @@
 function applyPolylineGlowMaterial(primitive, scene) {
     Sandcastle.declare(applyPolylineGlowMaterial);  // For highlighting in Sandcastle.
     var material = Cesium.Material.fromType('PolylineGlow', {
-        innerWidth : primitive.width / 2.0
+        color : Cesium.Color.CRIMSON,
+        glowPower : 0.2,
+        taperPower : 0.4
     });
     primitive.material = material;
 }

diff --git a/Apps/Sandcastle/gallery/Polyline.html b/Apps/Sandcastle/gallery/Polyline.html
@@ -10,10 +10,12 @@
     <script type="text/javascript" src="../Sandcastle-header.js"></script>
     <script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.20/require.js"></script>
     <script type="text/javascript">
-    require.config({
-        baseUrl : '../../../Source',
-        waitSeconds : 60
-    });
+        if(typeof require === 'function') {
+            require.config({
+                baseUrl : '../../../Source',
+                waitSeconds : 120
+            });
+        }
     </script>
 </head>
 <body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
@@ -59,7 +61,8 @@
         width : 10,
         material : new Cesium.PolylineGlowMaterialProperty({
             glowPower : 0.2,
-            color : Cesium.Color.BLUE
+            taperPower : 0.5,
+            color : Cesium.Color.CORNFLOWERBLUE
         })
     }
 });
@@ -103,7 +106,7 @@
 
 viewer.zoomTo(viewer.entities);
 //Sandcastle_End
-Sandcastle.finishedLoading();
+    Sandcastle.finishedLoading();
 }
 if (typeof Cesium !== 'undefined') {
     startup(Cesium);

diff --git a/Apps/Sandcastle/gallery/development/Polylines.html b/Apps/Sandcastle/gallery/development/Polylines.html
@@ -10,10 +10,12 @@
     <script type="text/javascript" src="../Sandcastle-header.js"></script>
     <script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.20/require.js"></script>
     <script type="text/javascript">
-    require.config({
-        baseUrl : '../../../Source',
-        waitSeconds : 60
-    });
+        if(typeof require === 'function') {
+            require.config({
+                baseUrl : '../../../Source',
+                waitSeconds : 120
+            });
+        }
     </script>
 </head>
 <body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
@@ -64,7 +66,8 @@
                                                             -85.0, 40.0])
         }),
         material : Cesium.Material.fromType(Cesium.Material.PolylineGlowType, {
-            glowPower : 0.25,
+            glowPower : 0.2,
+            taperPower : 0.2,
             color : new Cesium.Color(1.0, 0.5, 0.0, 1.0)
         }),
         width : 10.0

diff --git a/CHANGES.md b/CHANGES.md
@@ -4,6 +4,7 @@ Change Log
 ### 1.57 - 2019-05-01
 
 ##### Additions :tada:
+* Added new parameter to `PolylineGlowMaterial` called `taperPower`, that works similar to the existing `glowPower` parameter, to taper the back of the line away. [#7626](https://github.com/AnalyticalGraphicsInc/cesium/pull/7626)
 * Added support for the `KHR_texture_transform` glTF extension. [#7549](https://github.com/AnalyticalGraphicsInc/cesium/pull/7549)
 * Added support for color-to-alpha with a threshold on imagery layers. [#7727](https://github.com/AnalyticalGraphicsInc/cesium/pull/7727)
 

diff --git a/Source/DataSources/CzmlDataSource.js b/Source/DataSources/CzmlDataSource.js
@@ -1085,6 +1085,7 @@ define([
             materialData = packetData.polylineGlow;
             processPacketData(Color, existingMaterial, 'color', materialData.color, undefined, sourceUri, entityCollection);
             processPacketData(Number, existingMaterial, 'glowPower', materialData.glowPower, undefined, sourceUri, entityCollection);
+            processPacketData(Number, existingMaterial, 'taperPower', materialData.taperPower, undefined, sourceUri, entityCollection);
         } else if (defined(packetData.polylineArrow)) {
             if (!(existingMaterial instanceof PolylineArrowMaterialProperty)) {
                 existingMaterial = new PolylineArrowMaterialProperty();

diff --git a/Source/DataSources/PolylineGlowMaterialProperty.js b/Source/DataSources/PolylineGlowMaterialProperty.js
@@ -18,6 +18,7 @@ define([
 
     var defaultColor = Color.WHITE;
     var defaultGlowPower = 0.25;
+    var defaultTaperPower = 1.0;
 
     /**
      * A {@link MaterialProperty} that maps to polyline glow {@link Material} uniforms.
@@ -27,6 +28,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.glowPower=0.25] A numeric Property specifying the strength of the glow, as a percentage of the total line width.
+     * @param {Property} [options.taperPower=1.0] A numeric Property specifying the strength of the tapering effect, as a percentage of the total line length.  If 1.0 or higher, no taper effect is used.
      */
     function PolylineGlowMaterialProperty(options) {
         options = defaultValue(options, defaultValue.EMPTY_OBJECT);
@@ -36,9 +38,12 @@ define([
         this._colorSubscription = undefined;
         this._glowPower = undefined;
         this._glowPowerSubscription = undefined;
+        this._taperPower = undefined;
+        this._taperPowerSubscription = undefined;
 
         this.color = options.color;
         this.glowPower = options.glowPower;
+        this.taperPower = options.taperPower;
     }
 
     defineProperties(PolylineGlowMaterialProperty.prototype, {
@@ -78,7 +83,13 @@ define([
          * @memberof PolylineGlowMaterialProperty.prototype
          * @type {Property}
          */
-        glowPower : createPropertyDescriptor('glowPower')
+        glowPower : createPropertyDescriptor('glowPower'),
+        /**
+         * Gets or sets the numeric Property specifying the strength of the tapering effect, as a percentage of the total line length.  If 1.0 or higher, no taper effect is used.
+         * @memberof PolylineGlowMaterialProperty.prototype
+         * @type {Property}
+         */
+        taperPower : createPropertyDescriptor('taperPower')
     });
 
     /**
@@ -104,6 +115,7 @@ define([
         }
         result.color = Property.getValueOrClonedDefault(this._color, time, defaultColor, result.color);
         result.glowPower = Property.getValueOrDefault(this._glowPower, time, defaultGlowPower, result.glowPower);
+        result.taperPower = Property.getValueOrDefault(this._taperPower, time, defaultTaperPower, result.taperPower);
         return result;
     };
 
@@ -115,10 +127,11 @@ define([
      * @returns {Boolean} <code>true</code> if left and right are equal, <code>false</code> otherwise.
      */
     PolylineGlowMaterialProperty.prototype.equals = function(other) {
-        return this === other || //
-               (other instanceof PolylineGlowMaterialProperty && //
+        return this === other ||
+                (other instanceof PolylineGlowMaterialProperty &&
                 Property.equals(this._color, other._color) &&
-                Property.equals(this._glowPower, other._glowPower));
+                Property.equals(this._glowPower, other._glowPower) &&
+                Property.equals(this._taperPower, other._taperPower));
     };
 
     return PolylineGlowMaterialProperty;

diff --git a/Source/Scene/Material.js b/Source/Scene/Material.js
@@ -227,6 +227,7 @@ define([
      *  <ul>
      *      <li><code>color</code>: color and maximum alpha for the glow on the line.</li>
      *      <li><code>glowPower</code>: strength of the glow, as a percentage of the total line width (less than 1.0).</li>
+     *      <li><code>taperPower</code>: strength of the tapering effect, as a percentage of the total line length.  If 1.0 or higher, no taper effect is used.</li>
      *  </ul>
      *  <li>PolylineOutline</li>
      *  <ul>
@@ -1483,7 +1484,8 @@ define([
             type : Material.PolylineGlowType,
             uniforms : {
                 color : new Color(0.0, 0.5, 1.0, 1.0),
-                glowPower : 0.25
+                glowPower : 0.25,
+                taperPower : 1.0
             },
             source : PolylineGlowMaterial
         },

diff --git a/Source/Shaders/Materials/PolylineGlowMaterial.glsl b/Source/Shaders/Materials/PolylineGlowMaterial.glsl
@@ -1,5 +1,6 @@
 uniform vec4 color;
 uniform float glowPower;
+uniform float taperPower;
 
 varying float v_width;
 
@@ -10,6 +11,10 @@ czm_material czm_getMaterial(czm_materialInput materialInput)
     vec2 st = materialInput.st;
     float glow = glowPower / abs(st.t - 0.5) - (glowPower / 0.5);
 
+    if (taperPower <= 0.99999) {
+        glow *= min(1.0, taperPower / (0.5 - st.s * 0.5) - (taperPower / 0.5));
+    }
+
     vec4 fragColor;
     fragColor.rgb = max(vec3(glow - 1.0 + color.rgb), color.rgb);
     fragColor.a = clamp(0.0, 1.0, glow) * color.a;

diff --git a/Specs/DataSources/CzmlDataSourceSpec.js b/Specs/DataSources/CzmlDataSourceSpec.js
@@ -3458,7 +3458,8 @@ defineSuite([
                         color : {
                             rgbaf : [0.1, 0.2, 0.3, 0.4]
                         },
-                        glowPower : 0.75
+                        glowPower : 0.75,
+                        taperPower : 0.55
                     }
                 }
             }
@@ -3469,6 +3470,7 @@ defineSuite([
             var entity = dataSource.entities.getById('polylineGlow');
             expect(entity.polyline.material.color.getValue()).toEqual(new Color(0.1, 0.2, 0.3, 0.4));
             expect(entity.polyline.material.glowPower.getValue()).toEqual(0.75);
+            expect(entity.polyline.material.taperPower.getValue()).toEqual(0.55);
         });
     });
 

diff --git a/Specs/DataSources/PathVisualizerSpec.js b/Specs/DataSources/PathVisualizerSpec.js
@@ -231,6 +231,7 @@ defineSuite([
         path.material = new PolylineGlowMaterialProperty();
         path.material.color = new ConstantProperty(new Color(0.8, 0.7, 0.6, 0.5));
         path.material.glowPower = new ConstantProperty(0.2);
+        path.material.taperPower = new ConstantProperty(0.15);
         path.width = new ConstantProperty(12.5);
         path.leadTime = new ConstantProperty(25);
         path.trailTime = new ConstantProperty(10);
@@ -245,6 +246,7 @@ defineSuite([
         var material = primitive.material;
         expect(material.uniforms.color).toEqual(testObject.path.material.color.getValue(updateTime));
         expect(material.uniforms.glowPower).toEqual(testObject.path.material.glowPower.getValue(updateTime));
+        expect(material.uniforms.taperPower).toEqual(testObject.path.material.taperPower.getValue(updateTime));
     });
 
     it('Reuses primitives when hiding one and showing another', function() {