Notes for March 26

 

What we discussed on Tuesday Mar 26:

We showed how to create a parametric surface of a torus, rather than a sphere. The function we implemented is included in the accompanying code example.

We also showed how to pass the camera focal length as a uniform variable uFL and then use that value within the vertex shader to add perspective in the direction away from the camera. That code is also included in the accompanying code example.

On the blackboard I outlined a possible structure for a 4x4 matrix object type. You don't need to follow this structure, but it's here in case you find it useful: 

   let Mat4 = function() {
      const IDENTITY = [1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1];
      let stack = [ IDENTITY ], sp = 0;

      this.value = () => stack[sp];               // RETURN VALUE ON TOP OF MATRIX STACK
      this.identity = () => stack[sp] = IDENTITY; // METHOD TO SET VALUE TO IDENTITY MATRIX
      this.save      = () => {                    // PUSH A COPY OF VALUE ON TOP OF MATRIX STACK
         let value = [];
	 for (let n = 0 ; n < 16 ; n++)
	    value.push(stack[sp][n]);
	 stack[++sp] = value;
      }
      this.restore   = () => sp--;                // POP TOP VALUE OFF THE MATRIX STACK

      // YOU NEED TO IMPLEMENT THESE METHODS:

      this.translate = (x,y,z) => { .... }
      this.rotateX   = theta => { .... }
      this.rotateY   = theta => { .... }
      this.rotateZ   = theta => { .... }
      this.scale     = (x,y,z) => { .... }
   }

Homework, due before the start of class on Tuesday April 2:

Because of the technical difficulties we had with the projector on Tuesday, we lost about 30 minutes of implementation time. For that reason, I am giving you until next Tuesday to hand in the assignment originally due this Thursday. But I'm also adding a few more small tasks.

I've included a code example shader6.zip which implements a tumbling torus. The only thing missing from my implementation is a definition of a Mat4 object class.

You need to implement the Mat4 class. This class contains the following methods: 

   identity()
   translate(x,y,z)
   rotateX(theta)
   rotateY(theta)
   rotateZ(theta)
   scale(x,y,z)
   save()
   restore()
   value()
Note that in the course notes above, I've already implemented value(), identity(), save() and restore() for you.

Note also that the value() method returns an array of length 16, which is the current value of the matrix on top of the stack within your Mat4 object instance.

In order to implement the translate, rotate and scale methods you will need to implement a matrixMultiply function.

After you'd done that you might, for example, implement translate(x,y,z) as: 

   stack[sp] = matrixMultiply(stack[sp], [1,0,0,0, 0,1,0,0, 0,0,1,0, x,y,z,1]);

When you look inside index.html you will see that I have created a Mat4 instance and am using it to animate a torus by first creating a value for the matrix and then sending that value down to the GPU: 

   let m = new Mat4();                                    // DEFINE A NEW 4x4 MATRIX OBJECT.

   function animate(gl) {
      let time = (Date.now() - startTime) / 1000;

      m.identity();                                       // ANIMATE THE MATRIX FOR THIS FRAME.
      m.rotateY(.5);
      m.rotateX(time);
      m.scale(.5);

      setUniform('Matrix4fv', 'uMat', false, m.value());  // SEND THE CURRENT MATRIX VALUE TO THE GPU.

      ...
   }
You should try to duplicate this animation, and also create your own animations. Try to have fun and be creative with your own animations.

When the torus animation that I created is working properly, you should see a succession of frames something like this as it tumbles over time:

At the end of the lecture we watched the 2005 computer animation Overtime.