mathdoodle · August 29, 2015 14:25
diff --git a/doodle.json b/doodle.json
 {
  "uuid": "e68bee9e-1783-42bb-b671-b458a2cd9f93",
  "description": "STEREO",
  "dependencies": {
    "DomReady": "latest",
    "davinci-eight": "latest"
  },
  "operatorOverloading": true
 }
diff --git a/extras.ts b/extras.ts
 //
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
  <head>
    <style>
    /* STYLE-MARKER */
    </style>
    <!-- SCRIPTS-MARKER -->
    <script>
    // CODE-MARKER
    </script>
  </head>
  <body>
    <canvas id='canvas' width='600' height='600'>
      Your browser does not support the HTML5 canvas element.
    </canvas>
  </body>
 </html>
diff --git a/script.ts b/script.ts
 DomReady.ready(function() {
  try {
    main();
  }
  catch(e) {
    console.error(e);
  }
 });

 function main() {
  var distance = 5;
  var separation = distance / 30;
  var elevation = 2;
  var world = EIGHT.scene();
  var ambientLightL = new EIGHT.AmbientLight({color:new EIGHT.Color([1.0, 0.0, 0.0])});
  var ambientLightR = new EIGHT.AmbientLight({color:new EIGHT.Color([0.3, 1.0, 1.0])});
  var near = 0.5 * distance;
  var aspect = window.innerWidth / window.innerHeight;
  var fovyd2 = (60 / 2) * Math.PI / 180;
  var hd2 = near * Math.tan(fovyd2);
  var wd2 = aspect * hd2;
  var focalLength = distance - 3;
  var ndfl = near / focalLength;
  var viewL = EIGHT.frustum();
  viewL.left   = - wd2 + 0.5 * separation * ndfl;
  viewL.right  = + wd2 + 0.5 * separation * ndfl;
  viewL.bottom = - hd2;
  viewL.top    = + hd2;
  viewL.near = near;
  var viewR = EIGHT.frustum();
  viewR.left   = - wd2 - 0.5 * separation * ndfl;
  viewR.right  = + wd2 - 0.5 * separation * ndfl;
  viewR.bottom = - hd2;
  viewR.top    = + hd2;
  viewR.near = near;
  var ambientsL = EIGHT.uniforms([ambientLightL, viewL]);
  var ambientsR = EIGHT.uniforms([ambientLightR, viewR]);

  var canvas = <HTMLCanvasElement>document.getElementById('canvas');
  var renderer = EIGHT.renderer(canvas);
  var monitor = EIGHT.contextMonitor(canvas);
  monitor.addContextUser(renderer).start();
  //renderer..clearColor(0.4, 0.4, 0.4, 1.0);
  //renderer.setSize(window.innerWidth, window.innerHeight);
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  var e1 = blade.e3ga.e1;
  var e2 = blade.e3ga.e2;
  var e3 = blade.e3ga.e3;

  var T = 10;
  var f = 1/T;
  var omega = 2 * Math.PI * f;

  //var geometry = new EIGHT.GeometryAdapter(new THREE.BoxGeometry(1,1,1,4,4,4),{drawMode:1});
  //var mesh = new EIGHT.GeometryAdapter(new EIGHT.BoxGeometry(2.5,2.5,2.5,4,4,4),{drawMode:1});
  var mesh = new EIGHT.BoxBuilder({widthSegments:4,heightSegments:4,depthSegments:4}).setWidth(2.5).setHeight(2.5).setDepth(2.5).setWireFrame(true).buildMesh();
  //var mesh = new EIGHT.GeometryAdapter(new EIGHT.BarnGeometry(),{drawMode: EIGHT.DrawMode.LINES});
  //var mesh = new EIGHT.ArrowBuilder().setWireFrame(true).buildMesh();
  //mesh.color = new EIGHT.Color([1, 1, 1]);
  var model = new EIGHT.Node();
  var program = EIGHT.smartProgram(mesh.getAttribMeta(), [model.getUniformMeta(), ambientsL.getUniformMeta()]);

  //console.log(program.vertexShader);
  //console.log(program.fragmentShader);

  var cube = EIGHT.primitive(mesh, program, model);

  // View the model from a fixed distance.
  var x = cube.model.position.x;
  var y = cube.model.position.y;
  var z = cube.model.position.z;
  var P = new blade.Euclidean3(0,x,y,z,0,0,0,0);
  viewL.eye = new EIGHT.Vector3().copy(distance * e3 + elevation * e2 - separation * e1).normalize().multiplyScalar(distance);
  viewL.look = P - separation * e1;
  viewR.eye = new EIGHT.Vector3().copy(distance * e3 + elevation * e2 + separation * e1).normalize().multiplyScalar(distance);
  viewR.look = P + separation * e1;

  var B = e3 ^ e1;
  
  world.add(cube);
  
  var startTime = Date.now();

  function render() {
    try {
      var time = (Date.now() - startTime) / 1000;
      var theta = omega * time;
      var rotor = Math.cos(theta/2) - B * Math.sin(theta/2);
      cube.model.attitude.copy(rotor);

      renderer.autoClear = true;
      renderer.render(world, ambientsL);
      renderer.autoClear = false;
      renderer.render(world, ambientsR);
      requestAnimationFrame(render);
    }
    catch(e) {
      alert("Something is rotten in draw: " + e);
      console.log(e);
    }
  }
  render();
 }
