Need to know the origin and coordinates for 2d texture and 2d/3d vertices in webgl

Question

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([
    0,1,2,2,0,3
]);


/* 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:

the texture I'm using is this:

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);

and:

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.enableVertexAttribArray(vertexAttribute);
gl.enableVertexAttribArray(textureAttribute);

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.

Answer 1

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

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

[Edit]

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.

Answer 2

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.