gistfile1.js

PhiloGL.unpack();

var modelLeft, modelRight, pos, completed, $ = function(d) { return document.getElementById(d); };

document.onreadystatechange = function() {
  if (document.readyState == 'complete') {
      completed = true;
      if (modelLeft) {
          init();
      }
  }
};

//load data
new IO.XHR({
  url: 'surf_reg_model_both_normal.json.bin',
  responseType: 'arraybuffer',
  noCache: true,
  
  onProgress: function() {
    console.log('progress');
  },
  
  onSuccess: function(buffer) {
    var floatArray = new Float32Array(buffer),
        uintArray  = new Uint32Array(buffer),
        n          = floatArray[0],
        verticesLeft = floatArray.subarray(1, n),
        verticesRight = new Float32Array(verticesLeft),
        normalsLeft = floatArray.subarray(n + 1, n + n),
        normalsRight = new Float32Array(normalsLeft),
        indices = uintArray.subarray(n + n + 1, uintArray.length);

    modelLeft = new O3D.Model({
      vertices: verticesLeft,
      normals: normalsLeft,
      indices: indices,
      program: 'brain',
      uniforms: {
          colorUfm: [230/255, 114/255, 119/255, 1]
      }
    });

    for (var i = 0, l = verticesLeft.length; i < l; i+=3) {
        verticesRight[i] *= -1;
        normalsRight[i] *= -1;
    }
    
    modelRight = new O3D.Model({
      vertices: verticesRight,
      normals: normalsRight,
      indices: indices,
      program: 'brain',
      uniforms: {
          colorUfm: [230/255, 114/255, 119/255, 1]
      }
    });

    if (completed) {
        init();
    }
  },

  onError: function(e) {
    console.log('error', e, arguments);
  }
}).send();
  

function init() {
  console.log('init');
  //Create application
  PhiloGL('brain-canvas', {
    program: [{
        id: 'brain',
        from: 'uris',
        vs: 'brain.vs.glsl',
        fs: 'brain.fs.glsl',
        noCache: true
    }],
    scene: {
      lights: {
        enable: true,
        ambient: {
          r: 0.4,
          g: 0.4,
          b: 0.4
        },
        points: {
          diffuse: { 
            r: 0.7, 
            g: 0.7, 
            b: 0.7 
          },
          specular: { 
            r: 0.8, 
            g: 0.8, 
            b: 0 
          },
          position: { 
            x: 200, 
            y: 200, 
            z: 200 
          }
        }
      }
    },
    camera: {
      position: {
        x: 0, y: 0, z: 250
      }
    },
    events: {
      onDragStart: function(e) {
        pos = {
          x: e.x,
          y: e.y
        };
      },
      onDragMove: function(e) {
        var z = this.camera.position.z,
            sign = Math.abs(z) / z;

        modelLeft.rotation.y += -(pos.x - e.x) / 100;
        modelLeft.rotation.x += sign * (pos.y - e.y) / 100;
        modelRight.rotation.y += -(pos.x - e.x) / 100;
        modelRight.rotation.x += sign * (pos.y - e.y) / 100;
        modelLeft.update();
        modelRight.update();

        pos.x = e.x;
        pos.y = e.y;
      },

      onMouseWheel: function(e) {
        e.stop();
        var camera = this.camera;
        camera.position.z -= e.wheel * 2;
        camera.update();
      }
    },
    onError: function() {
    },
    onLoad: function(app) {
      //Unpack app properties
      var gl = app.gl,
          program = app.program,
          scene = app.scene,
          canvas = app.canvas,
          camera = app.camera;

      //Basic gl setup
      gl.clearColor(0.0, 0.0, 0.0, 1.0);
      gl.clearDepth(1.0);
      gl.enable(gl.DEPTH_TEST);
      gl.depthFunc(gl.LEQUAL);
      gl.viewport(0, 0, +canvas.width, +canvas.height);
      //Add object to the scene
      scene.add(modelLeft, modelRight);
      //draw
      draw();

      //Draw the scene
      function draw() {
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
        //render model
        scene.render();
        Fx.requestAnimationFrame(draw);
      }
    }
  });
}