StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POIs it possible to thicken a quadratic Bézier curve using the GPU only?
text
Body
copied!<p>I draw lots of quadratic Bézier curves in my OpenGL program. Right now, the curves are one-pixel thin and software-generated, because I'm at a rather early stage, and it is enough to see what works.</p> <p>Simply enough, given 3 control points (<em>P<sub>0</sub></em> to <em>P<sub>2</sub></em>), I evaluate the following equation with <em>t</em> varying from 0 to 1 (with steps of 1/8) in software and use <code>GL_LINE_STRIP</code> to link them together:</p> <blockquote> <p>B(<em>t</em>) = (1 - <em>t</em>)<sup>2</sup><em>P<sub>0</sub></em> + 2(1 - <em>t</em>)<em>t</em><em>P<sub>1</sub></em> + <em>t</em><sup>2</sup><em>P<sub>2</sub></em></p> </blockquote> <p>Where <code>B</code>, obviously enough, results in a 2-dimensional vector.</p> <p>This approach worked 'well enough', since even my largest curves don't need much more than 8 steps to look curved. Still, one pixel thin curves are ugly.</p> <p>I wanted to write a GLSL shader that would accept control points and a uniform <code>thickness</code> variable to, well, make the curves thicker. At first I thought about making a pixel shader only, that would color only pixels within a <code>thickness / 2</code> distance of the curve, but doing so requires solving a third degree polynomial, and choosing between three solutions inside a shader doesn't look like the best idea ever.</p> <p>I then tried to look up if other people already did it. I stumbled upon <a href="http://research.microsoft.com/en-us/um/people/cloop/loopblinn05.pdf" rel="noreferrer">a white paper by Loop and Blinn from Microsoft Research</a> where the guys show an easy way of filling the area under a curve. While it works well to that extent, I'm having trouble adapting the idea to drawing between two bouding curves.</p> <p>Finding bounding curves that match a single curve is rather easy with a geometry shader. The problems come with the fragment shader that should fill the whole thing. Their approach uses the interpolated texture coordinates to determine if a fragment falls over or under the curve; but I couldn't figure a way to do it with two curves (I'm pretty new to shaders and not a maths expert, so the fact I didn't figure out how to do it certainly doesn't mean it's impossible).</p> <p>My next idea was to separate the filled curve into triangles and only use the Bézier fragment shader on the outer parts. But for that I need to split the inner and outer curves at variable spots, and that means again that I have to solve the equation, which isn't really an option.</p> <p>Are there viable algorithms for stroking quadratic Bézier curves with a shader?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload