February 9th, 2014

This week I worked on (1) incorporating Three.js into my project, (2) implementing a perspective camera that can be rotated and translated along the x, y, and z axes, (3) setting up simple keypress controls to control the camera, and (4) began brainstorming a way to incorporate the camera controls into the UI.

Three.js is an open source toolkit that abstracts out some of the details of the WebGL API by breaking the scene into broader objects such as meshes, materials, cameras, and lights. It is fast, supports interaction, and has a built in libraries to handle a lot of the matrix and vector math. I believe that using this toolkit will allow me to get my project up and running faster as I won't be as bogged down trying to learn all of the nitty gritty details behind WebGL.  

This week, with the help of WebGL: Up and Running by Tony Parisi and the documentation at threejs.org, I created a scene containing a grey cube, a perspective camera, and 2 directional lights (one red and one white).  I then worked on creating a system to allow the user to control the camera's orientation and position.  Currently, the user can control the position as well as the yaw, pitch and roll of the camera using keys on their keyboard.  For instance, "a" will move the cube towards the left of the screen, "d" to the right, "w" towards the top, and "s" towards the bottom.  "e" and "q" will zoom in and out (respectively).  The camera rotation is controlled in a similar manner using the "j", "k", "l", "i,", "u", and "o" keys.  I began brainstorming and sketching some possibilities to improve this method of user interaction to be less keyboard based and more GUI based.  **Sketches will be added to this blog post when I get to a scanner and can post a digital version**

Next week, I plan on building a Woody character and adding him to the WebGL scene.  I'm also planning on solidifying my UI plans and implementing a user GUI to go along with the keyboard commands, as well as getting the orthographic views to work properly (currently when the user selects orthographic view, the cube disappears from the scene).  In addition, I will continue to read up on WebGL and Three.js in WebGL: Up and Running, Learning Three.js, and Professional WebGL Programming in the hopes that I will have a firm understanding of the technologies by the time I need to start implementing real algorithms.

As usual, the current state of my project can be viewed by clicking on the Senior Design Demo link in the sidebar to the right.