How to draw a line strip that has some thickness

[Tigrou]

I would like to draw a line made of several points (more than 2) and that have some thickness (aka width).

How can I do that in SFML ?

Here is my actual code (C#) :

Vertex[] line =
{
        new Vertex(new Vector2f(10.0f, 10.0f)),
        new Vertex(new Vector2f(150.0f, 150.0f)),
        new Vertex(new Vector2f(300.0f, 60.0f))
};

window.Draw(line, PrimitiveType.LinesStrip);

[sjaustirni]

A straight line with thickness is just a rectangle. The rest is just a combination of these (provided that you don't need curves).

Here's an example implementation in C++: https://github.com/SFML/SFML/wiki/source:-line-segment-with-thickness
You can find more examples on the Internet.

// Edit: Indeed, TriangleStrip seems to be even better option

[Tigrou]

So if i want to draw a line with let's say 20 points, I have to draw 19 rectangles ?

[Laurent]

A TriangleStrip is exactly what you need. You can have a look at the example in the tutorial.

[Tigrou]

A TriangleStrip is exactly what you need. You can have a look at the example in the tutorial.

Thank you a lot, I manage to get what i need using TriangleStrip and the tutorial you provided.

[sjaustirni]

Today I found out about Line from SelbaWard, in case anyone else reads this topic: https://github.com/Hapaxia/SelbaWard/wiki/Line

[Hapax]

Today I found out about Line from SelbaWard

I appreciate the mention of Selba Ward but, although Selba Ward's Line can indeed have a thickness, it is only a single line so would require many draw calls for a polyline (multiple connected lines).

Luckily, though, Selba Ward also has Spline that can draw polylines (it can even draw them as bezier curves) and has recently had the addition of thickness.

[Tigrou]

I really recommend to read this thread : https://forum.libcinder.org/topic/smooth-thick-lines-using-geometry-shader#23286000001269127

This helped me a lot. To implement this I used a class that inherit from Drawable and has TrianglesStrip as PrimitiveType (as Laurent suggested).

I copy paste summary of the thread here, in case it would disappear :

The line always starts with a segment :


The line is defined by :

Vector2f line = p1 - p0;
Vector2f normal = Vector2f( -line.y, line.x).normalized();

The boundaries of the segment can be found this way :

Vector2f a = p0 - thickness * normal;
Vector2f b = p0 + thickness * normal;
Vector2f c = p1 - thickness * normal;
Vector2f d = p1 + thickness * normal;

Two joined segments :


The goal is to find m and -m :

Vector2f tangent = ((p2-p1).normalized() + (p1-p0).normalized()).normalized();
Vector2f miter = Vector2f( -tangent.y, tangent.x ); //normal of the tangent

The length of the miter can be found by projecting it on one of the normals, using the dot product :

float length = thickness / miter.dot( normal )

Then, the miter points can be found by :

Vector2f m1 = p1 - length * miter;
Vector2f m2 = p1 + length * miter;