Inside GlobeTweeter

GlobeTweeter - Main Loop

• Active loop with window.requestAnimationFrame

  run: function() {
      var that = this;
      var render = function() {
          window.requestAnimationFrame(render, this.canvas);
          that.frame();
      };
      render();
  } 

• 3D with OSGJS
• Socket.IO to manage network

  socket.on('message', function(message){
      hideConnection();
      LastTweetReceived = new Date();
      processTweet(message);
  });
  

• Processing a tweet means
  • update statistics
  • get image avatar
  • generate hit on wave
  • draw it on the globe

SceneGraph - OSGJS

• OSGJS , js version of OpenSceneGraph
• Easier to manage a 3D object

  var transform = new osg.MatrixTransform();
  transform.setMatrix(osg.Matrix.makeTranslate(10,0,0));
  getJSON("http://plopbyte.com/model.json"), function(data) {
      transform.addChild(osg.ParseSceneGraph(data));
  }

• Manage the opengl state

  var texture = osg.Texture.create("textures/texture.png");
  var quad = osg.createTexturedQuad(-20, -20, 0, 40, 0 ,0, 0, 40,0);
  quad.getOrCreateStateSet().setTextureAttributeAndMode(0, texture);
  

• Picking

  computeIntersections: function (x, y, traversalMask) {
      if (traversalMask === undefined) {
          traversalMask = ~0;
      }
      var iv = new osgUtil.IntersectVisitor();
      iv.setTraversalMask(traversalMask);
      iv.addLineSegment([x,y,0.0], [x,y,1.0]);
      iv.apply(this);
      return iv.hits;
  }
  

GlobeTweeter - Globe data

• Data source from natural earth data
• WGS84 projection of data
• Countries lines - projected
• Coast lines - projected
• Countries polygon - projected
• All combined

GlobeTweeter - Wave

• 2D ripples simulation
• 2 128x64 canvas, 1/30 update
• Vertex Shader

  float height = texture2D( Texture0, TexCoord0.xy).x;
  vec3 normal = normalize(Vertex);
  vec3 normalTransformed = vec3(NormalMatrix * vec4(normal,0.0));
  height *= max(0.0, dot(normalTransformed, vec3(0,0,1)));
  gl_Position = ProjectionMatrix * ModelViewMatrix * 
                vec4(Vertex +  normal * ( height * maxHeight * scale),1.0); 

• Model

GlobeTweeter - Tweets

• Textured Quads projected on earth

  function computeCoordinateFrame( latitude,  longitude, localToWorld)
  {
      // Compute up vector
      var  up = [ Math.cos(longitude)*Math.cos(latitude), 
                  Math.sin(longitude)*Math.cos(latitude), 
                  Math.sin(latitude) ];
      // Compute east vector
      var east = [-Math.sin(longitude), Math.cos(longitude), 0];
      // Compute north vector = outer product up x east
      var north = osg.Vec3.cross(up,east);
  
      // set matrix
      osg.Matrix.set(localToWorld,0,0, east[0]);
      osg.Matrix.set(localToWorld,0,1, east[1]);
      osg.Matrix.set(localToWorld,0,2, east[2]);
      osg.Matrix.set(localToWorld,1,0, north[0]);
      osg.Matrix.set(localToWorld,1,1, north[1]);
      osg.Matrix.set(localToWorld,1,2, north[2]);
      osg.Matrix.set(localToWorld,2,0, up[0]);
      osg.Matrix.set(localToWorld,2,1, up[1]);
      osg.Matrix.set(localToWorld,2,2, up[2]);
  }            

• Tweets are composed in a canvas

Tweets Update

update: function(node, nv) {
    var ratio = 0, pcurrentTime = nv.getFrameStamp().getSimulationTime();
    if (node.startTime === undefined) { // It means we start the local timer
        node.startTime = currentTime;
        if (node.duration === undefined)
            node.duration = 5.0;
    }
    var dt = currentTime - node.startTime;
    if (dt > node.duration) { // exceded duration, we hide it
        node.setNodeMask(0);
        return;
    }
    ratio = dt/node.duration; // give a ratio related to elapsed/duration
    if (node.originalMatrix) {
        var scale;
        if (dt > 1.0) // clamp to  after 1.0 sec
            scale = 1.0;
        else
            scale = osgAnimation.EaseOutElastic(dt); // get an elastic curve on scale

        // because we can zoom a lot we affect the scaling by another factor
        scale = scale * (this.manipulator.height/this.WGS_84_RADIUS_EQUATOR);
        if (this.manipulator.height > this.limit) { // magic number add a second factor
            var rr = 1.0 - (this.manipulator.height-this.limit) * 0.8/(2.5*this.WGS_84_RADIUS_EQUATOR-this.limit);
            scale *= rr;
        }
        node.setMatrix(osg.Matrix.mult(node.originalMatrix, osg.Matrix.makeScale(scale, scale, scale)));
    }

    var value = (1.0 - osgAnimation.EaseInQuad(ratio)); // fade out
    var uniform = node.uniform;
    var c = [value, value, value, value];
    uniform.set(c);
    node.traverse(nv);
}

Credits/Thanks

Code - Cedric Pinson @trigrou

Design - Guillaume Lecollinet @glecollinet

Hack js - Johan Euphrosine @proppy

DzSlides- Paul Rouget dzslides

Get GlobeTweeter on github

Test the demo or check the video

Display 3D model with ShowWebGL

http://plopbyte.com/insideglobetweeter/