Hacker Timesnew | past | comments | ask | show | jobs | submitlogin

I don't know the details of using SDF (especially MSDF!) for doing vector graphics, but my understanding is that essentially it's a precomputation that involves _already_ a rasterization.

I would like to know why you think the described approach is silly? It doesn't involve a final rasterization but merely a prefiltering of segments.



SDF are not precomputed. The SDF is implemented in the shader code itself.

Added shader toy link in my OP


What about SDFs of cubic bezier curves and rational bezier curves? Because these appear in vector graphics and I think there is no analytic solution for them (yet?).


> yet?

SDF of a cubic bezier involves solving a quintic, so it's not analytic. There are approximations, of course, but for an outline, using an sdf is just silly. (For a stroke, you don't really have much choice--though it's common to approximate strokes using outlines.) I'll add that sdf aa is not as good as analytic aa.


IIRC Loop-Blinn gives you a pretty good distance approximation using the 2D generalization of Newton's method to avoid having to solve the quintic. (Though I've never actually seen anybody implement Loop-Blinn for cubics because the edge cases around cusps/loops are annoying. Every Loop-Blinn implementation I've actually seen just approximates cubics with quadratics.)

(Fun fact: Firefox uses the same 2D Newton's method trick that Loop-Blinn does for antialiasing of elliptical border radii in WebRender—I implemented it a few years back.) :)


> Though I've never actually seen anybody implement Loop-Blinn for cubics

I implemented them (implicit formulation of rational cubic bezier curves) in my renderer (see one of my other replies in this thread). Here is an extract of the relevant code in a shader toy: https://www.shadertoy.com/view/WlcBRn

Even in Jim Blinn's book "Notation, Notation, Notation" he leaves some of the crucial equations as an exercise to the reader. I remember spending 2 or 3 weeks reading and trying to understand everything he wrote to derive these equations he hinted at myself.


Out of curiosity, where have you seen loop-blinn implemented? I was under the impression that it was generally a no-go due to the patent (which, incidentally, expires in 2024).


You can approximate the Bézier curves with circular arcs and store those in the "SDF" instead. https://github.com/behdad/glyphy


What I was referring is SDFs/MSDFs as in https://github.com/Chlumsky/msdfgen .

Of course you can implement smooth circles directly in a shader the way you describe, but note that there are Vector outline shapes that are not circles...

Check out the outlines you can do using SVG - paths composed of straight line segments as well as cubic bezier curves and various arcs. Also color gradients, stroking...




Consider applying for YC's Summer 2026 batch! Applications are open till May 4

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: