GL_TRIANGLES Vertices problem when attempting to draw quads

Hey Everyone,

I am new to webGL and I think I am doing something dumb, but can’t figure it out :slight_smile:

I have written some code to read in an XML file and draw the outline of a building which consists of walls which are simply defined as two points (x1, y1) (x2 , y2) and add them to an array of vertices:

function readXMLWalls(){

    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    var x=xmlDoc.getElementsByTagName("wall");
    var i;
    var n = 1;
    for (i=0;i<x.length;i=i+1)

        vertices[(i*12)] = (x[i].getElementsByTagName("y1")[0].childNodes[0].nodeValue)*n;
        vertices[(i*12)+1] = (x[i].getElementsByTagName("x1")[0].childNodes[0].nodeValue)*n;
        vertices[(i*12)+2] = 0;
        vertices[(i*12)+3] = (x[i].getElementsByTagName("y2")[0].childNodes[0].nodeValue)*n;
        vertices[(i*12)+4] = (x[i].getElementsByTagName("x2")[0].childNodes[0].nodeValue)*n;
        vertices[(i*12)+5] = 0;
        vertices[(i*12)+6] = (x[i].getElementsByTagName("y1")[0].childNodes[0].nodeValue)*n;
        vertices[(i*12)+7] = (x[i].getElementsByTagName("x1")[0].childNodes[0].nodeValue)*n;
        vertices[(i*12)+8] = 3;
        vertices[(i*12)+9] = (x[i].getElementsByTagName("y2")[0].childNodes[0].nodeValue)*n;
        vertices[(i*12)+10] = (x[i].getElementsByTagName("x2")[0].childNodes[0].nodeValue)*n;
        vertices[(i*12)+11] = 3;



I can add the vertices and colour them and draw them with no trouble when I use:

gl.drawArrays(gl.LINES, 0, walls3DVertexPositionBuffer.numItems);
//where walls3DVertexPositionBuffer.numItems = vertices3D.length/3;

As this gives me two parallel sets of lines representing each wall. But when I change this to attempt to draw quads instead by using:

gl.drawArrays(gl.TRIANGLE_STRIP, 0, walls3DVertexPositionBuffer.numItems);

they don’t draw correctly. The vertices seem to overlap, i.e. one triangle begins or ends where another “wall” begins or ends.

Nothing else in the code changes, so I cannot figure out what is going wrong. The number of points per vertex stays the same, so if gl.TRIANGLE_STRIP works like it is supposed to then it should be using the last two points of the previous triangle. I have re-written the code and just added one quad (two triangles) as follows:

        vertices3D[(i*12)] = 1;y
        vertices3D[(i*12)+1] = 1;
        vertices3D[(i*12)+2] = 0;
        vertices3D[(i*12)+3] = -1;
        vertices3D[(i*12)+4] = 1;
        vertices3D[(i*12)+5] = 0;
        vertices3D[(i*12)+6] = 1;
        vertices3D[(i*12)+7] = 1;
        vertices3D[(i*12)+8] = 3;
        vertices3D[(i*12)+9] = -1;
        vertices3D[(i*12)+10] = 1;
        vertices3D[(i*12)+11] = 3;

And this works fine.

I would assume if there was something wrong with the points I am reading in (i.e one point is missing and thus causing an (x1, y1) point to connect with an (x1, y1) of the next wall) I could not draw them as lines successfully, so that cannot be the problem. It has to be something to do with the way webGL is drawing the quads and wrapping the triangles. But for the life of me I cannot figure it out.

Any help is much appreciated!


Sigh…figured out my mistake. Misread the tutorial I was looking at. I just needed to use gl.TRIANGLES and define my vertices as follows:

        vertices3D[(i*18)] = (x[i].getElementsByTagName("y1")[0].childNodes[0].nodeValue)*n;
        vertices3D[(i*18)+1] = (x[i].getElementsByTagName("x1")[0].childNodes[0].nodeValue)*n;
        vertices3D[(i*18)+2] = 0;
        vertices3D[(i*18)+3] = (x[i].getElementsByTagName("y2")[0].childNodes[0].nodeValue)*n;
        vertices3D[(i*18)+4] = (x[i].getElementsByTagName("x2")[0].childNodes[0].nodeValue)*n;
        vertices3D[(i*18)+5] = 0;
        vertices3D[(i*18)+6] = (x[i].getElementsByTagName("y1")[0].childNodes[0].nodeValue)*n;
        vertices3D[(i*18)+7] = (x[i].getElementsByTagName("x1")[0].childNodes[0].nodeValue)*n;
        vertices3D[(i*18)+8] = 3;
        vertices3D[(i*18)+9] = (x[i].getElementsByTagName("y2")[0].childNodes[0].nodeValue)*n;
        vertices3D[(i*18)+10] = (x[i].getElementsByTagName("x2")[0].childNodes[0].nodeValue)*n;
        vertices3D[(i*18)+11] = 0;
        vertices3D[(i*18)+12] = (x[i].getElementsByTagName("y1")[0].childNodes[0].nodeValue)*n;
        vertices3D[(i*18)+13] = (x[i].getElementsByTagName("x1")[0].childNodes[0].nodeValue)*n;
        vertices3D[(i*18)+14] = 3;
        vertices3D[(i*18)+15] = (x[i].getElementsByTagName("y2")[0].childNodes[0].nodeValue)*n;
        vertices3D[(i*18)+16] = (x[i].getElementsByTagName("x2")[0].childNodes[0].nodeValue)*n;
        vertices3D[(i*18)+17] = 3;