Question

我正在尝试将一个世界（某种......）加载到webglfrom一个外部文件中，该文件包含顶点位置和面部位置的信息，但问题是包含数据的文件非常大..（约100mb）。在我的方法中，我使用文件作为缓冲区，并在init缓冲区中有一个缓冲区，一次又一次地重写。我正在做的是，我正在从文件中读取对象的值并在画布上绘制它，然后用我场景中其他对象的数据覆盖缓冲区并将其添加到场景中。总之，我没有保存顶点和面部信息。动画时我正在再次阅读整个文件并重新绘制。它的工作正常，文件大小为20mb。但是对于大尺寸的文件，我不能在动画时使用高帧率。哪个看起来不太好。

我的问题是我应该将所有顶点信息放入缓冲区然后绘制图形并忘记文件......或者我的方法可以优化......？此外，如果您可以建议任何其他方法，那么它将非常有帮助

    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) {
}

}

初始缓冲区的代码

    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

我的问题是我应该将所有顶点信息放入缓冲区和然后绘制图形并忘记文件...

是的，这几乎就是3d的工作方式:)。

从外部文件webgl和HTML5加载世界

1 个答案: