Results 1 to 2 of 2

Thread: GL_TRIANGLES Vertices problem when attempting to draw quads

  1. #1
    Junior Member
    Join Date
    Jul 2011
    Posts
    2

    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

    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();
    }
    else
    {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.open("GET","floorPlan.xml",false);
    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML;
    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!

    Kris.

  2. #2
    Junior Member
    Join Date
    Jul 2011
    Posts
    2

    Re: GL_TRIANGLES Vertices problem when attempting to draw qu

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

Similar Threads

  1. Draw arc between two vertices
    By enriquepr in forum OpenGL ES 2X - for programmable 3D graphics pipelines
    Replies: 2
    Last Post: 01-31-2013, 03:25 AM
  2. Problem using GL_TRIANGLES instead of GL_QUADS
    By srobles in forum OpenGL ES general technical discussions
    Replies: 4
    Last Post: 03-31-2008, 04:19 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •