cesium 0.15.0 → 0.16.0

data/app/assets/javascripts/Scene/Polyline.js

@@ -6,7 +6,9 @@ define([
         '../Core/BoundingSphere',
         '../Core/Cartesian3',
         '../Core/Color',
-        '../Core/PolylinePipeline'
+        '../Core/PolylinePipeline',
+        '../Core/Matrix4',
+        './Material'
     ], function(
         defaultValue,
         DeveloperError,
@@ -14,7 +16,9 @@ define([
         BoundingSphere,
         Cartesian3,
         Color,
-        PolylinePipeline) {
+        PolylinePipeline,
+        Matrix4,
+        Material) {
     "use strict";
 
     var EMPTY_OBJECT = {};
@@ -24,15 +28,20 @@ define([
      *
      * @alias Polyline
      * @internalConstructor
+     *
+     * @demo <a href="http://cesium.agi.com/Cesium/Apps/Sandcastle/index.html?src=Polylines.html">Cesium Sandcastle Polyline Demo</a>
      */
     var Polyline = function(description, polylineCollection) {
         description = defaultValue(description, EMPTY_OBJECT);
 
         this._show = defaultValue(description.show, true);
         this._width = defaultValue(description.width, 1.0);
-        this._outlineWidth = defaultValue(description.outlineWidth, 1.0);
-        this._color = Color.clone(defaultValue(description.color, Color.WHITE));
-        this._outlineColor = Color.clone(defaultValue(description.outlineColor, Color.WHITE));
+
+        this._material = description.material;
+        if (typeof this._material === 'undefined') {
+            this._material = Material.fromType(undefined, Material.ColorType);
+            this._material.uniforms.color = new Color(1.0, 1.0, 1.0, 1.0);
+        }
 
         var positions = description.positions;
         if (typeof positions === 'undefined') {
@@ -40,27 +49,32 @@ define([
         }
 
         this._positions = positions;
-        this._positionsLength = positions.length;
-        this._actualLength = positions.length;
+
+        var modelMatrix;
+        if (typeof this._polylineCollection !== 'undefined') {
+            modelMatrix = Matrix4.clone(this._polylineCollection.modelMatrix);
+        }
+
+        this._modelMatrix = modelMatrix;
+        this._segments = PolylinePipeline.wrapLongitude(positions, modelMatrix);
+
+        this._actualLength = undefined;
 
         this._propertiesChanged = new Uint32Array(NUMBER_OF_PROPERTIES);
         this._polylineCollection = polylineCollection;
         this._dirty = false;
         this._pickId = undefined;
         this._pickIdThis = description._pickIdThis;
-        this._segments = undefined;
         this._boundingVolume = BoundingSphere.fromPoints(this._positions);
         this._boundingVolume2D = new BoundingSphere(); // modified in PolylineCollection
     };
 
     var SHOW_INDEX = Polyline.SHOW_INDEX = 0;
-    var POSITION_INDEX = Polyline.POSITION_INDEX = 1;
-    var COLOR_INDEX = Polyline.COLOR_INDEX = 2;
-    var OUTLINE_COLOR_INDEX = Polyline.OUTLINE_COLOR_INDEX = 3;
-    var WIDTH_INDEX = Polyline.WIDTH_INDEX = 4;
-    var OUTLINE_WIDTH_INDEX = Polyline.OUTLINE_WIDTH_INDEX = 5;
-    var POSITION_SIZE_INDEX = Polyline.POSITION_SIZE_INDEX = 6;
-    var NUMBER_OF_PROPERTIES = Polyline.NUMBER_OF_PROPERTIES = 7;
+    var WIDTH_INDEX = Polyline.WIDTH_INDEX = 1;
+    var POSITION_INDEX = Polyline.POSITION_INDEX = 2;
+    var MATERIAL_INDEX = Polyline.MATERIAL_INDEX = 3;
+    var POSITION_SIZE_INDEX = Polyline.POSITION_SIZE_INDEX = 4;
+    var NUMBER_OF_PROPERTIES = Polyline.NUMBER_OF_PROPERTIES = 5;
 
     function makeDirty(polyline, propertyChanged) {
         ++polyline._propertiesChanged[propertyChanged];
@@ -113,6 +127,8 @@ define([
      *
      * @memberof Polyline
      *
+     * @return {Array} The polyline's positions.
+     *
      * @see Polyline#setPositions
      */
     Polyline.prototype.getPositions = function() {
@@ -144,70 +160,96 @@ define([
             throw new DeveloperError('value is required.');
         }
 
-        if (this._positionsLength !== value.length) {
-            this._positionsLength = value.length;
+        if (this._positions.length !== value.length) {
             makeDirty(this, POSITION_SIZE_INDEX);
         }
 
         this._positions = value;
         this._boundingVolume = BoundingSphere.fromPoints(this._positions, this._boundingVolume);
         makeDirty(this, POSITION_INDEX);
+
+        this.update();
+    };
+
+    /**
+     * @private
+     */
+    Polyline.prototype.update = function() {
+        var modelMatrix = Matrix4.IDENTITY;
+        if (typeof this._polylineCollection !== 'undefined') {
+            modelMatrix = this._polylineCollection.modelMatrix;
+        }
+
+        var segmentPositionsLength = this._segments.positions.length;
+        var segmentLengths = this._segments.lengths;
+
+        var positionsChanged = this._propertiesChanged[POSITION_INDEX] > 0 || this._propertiesChanged[POSITION_SIZE_INDEX] > 0;
+        if (!modelMatrix.equals(this._modelMatrix) || positionsChanged) {
+            this._segments = PolylinePipeline.wrapLongitude(this._positions, modelMatrix);
+        }
+
+        this._modelMatrix = modelMatrix;
+
+        if (this._segments.positions.length !== segmentPositionsLength) {
+            // number of positions changed
+            makeDirty(this, POSITION_SIZE_INDEX);
+        } else {
+            var length = segmentLengths.length;
+            for (var i = 0; i < length; ++i) {
+                if (segmentLengths[i] !== this._segments.lengths[i]) {
+                    // indices changed
+                    makeDirty(this, POSITION_SIZE_INDEX);
+                    break;
+                }
+            }
+        }
     };
 
     /**
-     * Returns the color of the polyline.
+     * Gets the surface appearance of the polyline.  This can be one of several built-in {@link Material} objects or a custom material, scripted with
+     * <a href='https://github.com/AnalyticalGraphicsInc/cesium/wiki/Fabric'>Fabric</a>.
      *
      * @memberof Polyline
      *
-     * @return {Color} The color of the polyline.
-     *
-     * @see Polyline#setColor
+     * @returns {Material} The material.
      */
-    Polyline.prototype.getColor = function() {
-        return this._color;
+    Polyline.prototype.getMaterial = function() {
+        return this._material;
     };
 
     /**
-     * Sets the color of the polyline.
+     * Sets the surface appearance of the polyline.  This can be one of several built-in {@link Material} objects or a custom material, scripted with
+     * <a href='https://github.com/AnalyticalGraphicsInc/cesium/wiki/Fabric'>Fabric</a>.
      *
      * @memberof Polyline
      *
-     * @param {Color} value The color of the polyline.
+     * @param {Material} material The material
      *
-     * @exception {DeveloperError} value is required.
+     * @exception {DeveloperError} material is required.
      *
-     * @see Polyline#getColor
+     * @see Polyline#getMaterial
      */
-    Polyline.prototype.setColor = function(value) {
-        if (typeof value === 'undefined') {
-            throw new DeveloperError('value is required.');
+    Polyline.prototype.setMaterial = function(material) {
+        if (typeof material === 'undefined') {
+            throw new DeveloperError('material is required.');
         }
 
-        var color = this._color;
-        if (!Color.equals(color, value)) {
-            Color.clone(value, color);
-            makeDirty(this, COLOR_INDEX);
-        }
+        this._material = material;
+        makeDirty(this, MATERIAL_INDEX);
     };
 
     /**
      * Gets the width of the polyline.
-     * The actual width used is clamped to the minimum and maximum width supported by
-     * the WebGL implementation.  These can be queried with
-     * {@link Context#getMinimumAliasedLineWidth} and {@link Context#getMaximumAliasedLineWidth}.
      *
      * @memberof Polyline
      *
      * @return {Number} The width of the polyline.
      *
      * @see Polyline#setWidth
-     * @see Context#getMinimumAliasedLineWidth
-     * @see Context#getMaximumAliasedLineWidth
      *
      * @example
-     * // 3 pixel total width, 1 pixel interior width
-     * polyline.width = 1.0;
-     * polyline.outlineWidth = 3.0;
+     * polyline.setWidth(5.0);
+     * var width = polyline.getWidth(); // 5.0
      */
     Polyline.prototype.getWidth = function() {
         return this._width;
@@ -215,22 +257,18 @@ define([
 
     /**
      * Sets the width of the polyline.
-     * The actual width used is clamped to the minimum and maximum width supported by
-     * the WebGL implementation.  These can be queried with
-     * {@link Context#getMinimumAliasedLineWidth} and {@link Context#getMaximumAliasedLineWidth}.
+     *
+     * @memberof Polyline
      *
      * @param {Number} value The width of the polyline.
      *
      * @exception {DeveloperError} value is required.
      *
      * @see Polyline#getWidth
-     * @see Context#getMinimumAliasedLineWidth
-     * @see Context#getMaximumAliasedLineWidth
      *
      * @example
-     * // 3 pixel total width, 1 pixel interior width
-     * polyline.width = 1.0;
-     * polyline.outlineWidth = 3.0;
+     * polyline.setWidth(5.0);
+     * var width = polyline.getWidth(); // 5.0
      */
     Polyline.prototype.setWidth = function(value) {
         if (typeof value === 'undefined') {
@@ -244,97 +282,10 @@ define([
         }
     };
 
-
-    /**
-     * Gets the outline width of the polyline.
-     * The actual width used is clamped to the minimum and maximum width supported by
-     * the WebGL implementation.  These can be queried with
-     * {@link Context#getMinimumAliasedLineWidth} and {@link Context#getMaximumAliasedLineWidth}.
-     *
-     * @return {Number} The outline width of the polyline.
-     *
-     * @see Polyline#setOutlineWidth
-     * @see Context#getMinimumAliasedLineWidth
-     * @see Context#getMaximumAliasedLineWidth
-     *
-     * @example
-     * // 3 pixel total width, 1 pixel interior width
-     * polyline.width = 1.0;
-     * polyline.outlineWidth = 3.0;
-     */
-    Polyline.prototype.getOutlineWidth = function() {
-        return this._outlineWidth;
-    };
-
-    /**
-     * Sets the outline width of the polyline.
-     * The actual width used is clamped to the minimum and maximum width supported by
-     * the WebGL implementation.  These can be queried with
-     * {@link Context#getMinimumAliasedLineWidth} and {@link Context#getMaximumAliasedLineWidth}.
-     *
-     * @param {Number} value The outline width of the polyline.
-     *
-     * @exception {DeveloperError} value is required.
-     *
-     * @see Polyline#getOutlineWidth
-     * @see Context#getMinimumAliasedLineWidth
-     * @see Context#getMaximumAliasedLineWidth
-     *
-     * @example
-     * // 3 pixel total width, 1 pixel interior width
-     * polyline.width = 1.0;
-     * polyline.outlineWidth = 3.0;
-     */
-    Polyline.prototype.setOutlineWidth = function(value) {
-        if (typeof value === 'undefined') {
-            throw new DeveloperError('value is required.');
-        }
-
-        var outlineWidth = this._outlineWidth;
-        if (value !== outlineWidth) {
-            this._outlineWidth = value;
-            makeDirty(this, OUTLINE_WIDTH_INDEX);
-        }
-    };
-
-    /**
-     * Gets the outline color of the polyline.
-     *
-     * @memberof Polyline
-     *
-     * @return {Color} The outline color of the polyline.
-     *
-     * @see Polyline#setOutlineColor
-     */
-    Polyline.prototype.getOutlineColor = function() {
-        return this._outlineColor;
-    };
-
-    /**
-     * Sets the outline color of the polyline.
-     *
-     * @memberof Polyline
-     *
-     * @param {Color} value The outline color of the polyline.
-     *
-     * @exception {DeveloperError} value is required.
-     *
-     * @see Polyline#getOutlineColor
-     */
-    Polyline.prototype.setOutlineColor = function(value) {
-        if (typeof value === 'undefined') {
-            throw new DeveloperError('value is required.');
-        }
-
-        var outlineColor = this._outlineColor;
-        if (!Color.equals(outlineColor, value)) {
-            Color.clone(value, outlineColor);
-            makeDirty(this, OUTLINE_COLOR_INDEX);
-        }
-    };
-
     Polyline.prototype.getPickId = function(context) {
-        this._pickId = this._pickId || context.createPickId(this._pickIdThis || this);
+        if (typeof this._pickId === 'undefined') {
+            this._pickId = context.createPickId(defaultValue(this._pickIdThis, this));
+        }
         return this._pickId;
     };
 
@@ -346,94 +297,9 @@ define([
         }
     };
 
-    Polyline.prototype._getPositions2D = function() {
-        var segments = this._segments;
-        var positions = [];
-        var numberOfSegments = segments.length;
-
-        for ( var i = 0; i < numberOfSegments; ++i) {
-            var segment = segments[i];
-            var segmentLength = segment.length;
-            for ( var n = 0; n < segmentLength; ++n) {
-                positions.push(segment[n].cartesian);
-            }
-        }
-        return positions;
-    };
-
-    Polyline.prototype._createSegments = function(modelMatrix) {
-        return PolylinePipeline.wrapLongitude(this.getPositions(), modelMatrix);
-    };
-
-    Polyline.prototype._setSegments = function(segments) {
-        this._segments = segments;
-        var numberOfSegments = segments.length;
-        var length = 0;
-        for ( var i = 0; i < numberOfSegments; ++i) {
-            var segment = segments[i];
-            var segmentLength = segment.length;
-            length += segmentLength;
-        }
-        return length;
-    };
-
-    Polyline.prototype._getSegments = function() {
-        return this._segments;
-    };
-
-    Polyline.prototype._segmentsLengthChanged = function(newSegments) {
-        var origSegments = this._segments;
-        if (typeof origSegments !== 'undefined') {
-            var numberOfSegments = newSegments.length;
-            if (numberOfSegments !== origSegments.length) {
-                return true;
-            }
-            for ( var i = 0; i < numberOfSegments; ++i) {
-                if (newSegments[i].length !== origSegments[i].length) {
-                    return true;
-                }
-            }
-            return false;
-        }
-        return true;
-    };
-
-    /**
-     * Determines if this polyline equals another polyline.  Polylines are equal if all their properties
-     * are equal.  Polylines in different collections can be equal.
-     *
-     * @memberof Polyline
-     *
-     * @param {Polyline} other The polyline to compare for equality.
-     *
-     * @return {Boolean} <code>true</code> if the polylines are equal; otherwise, <code>false</code>.
-     */
-    Polyline.prototype.equals = function(other) {
-        return this === other ||
-               typeof other !== 'undefined' &&
-               this._show === other._show &&
-               this._width === other._width &&
-               this._outlineWidth === other._outlineWidth &&
-               this._horizontalOrigin === other._horizontalOrigin &&
-               cartesian3ArrayEquals(this._positions, other._positions) &&
-               Color.equals(this._color, other._color) &&
-               Color.equals(this._outlineColor, other._outlineColor);
-    };
-
-    function cartesian3ArrayEquals(a, b) {
-        if (a.length !== b.length) {
-            return false;
-        }
-        for ( var i = 0, len = a.length; i < len; ++i) {
-            if (!Cartesian3.equals(a[i], b[i])) {
-                return false;
-            }
-        }
-        return true;
-    }
-
     Polyline.prototype._destroy = function() {
         this._pickId = this._pickId && this._pickId.destroy();
+        this._material = this._material && this._material.destroy();
         this._polylineCollection = undefined;
     };
 

data/app/assets/javascripts/Scene/PolylineCollection.js

@@ -1,6 +1,7 @@
 /*global define*/
 define([
         '../Core/DeveloperError',
+        '../Core/Color',
         '../Core/combine',
         '../Core/destroyObject',
         '../Core/Cartesian3',
@@ -10,21 +11,21 @@ define([
         '../Core/ComponentDatatype',
         '../Core/IndexDatatype',
         '../Core/PrimitiveType',
-        '../Core/Color',
         '../Core/BoundingSphere',
         '../Core/Intersect',
         '../Renderer/BlendingState',
         '../Renderer/BufferUsage',
         '../Renderer/CommandLists',
         '../Renderer/DrawCommand',
+        '../Renderer/createPickFragmentShaderSource',
+        './Material',
         './SceneMode',
         './Polyline',
         '../Shaders/PolylineVS',
-        '../Shaders/PolylineFS',
-        '../Renderer/StencilFunction',
-        '../Renderer/StencilOperation'
+        '../Shaders/PolylineFS'
     ], function(
         DeveloperError,
+        Color,
         combine,
         destroyObject,
         Cartesian3,
@@ -34,27 +35,24 @@ define([
         ComponentDatatype,
         IndexDatatype,
         PrimitiveType,
-        Color,
         BoundingSphere,
         Intersect,
         BlendingState,
         BufferUsage,
         CommandLists,
         DrawCommand,
+        createPickFragmentShaderSource,
+        Material,
         SceneMode,
         Polyline,
         PolylineVS,
-        PolylineFS,
-        StencilFunction,
-        StencilOperation) {
+        PolylineFS) {
     "use strict";
 
     var SHOW_INDEX = Polyline.SHOW_INDEX;
-    var POSITION_INDEX = Polyline.POSITION_INDEX;
-    var COLOR_INDEX = Polyline.COLOR_INDEX;
-    var OUTLINE_COLOR_INDEX = Polyline.OUTLINE_COLOR_INDEX;
     var WIDTH_INDEX = Polyline.WIDTH_INDEX;
-    var OUTLINE_WIDTH_INDEX = Polyline.OUTLINE_WIDTH_INDEX;
+    var POSITION_INDEX = Polyline.POSITION_INDEX;
+    var MATERIAL_INDEX = Polyline.MATERIAL_INDEX;
     //POSITION_SIZE_INDEX is needed for when the polyline's position array changes size.
     //When it does, we need to recreate the indicesBuffer.
     var POSITION_SIZE_INDEX = Polyline.POSITION_SIZE_INDEX;
@@ -66,9 +64,16 @@ define([
         position3DLow : 1,
         position2DHigh : 2,
         position2DLow : 3,
-        color : 4,
-        pickColor : 5,
-        show : 6
+        prevPosition3DHigh : 4,
+        prevPosition3DLow : 5,
+        prevPosition2DHigh : 6,
+        prevPosition2DLow : 7,
+        nextPosition3DHigh : 8,
+        nextPosition3DLow : 9,
+        nextPosition2DHigh : 10,
+        nextPosition2DLow : 11,
+        texCoordExpandWidthAndShow : 12,
+        pickColor : 13
     };
 
     /**
@@ -104,9 +109,9 @@ define([
      *     new Cartographic2(-77.02, 38.53),
      *     new Cartographic2(-80.50, 35.14),
      *     new Cartographic2(-80.12, 25.46)]),
-           width:2
-           });
-
+     *     width:2
+     *     });
+     *
      * polylines.add({positions:ellipsoid.cartographicDegreesToCartesians([
      *     new Cartographic2(-73.10, 37.57),
      *     new Cartographic2(-75.02, 36.53),
@@ -114,16 +119,10 @@ define([
      *     new Cartographic2(-78.12, 23.46)]),
      *     width:4
      * });
+     *
+     * @demo <a href="http://cesium.agi.com/Cesium/Apps/Sandcastle/index.html?src=Polylines.html">Cesium Sandcastle Polyline Demo</a>
      */
     var PolylineCollection = function() {
-        /**
-         * The current morph transition time between 2D/Columbus View and 3D,
-         * with 0.0 being 2D or Columbus View and 1.0 being 3D.
-         *
-         * @type Number
-         */
-        this.morphTime = 1.0;
-
         /**
          * The 4x4 transformation matrix that transforms each polyline in this collection from model to world coordinates.
          * When this is the identity matrix, the polylines are drawn in world coordinates, i.e., Earth's WGS84 coordinates.
@@ -138,12 +137,14 @@ define([
          */
         this.modelMatrix = Matrix4.IDENTITY.clone();
         this._modelMatrix = Matrix4.IDENTITY.clone();
-        this._sp = undefined;
+        this._rs = undefined;
 
         this._boundingVolume = undefined;
         this._boundingVolume2D = undefined;
 
         this._commandLists = new CommandLists();
+        this._colorCommands = [];
+        this._pickCommands = [];
 
         this._polylinesUpdated = false;
         this._polylinesRemoved = false;
@@ -154,32 +155,18 @@ define([
 
         // The buffer usage for each attribute is determined based on the usage of the attribute over time.
         this._buffersUsage = [
-                              {bufferUsage: BufferUsage.STATIC_DRAW, frameCount:0},// SHOW_INDEX
-                              {bufferUsage: BufferUsage.STATIC_DRAW, frameCount:0}, // POSITION_INDEX
-                              {bufferUsage: BufferUsage.STATIC_DRAW, frameCount:0}, // COLOR_INDEX
-                              {bufferUsage: BufferUsage.STATIC_DRAW, frameCount:0}, // OUTLINE_COLOR_INDEX
+                              {bufferUsage: BufferUsage.STATIC_DRAW, frameCount:0}, // SHOW_INDEX
                               {bufferUsage: BufferUsage.STATIC_DRAW, frameCount:0}, // WIDTH_INDEX
-                              {bufferUsage: BufferUsage.STATIC_DRAW, frameCount:0} // OUTLINE_WIDTH_INDEX
+                              {bufferUsage: BufferUsage.STATIC_DRAW, frameCount:0}  // POSITION_INDEX
         ];
 
         this._mode = undefined;
-        var that = this;
-
-        this._uniforms = {
-            u_morphTime : function() {
-                return that.morphTime;
-            }
-        };
 
         this._polylinesToUpdate = [];
-        this._colorVertexArrays = [];
-        this._outlineColorVertexArrays = [];
-        this._pickColorVertexArrays = [];
+        this._vertexArrays = [];
         this._positionBuffer = undefined;
-        this._outlineColorBuffer = undefined;
-        this._colorBuffer = undefined;
         this._pickColorBuffer = undefined;
-        this._showBuffer = undefined;
+        this._texCoordExpandWidthAndShowBuffer = undefined;
     };
 
     /**
@@ -209,9 +196,7 @@ define([
      *   positions : ellipsoid.cartographicDegreesToCartesians([
      *     new Cartographic2(-75.10, 39.57),
      *     new Cartographic2(-77.02, 38.53)]),
-     *     color : { red : 1.0, green : 1.0, blue : 1.0, alpha : 1.0 },
-     *     width : 1,
-     *     outlineWidth : 2
+     *     width : 1
      * });
      *
      */
@@ -254,6 +239,11 @@ define([
             this._polylines[polyline._index] = null; // Removed later
             this._polylinesRemoved = true;
             this._createVertexArray = true;
+            if (typeof polyline._bucket !== 'undefined') {
+                var bucket = polyline._bucket;
+                bucket.shaderProgram = bucket.shaderProgram && bucket.shaderProgram.release();
+                bucket.pickShaderProgram = bucket.pickShaderProgram && bucket.pickShaderProgram.release();
+            }
             polyline._destroy();
             return true;
         }
@@ -281,7 +271,8 @@ define([
      * polylines.removeAll();
      */
     PolylineCollection.prototype.removeAll = function() {
-        this._destroyPolylines();
+        releaseShaders(this);
+        destroyPolylines(this);
         this._polylineBuckets = {};
         this._polylinesRemoved = false;
         this._polylines.length = 0;
@@ -339,7 +330,7 @@ define([
             throw new DeveloperError('index is required.');
         }
 
-        this._removePolylines();
+        removePolylines(this);
         return this._polylines[index];
     };
 
@@ -369,77 +360,58 @@ define([
      * }
      */
     PolylineCollection.prototype.getLength = function() {
-        this._removePolylines();
+        removePolylines(this);
         return this._polylines.length;
     };
 
+    var emptyArray = [];
+    var scracthBoundingSphere = new BoundingSphere();
+
     /**
-     * Commits changes to properties before rendering by updating the object's WebGL resources.
-     *
-     * @memberof PolylineCollection
+     * @private
      */
     PolylineCollection.prototype.update = function(context, frameState, commandList) {
-        if (typeof this._sp === 'undefined') {
-            this._sp = context.getShaderCache().getShaderProgram(PolylineVS, PolylineFS, attributeIndices);
+        removePolylines(this);
+
+        if (this._polylines.length === 0) {
+            return;
         }
-        this._removePolylines();
-        this._updateMode(frameState);
 
-        var bucket;
-        var polyline;
-        var length;
-        var buckets;
-        var polylineBuckets;
-        var bucketLength;
-        var bucketLocator;
+        updateMode(this, frameState);
 
+        var polyline;
         var properties = this._propertiesChanged;
-        if (this._createVertexArray || this._computeNewBuffersUsage()) {
-            this._createVertexArrays(context);
+
+        if (this._createVertexArray || computeNewBuffersUsage(this)) {
+            createVertexArrays(this, context);
         } else if (this._polylinesUpdated) {
             // Polylines were modified, but no polylines were added or removed.
             var polylinesToUpdate = this._polylinesToUpdate;
-            var createVertexArrays = false;
             if (this._mode !== SceneMode.SCENE3D) {
                 var updateLength = polylinesToUpdate.length;
                 for ( var i = 0; i < updateLength; ++i) {
                     polyline = polylinesToUpdate[i];
-                    var changedProperties = polyline._propertiesChanged;
-                    if (changedProperties[POSITION_INDEX]) {
-                        var newSegments = polyline._createSegments(this.modelMatrix);
-                        if (polyline._segmentsLengthChanged(newSegments)) {
-                            createVertexArrays = true;
-                            break;
-                        }
-                        polyline._setSegments(newSegments);
-                    }
+                    polyline.update();
                 }
             }
-            //if a polyline's positions size changes, we need to recreate the vertex arrays and vertex buffers because the indices will be different.
-            if (properties[POSITION_SIZE_INDEX] || properties[WIDTH_INDEX] || properties[OUTLINE_WIDTH_INDEX] || createVertexArrays) {
-                this._createVertexArrays(context);
+
+            // if a polyline's positions size changes, we need to recreate the vertex arrays and vertex buffers because the indices will be different.
+            // if a polyline's material changes, we need to recreate the VAOs and VBOs because they will be batched differenty.
+            if (properties[POSITION_SIZE_INDEX] || properties[MATERIAL_INDEX]) {
+                createVertexArrays(this, context);
             } else {
-                length = polylinesToUpdate.length;
-                polylineBuckets = this._polylineBuckets;
+                var length = polylinesToUpdate.length;
+                var polylineBuckets = this._polylineBuckets;
                 for ( var ii = 0; ii < length; ++ii) {
                     polyline = polylinesToUpdate[ii];
                     properties = polyline._propertiesChanged;
-                    bucket = polyline._bucket;
+                    var bucket = polyline._bucket;
                     var index = 0;
                     for ( var x in polylineBuckets) {
                         if (polylineBuckets.hasOwnProperty(x)) {
                             if (polylineBuckets[x] === bucket) {
-                                if (properties[POSITION_INDEX]) {
-                                    bucket.writePositionsUpdate(index, polyline, this._positionBuffer);
-                                }
-                                if (properties[COLOR_INDEX]) {
-                                    bucket.writeColorUpdate(index, polyline, this._colorBuffer);
-                                }
-                                if (properties[OUTLINE_COLOR_INDEX]) {
-                                    bucket.writeColorUpdate(index, polyline, this._outlineColorBuffer);
-                                }
-                                if (properties[SHOW_INDEX]) {
-                                    bucket.writeShowUpdate(index, polyline, this._showBuffer);
+                                if (properties[POSITION_INDEX] || properties[SHOW_INDEX] || properties[WIDTH_INDEX]) {
+                                    bucket.writeUpdate(index, polyline, this._positionBuffer, this._texCoordExpandWidthAndShowBuffer);
                                 }
                                 break;
                             }
@@ -463,113 +435,151 @@ define([
         if (frameState.mode === SceneMode.SCENE3D) {
             boundingVolume = this._boundingVolume;
             modelMatrix = this.modelMatrix;
-        } else if (frameState.mode === SceneMode.COLUMBUS_VIEW || frameState.mode === SceneMode.SCENE2D) {
+        } else if (frameState.mode === SceneMode.COLUMBUS_VIEW) {
             boundingVolume = this._boundingVolume2D;
-        } else {
-            boundingVolume = this._boundingVolume && this._boundingVolume2D && this._boundingVolume.union(this._boundingVolume2D);
+        } else if (frameState.mode === SceneMode.SCENE2D) {
+            if (typeof this._boundingVolume2D !== 'undefined') {
+                boundingVolume = BoundingSphere.clone(this._boundingVolume2D, scracthBoundingSphere);
+                boundingVolume.center.x = 0.0;
+            }
+        } else if (typeof this._boundingVolume !== 'undefined' && typeof this._boundingVolume2D !== 'undefined') {
+            boundingVolume = BoundingSphere.union(this._boundingVolume, this._boundingVolume2D, scracthBoundingSphere);
+        }
+
+        if (typeof boundingVolume === 'undefined') {
+            return;
         }
 
         var pass = frameState.passes;
-        var commands;
-        var command;
-        polylineBuckets = this._polylineBuckets;
-        var sp = this._sp;
-        this._commandLists.removeAll();
-        if (typeof polylineBuckets !== 'undefined') {
-            if (pass.color) {
-                length = this._colorVertexArrays.length;
-                commands = this._commandLists.colorList;
-                for ( var m = 0; m < length; ++m) {
-                    var vaColor = this._colorVertexArrays[m];
-                    var vaOutlineColor = this._outlineColorVertexArrays[m];
-                    buckets = this._colorVertexArrays[m].buckets;
-                    bucketLength = buckets.length;
-                    var p = commands.length;
-                    commands.length += bucketLength * 3;
-                    for ( var n = 0; n < bucketLength; ++n, p += 3) {
-                        bucketLocator = buckets[n];
-
-                        command = commands[p];
-                        if (typeof command === 'undefined') {
-                            command = commands[p] = new DrawCommand();
-                        }
+        var useDepthTest = (frameState.morphTime !== 0.0);
+        var commandLists = this._commandLists;
+        commandLists.colorList = emptyArray;
+        commandLists.pickList = emptyArray;
+
+        if ((typeof this._rs === 'undefined') || (this._rs.depthTest.enabled !== useDepthTest)) {
+            this._rs = context.createRenderState({
+                blending : BlendingState.ALPHA_BLEND,
+                depthMask : !useDepthTest,
+                depthTest : {
+                    enabled : useDepthTest
+                }
+            });
+        }
 
-                        command.boundingVolume = boundingVolume;
-                        command.modelMatrix = modelMatrix;
-                        command.primitiveType = PrimitiveType.LINES;
-                        command.count = bucketLocator.count;
-                        command.offset = bucketLocator.offset;
-                        command.shaderProgram = sp;
-                        command.uniformMap = this._uniforms;
-                        command.vertexArray = vaOutlineColor.va;
-                        command.renderState = bucketLocator.rsOne;
-
-                        command = commands[p + 1];
-                        if (typeof command === 'undefined') {
-                            command = commands[p + 1] = new DrawCommand();
-                        }
+        if (pass.color) {
+            var colorList = this._colorCommands;
+            commandLists.colorList = colorList;
 
-                        command.boundingVolume = boundingVolume;
-                        command.modelMatrix = modelMatrix;
-                        command.primitiveType = PrimitiveType.LINES;
-                        command.count = bucketLocator.count;
-                        command.offset = bucketLocator.offset;
-                        command.shaderProgram = sp;
-                        command.uniformMap = this._uniforms;
-                        command.vertexArray = vaColor.va;
-                        command.renderState = bucketLocator.rsTwo;
-
-                        command = commands[p + 2];
-                        if (typeof command === 'undefined') {
-                            command = commands[p + 2] = new DrawCommand();
+            createCommandLists(colorList, boundingVolume, modelMatrix, this._vertexArrays, this._rs, true);
+        }
+
+        if (pass.pick) {
+            var pickList = this._pickCommands;
+            commandLists.pickList = pickList;
+
+            createCommandLists(pickList, boundingVolume, modelMatrix, this._vertexArrays, this._rs, false);
+        }
+
+        if (!this._commandLists.empty()) {
+            commandList.push(this._commandLists);
+        }
+    };
+
+    function createCommandLists(commands, boundingVolume, modelMatrix, vertexArrays, renderState, colorPass) {
+        var length = vertexArrays.length;
+
+        var commandsLength = commands.length;
+        var commandIndex = 0;
+
+        for ( var m = 0; m < length; ++m) {
+            var va = vertexArrays[m];
+            var buckets = va.buckets;
+            var bucketLength = buckets.length;
+
+            for ( var n = 0; n < bucketLength; ++n) {
+                var bucketLocator = buckets[n];
+
+                var offset = bucketLocator.offset;
+                var sp = colorPass ? bucketLocator.bucket.shaderProgram : bucketLocator.bucket.pickShaderProgram;
+
+                var polylines = bucketLocator.bucket.polylines;
+                var polylineLength = polylines.length;
+                var currentId;
+                var currentMaterial;
+                var count = 0;
+                var command;
+
+                for (var s = 0; s < polylineLength; ++s) {
+                    var polyline = polylines[s];
+                    var mId = createMaterialId(polyline._material);
+                    if (mId !== currentId) {
+                        if (typeof currentId !== 'undefined') {
+                            if (commandIndex >= commandsLength) {
+                                command = new DrawCommand();
+                                commands.push(command);
+                            } else {
+                                command = commands[commandIndex];
+                            }
+
+                            ++commandIndex;
+
+                            command.boundingVolume = boundingVolume;
+                            command.modelMatrix = modelMatrix;
+                            command.primitiveType = PrimitiveType.TRIANGLES;
+                            command.shaderProgram = sp;
+                            command.vertexArray = va.va;
+                            command.renderState = renderState;
+
+                            command.uniformMap = currentMaterial._uniforms;
+                            command.count = count;
+                            command.offset = offset;
+
+                            offset += count;
+                            count = 0;
                         }
 
-                        command.boundingVolume = boundingVolume;
-                        command.modelMatrix = modelMatrix;
-                        command.primitiveType = PrimitiveType.LINES;
-                        command.count = bucketLocator.count;
-                        command.offset = bucketLocator.offset;
-                        command.shaderProgram = sp;
-                        command.uniformMap = this._uniforms;
-                        command.vertexArray = vaOutlineColor.va;
-                        command.renderState = bucketLocator.rsThree;
+                        currentMaterial = polyline._material;
+                        currentId = mId;
                     }
-                }
-            }
-            if (pass.pick) {
-                length = this._pickColorVertexArrays.length;
-                commands = this._commandLists.pickList;
-                for ( var a = 0; a < length; ++a) {
-                    var vaPickColor = this._pickColorVertexArrays[a];
-                    buckets = vaPickColor.buckets;
-                    bucketLength = buckets.length;
-                    commands.length += bucketLength;
-                    for ( var b = 0; b < bucketLength; ++b) {
-                        bucketLocator = buckets[b];
-
-                        command = commands[b];
-                        if (typeof command === 'undefined') {
-                            command = commands[b] = new DrawCommand();
+
+                    var locators = polyline._locatorBuckets;
+                    var locatorLength = locators.length;
+                    for (var t = 0; t < locatorLength; ++t) {
+                        var locator = locators[t];
+                        if (locator.locator === bucketLocator) {
+                            count += locator.count;
                         }
+                    }
+                }
 
-                        command.boundingVolume = boundingVolume;
-                        command.modelMatrix = modelMatrix;
-                        command.primitiveType = PrimitiveType.LINES;
-                        command.count = bucketLocator.count;
-                        command.offset = bucketLocator.offset;
-                        command.shaderProgram = sp;
-                        command.uniformMap = this._uniforms;
-                        command.vertexArray = vaPickColor.va;
-                        command.renderState = bucketLocator.rsPick;
+                if (typeof currentId !== 'undefined' && count > 0) {
+                    if (commandIndex >= commandsLength) {
+                        command = new DrawCommand();
+                        commands.push(command);
+                    } else {
+                        command = commands[commandIndex];
                     }
+
+                    ++commandIndex;
+
+                    command.boundingVolume = boundingVolume;
+                    command.modelMatrix = modelMatrix;
+                    command.primitiveType = PrimitiveType.TRIANGLES;
+                    command.shaderProgram = sp;
+                    command.vertexArray = va.va;
+                    command.renderState = renderState;
+
+                    command.uniformMap = currentMaterial._uniforms;
+                    command.count = count;
+                    command.offset = offset;
                 }
+
+                currentId = undefined;
             }
         }
 
-        if (!this._commandLists.empty()) {
-            commandList.push(this._commandLists);
-        }
-    };
+        commands.length = commandIndex;
+    }
 
     /**
      * Returns true if this object was destroyed; otherwise, false.
@@ -607,19 +617,19 @@ define([
      * polylines = polylines && polylines.destroy();
      */
     PolylineCollection.prototype.destroy = function() {
-        this._sp = this._sp && this._sp.release();
-        this._destroyVertexArrays();
-        this._destroyPolylines();
+        destroyVertexArrays(this);
+        releaseShaders(this);
+        destroyPolylines(this);
         return destroyObject(this);
     };
 
-    PolylineCollection.prototype._computeNewBuffersUsage = function() {
-        var buffersUsage = this._buffersUsage;
+    function computeNewBuffersUsage(collection) {
+        var buffersUsage = collection._buffersUsage;
         var usageChanged = false;
 
-        var properties = this._propertiesChanged;
-        //subtract 1 from NUMBER_OF_PROPERTIES because we don't care about POSITION_SIZE_INDEX property change.
-        for ( var k = 0; k < NUMBER_OF_PROPERTIES - 1; ++k) {
+        var properties = collection._propertiesChanged;
+        //subtract 2 from NUMBER_OF_PROPERTIES because we don't care about POSITION_SIZE_INDEX or MATERIAL_INDEX property change.
+        for ( var k = 0; k < NUMBER_OF_PROPERTIES - 2; ++k) {
             var bufferUsage = buffersUsage[k];
             if (properties[k]) {
                 if (bufferUsage.bufferUsage !== BufferUsage.STREAM_DRAW) {
@@ -641,327 +651,327 @@ define([
             }
         }
         return usageChanged;
-    };
+    }
+
+    var emptyVertexBuffer = [0.0, 0.0, 0.0];
+
+    function createVertexArrays(collection, context) {
+        collection._createVertexArray = false;
+        releaseShaders(collection);
+        destroyVertexArrays(collection);
+        sortPolylinesIntoBuckets(collection);
 
-    PolylineCollection.prototype._createVertexArrays = function(context) {
-        this._createVertexArray = false;
-        this._destroyVertexArrays();
-        this._sortPolylinesIntoBuckets();
         //stores all of the individual indices arrays.
-        var totalIndices = [];
-        var indices = [];
+        var totalIndices = [[]];
+        var indices = totalIndices[0];
 
         //used to determine the vertexBuffer offset if the indicesArray goes over 64k.
         //if it's the same polyline while it goes over 64k, the offset needs to backtrack componentsPerAttribute * componentDatatype bytes
         //so that the polyline looks contiguous.
         //if the polyline ends at the 64k mark, then the offset is just 64k * componentsPerAttribute * componentDatatype
         var vertexBufferOffset = [0];
-        totalIndices.push(indices);
         var offset = 0;
-        var useDepthTest = (this.morphTime !== 0.0);
         var vertexArrayBuckets = [[]];
         var totalLength = 0;
-        var polylineBuckets = this._polylineBuckets;
+        var polylineBuckets = collection._polylineBuckets;
         var x;
         var bucket;
         for (x in polylineBuckets) {
             if (polylineBuckets.hasOwnProperty(x)) {
                 bucket = polylineBuckets[x];
-                bucket.updateRenderState(context, useDepthTest);
+                bucket.updateShader(context);
                 totalLength += bucket.lengthOfPositions;
             }
         }
+
         if (totalLength > 0) {
-            var positionArray = new Float32Array(2 * totalLength * 3);
-            var outlineColorArray = new Uint8Array(totalLength * 4);
-            var colorArray = new Uint8Array(totalLength * 4);
+            var mode = collection._mode;
+
+            var positionArray = new Float32Array(6 * totalLength * 3);
             var pickColorArray = new Uint8Array(totalLength * 4);
-            var showArray = new Uint8Array(totalLength);
+            var texCoordExpandWidthAndShowArray = new Float32Array(totalLength * 4);
             var position3DArray;
 
             var positionIndex = 0;
             var colorIndex = 0;
-            var showIndex = 0;
+            var texCoordExpandWidthAndShowIndex = 0;
             for (x in polylineBuckets) {
                 if (polylineBuckets.hasOwnProperty(x)) {
                     bucket = polylineBuckets[x];
-                    bucket.write(positionArray, colorArray, outlineColorArray, pickColorArray, showArray, positionIndex, showIndex, colorIndex, context);
-                    if (this._mode === SceneMode.MORPHING) {
+                    bucket.write(positionArray, pickColorArray, texCoordExpandWidthAndShowArray, positionIndex, colorIndex, texCoordExpandWidthAndShowIndex, context);
+
+                    if (mode === SceneMode.MORPHING) {
                         if (typeof position3DArray === 'undefined') {
-                            position3DArray = new Float32Array(2 * totalLength * 3);
+                            position3DArray = new Float32Array(6 * totalLength * 3);
                         }
                         bucket.writeForMorph(position3DArray, positionIndex);
                     }
+
                     var bucketLength = bucket.lengthOfPositions;
-                    positionIndex += 2 * bucketLength * 3;
-                    showIndex += bucketLength;
+                    positionIndex += 6 * bucketLength * 3;
                     colorIndex += bucketLength * 4;
+                    texCoordExpandWidthAndShowIndex += bucketLength * 4;
                     offset = bucket.updateIndices(totalIndices, vertexBufferOffset, vertexArrayBuckets, offset);
                 }
             }
-            this._positionBuffer = context.createVertexBuffer(positionArray, this._buffersUsage[POSITION_INDEX].bufferUsage);
+
+            var positionBufferUsage = collection._buffersUsage[POSITION_INDEX].bufferUsage;
+            var showBufferUsage = collection._buffersUsage[SHOW_INDEX].bufferUsage;
+            var widthBufferUsage = collection._buffersUsage[WIDTH_INDEX].bufferUsage;
+            var texCoordExpandWidthAndShowBufferUsage = (showBufferUsage === BufferUsage.STREAM_DRAW || widthBufferUsage === BufferUsage.STREAM_DRAW) ? BufferUsage.STREAM_DRAW : BufferUsage.STATIC_DRAW;
+
+            collection._positionBuffer = context.createVertexBuffer(positionArray, positionBufferUsage);
             var position3DBuffer;
             if (typeof position3DArray !== 'undefined') {
-                position3DBuffer = context.createVertexBuffer(position3DArray, this._buffersUsage[POSITION_INDEX].bufferUsage);
+                position3DBuffer = context.createVertexBuffer(position3DArray, positionBufferUsage);
             }
-            this._outlineColorBuffer = context.createVertexBuffer(outlineColorArray, this._buffersUsage[OUTLINE_COLOR_INDEX].bufferUsage);
-            this._colorBuffer = context.createVertexBuffer(colorArray, this._buffersUsage[COLOR_INDEX].bufferUsage);
-            this._pickColorBuffer = context.createVertexBuffer(pickColorArray, BufferUsage.STATIC_DRAW);
-            this._showBuffer = context.createVertexBuffer(showArray, this._buffersUsage[SHOW_INDEX].bufferUsage);
-            var colorSizeInBytes = 4 * Uint8Array.BYTES_PER_ELEMENT;
+            collection._pickColorBuffer = context.createVertexBuffer(pickColorArray, BufferUsage.STATIC_DRAW);
+            collection._texCoordExpandWidthAndShowBuffer = context.createVertexBuffer(texCoordExpandWidthAndShowArray, texCoordExpandWidthAndShowBufferUsage);
+
+            var pickColorSizeInBytes = 4 * Uint8Array.BYTES_PER_ELEMENT;
             var positionSizeInBytes = 3 * Float32Array.BYTES_PER_ELEMENT;
+            var texCoordExpandWidthAndShowSizeInBytes = 4 * Float32Array.BYTES_PER_ELEMENT;
+
             var vbo = 0;
             var numberOfIndicesArrays = totalIndices.length;
             for ( var k = 0; k < numberOfIndicesArrays; ++k) {
                 indices = totalIndices[k];
+
                 if (indices.length > 0) {
                     var indicesArray = new Uint16Array(indices);
                     var indexBuffer = context.createIndexBuffer(indicesArray, BufferUsage.STATIC_DRAW, IndexDatatype.UNSIGNED_SHORT);
-                    indexBuffer.setVertexArrayDestroyable(false);
+
                     vbo += vertexBufferOffset[k];
-                    var positionHighOffset = 2 * (k * (positionSizeInBytes * SIXTYFOURK) - vbo * positionSizeInBytes);//componentsPerAttribute(3) * componentDatatype(4)
+
+                    var positionHighOffset = 6 * (k * (positionSizeInBytes * SIXTYFOURK) - vbo * positionSizeInBytes);//componentsPerAttribute(3) * componentDatatype(4)
                     var positionLowOffset = positionSizeInBytes + positionHighOffset;
-                    var vertexColorBufferOffset = k * (colorSizeInBytes * SIXTYFOURK) - vbo * colorSizeInBytes;
-                    var vertexShowBufferOffset = k * SIXTYFOURK - vbo;
+                    var prevPositionHighOffset =  positionSizeInBytes + positionLowOffset;
+                    var prevPositionLowOffset = positionSizeInBytes + prevPositionHighOffset;
+                    var nextPositionHighOffset = positionSizeInBytes + prevPositionLowOffset;
+                    var nextPositionLowOffset = positionSizeInBytes + nextPositionHighOffset;
+                    var vertexPickColorBufferOffset = k * (pickColorSizeInBytes * SIXTYFOURK) - vbo * pickColorSizeInBytes;
+                    var vertexTexCoordExpandWidthAndShowBufferOffset = k * (texCoordExpandWidthAndShowSizeInBytes * SIXTYFOURK) - vbo * texCoordExpandWidthAndShowSizeInBytes;
+
                     var attributes = [{
                         index : attributeIndices.position3DHigh,
                         componentsPerAttribute : 3,
                         componentDatatype : ComponentDatatype.FLOAT,
                         offsetInBytes : positionHighOffset,
-                        strideInBytes : 2 * positionSizeInBytes
+                        strideInBytes : 6 * positionSizeInBytes
                     }, {
                         index : attributeIndices.position3DLow,
                         componentsPerAttribute : 3,
                         componentDatatype : ComponentDatatype.FLOAT,
                         offsetInBytes : positionLowOffset,
-                        strideInBytes : 2 * positionSizeInBytes
+                        strideInBytes : 6 * positionSizeInBytes
                     }, {
                         index : attributeIndices.position2DHigh,
                         componentsPerAttribute : 3,
                         componentDatatype : ComponentDatatype.FLOAT,
                         offsetInBytes : positionHighOffset,
-                        strideInBytes : 2 * positionSizeInBytes
+                        strideInBytes : 6 * positionSizeInBytes
                     }, {
                         index : attributeIndices.position2DLow,
                         componentsPerAttribute : 3,
                         componentDatatype : ComponentDatatype.FLOAT,
                         offsetInBytes : positionLowOffset,
-                        strideInBytes : 2 * positionSizeInBytes
+                        strideInBytes : 6 * positionSizeInBytes
                     }, {
-                        index : attributeIndices.color,
-                        componentsPerAttribute : 4,
-                        normalize : true,
-                        componentDatatype : ComponentDatatype.UNSIGNED_BYTE,
-                        vertexBuffer : this._colorBuffer,
-                        offsetInBytes : vertexColorBufferOffset
-                    }, {
-                        index : attributeIndices.show,
-                        componentsPerAttribute : 1,
-                        componentDatatype : ComponentDatatype.UNSIGNED_BYTE,
-                        vertexBuffer : this._showBuffer,
-                        offsetInBytes : vertexShowBufferOffset
-                    }];
-
-                    var attributesOutlineColor = [{
-                        index : attributeIndices.position3DHigh,
+                        index : attributeIndices.prevPosition3DHigh,
                         componentsPerAttribute : 3,
                         componentDatatype : ComponentDatatype.FLOAT,
-                        offsetInBytes : positionHighOffset,
-                        strideInBytes : 2 * positionSizeInBytes
+                        offsetInBytes : prevPositionHighOffset,
+                        strideInBytes : 6 * positionSizeInBytes
                     }, {
-                        index : attributeIndices.position3DLow,
+                        index : attributeIndices.prevPosition3DLow,
                         componentsPerAttribute : 3,
                         componentDatatype : ComponentDatatype.FLOAT,
-                        offsetInBytes : positionLowOffset,
-                        strideInBytes : 2 * positionSizeInBytes
+                        offsetInBytes : prevPositionLowOffset,
+                        strideInBytes : 6 * positionSizeInBytes
                     }, {
-                        index : attributeIndices.position2DHigh,
+                        index : attributeIndices.prevPosition2DHigh,
                         componentsPerAttribute : 3,
                         componentDatatype : ComponentDatatype.FLOAT,
-                        offsetInBytes : positionHighOffset,
-                        strideInBytes : 2 * positionSizeInBytes
+                        offsetInBytes : prevPositionHighOffset,
+                        strideInBytes : 6 * positionSizeInBytes
                     }, {
-                        index : attributeIndices.position2DLow,
+                        index : attributeIndices.prevPosition2DLow,
                         componentsPerAttribute : 3,
                         componentDatatype : ComponentDatatype.FLOAT,
-                        offsetInBytes : positionLowOffset,
-                        strideInBytes : 2 * positionSizeInBytes
-                    }, {
-                        index : attributeIndices.color,
-                        componentsPerAttribute : 4,
-                        normalize : true,
-                        componentDatatype : ComponentDatatype.UNSIGNED_BYTE,
-                        vertexBuffer : this._outlineColorBuffer,
-                        offsetInBytes : vertexColorBufferOffset
+                        offsetInBytes : prevPositionLowOffset,
+                        strideInBytes : 6 * positionSizeInBytes
                     }, {
-                        index : attributeIndices.show,
-                        componentsPerAttribute : 1,
-                        componentDatatype : ComponentDatatype.UNSIGNED_BYTE,
-                        vertexBuffer : this._showBuffer,
-                        offsetInBytes : vertexShowBufferOffset
-                    }];
-
-                    var attributesPickColor = [{
-                        index : attributeIndices.position3DHigh,
+                        index : attributeIndices.nextPosition3DHigh,
                         componentsPerAttribute : 3,
                         componentDatatype : ComponentDatatype.FLOAT,
-                        offsetInBytes : positionHighOffset,
-                        strideInBytes : 2 * positionSizeInBytes
+                        offsetInBytes : nextPositionHighOffset,
+                        strideInBytes : 6 * positionSizeInBytes
                     }, {
-                        index : attributeIndices.position3DLow,
+                        index : attributeIndices.nextPosition3DLow,
                         componentsPerAttribute : 3,
                         componentDatatype : ComponentDatatype.FLOAT,
-                        offsetInBytes : positionLowOffset,
-                        strideInBytes : 2 * positionSizeInBytes
+                        offsetInBytes : nextPositionLowOffset,
+                        strideInBytes : 6 * positionSizeInBytes
                     }, {
-                        index : attributeIndices.position2DHigh,
+                        index : attributeIndices.nextPosition2DHigh,
                         componentsPerAttribute : 3,
                         componentDatatype : ComponentDatatype.FLOAT,
-                        offsetInBytes : positionHighOffset,
-                        strideInBytes : 2 * positionSizeInBytes
+                        offsetInBytes : nextPositionHighOffset,
+                        strideInBytes : 6 * positionSizeInBytes
                     }, {
-                        index : attributeIndices.position2DLow,
+                        index : attributeIndices.nextPosition2DLow,
                         componentsPerAttribute : 3,
                         componentDatatype : ComponentDatatype.FLOAT,
-                        offsetInBytes : positionLowOffset,
-                        strideInBytes : 2 * positionSizeInBytes
+                        offsetInBytes : nextPositionLowOffset,
+                        strideInBytes : 6 * positionSizeInBytes
                     }, {
-                        index : attributeIndices.color,
+                        index : attributeIndices.texCoordExpandWidthAndShow,
                         componentsPerAttribute : 4,
-                        normalize : true,
-                        componentDatatype : ComponentDatatype.UNSIGNED_BYTE,
-                        vertexBuffer : this._pickColorBuffer,
-                        offsetInBytes : vertexColorBufferOffset
+                        componentDatatype : ComponentDatatype.FLOAT,
+                        vertexBuffer : collection._texCoordExpandWidthAndShowBuffer,
+                        offsetInBytes : vertexTexCoordExpandWidthAndShowBufferOffset
                     }, {
-                        index : attributeIndices.show,
-                        componentsPerAttribute : 1,
+                        index : attributeIndices.pickColor,
+                        componentsPerAttribute : 4,
                         componentDatatype : ComponentDatatype.UNSIGNED_BYTE,
-                        vertexBuffer : this._showBuffer,
-                        offsetInBytes : vertexShowBufferOffset
+                        vertexBuffer : collection._pickColorBuffer,
+                        offsetInBytes : vertexPickColorBufferOffset,
+                        normalize : true
                     }];
 
-                    if (this._mode === SceneMode.SCENE3D) {
-                        attributes[0].vertexBuffer = this._positionBuffer;
-                        attributes[1].vertexBuffer = this._positionBuffer;
-                        attributes[2].value = [0.0, 0.0, 0.0];
-                        attributes[3].value = [0.0, 0.0, 0.0];
-                        attributesOutlineColor[0].vertexBuffer = this._positionBuffer;
-                        attributesOutlineColor[1].vertexBuffer = this._positionBuffer;
-                        attributesOutlineColor[2].value = [0.0, 0.0, 0.0];
-                        attributesOutlineColor[3].value = [0.0, 0.0, 0.0];
-                        attributesPickColor[0].vertexBuffer = this._positionBuffer;
-                        attributesPickColor[1].vertexBuffer = this._positionBuffer;
-                        attributesPickColor[2].value = [0.0, 0.0, 0.0];
-                        attributesPickColor[3].value = [0.0, 0.0, 0.0];
-                    } else if (this._mode === SceneMode.SCENE2D || this._mode === SceneMode.COLUMBUS_VIEW) {
-                        attributes[0].value = [0.0, 0.0, 0.0];
-                        attributes[1].value = [0.0, 0.0, 0.0];
-                        attributes[2].vertexBuffer = this._positionBuffer;
-                        attributes[3].vertexBuffer = this._positionBuffer;
-                        attributesOutlineColor[0].value = [0.0, 0.0, 0.0];
-                        attributesOutlineColor[1].value = [0.0, 0.0, 0.0];
-                        attributesOutlineColor[2].vertexBuffer = this._positionBuffer;
-                        attributesOutlineColor[3].vertexBuffer = this._positionBuffer;
-                        attributesPickColor[0].value = [0.0, 0.0, 0.0];
-                        attributesPickColor[1].value = [0.0, 0.0, 0.0];
-                        attributesPickColor[2].vertexBuffer = this._positionBuffer;
-                        attributesPickColor[3].vertexBuffer = this._positionBuffer;
+                    var buffer3D;
+                    var bufferProperty3D;
+                    var buffer2D;
+                    var bufferProperty2D;
+
+                    if (mode === SceneMode.SCENE3D) {
+                        buffer3D = collection._positionBuffer;
+                        bufferProperty3D = 'vertexBuffer';
+                        buffer2D = emptyVertexBuffer;
+                        bufferProperty2D = 'value';
+                    } else if (mode === SceneMode.SCENE2D || mode === SceneMode.COLUMBUS_VIEW) {
+                        buffer3D = emptyVertexBuffer;
+                        bufferProperty3D = 'value';
+                        buffer2D = collection._positionBuffer;
+                        bufferProperty2D = 'vertexBuffer';
                     } else {
-                        attributes[0].vertexBuffer = position3DBuffer;
-                        attributes[1].vertexBuffer = position3DBuffer;
-                        attributes[2].vertexBuffer = this._positionBuffer;
-                        attributes[3].vertexBuffer = this._positionBuffer;
-                        attributesOutlineColor[0].vertexBuffer = position3DBuffer;
-                        attributesOutlineColor[1].vertexBuffer = position3DBuffer;
-                        attributesOutlineColor[2].vertexBuffer = this._positionBuffer;
-                        attributesOutlineColor[3].vertexBuffer = this._positionBuffer;
-                        attributesPickColor[0].vertexBuffer = position3DBuffer;
-                        attributesPickColor[1].vertexBuffer = position3DBuffer;
-                        attributesPickColor[2].vertexBuffer = this._positionBuffer;
-                        attributesPickColor[3].vertexBuffer = this._positionBuffer;
+                        buffer3D = position3DBuffer;
+                        bufferProperty3D = 'vertexBuffer';
+                        buffer2D = collection._positionBuffer;
+                        bufferProperty2D = 'vertexBuffer';
                     }
-                    var va = context.createVertexArray(attributes, indexBuffer);
-                    var vaOutlineColor = context.createVertexArray(attributesOutlineColor, indexBuffer);
-                    var vaPickColor = context.createVertexArray(attributesPickColor, indexBuffer);
 
-                    this._colorVertexArrays.push({
+                    attributes[0][bufferProperty3D] = buffer3D;
+                    attributes[1][bufferProperty3D] = buffer3D;
+                    attributes[2][bufferProperty2D] = buffer2D;
+                    attributes[3][bufferProperty2D] = buffer2D;
+                    attributes[4][bufferProperty3D] = buffer3D;
+                    attributes[5][bufferProperty3D] = buffer3D;
+                    attributes[6][bufferProperty2D] = buffer2D;
+                    attributes[7][bufferProperty2D] = buffer2D;
+                    attributes[8][bufferProperty3D] = buffer3D;
+                    attributes[9][bufferProperty3D] = buffer3D;
+                    attributes[10][bufferProperty2D] = buffer2D;
+                    attributes[11][bufferProperty2D] = buffer2D;
+
+                    var va = context.createVertexArray(attributes, indexBuffer);
+                    collection._vertexArrays.push({
                         va : va,
                         buckets : vertexArrayBuckets[k]
                     });
-                    this._outlineColorVertexArrays.push({
-                        va : vaOutlineColor,
-                        buckets : vertexArrayBuckets[k]
-                    });
-                    this._pickColorVertexArrays.push({
-                        va : vaPickColor,
-                        buckets : vertexArrayBuckets[k]
-                    });
                 }
             }
         }
-    };
+    }
+
+    var scratchUniformArray = [];
+    function createMaterialId(material) {
+        var uniforms = Material._uniformList[material.type];
+        var length = uniforms.length;
+        scratchUniformArray.length = 2.0 * length;
+
+        var index = 0;
+        for (var i = 0; i < length; ++i) {
+            var uniform = uniforms[i];
+            scratchUniformArray[index] = uniform;
+            scratchUniformArray[index + 1] = material._uniforms[uniform]();
+            index += 2;
+        }
+
+        return material.type + ':' + JSON.stringify(scratchUniformArray);
+    }
+
+    function sortPolylinesIntoBuckets(collection) {
+        var mode = collection._mode;
+        var projection = collection._projection;
+        var modelMatrix = collection._modelMatrix;
 
-    PolylineCollection.prototype._sortPolylinesIntoBuckets = function() {
-        var polylineBuckets = this._polylineBuckets = {};
-        var polylines = this._polylines;
+        var polylineBuckets = collection._polylineBuckets = {};
+        var polylines = collection._polylines;
         var length = polylines.length;
         for ( var i = 0; i < length; ++i) {
             var p = polylines[i];
-            var outlineWidth = p.getOutlineWidth();
-            var width = p.getWidth();
-            var hash = 'OL' + outlineWidth + 'W' + width;
-            var value = polylineBuckets[hash];
-            if (typeof value === 'undefined') {
-                value = polylineBuckets[hash] = new PolylineBucket(outlineWidth, width, this._mode, this._projection, this._modelMatrix);
+            if (p.getPositions().length > 1) {
+                p.update();
+                var material = p.getMaterial();
+                var value = polylineBuckets[material.type];
+                if (typeof value === 'undefined') {
+                    value = polylineBuckets[material.type] = new PolylineBucket(material, mode, projection, modelMatrix);
+                }
+                value.addPolyline(p);
             }
-            value.addPolyline(p);
         }
-    };
+    }
 
-    PolylineCollection.prototype._updateMode = function(frameState) {
+    function updateMode(collection, frameState) {
         var mode = frameState.mode;
         var projection = frameState.scene2D.projection;
-        if (this._mode !== mode && typeof mode.morphTime !== 'undefined') {
-            this.morphTime = mode.morphTime;
-        }
-        if (this._mode !== mode || (this._projection !== projection) || (!this._modelMatrix.equals(this.modelMatrix))) {
-            this._mode = mode;
-            this._projection = projection;
-            this._modelMatrix = this.modelMatrix.clone();
-            this._createVertexArray = true;
+
+        if (collection._mode !== mode || (collection._projection !== projection) || (!collection._modelMatrix.equals(collection.modelMatrix))) {
+            collection._mode = mode;
+            collection._projection = projection;
+            collection._modelMatrix = collection.modelMatrix.clone();
+            collection._createVertexArray = true;
         }
-    };
+    }
 
-    PolylineCollection.prototype._removePolylines = function() {
-        if (this._polylinesRemoved) {
-            this._polylinesRemoved = false;
+    function removePolylines(collection) {
+        if (collection._polylinesRemoved) {
+            collection._polylinesRemoved = false;
 
             var polylines = [];
 
-            var length = this._polylines.length;
+            var length = collection._polylines.length;
             for ( var i = 0, j = 0; i < length; ++i) {
-                var polyline = this._polylines[i];
+                var polyline = collection._polylines[i];
                 if (polyline) {
                     polyline._index = j++;
                     polylines.push(polyline);
                 }
             }
 
-            this._polylines = polylines;
+            collection._polylines = polylines;
         }
-    };
+    }
+
+    function releaseShaders(collection) {
+        var polylines = collection._polylines;
+        var length = polylines.length;
+        for (var i = 0; i < length; ++i) {
+            var bucket = polylines[i]._bucket;
+            if (typeof bucket !== 'undefined') {
+                bucket.shaderProgram = bucket.shaderProgram && bucket.shaderProgram.release();
+            }
+        }
+    }
 
-    PolylineCollection.prototype._destroyVertexArrays = function() {
-        var length = this._colorVertexArrays.length;
+    function destroyVertexArrays(collection) {
+        var length = collection._vertexArrays.length;
         for ( var t = 0; t < length; ++t) {
-            this._colorVertexArrays[t].va.destroy();
-            this._pickColorVertexArrays[t].va.destroy();
-            this._outlineColorVertexArrays[t].va.destroy();
+            collection._vertexArrays[t].va.destroy();
         }
-        this._colorVertexArrays.length = 0;
-        this._pickColorVertexArrays.length = 0;
-        this._outlineColorVertexArrays.length = 0;
-    };
+        collection._vertexArrays.length = 0;
+    }
 
     PolylineCollection.prototype._updatePolyline = function(polyline, propertyChanged) {
         this._polylinesUpdated = true;
@@ -969,49 +979,34 @@ define([
         ++this._propertiesChanged[propertyChanged];
     };
 
-    PolylineCollection.prototype._destroyPolylines = function() {
-        var polylines = this._polylines;
+    function destroyPolylines(collection) {
+        var polylines = collection._polylines;
         var length = polylines.length;
         for ( var i = 0; i < length; ++i) {
             if (polylines[i]) {
                 polylines[i]._destroy();
             }
         }
-    };
+    }
 
-    /**
-     * @private
-     */
     function VertexArrayBucketLocator(count, offset, bucket) {
         this.count = count;
         this.offset = offset;
-        this.rsOne = bucket.rsOne;
-        this.rsTwo = bucket.rsTwo;
-        this.rsThree = bucket.rsThree;
-        this.rsPick = bucket.rsPick;
+        this.bucket = bucket;
     }
 
-    /**
-     * @private
-     */
-    var PolylineBucket = function(outlineWidth, width, mode, projection, modelMatrix) {
-        this.width = width;
-        this.outlineWidth = outlineWidth;
+    var PolylineBucket = function(material, mode, projection, modelMatrix) {
         this.polylines = [];
         this.lengthOfPositions = 0;
-        this.rsOne = undefined;
-        this.rsTwo = undefined;
-        this.rsThree = undefined;
-        this.rsPick = undefined;
+        this.material = material;
+        this.shaderProgram = undefined;
+        this.pickShaderProgram = undefined;
         this.mode = mode;
         this.projection = projection;
         this.ellipsoid = projection.getEllipsoid();
         this.modelMatrix = modelMatrix;
     };
 
-    /**
-     * @private
-     */
     PolylineBucket.prototype.addPolyline = function(p) {
         var polylines = this.polylines;
         polylines.push(p);
@@ -1020,99 +1015,19 @@ define([
         p._bucket = this;
     };
 
-    /**
-     * @private
-     */
-    PolylineBucket.prototype.updateRenderState = function(context, useDepthTest) {
-        var width = this._clampWidth(context, this.width);
-        var outlineWidth = this._clampWidth(context, this.outlineWidth);
-        var rsOne = this.rsOne || context.createRenderState({
-            colorMask : {
-                red : false,
-                green : false,
-                blue : false,
-                alpha : false
-            },
-            lineWidth : 1,
-            blending : BlendingState.ALPHA_BLEND,
-            stencilTest : {
-                enabled : true,
-                frontFunction : StencilFunction.ALWAYS,
-                backFunction : StencilFunction.ALWAYS,
-                reference : 0,
-                mask : ~0,
-                frontOperation : {
-                    fail : StencilOperation.REPLACE,
-                    zFail : StencilOperation.REPLACE,
-                    zPass : StencilOperation.REPLACE
-                },
-                backOperation : {
-                    fail : StencilOperation.REPLACE,
-                    zFail : StencilOperation.REPLACE,
-                    zPass : StencilOperation.REPLACE
-                }
-            }
-        });
-        rsOne.depthMask = !useDepthTest;
-        rsOne.depthTest.enabled = useDepthTest;
-        rsOne.lineWidth = outlineWidth;
-        this.rsOne = rsOne;
-        var rsTwo = this.rsTwo || context.createRenderState({
-            lineWidth : 1,
-            depthMask : false,
-            blending : BlendingState.ALPHA_BLEND,
-            stencilTest : {
-                enabled : true,
-                frontFunction : StencilFunction.ALWAYS,
-                backFunction : StencilFunction.ALWAYS,
-                reference : 1,
-                mask : ~0,
-                frontOperation : {
-                    fail : StencilOperation.KEEP,
-                    zFail : StencilOperation.KEEP,
-                    zPass : StencilOperation.REPLACE
-                },
-                backOperation : {
-                    fail : StencilOperation.KEEP,
-                    zFail : StencilOperation.KEEP,
-                    zPass : StencilOperation.REPLACE
-                }
-            }
-        });
-        rsTwo.depthTest.enabled = useDepthTest;
-        rsTwo.lineWidth = width;
-        this.rsTwo = rsTwo;
-        var rsThree = this.rsThree || context.createRenderState({
-            lineWidth : 1,
-            depthMask : false,
-            blending : BlendingState.ALPHA_BLEND,
-            stencilTest : {
-                enabled : true,
-                frontFunction : StencilFunction.NOT_EQUAL,
-                backFunction : StencilFunction.NOT_EQUAL,
-                reference : 1,
-                mask : ~0,
-                frontOperation : {
-                    fail : StencilOperation.KEEP,
-                    zFail : StencilOperation.KEEP,
-                    zPass : StencilOperation.KEEP
-                },
-                backOperation : {
-                    fail : StencilOperation.KEEP,
-                    zFail : StencilOperation.KEEP,
-                    zPass : StencilOperation.KEEP
-                }
-            }
-        });
-        rsThree.lineWidth = this.outlineWidth;
-        rsThree.depthTest.enabled = useDepthTest;
-        this.rsThree = rsThree;
-
-        var rsPick = this.rsPick || context.createRenderState();
-        rsPick.depthTest.enabled = useDepthTest;
-        rsPick.lineWidth = outlineWidth;
-        rsPick.depthMask = !useDepthTest;
-        this.rsPick = rsPick;
+    PolylineBucket.prototype.updateShader = function(context) {
+        if (typeof this.shaderProgram !== 'undefined') {
+            return;
+        }
+
+        var fsSource =
+            '#line 0\n' +
+            this.material.shaderSource +
+            '#line 0\n' +
+            PolylineFS;
+
+        this.shaderProgram = context.getShaderCache().getShaderProgram(PolylineVS, fsSource, attributeIndices);
+        this.pickShaderProgram = context.getShaderCache().getShaderProgram(PolylineVS, createPickFragmentShaderSource(fsSource, 'varying'), attributeIndices);
     };
 
     function intersectsIDL(polyline) {
@@ -1120,170 +1035,182 @@ define([
             polyline._boundingVolume.intersect(Cartesian4.UNIT_Y) === Intersect.INTERSECTING;
     }
 
-    /**
-     * @private
-     */
     PolylineBucket.prototype.getPolylinePositionsLength = function(polyline) {
+        var length;
         if (this.mode === SceneMode.SCENE3D || !intersectsIDL(polyline)) {
-            return polyline.getPositions().length;
+            length = polyline.getPositions().length;
+            return length * 4.0 - 4.0;
         }
-        var segments = polyline._createSegments(this.modelMatrix);
-        return polyline._setSegments(segments);
+
+        var count = 0;
+        var segmentLengths = polyline._segments.lengths;
+        length = segmentLengths.length;
+        for (var i = 0; i < length; ++i) {
+            count += segmentLengths[i] * 4.0 - 4.0;
+        }
+
+        return count;
     };
 
     var scratchWritePosition = new Cartesian3();
+    var scratchWritePrevPosition = new Cartesian3();
+    var scratchWriteNextPosition = new Cartesian3();
+    var scratchWriteVector = new Cartesian3();
 
-    /**
-     * @private
-     */
-    PolylineBucket.prototype.write = function(positionArray, colorArray, outlineColorArray, pickColorArray, showArray, positionIndex, showIndex, colorIndex, context) {
+    PolylineBucket.prototype.write = function(positionArray, pickColorArray, texCoordExpandWidthAndShowArray, positionIndex, colorIndex, texCoordExpandWidthAndShowIndex, context) {
+        var mode = this.mode;
         var polylines = this.polylines;
         var length = polylines.length;
         for ( var i = 0; i < length; ++i) {
             var polyline = polylines[i];
-            var color = polyline.getColor();
-            var show = polyline.getShow();
-            var outlineColor = polyline.getOutlineColor();
-            var pickColor = polyline.getPickId(context).unnormalizedRgb;
-            var positions = this._getPositions(polyline);
+            var width = polyline.getWidth();
+            var show = polyline.getShow() && width > 0.0;
+            var segments = this.getSegments(polyline);
+            var positions = segments.positions;
+            var lengths = segments.lengths;
             var positionsLength = positions.length;
+
+            var pickColor = polyline.getPickId(context).color;
+
+            var segmentIndex = 0;
+            var count = 0;
+            var position;
+
             for ( var j = 0; j < positionsLength; ++j) {
-                var position = positions[j];
+                if (j === 0) {
+                    position = scratchWriteVector;
+                    Cartesian3.subtract(positions[0], positions[1], position);
+                    Cartesian3.add(positions[0], position, position);
+                } else {
+                    position = positions[j - 1];
+                }
+
+                scratchWritePrevPosition.x = position.x;
+                scratchWritePrevPosition.y = position.y;
+                scratchWritePrevPosition.z = (mode !== SceneMode.SCENE2D) ? position.z : 0.0;
+
+                position = positions[j];
                 scratchWritePosition.x = position.x;
                 scratchWritePosition.y = position.y;
-                scratchWritePosition.z = (this.mode !== SceneMode.SCENE2D) ? position.z : 0.0;
-                EncodedCartesian3.writeElements(scratchWritePosition, positionArray, positionIndex);
-                outlineColorArray[colorIndex] = Color.floatToByte(outlineColor.red);
-                outlineColorArray[colorIndex + 1] = Color.floatToByte(outlineColor.green);
-                outlineColorArray[colorIndex + 2] = Color.floatToByte(outlineColor.blue);
-                outlineColorArray[colorIndex + 3] = Color.floatToByte(outlineColor.alpha);
-                colorArray[colorIndex] = Color.floatToByte(color.red);
-                colorArray[colorIndex + 1] = Color.floatToByte(color.green);
-                colorArray[colorIndex + 2] = Color.floatToByte(color.blue);
-                colorArray[colorIndex + 3] = Color.floatToByte(color.alpha);
-                pickColorArray[colorIndex] = pickColor.red;
-                pickColorArray[colorIndex + 1] = pickColor.green;
-                pickColorArray[colorIndex + 2] = pickColor.blue;
-                pickColorArray[colorIndex + 3] = 255;
-                showArray[showIndex++] = show;
-                positionIndex += 6;
-                colorIndex += 4;
-            }
-        }
-    };
+                scratchWritePosition.z = (mode !== SceneMode.SCENE2D) ? position.z : 0.0;
 
-    /**
-     * @private
-     */
-    PolylineBucket.prototype.writeForMorph = function(positionArray, positionIndex) {
-        var modelMatrix = this.modelMatrix;
-        var position;
-        var polylines = this.polylines;
-        var length = polylines.length;
-        for ( var i = 0; i < length; ++i) {
-            var polyline = polylines[i];
-            var positions = polyline.getPositions();
-
-            var numberOfSegments;
-            var j;
-            if (intersectsIDL(polyline)) {
-                var segments = polyline._getSegments();
-                numberOfSegments = segments.length;
-                for ( j = 0; j < numberOfSegments; ++j) {
-                    var segment = segments[j];
-                    var segmentLength = segment.length;
-                    for ( var n = 0; n < segmentLength; ++n) {
-                        position = positions[segment[n].index];
-                        position = modelMatrix.multiplyByPoint(position);
-                        EncodedCartesian3.writeElements(position, positionArray, positionIndex);
-                        positionIndex += 6;
-                    }
+                if (j === positionsLength - 1) {
+                    position = scratchWriteVector;
+                    Cartesian3.subtract(positions[positionsLength - 1], positions[positionsLength - 2], position);
+                    Cartesian3.add(positions[positionsLength - 1], position, position);
+                } else {
+                    position = positions[j + 1];
                 }
-            } else {
-                numberOfSegments = positions.length;
-                for ( j = 0; j < numberOfSegments; ++j) {
-                    position = positions[j];
-                    position = modelMatrix.multiplyByPoint(position);
-                    EncodedCartesian3.writeElements(position, positionArray, positionIndex);
-                    positionIndex += 6;
+
+                scratchWriteNextPosition.x = position.x;
+                scratchWriteNextPosition.y = position.y;
+                scratchWriteNextPosition.z = (mode !== SceneMode.SCENE2D) ? position.z : 0.0;
+
+                var segmentLength = lengths[segmentIndex];
+                if (j === count + segmentLength) {
+                    count += segmentLength;
+                    ++segmentIndex;
+                }
+
+                var segmentStart = j - count === 0;
+                var segmentEnd = j === count + lengths[segmentIndex] - 1;
+
+                var startK = (segmentStart) ? 2 : 0;
+                var endK = (segmentEnd) ? 2 : 4;
+
+                for (var k = startK; k < endK; ++k) {
+                    EncodedCartesian3.writeElements(scratchWritePosition, positionArray, positionIndex);
+                    EncodedCartesian3.writeElements(scratchWritePrevPosition, positionArray, positionIndex + 6);
+                    EncodedCartesian3.writeElements(scratchWriteNextPosition, positionArray, positionIndex + 12);
+
+                    pickColorArray[colorIndex] = Color.floatToByte(pickColor.red);
+                    pickColorArray[colorIndex + 1] = Color.floatToByte(pickColor.green);
+                    pickColorArray[colorIndex + 2] = Color.floatToByte(pickColor.blue);
+                    pickColorArray[colorIndex + 3] = Color.floatToByte(pickColor.alpha);
+
+                    var direction = (k - 2 < 0) ? -1.0 : 1.0;
+                    texCoordExpandWidthAndShowArray[texCoordExpandWidthAndShowIndex] = j / (positionsLength - 1); // s tex coord
+                    texCoordExpandWidthAndShowArray[texCoordExpandWidthAndShowIndex + 1] = 2 * (k % 2) - 1;       // expand direction
+                    texCoordExpandWidthAndShowArray[texCoordExpandWidthAndShowIndex + 2] = direction * width;
+                    texCoordExpandWidthAndShowArray[texCoordExpandWidthAndShowIndex + 3] = show;
+
+                    positionIndex += 6 * 3;
+                    colorIndex += 4;
+                    texCoordExpandWidthAndShowIndex += 4;
                 }
             }
         }
     };
 
-    /**
-     * @private
-     */
-    PolylineBucket.prototype._clampWidth = function(context, value) {
-        var min = context.getMinimumAliasedLineWidth();
-        var max = context.getMaximumAliasedLineWidth();
-
-        return Math.min(Math.max(value, min), max);
-    };
+    var morphPositionScratch = new Cartesian3();
+    var morphPrevPositionScratch = new Cartesian3();
+    var morphNextPositionScratch = new Cartesian3();
+    var morphVectorScratch = new Cartesian3();
 
-    /**
-     * @private
-     */
-    PolylineBucket.prototype._updateIndices3D = function(totalIndices, vertexBufferOffset, vertexArrayBuckets, offset) {
-        var vaCount = vertexArrayBuckets.length - 1;
-        var bucketLocator = new VertexArrayBucketLocator(0, offset, this);
-        vertexArrayBuckets[vaCount].push(bucketLocator);
-        var count = 0;
-        var indices = totalIndices[totalIndices.length - 1];
-        var indicesCount = 0;
-        if (indices.length > 0) {
-            indicesCount = indices[indices.length - 1] + 1;
-        }
+    PolylineBucket.prototype.writeForMorph = function(positionArray, positionIndex) {
+        var modelMatrix = this.modelMatrix;
         var polylines = this.polylines;
         var length = polylines.length;
         for ( var i = 0; i < length; ++i) {
             var polyline = polylines[i];
-            var positions = polyline.getPositions();
+            var positions = polyline._segments.positions;
+            var lengths = polyline._segments.lengths;
             var positionsLength = positions.length;
-            if (positions.length > 0) {
-                for ( var j = 0; j < positionsLength; ++j) {
-                    if (j !== positionsLength - 1) {
-                        if (indicesCount === SIXTYFOURK - 1) {
-                            vertexBufferOffset.push(1);
-                            indices = [];
-                            totalIndices.push(indices);
-                            indicesCount = 0;
-                            bucketLocator.count = count;
-                            count = 0;
-                            offset = 0;
-                            bucketLocator = new VertexArrayBucketLocator(0, 0, this);
-                            vertexArrayBuckets[++vaCount] = [bucketLocator];
-                        }
-                        count += 2;
-                        offset += 2;
-                        indices.push(indicesCount++);
-                        indices.push(indicesCount);
-                    }
+
+            var segmentIndex = 0;
+            var count = 0;
+
+            for ( var j = 0; j < positionsLength; ++j) {
+                var prevPosition;
+                if (j === 0) {
+                    prevPosition = morphVectorScratch;
+                    Cartesian3.subtract(positions[0], positions[1], prevPosition);
+                    Cartesian3.add(positions[0], prevPosition, prevPosition);
+                } else {
+                    prevPosition = positions[j - 1];
                 }
-                if (indicesCount < SIXTYFOURK - 1) {
-                    indicesCount++;
+
+                prevPosition = Matrix4.multiplyByPoint(modelMatrix, prevPosition, morphPrevPositionScratch);
+
+                var position = Matrix4.multiplyByPoint(modelMatrix, positions[j], morphPositionScratch);
+
+                var nextPosition;
+                if (j === positionsLength - 1) {
+                    nextPosition = morphVectorScratch;
+                    Cartesian3.subtract(positions[positionsLength - 1], positions[positionsLength - 2], nextPosition);
+                    Cartesian3.add(positions[positionsLength - 1], nextPosition, nextPosition);
                 } else {
-                    vertexBufferOffset.push(0);
-                    indices = [];
-                    totalIndices.push(indices);
-                    indicesCount = 0;
-                    bucketLocator.count = count;
-                    offset = 0;
-                    count = 0;
-                    bucketLocator = new VertexArrayBucketLocator(0, 0, this);
-                    vertexArrayBuckets[++vaCount] = [bucketLocator];
+                    nextPosition = positions[j + 1];
+                }
+
+                nextPosition = Matrix4.multiplyByPoint(modelMatrix, nextPosition, morphNextPositionScratch);
+
+                var segmentLength = lengths[segmentIndex];
+                if (j === count + segmentLength) {
+                    count += segmentLength;
+                    ++segmentIndex;
+                }
+
+                var segmentStart = j - count === 0;
+                var segmentEnd = j === count + lengths[segmentIndex] - 1;
+
+                var startK = (segmentStart) ? 2 : 0;
+                var endK = (segmentEnd) ? 2 : 4;
+
+                for (var k = startK; k < endK; ++k) {
+                    EncodedCartesian3.writeElements(position, positionArray, positionIndex);
+                    EncodedCartesian3.writeElements(prevPosition, positionArray, positionIndex + 6);
+                    EncodedCartesian3.writeElements(nextPosition, positionArray, positionIndex + 12);
+
+                    positionIndex += 6 * 3;
                 }
             }
-            polyline._clean();
         }
-        bucketLocator.count = count;
-        return offset;
     };
 
-    /**
-     * @private
-     */
-    PolylineBucket.prototype._updateIndices2D = function(totalIndices, vertexBufferOffset, vertexArrayBuckets, offset) {
+    var scratchSegmentLengths = new Array(1);
+
+    PolylineBucket.prototype.updateIndices = function(totalIndices, vertexBufferOffset, vertexArrayBuckets, offset) {
         var vaCount = vertexArrayBuckets.length - 1;
         var bucketLocator = new VertexArrayBucketLocator(0, offset, this);
         vertexArrayBuckets[vaCount].push(bucketLocator);
@@ -1296,59 +1223,36 @@ define([
         var polylines = this.polylines;
         var length = polylines.length;
         for ( var i = 0; i < length; ++i) {
-            var polyline = polylines[i];
-            if (intersectsIDL(polyline)) {
-                var segments = polyline._segments;
-                var numberOfSegments = segments.length;
-                if (numberOfSegments > 0) {
-                    for ( var k = 0; k < numberOfSegments; ++k) {
-                        var segment = segments[k];
-                        var segmentLength = segment.length;
-                        for ( var n = 0; n < segmentLength; ++n) {
-                            if (n !== segmentLength - 1) {
-                                if (indicesCount === SIXTYFOURK - 1) {
-                                    vertexBufferOffset.push(1);
-                                    indices = [];
-                                    totalIndices.push(indices);
-                                    indicesCount = 0;
-                                    bucketLocator.count = count;
-                                    count = 0;
-                                    offset = 0;
-                                    bucketLocator = new VertexArrayBucketLocator(0, 0, this);
-                                    vertexArrayBuckets[++vaCount] = [bucketLocator];
-                                }
-                                count += 2;
-                                offset += 2;
-                                indices.push(indicesCount++);
-                                indices.push(indicesCount);
-                            }
-                        }
-                        if (k !== numberOfSegments - 1) {
-                            indicesCount++;
-                        }
-                    }
 
-                    if (indicesCount < SIXTYFOURK - 1) {
-                        indicesCount++;
-                    } else {
-                        vertexBufferOffset.push(0);
-                        indices = [];
-                        totalIndices.push(indices);
-                        indicesCount = 0;
-                        bucketLocator.count = count;
-                        offset = 0;
-                        count = 0;
-                        bucketLocator = new VertexArrayBucketLocator(0, 0, this);
-                        vertexArrayBuckets[++vaCount] = [bucketLocator];
-                    }
+            var polyline = polylines[i];
+            polyline._locatorBuckets = [];
+
+            var segments;
+            if (this.mode === SceneMode.SCENE3D) {
+                segments = scratchSegmentLengths;
+                var positionsLength = polyline.getPositions().length;
+                if (positionsLength > 0) {
+                    segments[0] = positionsLength;
+                } else {
+                    continue;
                 }
             } else {
-                var positions = polyline.getPositions();
-                var positionsLength = positions.length;
-                for ( var j = 0; j < positionsLength; ++j) {
-                    if (j !== positionsLength - 1) {
-                        if (indicesCount === SIXTYFOURK - 1) {
-                            vertexBufferOffset.push(1);
+                segments = polyline._segments.lengths;
+            }
+
+            var numberOfSegments = segments.length;
+            if (numberOfSegments > 0) {
+                var segmentIndexCount = 0;
+                for ( var j = 0; j < numberOfSegments; ++j) {
+                    var segmentLength = segments[j] - 1.0;
+                    for ( var k = 0; k < segmentLength; ++k) {
+                        if (indicesCount + 4 >= SIXTYFOURK - 1) {
+                            polyline._locatorBuckets.push({
+                                locator : bucketLocator,
+                                count : segmentIndexCount
+                            });
+                            segmentIndexCount = 0;
+                            vertexBufferOffset.push(4);
                             indices = [];
                             totalIndices.push(indices);
                             indicesCount = 0;
@@ -1358,16 +1262,23 @@ define([
                             bucketLocator = new VertexArrayBucketLocator(0, 0, this);
                             vertexArrayBuckets[++vaCount] = [bucketLocator];
                         }
-                        count += 2;
-                        offset += 2;
-                        indices.push(indicesCount++);
-                        indices.push(indicesCount);
+
+                        indices.push(indicesCount, indicesCount + 2, indicesCount + 1);
+                        indices.push(indicesCount + 1, indicesCount + 2, indicesCount + 3);
+
+                        segmentIndexCount += 6;
+                        count += 6;
+                        offset += 6;
+                        indicesCount += 4;
                     }
                 }
 
-                if (indicesCount < SIXTYFOURK - 1) {
-                    indicesCount++;
-                } else {
+                polyline._locatorBuckets.push({
+                    locator : bucketLocator,
+                    count : segmentIndexCount
+                });
+
+                if (indicesCount + 4 >= SIXTYFOURK - 1) {
                     vertexBufferOffset.push(0);
                     indices = [];
                     totalIndices.push(indices);
@@ -1385,20 +1296,7 @@ define([
         return offset;
     };
 
-    /**
-     * @private
-     */
-    PolylineBucket.prototype.updateIndices = function(totalIndices, vertexBufferOffset, vertexArrayBuckets, offset) {
-        if (this.mode === SceneMode.SCENE3D) {
-            return this._updateIndices3D(totalIndices, vertexBufferOffset, vertexArrayBuckets, offset);
-        }
-        return this._updateIndices2D(totalIndices, vertexBufferOffset, vertexArrayBuckets, offset);
-    };
-
-    /**
-     * @private
-     */
-    PolylineBucket.prototype._getPolylineStartIndex = function(polyline) {
+    PolylineBucket.prototype.getPolylineStartIndex = function(polyline) {
         var polylines = this.polylines;
         var positionIndex = 0;
         var length = polylines.length;
@@ -1412,10 +1310,13 @@ define([
         return positionIndex;
     };
 
-    /**
-     * @private
-     */
-    PolylineBucket.prototype._getPositions = function(polyline) {
+    var scratchSegments = {
+        positions : undefined,
+        lengths : undefined
+    };
+    var scratchLengths = new Array(1);
+
+    PolylineBucket.prototype.getSegments = function(polyline) {
         var positions = polyline.getPositions();
 
         if (positions.length > 0) {
@@ -1427,10 +1328,14 @@ define([
         }
 
         if (this.mode === SceneMode.SCENE3D) {
-            return positions;
+            scratchLengths[0] = positions.length;
+            scratchSegments.positions = positions;
+            scratchSegments.lengths = scratchLengths;
+            return scratchSegments;
         }
+
         if (intersectsIDL(polyline)) {
-            positions = polyline._getPositions2D();
+            positions = polyline._segments.positions;
         }
 
         var ellipsoid = this.ellipsoid;
@@ -1458,73 +1363,96 @@ define([
             }
         }
 
-        return newPositions;
+        scratchSegments.positions = newPositions;
+        scratchSegments.lengths = polyline._segments.lengths;
+        return scratchSegments;
     };
 
-    /**
-     * @private
-     */
-    PolylineBucket.prototype.writePositionsUpdate = function(positionIndex, polyline, buffer) {
+    PolylineBucket.prototype.writeUpdate = function(index, polyline, positionBuffer, texCoordExpandWidthAndShowBuffer) {
+        var mode = this.mode;
         var positionsLength = polyline._actualLength;
         if (positionsLength) {
-            positionIndex += this._getPolylineStartIndex(polyline);
-            var positionArray = new Float32Array(2 * positionsLength * 3);
-            var index = 0;
-            var positions = this._getPositions(polyline);
+            index += this.getPolylineStartIndex(polyline);
+            var positionArray = new Float32Array(6 * positionsLength * 3);
+            var texCoordExpandWidthAndShowArray = new Float32Array(positionsLength * 4);
+
+            var positionIndex = 0;
+            var texCoordExpandWidthAndShowIndex = 0;
+
+            var segments = this.getSegments(polyline);
+            var positions = segments.positions;
+            var lengths = segments.lengths;
+
+            var segmentIndex = 0;
+            var count = 0;
+            var position;
+
+            var width = polyline.getWidth();
+            var show = polyline.getShow() && width > 0.0;
+
+            positionsLength = positions.length;
             for ( var i = 0; i < positionsLength; ++i) {
-                var position = positions[i];
+                if (i === 0) {
+                    position = scratchWriteVector;
+                    Cartesian3.subtract(positions[0], positions[1], position);
+                    Cartesian3.add(positions[0], position, position);
+                } else {
+                    position = positions[i - 1];
+                }
+
+                scratchWritePrevPosition.x = position.x;
+                scratchWritePrevPosition.y = position.y;
+                scratchWritePrevPosition.z = (mode !== SceneMode.SCENE2D) ? position.z : 0.0;
+
+                position = positions[i];
                 scratchWritePosition.x = position.x;
                 scratchWritePosition.y = position.y;
-                scratchWritePosition.z = (this.mode !== SceneMode.SCENE2D) ? position.z : 0.0;
-                EncodedCartesian3.writeElements(scratchWritePosition, positionArray, index);
-                index += 6;
-            }
+                scratchWritePosition.z = (mode !== SceneMode.SCENE2D) ? position.z : 0.0;
 
-            buffer.copyFromArrayView(positionArray, 2 * 12 * positionIndex);
-        }
-    };
+                if (i === positionsLength - 1) {
+                    position = scratchWriteVector;
+                    Cartesian3.subtract(positions[positionsLength - 1], positions[positionsLength - 2], position);
+                    Cartesian3.add(positions[positionsLength - 1], position, position);
+                } else {
+                    position = positions[i + 1];
+                }
 
-    /**
-     * @private
-     */
-    PolylineBucket.prototype.writeColorUpdate = function(positionIndex, polyline, buffer) {
-        var positionsLength = polyline._actualLength;
-        if (positionsLength) {
-            positionIndex += this._getPolylineStartIndex(polyline);
-
-            var index = 0;
-            var color = polyline.getColor();
-            var red = Color.floatToByte(color.red);
-            var green = Color.floatToByte(color.green);
-            var blue = Color.floatToByte(color.blue);
-            var alpha = Color.floatToByte(color.alpha);
-            var colorsArray = new Uint8Array(positionsLength * 4);
-            for ( var j = 0; j < positionsLength; ++j) {
-                colorsArray[index] = red;
-                colorsArray[index + 1] = green;
-                colorsArray[index + 2] = blue;
-                colorsArray[index + 3] = alpha;
-                index += 4;
-            }
-            buffer.copyFromArrayView(colorsArray, 4 * positionIndex);
-        }
-    };
+                scratchWriteNextPosition.x = position.x;
+                scratchWriteNextPosition.y = position.y;
+                scratchWriteNextPosition.z = (mode !== SceneMode.SCENE2D) ? position.z : 0.0;
 
-    /**
-     * @private
-     */
-    PolylineBucket.prototype.writeShowUpdate = function(positionIndex, polyline, buffer) {
-        var positionsLength = polyline._actualLength;
-        if (positionsLength) {
-            positionIndex += this._getPolylineStartIndex(polyline);
-            var show = polyline.getShow();
-            var showArray = new Uint8Array(positionsLength);
-            for ( var j = 0; j < positionsLength; ++j) {
-                showArray[j] = show;
+                var segmentLength = lengths[segmentIndex];
+                if (i === count + segmentLength) {
+                    count += segmentLength;
+                    ++segmentIndex;
+                }
+
+                var segmentStart = i - count === 0;
+                var segmentEnd = i === count + lengths[segmentIndex] - 1;
+
+                var startJ = (segmentStart) ? 2 : 0;
+                var endJ = (segmentEnd) ? 2 : 4;
+
+                for (var j = startJ; j < endJ; ++j) {
+                    EncodedCartesian3.writeElements(scratchWritePosition, positionArray, positionIndex);
+                    EncodedCartesian3.writeElements(scratchWritePrevPosition, positionArray, positionIndex + 6);
+                    EncodedCartesian3.writeElements(scratchWriteNextPosition, positionArray, positionIndex + 12);
+
+                    var direction = (j - 2 < 0) ? -1.0 : 1.0;
+                    texCoordExpandWidthAndShowArray[texCoordExpandWidthAndShowIndex] = i / (positionsLength - 1);  // s tex coord
+                    texCoordExpandWidthAndShowArray[texCoordExpandWidthAndShowIndex + 1] = 2 * (j % 2) - 1;        // expand direction
+                    texCoordExpandWidthAndShowArray[texCoordExpandWidthAndShowIndex + 2] = direction * width;
+                    texCoordExpandWidthAndShowArray[texCoordExpandWidthAndShowIndex + 3] = show;
+
+                    positionIndex += 6 * 3;
+                    texCoordExpandWidthAndShowIndex += 4;
+                }
             }
-            buffer.copyFromArrayView(showArray, positionIndex);
+
+            positionBuffer.copyFromArrayView(positionArray, 6 * 3 * Float32Array.BYTES_PER_ELEMENT * index);
+            texCoordExpandWidthAndShowBuffer.copyFromArrayView(texCoordExpandWidthAndShowArray, 4 * Float32Array.BYTES_PER_ELEMENT * index);
         }
     };
 
     return PolylineCollection;
-});
+});