Learning, learning, and learning more!

I've been hard at work trying to learn the basics of graphics! After having several meetings and talking to people who have previously worked with the data from Malta and Sicily, we have decided to go with WebGL instead of Unity. This is because in WebGL you have more control over what you can do, even though it is more complex to learn and understand. Well, I'm up for the challenge!

I have been working on these tutorials: http://learningwebgl.com/blog/?p=28

It took me a while to get acquainted with WebGL, and I couldn't figure out why my code wasn't displaying anything! I finally figured it out so now I'm working through the tutorials. There are a lot of confusing and new words but I'm doing my best to learn what they mean. The tutorials have a lot of new words so I have to read them 5-6 times before I understand them, but they are really specific and helping me understand.

I also just got this book in the mail yesterday: http://www.amazon.com/OpenGL-ES-2-0-Programming-Guide/dp/0321502795/

It is guided towards OpenGL development in phones, but Zoe recommended it because it explains the concepts very well. I will start reading it and doing the book tutorials this weekend.

In my online tutorials, we had to draw a triangle and a square. I decided to make a house! At first I was confused because I couldn't get it to draw more shapes, but then I figured out I needed to first create the shape inside the initialize shader method, and then I had to translate, bind the buffers, and draw the arrays (the points of the shapes are stored in a 3D array, see below).

Here is my house:

Pretty cool, right? It's awesome how I just set the z of the shape and it magically becomes 3D. Okay, it's not really magical but since I only worked with non-3D stuff before it's awesome!

Here's how the shapes are stored:


        squareVertexPositionBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
        vertices = [
            -1,  0.0,  0.0,
            -3,  0.0,  0.0,
            -1, -2.0,  0.0,
            -3, -2.0,  0.0
        ];
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
        squareVertexPositionBuffer.itemSize = 3;
        squareVertexPositionBuffer.numItems = 4;

As you can see you have to do a lot just to create the shape itself, and later in the drawing method you have to bind the buffers and draw arrays. It's pretty complex, and I have yet to figure it all out yet. But I'm learning a lot and hopefully in the next few weeks I will be able to work with real data!

On a side note, I applied to go on the Malta and Sicily trip for next quarter (last 4 weeks). I am really excited because it would help me so much with this project (I would be taking a graphics course too!).

I can't wait to become more comfortable with WebGL and start developing prototypes of the actual data :).

-Vanessa