webGL/JS - load files

Question

I'm creating a little Game Engine while learning webGL and JavaScript, using Components to add functionalities to the GameObjects. Right now I have a GameObject array where I store all the GO, with their components and transform. Right now I have 3 components implemented: - KeyController: allows to move the GO position with WASD - Camera: stores the camera configuration. - Renderer: stores mesh, texture and the shader of the GO to render.

THE PROBLEM IS: I can load a mesh from an ASE file, with its parser, but it works for 1 object, if I try to load more than 1 file, the previous object loses all the data loaded from the file, so the buffers are empty and can't render the meshes.

This image shows the console.log from the GO array where you can see the renderer component from the objects 5 and 6, and the vertexNormalBuffer, vertexPositionBuffer, vertexTextureCoordBuffer, that in the object 5 are Object type, and at the object 6 are WebGLBuffer, what are supposed to be.

function webGLStart() {
    ...
    for (var i = 3; i < 7; i++){
        objects[i] = new GameObject("crate",[-5+i*3,0.0,-100]);
        var ren1 = new Renderer("box.ase","crate.gif");
        objects[i].addComponent("renderer", ren1);
    }

    ...

    initShaders();
    initTextures();
    initBuffers();

    ...     
}
function initBuffers(){
    for (var i in objects){
        if (objects[i].components.renderer != null){
            objects[i].components.renderer.loadMesh();
        }
    }
}
Renderer.prototype.loadMesh = function() {
    obj = this;
    var format = this.pathMesh.split('.')[1];
    var request = new XMLHttpRequest();
    request.open("GET", this.pathMesh);
    request.onreadystatechange = function () {
        if (request.readyState == 4) {
            var options = {};
            options.flipAxis = true;
            obj.initBuffer(Parser.parsers[format].parse(request.responseText,options));
            return obj;
        }
    }
    request.send(null);
}
Renderer.prototype.initBuffer = function(mesh){     
    this.vertexPositionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexPositionBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, mesh.vertices, gl.STATIC_DRAW);
    this.vertexPositionBuffer.itemSize = 3;
    this.vertexPositionBuffer.numItems = mesh.vertices.length/3;                

    this.vertexNormalBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexNormalBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, mesh.normals, gl.STATIC_DRAW);
    this.vertexNormalBuffer.itemSize = 3;
    this.vertexNormalBuffer.numItems = mesh.normals.length/3;

    this.vertexTextureCoordBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexTextureCoordBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, mesh.coords, gl.STATIC_DRAW);
    this.vertexTextureCoordBuffer.itemSize = 2;
    this.vertexTextureCoordBuffer.numItems =  mesh.coords.length/2;
}

This is the most relevant code to understand what I'm doing, but if you want to check it on the run: http://www.madowen.es/webGL/pruebas.html

As far as I know from JavaScript the problem comes from the way I load the files, but I dont know how to fix that, any advice?

Thanks

Answer 1

Your are hitting an async timing issue. Although it is not a good idea to set your request as synchronous because it will hang your browser until the job is done, you can try to add & set the third parameter of request.open to "false" in your loadmesh() function, and your objects will get initialized properly (I saw your cube when setting a breakpoint on your render call). HTH