Jump to content

View more

Image of the Day

The night is still, but the invasion brings chaos. #screenshotsaturday #hanako #indiegame #gameart #ue4 #samurai https://t.co/cgILXuokoS
IOTD | Top Screenshots

The latest, straight to your Inbox.

Subscribe to GameDev.net Direct to receive the latest updates and exclusive content.

Sign up now

Thick Lines

4: Adsense

Old topic!

Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.

  • You cannot reply to this topic
3 replies to this topic

#1 Quat   Members   


Posted 01 September 2013 - 01:59 PM



I am expanding lines using the geometry shader to make them "thick."  I do the expansion in projective NDC space in 2D.  My first approach was to just expand in the direction of the line normal in 2D.  However, this creates discontinuities where line segments meet in a line strip (see left side of http://postimg.org/image/f5frxyp1v/).  My 2nd approach was to use line strip with adjacency, and access the adjacent lines to do a sort of normal averaging.  This works well if the lines do not take "sharp turns", however, there are cases where the averaged normal isn't a good choice and it creates a thin quad (see right side of http://postimg.org/image/f5frxyp1v/). 


Does anyone know a good strategy for handling the "sharp" line turns?

Edited by Quat, 01 September 2013 - 02:01 PM.


#2 TheUnnamable   Members   


Posted 01 September 2013 - 05:29 PM

Usually this is done by drawing the expanded lines without modification and drawing circles where the lines meet.
Maybe my information is a bit outdated, but OpenGL has an extension to draw smooth points ( eg. circles ), but creating the circles in the geometry shader would be a certainly working solution. More costly, though. I would advice to change the circle's level of detail depending on the line's thickness ( thus the circle's radius, obviously ). I think using the circle's circumference to determine the circle's LOD would give nice results.

#3 Jason Z   Members   


Posted 02 September 2013 - 06:08 AM

I implemented a 3D based technique a couple months ago based on some discussions I saw online that seems at least similar to your need.  The idea is that when you expand the line in the geometry shader that you ensure the end of the line is extruded forward by the same amount as the thickness of the expanded line.  When you do this, you also include the original vertex location in the expanded vertex layout.


Finally in the pixel shader you test to see how far from the end point you are.  If you can determine that your pixel is from the end point area, then you can test to see how far from the end point it is, and kill the pixel if you are too far away from it.  That essentially creates a sphere just like TheUnnamable mentioned at each end point.


I'm sure you can reproduce the same thing in 2D without too much trouble.  It is certainly a bit heavier algorithm than what you are currently doing, but the results look nice and it would solve your current issue.  Another possible solution with some sample code can be found here.  I hope that helps!

#4 ankhd   Members   


Posted 03 September 2013 - 02:47 AM


May be you could use a centre line for your line then offset from both directions from centre line to half line thickness 90 degrees to make the vertices

(you can plot a point 90 degrees from the end point)


and if you want round looking joints look up the math for a lobster back and just look at it as if its flat and not a pipe.


you can plot a vertex like this.

outercorrnerpoints is one end of your lines out side and innercorrnerpoints is the same end but the inside edge of the line

//set the first element
 ele = 0;//is a count to a vertex in the GS
 outercorrnerpoints[ele].x = pos.x;
 outercorrnerpoints[ele].y = outerradius;
 outercorrnerpoints[ele].z = 0.0;
 //inner point
 innercorrnerpoints[ele].x = pos.x;
 innercorrnerpoints[ele].y = innerradius;
 innercorrnerpoints[ele].z = 0.0;




//set the second element
 ele = 1;
 outercorrnerpoints[ele].x = pos.x;
 outercorrnerpoints[ele].y = outerradius * sin(radians(67.5));
 outercorrnerpoints[ele].z = outerradius * cos(radians(67.5));
 //inner point
 innercorrnerpoints[ele].x = pos.x;
 innercorrnerpoints[ele].y = innerradius * sin(radians(67.5));
 innercorrnerpoints[ele].z = innerradius * cos(radians(67.5));



Your making a quad


Lobster back pipe bend



Old topic!

Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.