[Solved] How to make a quad represent a line

[KungFooMasta]

I've been writing a RenderTexture class which basically wraps an Ogre Manual Texture, and has APIs to draw images onto the Texture such as

drawImage
drawTiledImage

I also want to have the following API:

Code: Select all

void drawLine(Vector2 p1, Vector2 p2, ColourValue cv, unsigned int thickness);

Now without the thickness, drawing lines are easy, I just add 2 vertices to my vertex buffer and perform a rendering operation. However, I want to support a thickness, and I think I should do this by representing the line with a quad. (6 vertices, 2 triangles)

My question is, how do I go about determining the positions of the vertices of the triangle? We have p1 and p2, and a slope, but I basically need to create 2 points at each end of the line, offset by the thickness amount (which is in pixels), and perpendicular to the line.

For example lets say I want to draw a line with a 5 pixel thickness, using the following points:

1. p1(0,0) <-> p2(0,5)

2. p1(0,0) <-> p2(5,0)

3. p1(0,0) <-> p2(5,5)

In 1 above, I would need the points:
(-5,0)(5,0) <-> (-5,5)(5,5)

Is there a programatic way I can derive the 4 points representing the thick line, that works for any p1 and p2?

[Kojack]

I did a line renderer just the other day. It had line thickness, rounded ends and alpha blended edges.
I actually used a shader for it. The quad used to contain the line could be any size (full screen, a bounding box around the line segment, etc), because I passed in the end points, thickness and end point colours to the shader via texture coordinates, then did a per pixel distance check against the line to control alpha.
Probably very inefficient, but I was bored and wanted to try it.


But if you want just a quad: (untested code)

Code: Select all

Vector2 perp = (p2-p1).normalisedCopy();
perp = Vector2(-perp.y, perp.x);
Vector2 q1 = p1 - perp * thickness;
Vector2 q2 = p1 + perp * thickness;
Vector2 q3 = p2 - perp * thickness;
Vector2 q4 = p2 + perp * thickness;

or something like that.

[KungFooMasta]

Sweet! I was just trying to think up a solution myself, and came up with this..

Code: Select all

Vector2 direction = (p2 - p1).perpendicular();
direction.normalize();

Vector2 p1Left = p1 + (direction * (thickness / 2.0));
Vector2 p1Right = p1 + (-direction * (thickness / 2.0)); 
Vector2 p2Left = p2 + (direction * (thickness / 2.0));
Vector2 p2Right = p2 + (-direction * (thickness / 2.0)); 

I see from your code you're doing the same as perpendicular, just without the API call. Cool, I think our answers are similar.

[Kojack]

There's a perpendicular method? Cool.
Yep, both versions are basically doing the same thing.

[KungFooMasta]

Thanks a lot, I just tried it out and it works well!