Merge pull request #1115 from AnalyticalGraphicsInc/polylineGeometry

Polyline geometry

Author: pjcozzi

Apps/Sandcastle/gallery/Geometry and Appearances.html

@@ -719,39 +719,93 @@
             closed : true
         })
     }));
-
-    // Combine several polylines, each with a unique color.
-    // Override the appearance render state to change the
-    // line on system's that support it (Linx/Mac).
-
-    instances = [];
-
-    for (i = 0; i < 40; i += 2) {
-        instances.push(new Cesium.GeometryInstance({
-            geometry : new Cesium.SimplePolylineGeometry({
-                positions : ellipsoid.cartographicArrayToCartesianArray([
-                    Cesium.Cartographic.fromDegrees(-100.0 + i, 48.0),
-                    Cesium.Cartographic.fromDegrees(-102.0 + i, 48.0)
-                ])
-            }),
-            attributes : {
-                color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromRandom({alpha : 1.0}))
-            }
-        }));
+    
+    positions = [];
+    var colors = [];
+    for (i = 0; i < 40; ++i) {
+        positions.push(ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(-100.0 + i, 48.0)));
+        colors.push(Cesium.Color.fromRandom({alpha : 1.0}));
     }
 
     primitives.add(new Cesium.Primitive({
-        geometryInstances : instances,
+        geometryInstances : new Cesium.GeometryInstance({
+            geometry : new Cesium.SimplePolylineGeometry({
+                positions : positions,
+                colors : colors
+            })
+        }),
         appearance : new Cesium.PerInstanceColorAppearance({
             flat : true,
             renderState : {
                 depthTest : {
                     enabled : true
                 },
+                // Override the appearance render state to change the
+                // line width on system's that support it (Linx/Mac).
                 lineWidth : Math.min(4.0, scene.getContext().getMaximumAliasedLineWidth())
             }
         })
     }));
+    
+    // create a polyline with a material
+    positions = [];
+    for (i = 0; i < 40; ++i) {
+        positions.push(ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(-100.0 + i, 15.0)));
+    }
+
+    primitives.add(new Cesium.Primitive({
+        geometryInstances : new Cesium.GeometryInstance({
+            geometry : new Cesium.PolylineGeometry({
+                positions : positions,
+                width : 10.0,
+                vertexFormat : Cesium.PolylineMaterialAppearance.VERTEX_FORMAT
+            })
+        }),
+        appearance : new Cesium.PolylineMaterialAppearance({
+            material : Cesium.Material.fromType(scene.getContext(), Cesium.Material.PolylineGlowType)
+        })
+    }));
+    
+    // create a polyline with per segment colors
+    positions = [];
+    colors = [];
+    for (i = 0; i < 40; ++i) {
+        positions.push(ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(-100.0 + i, 12.0)));
+        colors.push(Cesium.Color.fromRandom({alpha : 1.0}));
+    }
+
+    primitives.add(new Cesium.Primitive({
+        geometryInstances : new Cesium.GeometryInstance({
+            geometry : new Cesium.PolylineGeometry({
+                positions : positions,
+                width : 10.0,
+                vertexFormat : Cesium.PolylineMaterialAppearance.VERTEX_FORMAT,
+                colors : colors
+            })
+        }),
+        appearance : new Cesium.PolylineColorAppearance()
+    }));
+    
+    // create a polyline with per vertex colors
+    positions = [];
+    colors = [];
+    for (i = 0; i < 40; ++i) {
+        positions.push(ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(-100.0 + i, 9.0)));
+        colors.push(Cesium.Color.fromRandom({alpha : 1.0}));
+    }
+
+    primitives.add(new Cesium.Primitive({
+        geometryInstances : new Cesium.GeometryInstance({
+            geometry : new Cesium.PolylineGeometry({
+                positions : positions,
+                width : 10.0,
+                vertexFormat : Cesium.PolylineMaterialAppearance.VERTEX_FORMAT,
+                colors : colors,
+                colorsPerVertex : true
+            })
+        }),
+        appearance : new Cesium.PolylineColorAppearance()
+    }));
 
     // Create a single wall
     positions = ellipsoid.cartographicArrayToCartesianArray([

CHANGES.md

@@ -9,6 +9,8 @@ Beta Releases
 * Breaking changes:
    * Renamed `TextureWrap.CLAMP` to `TextureWrap.CLAMP_TO_EDGE`.
 * Added `CorridorOutlineGeometry`.
+* Added `PolylineGeometry`, `PolylineColorAppearance`, and `PolylineMaterialAppearance`.
+* Added `colors` option to `SimplePolylineGeometry` for per vertex or per segment colors.
 * Improved runtime generation of GLSL shaders.
 * Added new built-in GLSL functions `czm_getLambertDiffuse` and `czm_getSpecular`.
 * Made sun size accurate.
@@ -39,7 +41,8 @@ _This releases fixes 2D and other issues with Chrome 29.0.1547.57 ([#1002](https
           * `ConstantPositionProperty` - a `PositionProperty` whose value does not change in respect to the `ReferenceFrame` in which is it defined.
           * `SampledPositionProperty` - a `SampledProperty` for positions.
           * `TimeIntervalCollectionPositionProperty` - A `TimeIntervalCollectionProperty` for positions.
-    * Removed `processCzml`, use `CzmlDataSource` instead.    * `Source/Widgets/Viewer/lighter.css` was deleted, use `Source/Widgets/lighter.css` instead.
+    * Removed `processCzml`, use `CzmlDataSource` instead.
+    * `Source/Widgets/Viewer/lighter.css` was deleted, use `Source/Widgets/lighter.css` instead.
     * Replaced `ExtentGeometry` parameters for extruded extent to make them consistent with other geometries.
       * `options.extrudedOptions.height` -> `options.extrudedHeight`
       * `options.extrudedOptions.closeTop` -> `options.closeBottom`

Source/Core/GeometryAttributes.js

@@ -76,6 +76,18 @@ define(['./defaultValue'], function(defaultValue) {
          * @default undefined
          */
         this.tangent = options.tangent;
+
+        /**
+         * The color attribute.
+         * <p>
+         * 8-bit unsigned integer. 4 components per attribute.
+         * </p>
+         *
+         * @type GeometryAttribute
+         *
+         * @default undefined
+         */
+        this.color = options.color;
     };
 
     return GeometryAttributes;

Source/Core/GeometryPipeline.js

@@ -582,51 +582,78 @@ define([
      * </p>
      *
      * @param {Geometry} geometry The geometry to modify.
+     * @param {String} attributeName The name of the attribute.
+     * @param {String} attributeName3D The name of the attribute in 3D.
+     * @param {String} attributeName2D The name of the attribute in 2D.
      * @param {Object} [projection=new GeographicProjection()] The projection to use.
      *
      * @returns {Geometry} The modified <code>geometry</code> argument with <code>position3D</code> and <code>position2D</code> attributes.
      *
      * @exception {DeveloperError} geometry is required.
+     * @exception {DeveloperError} attributeName is required.
+     * @exception {DeveloperError} attributeName3D is required.
+     * @exception {DeveloperError} attributeName2D is required.
+     * @exception {DeveloperError} geometry must have attribute matching the attributeName argument.
+     * @exception {DeveloperError} The attribute componentDatatype must be ComponentDatatype.DOUBLE.
      *
      * @example
-     * geometry = GeometryPipeline.projectTo2D(geometry);
+     * geometry = GeometryPipeline.projectTo2D(geometry, 'position', 'position3D', 'position2D');
      */
-    GeometryPipeline.projectTo2D = function(geometry, projection) {
+    GeometryPipeline.projectTo2D = function(geometry, attributeName, attributeName3D, attributeName2D, projection) {
         if (!defined(geometry)) {
             throw new DeveloperError('geometry is required.');
         }
 
-        if (defined(geometry.attributes.position)) {
-            projection = (defined(projection)) ? projection : new GeographicProjection();
-            var ellipsoid = projection.getEllipsoid();
+        if (!defined(attributeName)) {
+            throw new DeveloperError('attributeName is required.');
+        }
 
-            // Project original positions to 2D.
-            var positions3D = geometry.attributes.position.values;
-            var projectedPositions = new Float64Array(positions3D.length);
-            var index = 0;
+        if (!defined(attributeName3D)) {
+            throw new DeveloperError('attributeName3D is required.');
+        }
 
-            for ( var i = 0; i < positions3D.length; i += 3) {
-                var position = Cartesian3.fromArray(positions3D, i, scratchProjectTo2DCartesian3);
-                var lonLat = ellipsoid.cartesianToCartographic(position, scratchProjectTo2DCartographic);
-                var projectedLonLat = projection.project(lonLat, scratchProjectTo2DCartesian3);
+        if (!defined(attributeName2D)) {
+            throw new DeveloperError('attributeName2D is required.');
+        }
 
-                projectedPositions[index++] = projectedLonLat.x;
-                projectedPositions[index++] = projectedLonLat.y;
-                projectedPositions[index++] = projectedLonLat.z;
-            }
+        var attribute = geometry.attributes[attributeName];
+        if (!defined(attribute)) {
+            throw new DeveloperError('geometry must have attribute matching the attributeName argument: ' + attributeName + '.');
+        }
 
-            // Rename original positions to WGS84 Positions.
-            geometry.attributes.position3D = geometry.attributes.position;
+        if (attribute.componentDatatype.value !== ComponentDatatype.DOUBLE.value) {
+            throw new DeveloperError('The attribute componentDatatype must be ComponentDatatype.DOUBLE.');
+        }
 
-            // Replace original positions with 2D projected positions
-            geometry.attributes.position2D = new GeometryAttribute({
-                componentDatatype : ComponentDatatype.DOUBLE,
-                componentsPerAttribute : 3,
-                values : projectedPositions
-            });
-            delete geometry.attributes.position;
+        projection = (defined(projection)) ? projection : new GeographicProjection();
+        var ellipsoid = projection.getEllipsoid();
+
+        // Project original values to 2D.
+        var values3D = attribute.values;
+        var projectedValues = new Float64Array(values3D.length);
+        var index = 0;
+
+        for ( var i = 0; i < values3D.length; i += 3) {
+            var value = Cartesian3.fromArray(values3D, i, scratchProjectTo2DCartesian3);
+            var lonLat = ellipsoid.cartesianToCartographic(value, scratchProjectTo2DCartographic);
+            var projectedLonLat = projection.project(lonLat, scratchProjectTo2DCartesian3);
+
+            projectedValues[index++] = projectedLonLat.x;
+            projectedValues[index++] = projectedLonLat.y;
+            projectedValues[index++] = projectedLonLat.z;
         }
 
+        // Rename original cartesians to WGS84 cartesians.
+        geometry.attributes[attributeName3D] = attribute;
+
+        // Replace original cartesians with 2D projected cartesians
+        geometry.attributes[attributeName2D] = new GeometryAttribute({
+            componentDatatype : ComponentDatatype.DOUBLE,
+            componentsPerAttribute : 3,
+            values : projectedValues
+        });
+        delete geometry.attributes[attributeName];
+
         return geometry;
     };