How to parse collada files for WebGL? (example included)

This is my current result:

incorrect collada model parsing

As you can see, models have a bunch of spaces. My guess is why this is happening, I should somehow include the <vcount> data in the <vcount> element, which should determine the number of vertices for each plane (?). Since WebGL can only draw trihedral polygons, this does not seem to work. If my assumption is still true, I would need to cut all the quadrangles into two triangles each.

I have already done a lot of research on collada analysis with WebGL, but almost every site has redirected me to several WebGL libraries that already have this functionality (so please don't do the same). I always start by writing all the basic functions in order to better understand how they work internally.

Here is my parsing function:

 function load_collada(gl, program, path) { var request = new XMLHttpRequest(), buffers = { vbo: gl.createBuffer(), nbo: gl.createBuffer(), ibo: gl.createBuffer(), aVertex: gl.getAttribLocation(program, "aVertex"), aNormal: gl.getAttribLocation(program, "aNormal") }, mesh, vertices, indicesList, normals = [], indices = []; request.open("GET", path, false); request.overrideMimeType("text/xml"); request.send(); mesh = request.responseXML.querySelector("mesh"); vertices = mesh.querySelectorAll("float_array")[0].textContent.split(" "); normals = mesh.querySelectorAll("float_array")[1].textContent.split(" "); indicesList = mesh.querySelectorAll("polylist p")[0].textContent.split(" "); for (i=0 ; i < indicesList.length; i+=2) { indices.push(indicesList[i]); } buffers.vbo.count = parseInt(mesh.querySelectorAll("float_array")[0].getAttribute("count"), 10); buffers.nbo.count = normals.length; buffers.ibo.count = indices.length; gl.bindBuffer(gl.ARRAY_BUFFER, buffers.vbo); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); gl.vertexAttribPointer(buffers.aVertex, 3, gl.FLOAT, true, 0, 0); gl.enableVertexAttribArray(buffers.aVertex); gl.bindBuffer(gl.ARRAY_BUFFER, buffers.nbo); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(normals), gl.STATIC_DRAW); gl.vertexAttribPointer(buffers.aNormal, 3, gl.FLOAT, true, 0, 0); gl.enableVertexAttribArray(buffers.aNormal); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers.ibo); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW); return buffers; } 

I'm also not quite sure why normals have indexes, but I ignore them by adding only every second value from indicesList .

My drawing program is just gl.drawElements(gl.TRIANGLE_STRIP, program.models[i].ibo.count, gl.UNSIGNED_SHORT, 0); .

I would really appreciate any solutions or recommendations on this issue.


Update:. After reviewing this parser again, I noticed that the syntax function above (even with correctly exported models) will not display normals correctly. You will need to change the data so that the vertices are defined on the face, and not on a unique position.

+6
source share
1 answer

Potential solution found. Before exporting your model to a blender, you need to add the decimate modifier. Check triangulate and set the ratio to 0.9900 (with one click of the left arrow).

Edit: Actually there is a triangulate modifier, so use this option.

So, in the end, your grid sphere will look something like this:

enter image description here

+1
source

All Articles