如何使用glDrawArray（）平滑改变贝塞尔曲线的各个点的宽度

Question

I am successfully rendering a bezier curve in real-time as the user draws with a finger (I modified glpaint). I can adjust the width of the line just prior to drawing. This results in the whole line drawing at this new width, but remaining constant at this width over the course of the line. But I want a smooth variance of width across the course of this one line. I can also adjust the brush width dynamically as the user draws, however this results in a blotchy line for the following reasons.

The curve is rendered in points using glDrawArray(). As the user draws, for about every few touchpoints my bezier function calculates potentially hundreds of points to render, at which point it sends these points into the gldrawarray function to be rendered. The problem is that the width varyiance really needs to be plotted along these points dynamically and must be able to change brush width over the course of the drawing of these passed points, but because they are sent into the function as a whole group to be drawn at once via glDrawArray achieving smooth width varyiance across the overall line has proven elusive thus far.

Do you know of a way to achieve a varying brush width in real time, across one bezier curve drawn with points, and ideally drawn with glDrawArray(), and without resorting to using triangles, etc?

Answer 1

AFAIK the only way to achieve this is to create a filled polygon, where the skeleton is determined by your original path, and the width is varied along the length by displacing vertices for each side tangential to the path.

So you end up constructing a closed path around your bézier curve, thus:

The width at each control point is varied by the distance between each side, shown in green.

I hope this rough diagram clarifies the description above!