 # Shader for (cubic) bezier curve

#1

Hi there!

Following a suggestion of @Pkeod, I am posting here a minimal Defold project with a shader for drawing cubic bezier curves.

You can use the mouse to move the start and end points and the control points. The controls points define the tangents at the start and end points of the curve. (Note that moving a start/end point does not move the corresponding control point, this may look strange if you are used to a vector drawing program…).

Some notes.

1. A (planar) Bezier cubic curve is just a curve parametrized by two polynomials of degree 3. The math in the vertex shader is quite simple: a linear system to pass from points data to coefficients of these two polynomials, the evaluations of these polynomials and of their derivative to compute the tangent (and then the normal) to a point of the curve. If someone is interested I may explain it in detail.

2. The shader works in world coordinates, but one should be able to adapt it to local coordinates.

3. The model is just a rectangle with two opposite sides subdivided in 64 segments with texture uv-coordinates. The points are then moved on the curve by the vertex shader. (EDIT: here I was wrong, I am not using the uv-coordinates, just the absolute position of the vertices of the model.)

4. There is a little trick: the texture used is a small 2x4 rectangle with only the central 2x2 pixel blacks and the upper and lower pixels transparent. In this way the GPU interpolates among black and transparent and gives us a perfect smooth curve (no antialias used!).

Ciao, Rocco.

defold_bezier.zip (935.4 KB)

10 Likes

#2

It’s brilliant, and super useful! Good job!

2 Likes

#3

Thanks!

Now that I have taken a second look at this after a long time, I see that the shader maybe somehow simplified. Lines 24–33 compute the coefficients a, b (two vec4) of the polynomials. These are constant along all vertices, hence it maybe moved back to lua code and one can have them as uniforms instead of pnt and tan (points and tangents). In other words, now the same computation is performed for each vertex (i.e. about 256 times for each curves) by the GPU, moving it to lua one has a unique computation each time the curve is changed but in lua. (I hope I have explained the point…)

Ciao, Rocco.

3 Likes

#4

Perhaps make this into a generalized module on GitHub?

0 Likes

#5

I am sorry but I don’t understand…

0 Likes

#6

The materials, model, assets, and helper scripts could be packaged into a generic library that others could include. It’s not necessary to do but it could be done. 1 Like

#7

I see. Only the bezier curve related part, not also the demo allowing you to move the points, right?

I am not an expert in creating such a module. But I may try.

What do you think about the GPU / lua options I was writing above? I remember being quite scared at that time about the lua performance; today I am way more confident about it! So I would prefer to move that computation to lua.

3 Likes

#8

I encourage you to try the ideas you posted about!

You can put demos in a separate folder rather than the one that you designate as the library folder.

Check other projects for an example of how to set it up https://github.com/indiesoftby/defold-hyper-trails

5 Likes

#9

This great! Thank you for sharing!

2 Likes

Jack Redrum