Forum

Inspirational links for Beziers, SDF, text rendering, math in general and a question

Newtons Method - Mr. Sanderson (3Blue1Brown) about

  • SDF to a quadratic bezier function
  • Root finding with Newtons method for any polynomial

The Beauty of Bézier Curves

  • construct a coordinate system at any point
  • get the tight bounding box
  • do an arc length parameterization

Font Rasterization

  • instead of distance-based approach, just tell me if I am inside or outside a curve.

SDF for text rendering

Shadertoy demos:

Epic Math Duell

  • Root finding (again)
  • Cardanos method to get roots for polynomials of 3rd order, aka cubic functions
  • and the whole beauty of complex numbers, the universe and everything

Question
Can anybody point me to a good math article on how to derive the formula for the distance to a quadratic or even cubic bezier curve?
My danish is a bit rusty…
What I tried is to take the cubic bezier formula, subtract that from a spectator’s point, plug this into a formula of some greek guy in order to describe the length from the spectator’s point to any point on the curve (basically as 3blueonebrown was suggesting). And as he suggested we should now just take the derivative in order to find the t-values for which the distance is minimal. But I end up with a higher degree polynomial. So I guess just use Newtons method? But with which seeds to start this method?
I can see that the solution for the quadratic bezier distance in the danish article is taking a different approach than Mr. Sanderson…

3 Likes

Here is some more info: https://sluglibrary.com
This is used for text rendering in TD.

1 Like

That was quick! Thank you!
It looks like they always only tackle quadratic beziers. Alright…

Don’t remember where I “found” this but it was still in my Browser history:

At the bottom of the article there is also a link to a related HN discussion and an other thread in a forum called TypeDrawers that might also yield some more info. hth

1 Like

Also, Stride has SDF Font rendering based on 3 distance channels:

https://doc.stride3d.net/latest/en/manual/graphics/sprite-fonts.html#signed-distance-field-sprite-fonts

the shader can be found somewhere in the stride repo. the paper on that and more info can be found here, chapter 2.1 talks about bezier curves:

Shape Decomposition for Multi-channel Distance Fields

and related:

Sharp Corners with Signed Distance Fields Fonts

1 Like

In fact I’m hoping that some more insights can lead to fruitful developments in FUSE. As it’s full of SDFs… I am actually not really trying to solve a particular task (like rendering text), but I am trying to build up a mind map of connected topics that can help on different ends.
So thank you for all the links enhancing that map!!

Maybe Shader - Shadertoy BETA
Or
Shader - Shadertoy BETA

1 Like

@antokhio that last one is awesome! Also comes with a lot of links again. SDF for cubic bezier… That’s what you want to have :)

@woei is also very resourceful when it comes to beziers … maybe you can reach out to him. I think he also may have saved all sorts of useful bookmarks on the topic.