從外部文件webgl和HTML5加載世界

我想加載一個世界（種類）到webglfrom一個外部文件，它具有頂點位置和麪部位置的信息，但問題是包含數據的文件是非常大..（約100MB）。在我的方法中，我使用該文件作爲緩衝區，並在init緩衝區中有一個緩衝區，並且一次又一次被覆蓋。我正在做的是，我從文件中讀取對象的值並在畫布上繪製它，然後用場景中其他對象的數據覆蓋緩衝區並將其添加到場景中。總之我不保存頂點和麪部信息。動畫時，我正在讀取整個文件並重新繪製。它的工作正常，文件大小爲20MB。但對於大尺寸文件，我不能在動畫製作時使用高幀率。這看起來不太好。從外部文件webgl和HTML5加載世界

我的問題是我應該把所有的頂點信息放入緩衝區，然後繪製圖形並忘記文件...或者我的方法可以優化...？此外，如果你能提出任何其他方法那麼這將是非常有益的

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;

}

來源

2014-06-16 Shivam

我的問題是我應該將所有頂點信息放入緩衝區，然後繪製圖形並忘記文件...

是的，這是相當多的作品:)

來源

2014-06-16 05:13:53 pailhead

謝謝，3D，我已經把一切都放在緩衝區，其工作的罰款。 – Shivam

當你加載所有東西時，你想盡可能少地改變緩衝區，除非你正在做一些類似粒子的東西，你幾乎只需要加載一次你的東西。 – pailhead

是的，我相應地修改了代碼......我在初始化緩衝區時只將一次所有的值加載到緩衝區。 – Shivam

從外部文件webgl和HTML5加載世界

回答

相關問題