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