Loading A world from external file webgl and HTML5 - three.js

Question

I am trying to load a world(kind of..) into webglfrom an external file which has information of vertex position and face positions but the problem is the file containing the data is very large..(about 100mb). In my approach I am using the file as buffer and have a single buffer in the init buffer which is over-written again and again. What I am doing is, I am reading the values for an object from the file and drawing it on the canvas, then over-writing the buffer with the data of other object in my scene and adding it to the scene. In short I am not saving the vertex and face information. While animating I am reading the entire file again and re-drawing. Its working fine with a file size of 20mb. but for file of large size I am not able to use high frame rate while animating. Which is not looking good.
My question is should I put all the vertex information into buffer and then draw the graphics and forget about the file…or my approach can be optimized…? Also if you can suggest any other method then it would be really helpful
try {
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
// read from filename
var reader = new FileReader();
reader.onload = function (e) {
var count=0;
var lastline=0;
var i;
var j;
var text = reader.result;
var lines = text.split("\r\n");
while(lastline<lines.length)
{
var vertices = [];
var VertexIndices = [];
var vertexNormals=[];
/////Position of the objects
for (i = lastline; i < lines.length; i++) {
if (lines[i] == "MESH_FACE_POSITION_LIST {") {
break;
}
}
for (j = i + 1; j < lines.length; j++) {
if (lines[j] == "}") {
break;
}
else {
var currentvertices = lines[j].split(" ");
for (var k = 0; k < currentvertices.length; k++) {
VertexIndices.push(parseInt(currentvertices[k]));//Check for ","
}
}
}
noOfVerticesForTriangles = VertexIndices.length;
for (i = j; i < lines.length; i++) {
if (lines[i] == "MODEL_POSITION_LIST {") {
break;
}
}
for (j = i + 1; j < lines.length; j++) {
if (lines[j] == "}") {
break;
}
else {
var currentvertices = lines[j].split(" ");
for (var k = 0; k < currentvertices.length; k++) {
vertices.push(parseFloat(currentvertices[k]));//Check for ","
}
}
}
noOfVertices = vertices.length / 3;
lastline=j;
//this is where i am calling the function to draw the graphics after reading the data for an object
initBuffers(vertices,VertexIndices);
drawScene();
}
}
reader.readAsText(file);
}
catch (e) {
}
}
Code for init buffer
function initBuffers(vertices,VertexIndices) {
vertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexPositionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
vertexPositionBuffer.itemSize = 3;
vertexPositionBuffer.numItems = noOfVertices;
vertexIndexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, vertexIndexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(VertexIndices), gl.STATIC_DRAW);
vertexIndexBuffer.itemSize = 1;
vertexIndexBuffer.numItems = noOfVerticesForTriangles;
}

Answer 1

My question is should I put all the vertex information into buffer and
then draw the graphics and forget about the file…
Yes, this is pretty much how 3d works :)