Howdy guys, I’ve been following the tutorials on learningwebgl.com and I’ve run into a snag with my current project.
I am trying to render a point cloud from a text file. I can parse the file and build an array of vertices. Yet there seems to be an issue with loading the array into the buffer.
Because of this, I get an out of range error when trying to draw the scene.
My parsing code:
function handleFile(responseText)
{
var splitByLine = responseText.split("
");
numVerts=splitByLine.length; // Array of lines, each line represents a point
for(var j = 0; j<splitByLine.length;j++)
{
var tmpArray = new Array();
tmpArray = splitByLine[j].split(" ");
vertexLocations.push(tmpArray[0],tmpArray[1],tmpArray[2]);
}
}
My init Buffer code:
function initBuffers()
{
vertexPosBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,vertexPosBuffer);
gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(vertexLocations),gl.STATIC_DRAW);
vertexPosBuffer.itemSize=3;
vertexPosBuffer.numVerts= numVerts;
}
My draw scene code:
function drawScene()
{
gl.viewport(0,0,gl.viewportWidth,gl.viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
mat4.perspective(45,gl.viewportWidth/gl.viewportHeight,0.1,100.0,pMatrix);
mat4.identity(mvMatrix);
mat4.translate(mvMatrix,[0,0,z]);
mat4.rotate(mvMatrix,degToRad(xRot),[1,0,0]);
mat4.rotate(mvMatrix,degToRad(yRot),[0,1,0]);
gl.bindBuffer(gl.ARRAY_BUFFER,vertexPosBuffer)
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,vertexPosBuffer.itemSize,gl.FLOAT,false,0,0);
setMatrixUniforms();
gl.drawArrays(gl.POINTS,0, numVerts);
}
External to this code is where I declare my global variables:
var vertexLocations = new Array();
var numVerts;
var verts;
Any help would be appreciated in figuring out the issue. When I look at the buffer with webgl inspector, it says that the array of vertex data that I am passing it, is null. Yet when I step through the code I can see that the array contains the proper data.