From 528f368243020b6dded5e42fe415d6f7bedf13a6 Mon Sep 17 00:00:00 2001 From: Ed Mackey Date: Fri, 8 Mar 2019 11:46:04 -0500 Subject: [PATCH 1/3] Add tapered glowing lines as an option on PolylineGlowMaterial. --- Apps/Sandcastle/gallery/CZML Polyline.html | 15 ++++++---- Apps/Sandcastle/gallery/HeadingPitchRoll.html | 11 +++++--- Apps/Sandcastle/gallery/Materials.html | 14 ++++++---- Apps/Sandcastle/gallery/Polyline.html | 15 ++++++---- .../gallery/development/Polylines.html | 13 +++++---- Source/DataSources/CzmlDataSource.js | 1 + .../PolylineGlowMaterialProperty.js | 21 +++++++++++--- Source/Scene/Material.js | 4 ++- .../Materials/PolylineGlowMaterial.glsl | 5 ++++ Specs/DataSources/CzmlDataSourceSpec.js | 4 ++- Specs/DataSources/PathVisualizerSpec.js | 2 ++ .../PolylineGlowMaterialPropertySpec.js | 28 +++++++++++++++++-- 12 files changed, 99 insertions(+), 34 deletions(-) diff --git a/Apps/Sandcastle/gallery/CZML Polyline.html b/Apps/Sandcastle/gallery/CZML Polyline.html index 8629392cf01b..a3e950faefe7 100644 --- a/Apps/Sandcastle/gallery/CZML Polyline.html +++ b/Apps/Sandcastle/gallery/CZML Polyline.html @@ -10,10 +10,12 @@ @@ -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 index b681a057d984..df4344463044 100644 --- a/Apps/Sandcastle/gallery/HeadingPitchRoll.html +++ b/Apps/Sandcastle/gallery/HeadingPitchRoll.html @@ -10,10 +10,12 @@ @@ -92,6 +94,7 @@

Loading...

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 index d9fea96fdfa0..c90a02a85de0 100644 --- a/Apps/Sandcastle/gallery/Materials.html +++ b/Apps/Sandcastle/gallery/Materials.html @@ -10,10 +10,12 @@ @@ -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 index 40e35964751c..e501ecbe8258 100644 --- a/Apps/Sandcastle/gallery/Polyline.html +++ b/Apps/Sandcastle/gallery/Polyline.html @@ -10,10 +10,12 @@ @@ -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 index db16318e2ddc..531a75979f71 100644 --- a/Apps/Sandcastle/gallery/development/Polylines.html +++ b/Apps/Sandcastle/gallery/development/Polylines.html @@ -10,10 +10,12 @@ @@ -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/Source/DataSources/CzmlDataSource.js b/Source/DataSources/CzmlDataSource.js index 38535592c168..ac1d219298e3 100644 --- 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 index e7841ec96dcc..fcdc39a58b75 100644 --- 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} true if left and right are equal, false 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 index 3de332a2683d..737166c514a8 100644 --- a/Source/Scene/Material.js +++ b/Source/Scene/Material.js @@ -227,6 +227,7 @@ define([ * *
  • PolylineOutline
    • *