Really quick intro to transforming vertices with quaternions

Transforming Vertices with Quaternions

Quaternions are commonly used for rotating objects in 3D. We will eventually be investigating their true nature (as rotors in geometric algebra), but those of you itching to transform your vertices algorithmically you can use this quickstart tidbit.

The following code will take the $x$ axis vector and rotate it by $\frac{\pi}{2}$ radians about the $z$ axis:

		  var theta = Math.PI/2.0;
		  var x = new GFX.Vector(1.0,0.0,0.0);
		  var z = new GFX.Vector(0.0,0.0,1.0);
		  var quat = new GFX.Quaternion();
		  quat.setAxisAngle(z, theta);
		  var rotatedVec = quat.apply(x);

Notice that we feed an axis of rotation and an angle to the setAxisAngle method of our Quaternion, and then call apply on some input vector to get a new rotated vector.

Going further, below is some code for creating a sphere, using spherical coordinates $(\theta,\phi)$. We’ll go over this in depth in class on Wednesday.

	  var v = [];

	  var x = new GFX.Vector(1.0,0.0,0.0); //x axis
	  var y = new GFX.Vector(0.0,1.0,0.0); //y axis
	  var z = new GFX.Vector(0.0,0.0,1.0); //z axis

	  var quatA = new GFX.Quaternion();
	  var quatB = new GFX.Quaternion();

	  var num = 12.;
	  for (var i=0;i<num;++i){
	    quatA.setAxisAngle( y, 2.*Math.PI * i/num );
	    //a rotation of the z axis around the y axis, by amount 0 - 2PI
	    var axis = quatA.apply(z);
	    for (var j=0; j<num; ++j){
	      //a rotation around the rotated the z axis:
	      quatB.setAxisAngle( axis, Math.PI * ((j/num) - .5)  ) ;
	      //the first rotation, followed by the second:
	      var q = quatB.mult(quatA);
	      //apply it to the x axis
	      var vec = q.apply(x);
	      //add to our list of vertices
	      v.push(vec.x, vec.y, vec.z);  
	    }
	  }
	  
	  var vertices = new Float32Array( v ); 

	  //Create and Bind two new array buffers and a new element array buffer
	  sphere = new GFX.Mesh();

	  //Allocate Some Data on the GPU and copy position data over
	  sphere.vertexBuffer.bind();
	  sphere.vertexBuffer.alloc( vertices.byteLength );
	  sphere.vertexBuffer.data(vertices);