2D Rectangle stroke in GLSL

Question

I'm attempting to draw a rectangle with modern Opengl using a shader to do fill and stroke. I'm sending the fill color, stroke color and stroke width to a uniform block in the fragment shader (along with rectangle position and size). What is the recommended way for setting the stroke fragments to the stroke color and the fill fragments to the fill color?

At the moment, I have 2 ideas floating in my head. First, an if statement that checks whether the frag coordinate is within the bounds of the rectangle or rectangle stroke and set the frag color based on that. This methods would produce quite a large a complex if statement and when it comes time to rotate the rectangle, it may get even worse. (Also, I've read that branching in a shader should be avoided)

The second idea I have is to use a signed distance function to determine the color, but I am unfamiliar with using these and I have this idea that they don't do sharp corners too well.

Am I way off the mark here? Is there perhaps a better way to do this?

Bartvbl Bartvbl · Accepted Answer · 2016-11-14T13:10:04

The Fragment Shader sounds like a stage that is too late if you want to rasterise the stroke. The fragment shader is executed after the rasterisation process has been performed. If I can make a recommendation, I'd look into using a geometry shader to generate your stroke's geometry on the fly. Though arguably incrementally adding data to a VBO is the best solution here (since the majority of a stroke does not change over time). If the resolution of your drawing area does not change, you could also look into rendering your stroke to a texture, and modifying that.

2D Rectangle stroke in GLSL

2 Answers