Progress Throughout the Year

CREU: Final Report

When I began this research project, I had little experience with graphics. Throughout the year I have learned and experienced a great amount and have been able to work with Amanda to produce a nice website and cistern interaction program.

At first, it was a struggle to learn a completely new language that was very different from C and Java that I was used to. I spent several weeks going through the WebGL tutorials on learningwebgl.com. Once I felt more comfortable with the language, I was creating my own shapes and objects for practice before I started working with the cistern. Below are some examples of my first programs using WebGL. I practiced with shapes and texture mapping.

Finally I was ready to move on to understanding and parsing obj files. I had to figure a lot of this out on my own, and had a lot of difficulties figuring out how to map the vertices to indices to the texture coordinates. See the images below of my first attempts of loading the cistern:

At this point I had implemented an interactive camera, so the user could navigate through the cistern. My first implementation of the interactive camera was similar to a person walking around the cistern. I realized a better implementation would be the keys for rotating and the page up and down keys for zooming in and out. I adjusted my program to make the interactive camera more user friendly. Having fixed the interactive camera, I resumed my work on the obj parser. After I had the shape of the cistern was displaying correctly, my next step was incorporating the water the the base of the cistern together, and fixing the texture coordinates.

Cistern base and water separate, but loading:

Base and water together:

My last step was to add on extra features. Some of the features I added include lighting, updated textures, and increasing the speed of the program. I added functionality for the program to load all the cisterns at the start of the program, to allow for the user to easily scroll over the different cistern models and be able able to select between them without waiting for it to load. The lighting gave the cistern a more realistic look. Later, I incorporated the coordinates of Malta and displayed the locations of the cisterns that we had data for with different colored markers.

Lighting, textures fixed:

While I was working on all of this, Amanda had been building our website with Omeka. My next step has been to develop an Omeka plugin to be able to have the cistern program on the website directly. Right now I'm still learning the basics of PHP and Omeka but I hope to have the start of my plugin working by the end of the quarter. For now, my program is available at the following link:

http://users.csc.calpoly.edu/~zwood/ICEX/Cistern/shading.html. Below are some pictures of my final program: