Frames, Transformations and Rotation Sequences
Slides from class

Reading: Matrix Tutorial
Reading: Quaternion Tidbit
Reading: GFX Reference
Reading: GFX Source

Coding Assignment: Compose transformations by pushing and popping your matrix stack, or multiplying your frames together.

Many examples are below. For instance, you could create single mesh and then in your render function, you could iterate 100 times, changing the matrix stack each time:

	var app = new GFX.App();
	var mesh = new GFX.Mesh();

	app.onInit = function(){

		var vertices = [ /*...coordinates...*/ ];
		var indices = [ /*...indices...*/ ];
  		mesh.load(vertices, indices);
	}

	app.onRender = function(){
		var scene = this.scene;
		scene.begin();
			for (var i =0; i<100; ++i){
				var t = i/100;
				scene.matrix.push();
					scene.translate(t,0,0)
					scene.rotate(Math.PI*2*t,0,0,1);
					scene.scale(t, t, t);
					scene.draw(mesh);
				scene.matrix.pop();
			}
		scene.end();
	}

You could also experiment with relative transformations of frames. This is accomplished by multiplying frames together with the mult method.

	var app = new GFX.App();
	var mesh = new GFX.Mesh();

	app.onInit = function(){

		var vertices = [ /*...coordinates...*/ ];
		var indices = [ /*...indices...*/ ];
  		mesh.load(vertices, indices);
	}

	app.onRender = function(){
	  var scene = this.scene;
	  scene.begin();
	    var relFrame = new GFX.Frame();
	    var curFrame = new GFX.Frame();

	    relFrame.position.set(.1,0,0); 
	    relFrame.orientation.setRotation(2*Math.PI/100,0,0,1);
	    relFrame.size.set(.99,.99,.99);

	    for (var i =0; i<100; ++i){
	      var t = i/100;
	      curFrame = curFrame.mult(relFrame);
	      mesh.frame = curFrame;
	      scene.draw(mesh);
	    }
	  scene.end();
	}

Please review the following examples:

Matrix Stack-based Pushing and Popping (just using Scene’s Matrix Stack)
Graphics: https://rawgit.com/wolftype/200c/gh-pages/scratch/webgl_gfx_frame_stack.html
Code: https://github.com/wolftype/200c/blob/gh-pages/scratch/webgl_gfx_frame_stack.html

Target (LookAt) (just using Mesh’s local Frames)
Graphics:https://rawgit.com/wolftype/200c/gh-pages/scratch/webgl_gfx_frame_target.html
Code: https://github.com/wolftype/200c/blob/gh-pages/scratch/webgl_gfx_frame_target.html

Relative Frame Transformations (just using Mesh’s local Frames)
Graphics:https://rawgit.com/wolftype/200c/gh-pages/scratch/webgl_gfx_frame.html
Code: https://github.com/wolftype/200c/blob/gh-pages/scratch/webgl_gfx_frame.html

Interpolation Between Frames (just using Mesh’s local Frames)
Graphics: https://rawgit.com/wolftype/200c/gh-pages/scratch/webgl_gfx_frame_interp.html
Code: https://github.com/wolftype/200c/blob/gh-pages/scratch/webgl_gfx_frame_interp.html

Euler Angles (just using Mesh’s local Frames)
Graphics: https://rawgit.com/wolftype/200c/gh-pages/scratch/webgl_gfx_frame_rotation.html
Code: https://github.com/wolftype/200c/blob/gh-pages/scratch/webgl_gfx_frame_rotation.html