// Learning about shaders.
// Modified from http://fhtr.org/BasicsOfThreeJS/#27
  
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var fov = 45; // camera field-of-view in degrees
var width = renderer.domElement.width;
var height = renderer.domElement.height;
var aspect = width / height; // view aspect ratio
var near = 1; // near clip plane
var far = 10000; // far clip plane
var camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
camera.position.z = 160;
camera.position.y = 40;
camera.position.x = 40;
var scene = new THREE.Scene();

var uniforms = {
  time : { type: "f", value: 1.0 },
  size : { type: "v2", value: new THREE.Vector2(width,height) }
};
var cube = new THREE.Mesh(
  new THREE.SphereGeometry(50, 64, 64),
  //new THREE.MeshNormalMaterial();
  new THREE.ShaderMaterial({
    uniforms : uniforms,
    vertexShader : $('#vertex').text(),
    fragmentShader : $('#fragment').text()
  }));
scene.add(cube);

function animate() {
  requestAnimationFrame(animate);
  render();
}
function render() {
  uniforms.time.value += 0.03;
  cube.rotation.y += 0.005;
  cube.rotation.z += 0.008;
  renderer.clear();
  camera.lookAt(scene.position);
  renderer.render(scene, camera);
}  

// KICK IT OFF
animate();