0
\$\begingroup\$

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:

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

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.

\$\endgroup\$

2 Answers 2

Reset to default
2
\$\begingroup\$

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.

\$\endgroup\$
5
  • \$\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\$ Commented Nov 1, 2013 at 13:32
  • \$\begingroup\$ I updated the answer. \$\endgroup\$ Commented Nov 1, 2013 at 13:47
  • \$\begingroup\$ @mathacka did that solve the problem ? \$\endgroup\$ Commented 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\$ Commented 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\$ Commented Nov 5, 2013 at 5:18
0
\$\begingroup\$

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.

\$\endgroup\$

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.