Mm/shaders. Fancy lines.

.bowerrc

@@ -0,0 +1,3 @@
+{
+  "directory": "assets/bower_components/"
+}

.gitignore

@@ -26,3 +26,6 @@ node_modules
 
 # Temp directory
 .tmp
+
+#Bower components
+assets/bower_components/

assets/globe/boot.js

@@ -1,87 +1,33 @@
 'use strict';
 
-    if(!Detector.webgl){
-      Detector.addGetWebGLMessage();
-    } else {
-
-      var container = document.getElementById('container');
-      var globe = new DAT.Globe(container);
-
-      var i, tweens = [];
-
-      var settime = function(globe, t) {
-        new TWEEN.Tween(globe).to({time: t},500).easing(TWEEN.Easing.Cubic.EaseOut).start();
-      };
-
-      TWEEN.start();
-
-      globe.animate();
-
-      globe.locations = [];
-
-      globe.addPoint = function(obj){
-          for (var i = 0; i < this.locations.length; i++) {
-              if(this.locations[i].id == obj.id){
-                  this.locations[i].timestamps = obj.timestamps;
-                  return this.locations[i];
-              }
-          }
-          this.locations.push(obj);
-          return obj;
-      };
-
-      globe.updatePoints = function() {
-          var all = [], magnitude, ts, now = Date.now(), msecs, locationsKeep = [], timestampsKeep;
-
-          this.resetData();
-          /** Loop over all of the locations to see if they have valid timestamps. */
-          for (var i = 0; i < this.locations.length; i++) {
-              magnitude = 0;
-              timestampsKeep = [];
-              /**
-               * Check each timestamp in the location and see if it is recent
-               * enough to be rendered.
-               */
-              for (var k = 0; k < this.locations[i].timestamps.length; k++) {
-                ts = this.locations[i].timestamps[k];
-                msecs = now - ts;
-
-                if(5*60*1000 > msecs){
-                    magnitude += 1-msecs/5/60/1000;
-                    /** Only keep relevant timestamps for later. */
-                    timestampsKeep.push(ts);
-                }
-              }
-              if (magnitude) {
-                magnitude = magnitude/this.locations[i].timestamps.length;
-                all.push(this.locations[i].latitude, this.locations[i].longitude, magnitude);
-                /** Overwrite the old timestamps with relevant ones. */
-                this.locations[i].timestamps = timestampsKeep;
-                /** Save locations with visible timestamps for later. */
-                locationsKeep.push(this.locations[i]);
-              }
-          }
-          this.addData(all, {format: 'magnitude', animated: true});
-          this.createPoints();
-          settime(globe, 0);
-          /** Overwrite the old locations with the useful ones. */
-          this.locations = locationsKeep;
-      };
-
-      globe.parsePoints = function(list) {
-        this.locations.concat(list);
-        for (var i = 0; i < list.length; i++) {
+if(!Detector.webgl){
+    Detector.addGetWebGLMessage();
+} else {
+    var container = document.getElementById('container'),
+        globe = new DAT.Globe(container);
+
+    globe.animate();
+
+    globe.parsePoints = function(list) {
+        if(list[0].id){
+            //this.locations = _.without(this.locations, _.findWhere(this.locations, {id: list[0].id}));
+            var match = _.find(this.locations, function(item) { return item.id === list[0].id});
+            if(match){
+              match.timestamps = list[0].timestamps
+            }
+            this.locations = this.locations.concat(list);
+        }
+		    for (var i = 0; i < list.length; i++) {
             this.addPoint(list[i]);
         }
-        this.updatePoints();
-      };
+    };
 
-      globe.autoUpdate = function() {
+    globe.autoUpdate = function() {
         window.requestAnimationFrame(function() {
-          globe.updatePoints();
-          globe.autoUpdate();
+            globe.updatePoints();
+            globe.autoUpdate();
         });
-      };
+    };
 
-      document.body.style.backgroundImage = 'none'; // remove loading
-    }
+  document.body.style.backgroundImage = 'none'; // remove loading
+}

assets/globe/fancyLines.js

@@ -0,0 +1,133 @@
+var step = 1,               // speed of the particles
+    globeWidth=200;         // width of the globe:
+                            //     if 200, particles start from the surface of the globe
+                            //     if 0, the particles start from the center of the globe
+
+Particle = function(pointData, x, y, z) {
+    var vertex, geometry, particles, cx=0, cy=0, cz= 0, currentStep=globeWidth;
+
+    this.inicialize = function() {
+        var shaderMaterial, particleTexture, particleMaterial, radiusRange, spriteMaterial;
+
+        vertex = new THREE.Vector3(0, 0, 0);
+        geometry = new THREE.Geometry();
+        geometry.vertices.push(vertex);
+
+        // attributes
+        attributes = {
+            alpha: { type: 'f', value: [] },
+        };
+        // uniforms
+        uniforms = {
+            color: { type: "c", value: new THREE.Color( 0x00ff00 ) },
+        };
+        // point cloud material
+        shaderMaterial = new THREE.ShaderMaterial( {
+            uniforms:       uniforms,
+            attributes:     attributes,
+            vertexShader:   document.getElementById( 'vertexshader' ).textContent,
+            fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
+            transparent:    true
+        });
+
+        particleTexture = THREE.ImageUtils.loadTexture('images/particleB.png');
+
+        particleMaterial = new THREE.ParticleBasicMaterial({
+            map: particleTexture,
+            transparent: true,
+            size: 30,
+            blending: THREE.AdditiveBlending,
+            alphaTest: 0.5
+            //opacity: 0.8 //If you want to do add transparency to the particle
+        });
+
+        particleGroup = new THREE.Object3D({transparent: true});
+        radiusRange = 10;
+        spriteMaterial = new THREE.SpriteMaterial( {
+            map: particleTexture,
+            transparent: true,
+            blending: THREE.NormalBlending,
+        });
+
+        sprite = new THREE.Sprite( spriteMaterial );
+        sprite.scale.set( 22, 22, 1.0 ); // imageWidth, imageHeight
+        sprite.position.set( 0, 0, 0 );
+
+        sprite.material.color.setHSL( Math.random(), 0.9, 0.7 );
+        particleGroup.add( sprite );
+
+        particles = particleGroup;
+        particles.dynamic = true;
+    }
+
+    this.updateParticle = function(bx,by,bz, max) {
+        var cx,cy,cz, d;
+        currentStep +=step;
+
+        if(Math.floor(max) == globeWidth){
+            // the line stopped moving
+            currentStep = globeWidth;
+        }else if(currentStep> max){
+            // The particle exceeded the line's height
+            currentStep=globeWidth;
+        }
+
+        d = Math.pow(currentStep,2)/(Math.pow(bx,2) + Math.pow(by,2)+ Math.pow(bz,2));
+
+        cx = d*bx;
+        cy = d*by;
+        cz = d*bz;
+        particles.position.y = cy;
+        particles.position.x = cx;
+        particles.position.z = cz;
+    }
+
+
+    this.getParticles = function(){
+        return particles;
+    }
+
+    this.inicialize();
+}
+
+var textures = {};
+
+DAT.Globe.prototype.addLineTexture = function(pointData, x,y,z){
+    var particleTexture, particle, totalParticles, radiusRange, spriteMaterial, sprite;
+
+    particle = new Particle(pointData, x,y,z);
+    textures[pointData.id] = particle;
+    scene.add(particle.getParticles());
+    particleTexture = THREE.ImageUtils.loadTexture( 'images/particleB.png' );
+    particleGroup = new THREE.Object3D();
+    particleAttributes = { startSize: [], startPosition: [], randomness: [] };
+
+    totalParticles = 1;
+    radiusRange = 10;
+    for( var i = 0; i < totalParticles; i++ )
+    {
+        spriteMaterial = new THREE.SpriteMaterial( {
+            map: particleTexture,
+            useScreenCoordinates: false,
+            color: 0xffffff,
+            size: 100,
+            transparent: true
+        });
+        sprite = new THREE.Sprite( spriteMaterial );
+        sprite.scale.set( 30, 10, 1.0 ); // imageWidth, imageHeight
+        sprite.position.set( 0, 0, 0 );
+        sprite.position.setLength( radiusRange * (Math.random() * 0.1 + 0.9) );
+        sprite.material.color.setHSL( Math.random(), 0.9, 0.7 );
+        sprite.material.blending = THREE.AdditiveBlending; // "glowing" particles
+        particleGroup.add( sprite );
+        particleAttributes.startPosition.push( sprite.position.clone() );
+    }
+    particleGroup.position.y = 300;
+    particleGroup.position.x = 300;
+    scene.add( particleGroup );
+}
+
+DAT.Globe.prototype.updateLineTexture = function(pointData, x,y,z, max){
+    var particle = textures[pointData.id];
+    particle.updateParticle(x,y,z, max);
+}