Long story short, I know my coordinates are off and I believe my indices might be off.

I'm trying to render a simple 2d rectangle with a texture in webgl

here's the code I have for the vbo/ibo:

rectVertices.vertices = new Float32Array(
    -0.5, -0.5,  // Vertice 1, bottom /  left
     0.0,  0.0,  // UV 1

    -0.5,  0.5,  // Vertice 2,    top /  left
     0.0,  1.0,  // UV 2

     0.5,  0.5,  // Vertice 3,    top / right
     1.0,  1.0,  // UV 3

     0.5, -0.5,  // Vertice 4, bottom / right
     1.0,  0.0,  // UV 4

rectVertices.indices = new Int16Array([

/* I'm assuming the vertices go like this

(-0.5, 0.5) ------ ( 0.5, 0.5)
            |    |
            |    |
(-0.5,-0.5) ------ ( 0.5,-0.5)

with the origin in the middle

and the texture coordinates go like this:

( 0.0, 1.0) ------ ( 1.0, 1.0)
            |    |
            |    |
( 0.0, 0.0) ------ ( 1.0, 0.0)

so as you can see I'm all messed up.

I'm also using:

gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);


Here's the output of the program:

enter image description here

the texture I'm using is this:

enter image description here

So, I guess I need to know the origins, but the triangle strip looks way off.

I am doing this as well:

// create VBO and IBO    
vbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
gl.bufferData(gl.ARRAY_BUFFER, triangleVertices.vertices, gl.STATIC_DRAW);

ibo = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, triangleVertices.indices, gl.STATIC_DRAW);


gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo);

gl.vertexAttribPointer(vertexAttribute ,2, gl.FLOAT, false,FLOAT*2,FLOAT*0); // position
gl.vertexAttribPointer(textureAttribute,2, gl.FLOAT ,false,FLOAT*2,FLOAT*2); // texture

gl.drawElements(gl.TRIANGLE_STRIP, 6, gl.UNSIGNED_SHORT, 0);

It almost seems as though the Vertices and the UV coordinates are getting mixed up.


2 Answers 2


I think you should start your indices from 0 so it should become:

rectVertices.indices = new Int16Array([ 0,1,2,0,2,3  ]);


It seems you are using triangle strip rather than triangles. The indices you are using are for triangles, which I think is the usual thing to do unless you have some performance issues. Don't use triangle strips as they are meant to be some kind of mesh compression.

So you need to change the draw call from GL_TRIANGLE_STRIP to GL_TRIANGLES.

In case you need to use triangles strips check how they should be connected here.

  • \$\begingroup\$ That's a good idea, but I'm getting a funky picture, let me edit my post and you can take a look. \$\endgroup\$ Nov 1, 2013 at 13:32
  • \$\begingroup\$ I updated the answer. \$\endgroup\$
    – concept3d
    Nov 1, 2013 at 13:47
  • \$\begingroup\$ @mathacka did that solve the problem ? \$\endgroup\$
    – concept3d
    Nov 1, 2013 at 20:29
  • \$\begingroup\$ no, I think I'm reading the vertices wrong, I was able to get it working when I put all the vertices in front, with the texture coordinates after, I don't know what I'm doing wrong to interleave them \$\endgroup\$ Nov 5, 2013 at 4:44
  • \$\begingroup\$ well, I dont know everything about your code but these indices [0,1,2,0,2,3] are clearly intended for triangles draw call and not triange strips. en.wikipedia.org/wiki/Triangle_strip \$\endgroup\$
    – concept3d
    Nov 5, 2013 at 5:18

I think you can think of indices as how the vertices in order of as drawing goes. I got stuck on that for a bit because that lost me for a while. If you can imagine taking out a piece of paper, imagine the dots as vertices and drawing a rectangle without lifting up the pencil back to it's original vertex. You've just encountered how indices draw to the graphics card.

Example would be this:

Vertex 01: -1.0f, 1.0f, 0.0f
VERTEX 2: 1.0f 1.0f, 0.0f;
vertex 3: -1.0f, -1.0f, 0.0f;
vertex 4: 1.0f, -1.0f, 0.0f;

Indices : 0,1,2,3

If you have graph paper or something similar this could help a lot. So you can easily see the indices were drawn from the vertice 0 all the way to the vertex 4.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .