Just One More Bug...

We have some success! At first there were issues trying to get the "rock" texture to display (bright green part below). Zoe helped me realize I had the wrong parameter for the vertexAttribPointer, where I was supposed to pass three for the x, y, z but I was passing the number of vertices instead.

I was still struggling until I realized the vec3.create([x,y,z]) had the brackets. Below are some different shots of the cistern with the lighting.

Per Vertex Shading

Per Fragment Shading

Trying to do some debugging. These are just the normals. I'm not really sure what is wrong here!

Small Progress

Good news is I got it to display! Bad news is it is still not quite right. I have no errors, but I have 274 warnings and only the water displays correctly.

Looks fun, right? It is pretty much something wrong with the vertexAttribPointer, so once that's fixed the other errors should clear up. Here is what gets displayed:

I spent all weekend trying to fix it. At least it's displaying now, that gives me a little hope :). I'm aiming to get it working in the next week or two.

On a side note, here is how I calculated the normals for the shading:

            v1 = vec3.create(((x[vals[1]-1])-(x[vals[3]-1])),

               ((y[vals[1]-1])-(z[vals[3]-1])),

               ((z[vals[1]-1])-(z[vals[3]-1])));

            v2 = vec3.create(((x[vals[2]-1])-(x[vals[3]-1])),

               ((y[vals[2]-1])-(z[vals[3]-1])),

               ((z[vals[2]-1])-(z[vals[3]-1])));

            v1 = vec3.normalize(v1);

            v2 = vec3.normalize(v2);

            vector = vec3.cross(v1, v2);

            rockVertexNormals.push(vector[0]);

            rockVertexNormals.push(vector[1]);

            rockVertexNormals.push(vector[2]);

-Vanessa

Example Code to Scan in the Vertices

Since I haven't had anything cool to post recently due to the delays in the lighting (still working on it!!), I figured I would post the code that scans in the vertices. So, this function is called handleLoadedWorld and takes data as a parameter. Data is the scanned file with the vertices and texture coordinates. As you can see we need to split the data into an array of "lines" and split it at each new line.

We have vertexCount to keep track of the number of vertices, vertexPositions to keep track of each vertex, and vertexTextureCoords to keep track of the texture values.

Each set of vertices is scanned into x, y, and z or textureX and textureY depending on if it is a point or a texture coordinate.

    function handleLoadedWorld(data) {
        var lines = data.split("\n");
        var vertexCount = 0;
        var vertexPositions = [];
        var vertexTextureCoords = [];
        var x = [];
        var y = [];
        var z = [];
        var textureX = [];
        var textureY = [];
        var index = 0;
        var textureIndex = 0;

        for (var i in lines) {
            var vals = lines[i].replace(/^\s+/, "").split(/\s+/);
            if (vals.length == 4 && vals[0] == "v") {
               // Scan vertices
               x[index] = parseFloat(vals[1]);
               y[index] = parseFloat(vals[2]);
               z[index] = parseFloat(vals[3]);

               index += 1;
            }
            else if (vals.length == 3 && vals[0] == "vt") {
               // Scan texture coords
               textureX[textureIndex] = vals[1];
               textureY[textureIndex] = vals[2];

               textureIndex += 1;
            }
            else if (vals.length == 4 && vals[0] == "f") {
               // It is a line describing a vertex; get X, Y and Z first
               vertexPositions.push(parseFloat(x[vals[1]-1]));
               vertexPositions.push(parseFloat(y[vals[1]-1]));
               vertexPositions.push(parseFloat(z[vals[1]-1]));

               vertexTextureCoords.push(parseFloat(textureX[vertexCount]));
               vertexTextureCoords.push(parseFloat(textureY[vertexCount]));

               vertexPositions.push(parseFloat(x[vals[2]-1]));
               vertexPositions.push(parseFloat(y[vals[2]-1]));
               vertexPositions.push(parseFloat(z[vals[2]-1]));

               vertexTextureCoords.push(parseFloat(textureX[vertexCount+1]));
               vertexTextureCoords.push(parseFloat(textureY[vertexCount+1]));

               vertexPositions.push(parseFloat(x[vals[3]-1]));
               vertexPositions.push(parseFloat(y[vals[3]-1]));
               vertexPositions.push(parseFloat(z[vals[3]-1]));

               vertexTextureCoords.push(parseFloat(textureX[vertexCount+2]));
               vertexTextureCoords.push(parseFloat(textureY[vertexCount+2]));

               vertexCount += 3;
            }
        }

The above code will first define x, y, z, and textureX and textureY. Then, it will go through as the vertices are mapped together and push them onto the vertexPositions array, and similarly the textures are mapped together on the vertexTextureCoords array. Continuing from where we left off...

        worldVertexPositionBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, worldVertexPositionBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexPositions), gl.STATIC_DRAW);
        worldVertexPositionBuffer.itemSize = 3;
        worldVertexPositionBuffer.numItems = vertexCount;

        worldVertexTextureCoordBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, worldVertexTextureCoordBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexTextureCoords), gl.STATIC_DRAW);
        worldVertexTextureCoordBuffer.itemSize = 2;
        worldVertexTextureCoordBuffer.numItems = vertexCount;

    }


Then we create the vertex buffer and bind the buffer and add the data we just scanned in. We also specify how "big" each vertex is (which is 3 for x, y, and z) and define the vertexCount. We do the same for the texture buffer, but the texture size is only two this time. Hopefully my explanation helps and you enjoyed seeing some example code :).

 -Vanessa

We have a start on the site!

Hello!

It's been a while since I've updated you with my progress. I've been doing a lot of reading on Malta's history, culture, water availability, climate change threats, etc...all to prepare me for creating the teaching modules on the website. It's been really interesting and fun to learn about. I'd say I'm on my way to becoming a Malta expert.

As far as the website goes--there's progress! We are hoping to have our own virtual server to run our Omeka site soon, but in the meantime, the test server is working just fine. We are still in the process of choosing a finalized logo and design concept for the site, after having a few dozen Graphic Design students submit suggestions. I created a survey for other members of our ICEX team to help decide, but no conclusions have been made yet. Until we decide on something, I have been working on a temporary design so our website doesn't look too "under construction." Here's a screenshot of the home page:

So far, I've created some different pages to break up the site. I wrote and published the "About The Project" page, which has sections on the Water Ways project, ICEX program, the People involved, and Funding information. 

I've created the pages for Our Research and Teaching Resources, but haven't yet written/compiled the information that will go into these sections of the website.

The website theme I'm using was originally created by someone else for Omeka, and I've been trying to go into the code and mess around to see what I can do. It's definitely a learning experience and I'm looking forward to see what I can turn the website into.

Next steps will be to choose a logo for Water Ways and decide how we want users to navigate through the website. I'll also start working on a teaching module. I'll keep you posted--my New Year's Resolution is to update more often.

-Amanda

Slow Progress, But an Updated User Interface!

I have been struggling to add the shading. Each way I try it, the cistern stops displaying. I need to read some more tutorials to figure out what I'm doing wrong.

Onto the good news! I changed the way the user interacts with the cistern. I saved both ways, but I like the new way much better. The old way was like you were a person walking around the cistern. In this way, it was difficult to get a side view of the cistern and then navigate to get a top view. The arrow keys were walking in a direction and the page up/down were looking up and down. To fix this, I changed it so the cistern rotates instead of "walking." You can use the arrow keys to rotate the cistern and the page up/down keys to zoom in/out. I am going to figure out if I can get a link so anyone reading this can test out the program!

-Vanessa

It's Beginning to Look a Lot Like Cisterns!

Happy holidays! I have made some good progress. I will start from where I left off on my last post, and work my way up to where I am now.

The reason the outlines of the cisterns looked so strange last time was because I didn't realize how the vertices were laid out. In the file, they look like this (expect they are 70,000 lines long instead of 3):

v 0.5 1.5 2.5

vt 0.5 1.5

f 1 3 4

The v corresponds to a vertex, vt to a texture vertex, and f maps the vertices to each other. So in this case, vertices 1, 3, and 4 would form a triangle. Pretty cool! Well, before this I just thought it was a file of points that were supposed to be connected, which is why it came out funny. So, once I understood this, I went to work. I had a lot of problems getting it to display. WebGL is very picky and if you have one thing wrong it just doesn't do anything. There is no complier telling you you forgot a semi colon! My images came out like this:

That's not right! Well, Zoe helped me realize I had been scanning each x, y, z each separately as a point instead of mapping them together as a vertex. Instead of one array I now had an x[], y[], and z[]. Then I pushed them into the vertex positions array. Then I created a buffer and passed the vertices. And ta-da! It worked:

Top View

Side View

Water Texture

Bottom View

So, I have my first outline of the cistern. Nothing fancy yet, but it's a start. I decided my next task was to add water. This was difficult since I had a small bug that took me forever to find. It was hard for me to figure out how to have two different textures since I could only get one to display at a time. Eventually, I figured out how to get it to display. There was a lot of moving things around, changing the code, and especially looking at tutorials. One thing I realized is that order is very important, and once I got everything in the right order it worked. At first I struggled and it would only display one or the other:

Water, Top View 

Water, Side View

Working! Water with the cistern (and two different rock textures):

Inside View

I am looking into some tutorials on shading/lighting next to make it look more realistic. That's all folks!

-Vanessa

Reading Vertices From a File and Some View Manipulation & Textures!

Okay, so my task for this week was to scan in vertices from a file and create a representation of that object. In the end, I need to be able to scan in a list of vertices of triangles and then create a model based on these. We're talking 70,000+ vertices here!

So, I used this tutorial: http://learningwebgl.com/blog/?p=1067

Which as you can see creates a little world that you can move around in if you follow the link and view the tutorial. I made my own file, vertices.txt, which contains the vertices of the pyramid (represented by 3 triangles, each represented by X, Y, and Z coordinates). I then took a Google image of water and instead of loading their "mudTexture" I changed it to "waterTexture."

Screen shots: 

In the pictures on the left you can see these are the same view on the X-Y but change the Z coordinate. The page up and page down keys allow the viewpoint to change on the Z axis.

This is similar to just looking up and down, but not turning your head left and right.

Here, I pressed the down arrow and moved backwards. The interaction of the "camera" is kind of like moving around in a video game!

Here is an up close view of the pyramid!








Attack of the Scruffdogs (my dog)!!

I've been messing around with the files with the vertices... here's what happens when I just draw the vertices:

Case Cutietta Vertices

Convento Dei Cappuccini Vertices

Mdina Cathdral Sacristine Vertices

I don't know what the actual cisterns look like so I'm not sure if this is representative of what they really are, but it is after all drawing the vertices in the file. Note: they all have the water gif as a texture, that is unrelated to the cisterns!

That's it for now, stay tuned for more posts!!

-Vanessa