diff --git a/style.less b/style.less
 body {
  background-color: white;
  margin: 0;
 }
 canvas { 
  background-color: black;
  position: absolute;
  width: 100%;
  height: 100%;
 }
	{
	"uuid": "e68bee9e-1783-42bb-b671-b458a2cd9f93",
	"description": "STEREO",
	"dependencies": {
	"DomReady": "latest",
	"davinci-eight": "latest"
	},
	"operatorOverloading": true
	}
	<!doctype html>
	<html>
	<head>
	<style>
	/* STYLE-MARKER */
	</style>
	<!-- SCRIPTS-MARKER -->
	<script>
	// CODE-MARKER
	</script>
	</head>
	<body>
	<canvas id='canvas' width='600' height='600'>
	Your browser does not support the HTML5 canvas element.
	</canvas>
	</body>
	</html>
	DomReady.ready(function() {
	try {
	main();
	}
	catch(e) {
	console.error(e);
	}
	});

	function main() {
	var distance = 5;
	var separation = distance / 30;
	var elevation = 2;
	var world = EIGHT.scene();
	var ambientLightL = new EIGHT.AmbientLight({color:new EIGHT.Color([1.0, 0.0, 0.0])});
	var ambientLightR = new EIGHT.AmbientLight({color:new EIGHT.Color([0.3, 1.0, 1.0])});
	var near = 0.5 * distance;
	var aspect = window.innerWidth / window.innerHeight;
	var fovyd2 = (60 / 2) * Math.PI / 180;
	var hd2 = near * Math.tan(fovyd2);
	var wd2 = aspect * hd2;
	var focalLength = distance - 3;
	var ndfl = near / focalLength;
	var viewL = EIGHT.frustum();
	viewL.left = - wd2 + 0.5 * separation * ndfl;
	viewL.right = + wd2 + 0.5 * separation * ndfl;
	viewL.bottom = - hd2;
	viewL.top = + hd2;
	viewL.near = near;
	var viewR = EIGHT.frustum();
	viewR.left = - wd2 - 0.5 * separation * ndfl;
	viewR.right = + wd2 - 0.5 * separation * ndfl;
	viewR.bottom = - hd2;
	viewR.top = + hd2;
	viewR.near = near;
	var ambientsL = EIGHT.uniforms([ambientLightL, viewL]);
	var ambientsR = EIGHT.uniforms([ambientLightR, viewR]);

	var canvas = <HTMLCanvasElement>document.getElementById('canvas');
	var renderer = EIGHT.renderer(canvas);
	var monitor = EIGHT.contextMonitor(canvas);
	monitor.addContextUser(renderer).start();
	//renderer..clearColor(0.4, 0.4, 0.4, 1.0);
	//renderer.setSize(window.innerWidth, window.innerHeight);
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;

	var e1 = blade.e3ga.e1;
	var e2 = blade.e3ga.e2;
	var e3 = blade.e3ga.e3;

	var T = 10;
	var f = 1/T;
	var omega = 2 * Math.PI * f;

	//var geometry = new EIGHT.GeometryAdapter(new THREE.BoxGeometry(1,1,1,4,4,4),{drawMode:1});
	//var mesh = new EIGHT.GeometryAdapter(new EIGHT.BoxGeometry(2.5,2.5,2.5,4,4,4),{drawMode:1});
	var mesh = new EIGHT.BoxBuilder({widthSegments:4,heightSegments:4,depthSegments:4}).setWidth(2.5).setHeight(2.5).setDepth(2.5).setWireFrame(true).buildMesh();
	//var mesh = new EIGHT.GeometryAdapter(new EIGHT.BarnGeometry(),{drawMode: EIGHT.DrawMode.LINES});
	//var mesh = new EIGHT.ArrowBuilder().setWireFrame(true).buildMesh();
	//mesh.color = new EIGHT.Color([1, 1, 1]);
	var model = new EIGHT.Node();
	var program = EIGHT.smartProgram(mesh.getAttribMeta(), [model.getUniformMeta(), ambientsL.getUniformMeta()]);

	//console.log(program.vertexShader);
	//console.log(program.fragmentShader);

	var cube = EIGHT.primitive(mesh, program, model);

	// View the model from a fixed distance.
	var x = cube.model.position.x;
	var y = cube.model.position.y;
	var z = cube.model.position.z;
	var P = new blade.Euclidean3(0,x,y,z,0,0,0,0);
	viewL.eye = new EIGHT.Vector3().copy(distance * e3 + elevation * e2 - separation * e1).normalize().multiplyScalar(distance);
	viewL.look = P - separation * e1;
	viewR.eye = new EIGHT.Vector3().copy(distance * e3 + elevation * e2 + separation * e1).normalize().multiplyScalar(distance);
	viewR.look = P + separation * e1;

	var B = e3 ^ e1;

	world.add(cube);

	var startTime = Date.now();

	function render() {
	try {
	var time = (Date.now() - startTime) / 1000;
	var theta = omega * time;
	var rotor = Math.cos(theta/2) - B * Math.sin(theta/2);
	cube.model.attitude.copy(rotor);

	renderer.autoClear = true;
	renderer.render(world, ambientsL);
	renderer.autoClear = false;
	renderer.render(world, ambientsR);
	requestAnimationFrame(render);
	}
	catch(e) {
	alert("Something is rotten in draw: " + e);
	console.log(e);
	}
	}
	render();
	}
	body {
	background-color: white;
	margin: 0;
	}
	canvas {
	background-color: black;
	position: absolute;
	width: 100%;
	height: 100%;
	}