Colour individual triangles in a sf::TriangleStrip

[BottleNeck]

Background:
I'm trying to make a falling sand simulation game which requires displaying a very large number of objects at once. I was drawing each "grain" of sand using a sf::RectangleShape, however for larger grids (e.g 500x500) this was far too many draw calls.

I'm currently trying to implement drawing of the sand using a sf::VertexArray. If I use sf::Triangle primitives, I'll have 6 vertices per grain, which is a lot for larger grid sizes.

Now I'm attempting to use the sf::TriangleStrip primitive to display the entire grid, using degenerate triangles to transition between rows. This reduces the number of vertices required by about two thirds, however now I have a problem with colouring the grains.

Question:
When using a sf::VertexArray to display a sf::TriangleStrip, is it possible to colour individual triangles within the strip different colours? Currently, if I want to colour two adjacent triangles in two different colours, the colours are interpolated between the vertices, forming a gradient. I want to be able to apply different colours to triangles without any gradient.

I've attached an image to show what I'm currently getting. I've drawn over the approximate locations of the triangles of the strip. I'd like the middle two triangles to be completely black.

[eXpl0it3r]

It's not possible with normal vertex coloring.

Not sure if there's some way with a shader, but that is usually the answer to anything you want to achieve graphics-wise.
In theory you could also use some texturing, mapping the triangle to a single color pixel. Not sure if that performs and won't cause some fun texture bleeding.

[Hapax]

You can do this with a triangle strip but it requires duplicate vertices and, if you're doing this often, it may be better to just use separate triangles.

e.g.
I'll assume you have 8 vertices in the example and they are bottom0, top0, bottom1, top1, bottom2, top2, bottom3, top3.

You can use (12 vertices) bottom0, top0, bottom1, top1, top1, bottom1, top2, bottom2, bottom2, top3, bottom3.

This allows change of colour over the doubled vertices.
Note that this works because the doubled vertex as well as the previous (or next) vertex create an infinitely thin triangle so those two triangles (where the colour transitions happen) are invisible.

A possibly simpler version
If you need each triangle pair to be the same direction then you can just duplicate the 2 vertices that represent the edge.
This works because, again, you're "drawing invisible lines".

That would be (12 vertices) bottom0, top0, bottom1, top1, bottom1, top1, bottom2, top2, bottom2, top2, bottom3, top3.
This could be more simple as you're still following the same bottom-to-top and left-to-right formula and you it looks a bit clearer in the code as you're effectively separating the vertices into groups of 4 (per quad).

Here's an image of all three of those examples with your original being the top one (number 1):

(click to show/hide)

sf::VertexArray triangleStrip1{};
triangleStrip1.setPrimitiveType(sf::PrimitiveType::TriangleStrip);
triangleStrip1.resize(8u);

triangleStrip1[0u].position = { width * 0.f, bottom };
triangleStrip1[0u].color = colorA;

triangleStrip1[1u].position = { width * 0.f, top };
triangleStrip1[1u].color = colorA;

triangleStrip1[2u].position = { width * 1.f, bottom };
triangleStrip1[2u].color = colorA;

triangleStrip1[3u].position = { width * 1.f, top };
triangleStrip1[3u].color = colorA;

triangleStrip1[4u].position = { width * 2.f, bottom };
triangleStrip1[4u].color = colorB;

triangleStrip1[5u].position = { width * 2.f, top };
triangleStrip1[5u].color = colorB;

triangleStrip1[6u].position = { width * 3.f, bottom };
triangleStrip1[6u].color = colorA;

triangleStrip1[7u].position = { width * 3.f, top };
triangleStrip1[7u].color = colorA;



sf::VertexArray triangleStrip2{};
triangleStrip2.setPrimitiveType(sf::PrimitiveType::TriangleStrip);
triangleStrip2.resize(12u);

triangleStrip2[0u].position = { width * 0.f, bottom };
triangleStrip2[0u].color = colorA;

triangleStrip2[1u].position = { width * 0.f, top };
triangleStrip2[1u].color = colorA;

triangleStrip2[2u].position = { width * 1.f, bottom };
triangleStrip2[2u].color = colorA;

triangleStrip2[3u].position = { width * 1.f, top };
triangleStrip2[3u].color = colorA;

triangleStrip2[4u].position = { width * 1.f, top };
triangleStrip2[4u].color = colorB;

triangleStrip2[5u].position = { width * 1.f, bottom };
triangleStrip2[5u].color = colorB;

triangleStrip2[6u].position = { width * 2.f, top };
triangleStrip2[6u].color = colorB;

triangleStrip2[7u].position = { width * 2.f, bottom };
triangleStrip2[7u].color = colorB;

triangleStrip2[8u].position = { width * 2.f, bottom };
triangleStrip2[8u].color = colorA;

triangleStrip2[9u].position = { width * 2.f, top };
triangleStrip2[9u].color = colorA;

triangleStrip2[10u].position = { width * 3.f, bottom };
triangleStrip2[10u].color = colorA;

triangleStrip2[11u].position = { width * 3.f, top };
triangleStrip2[11u].color = colorA;



sf::VertexArray triangleStrip3{};
triangleStrip3.setPrimitiveType(sf::PrimitiveType::TriangleStrip);
triangleStrip3.resize(12u);

triangleStrip3[0u].position = { width * 0.f, bottom };
triangleStrip3[0u].color = colorA;

triangleStrip3[1u].position = { width * 0.f, top };
triangleStrip3[1u].color = colorA;

triangleStrip3[2u].position = { width * 1.f, bottom };
triangleStrip3[2u].color = colorA;

triangleStrip3[3u].position = { width * 1.f, top };
triangleStrip3[3u].color = colorA;

triangleStrip3[4u].position = { width * 1.f, bottom };
triangleStrip3[4u].color = colorB;

triangleStrip3[5u].position = { width * 1.f, top };
triangleStrip3[5u].color = colorB;

triangleStrip3[6u].position = { width * 2.f, bottom };
triangleStrip3[6u].color = colorB;

triangleStrip3[7u].position = { width * 2.f, top };
triangleStrip3[7u].color = colorB;

triangleStrip3[8u].position = { width * 2.f, bottom };
triangleStrip3[8u].color = colorA;

triangleStrip3[9u].position = { width * 2.f, top };
triangleStrip3[9u].color = colorA;

triangleStrip3[10u].position = { width * 3.f, bottom };
triangleStrip3[10u].color = colorA;

triangleStrip3[11u].position = { width * 3.f, top };
triangleStrip3[11u].color = colorA;

Note that I set each vertex explicitly so it you could see that. However, it is pretty simple to write an algorithm to set them all automatically in a loop.