<script type="x-shader/x-vertex" id="vertexshader">

            varying vec3 vColor;
            attribute vec3 customColor;

            void main() {
                vColor = customColor;
            }

        </script>

        <script type="x-shader/x-fragment" id="fragmentshader">

            varying vec3 vColor;

            void main() {
                gl_FragColor = vec4(vColor, 1.0 );
            }

        </script>

var customColors = new Float32Array(_count*2*3); // 2 vertex by segment *length(RGB)
        for (var i = 0; i < customColors.length/3; i++) {
            var ratio  =  i / (customColors.length/3.0);
            customColors[(i*3)] = ratio;
            customColors[(i*3)+1] = ratio;
            customColors[(i*3)+2] = ratio;
        };

        geo.addAttribute('customColor' , new THREE.BufferAttribute(customColors,3));


        var drawCount = _count * 2;
        geo.setDrawRange( 0, drawCount );


        var uniforms = {
            opacity : 0.5

        };


        var customMaterial = new THREE.ShaderMaterial( {
            uniforms : uniforms,
            vertexShader : document.getElementById( 'vertexshader' ).textContent,
            fragmentShader : document.getElementById( 'fragmentshader' ).textContent,
            }
        );
        var lines = new THREE.LineSegments(geo, customMaterial);