Question

我在学习webGL和JavaScript时创建一个小型游戏引擎，使用Components为GameObjects添加功能。现在我有一个GameObject数组，我存储所有的GO，包括它们的组件和转换。现在我实现了3个组件： - KeyController：允许使用WASD移动GO位置 - 摄像头：存储摄像头配置。 - 渲染器：存储网格，纹理和要渲染的GO的着色器。

问题是：我可以从ASE文件加载网格及其解析器，但它适用于1个对象，如果我尝试加载多个文件，则前一个对象会丢失所有从文件加载的数据，因此缓冲区为空，无法渲染网格。

此图显示了来自GO数组的console.log，您可以在其中看到对象5和6中的渲染器组件，以及对象5中的对象类型为vertexNormalBuffer，vertexPositionBuffer，vertexTextureCoordBuffer，以及对象6是WebGLBuffer，应该是什么。

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;
}

这是了解我正在做什么的最相关的代码，但如果你想在运行中检查它：http://www.madowen.es/webGL/pruebas.html

据我所知，JavaScript的问题来自我加载文件的方式，但我不知道如何解决这个问题，有什么建议吗？

由于

Answer 1

您正在遇到异步计时问题。虽然将请求设置为同步不是一个好主意，因为它会挂起您的浏览器直到作业完成，您可以尝试添加＆amp;将request.open的第三个参数设置为＆＃34; false＆＃34;在你的loadmesh（）函数中，你的对象将被正确初始化（我在你的渲染调用中设置一个断点时看到你的立方体）。 HTH

webGL / JS - 加载文件

1 个答案: