webGL : draw two separate rect with one buffer

Question

My problem is very simple, I build an array with the 2 square coord :

var vertices = [  -64, -32, 0.0,
               64, -32, 0.0, 
               64,  32, 0.0, 
              -64, -32, 0.0, 
              -64, 32, 0.0, 
               64, 32, 0.0 ];

vertices.push( -64 + 200, -32, 0.0,
                64 + 200, -32, 0.0, 
                64 + 200, 32, 0.0, 
               -64 + 200, -32, 0.0, 
               -64 + 200, 32, 0.0, 
                64 + 200, 32, 0.0 );

But the resulting drawing looks like :

Expected result should be 2 separate rect with black color between them. And I don't understand that behavior.

Are you by any chance rendering triangle *strips* or *fans* ? also shouldn't your second vertex set contain three vertices offset by `100` instead of only one? — LJᛃ, Aug 16 '15 at 23:41
I've edited the offset 100 to 200 and refresh the drawing. I use TRIANGLE_STRIP parameter to draw the objects. — , Aug 17 '15 at 09:35

score 1 · Accepted Answer · edited May 23 '17 at 12:06

When using triangle strips the vertices are implicitly indexed:

Draws a series of triangles (three-sided polygons) using vertices v0, v1, v2, then v2, v1, v3 (note the order), then v2, v3, v4, and so on. The ordering is to ensure that the triangles are all drawn with the same orientation so that the strip can correctly form part of a surface.

If one would want to have separate triangles using triangle strips, one would need to add "stop vertices" to generate a degenerated triangle.

Read this answer for an explanation(with images) of TRIANGLE_STRIP and TRIANGLE_FAN.

However triangle strips(and fans) can be quite cumbersome to work with if you're not planning to explicitly build strips or fans. This and looking at your vertex layout I'm assuming you just want to use plain TRIANGLES to render your geometry.

Thanks. To solve the problem, I use drawElements and TRIANGLES and I use different verticles and indices array like in this post [link](http://gamedev.stackexchange.com/a/10741) — , Aug 17 '15 at 17:49

webGL : draw two separate rect with one buffer

1 Answers1