ConvexShape drawing difficulties

[PaulKovalov]

Hi guys! I currently write 2.5D drag racing game, and I got some troubles with drawing convex shapes. Currently I have code which draws road and border, this code is in 2 functions which I call from main loop, everything works great there ( I attach works_great.png). Firstly I draw road, then draw border on both sides. But, if I add grass before drawing border, it seems like it crashes smth, as border no longer draws correctly. (bad.png).
Here is the piece of code:
Functions to draw road and border

void drawRoad(RenderWindow &window, float z_begin, float length, int i, int dist, int offset)
{
    i %= 6;
    Color color = i < 3 ? Color(159, 159, 159) : Color(169, 169, 169);
    ConvexShape shape(4);
    shape.setFillColor(color);
    shape.setPoint(0, get2dPoint(-125 - offset, -75, z_begin, dist));
    shape.setPoint(1, get2dPoint(-125 - offset, -75, z_begin + length, dist));
    shape.setPoint(2, get2dPoint(125 - offset, -75, z_begin + length, dist));
    shape.setPoint(3, get2dPoint(125 - offset, -75, z_begin, dist));
    window.draw(shape);
}
void drawBorder(RenderWindow &window, float z_begin, float length, int i, int dist, int offset)
{
    i %= 6;
    Color color = i < 3 ? Color::Red : Color::White;
    ConvexShape shape(4);
    shape.setFillColor(color);
    shape.setPoint(0, get2dPoint(-125 - offset, -75, z_begin, dist));
    shape.setPoint(1, get2dPoint(-125 - offset, -55, z_begin, dist));
    shape.setPoint(2, get2dPoint(-125 - offset, -55, z_begin + length, dist));
    shape.setPoint(3, get2dPoint(-125 - offset, -75, z_begin + length, dist));
    window.draw(shape);

    shape.setPoint(0, get2dPoint(125 - offset, -75, z_begin, dist));
    shape.setPoint(1, get2dPoint(125 - offset, -55, z_begin, dist));
    shape.setPoint(2, get2dPoint(125 - offset, -55, z_begin + length, dist));
    shape.setPoint(3, get2dPoint(125 - offset, -75, z_begin + length, dist));
    window.draw(shape);
}
 

Here is the loop where I draw all elements of road. If I comment the part which draws grass, the output is like in works_great.png, if uncomment, then output is like in bad.png. I use exactly the same code in functions which draw road, but for some reason this idea doesn't work with the grass.

for (int i = tmp; i < 100 + tmp; i++)
        {
            drawRoad(window, z_begin, l, i, dist, offset);
            //put it here in case something wrong with function
            //grass is a convexShape object
            grass.setPoint(0, get2dPoint(-125 - offset, -75, z_begin, dist));
            grass.setPoint(1, get2dPoint(-125 - offset, -75, z_begin+l,dist));
            grass.setPoint(2, get2dPoint(-1000, -75, z_begin+l, dist));
            grass.setPoint(3, get2dPoint(-1000, -75, z_begin,dist));
            grass.setFillColor(Color::Green);
            window.draw(grass);
            drawBorder(window, z_begin, l, i, dist, offset);
            z_begin += 2;
        }
        //current speed, rpm
        car.drawCar(window);
        window.display();
}
 

[Hapax]

This looks like you're drawing the front of the road first and then drawing the ones behind it afterwards. The grass of the section behind is being drawn over the top of the border of the previous segment.

First thing I would suggest is to loop from the back to the front. This is the main premise of "the painter's algorithm".

Second thing to seriously consider is to create vertex array that draws the entire thing instead of having so many draw calls (3 or 4 per segment?). As the number of segments go up, it can slow down significantly.
Still, remember to create the vertex array from the back so the back is drawn first.

[PaulKovalov]

Yes, vertex array is a good idea, I will do it. I solved the problem of drawing grass. I split the drawing of road into 2 for-loops, where first one draws road and grass, and second loop draws border, now it works! Thank you!