5 ms·

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

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.

pyrolistical 4y ago
SDF are not precomputed. The SDF is implemented in the shader code itself. Added shader toy link in my OP
- Lichtso 4y ago
  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?).
  - moonchild 4y ago
    > 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.
    - pcwalton 4y ago
      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.) :)
      - Lichtso 4y ago
        > 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 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.
      - moonchild 4y ago
        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).
  - johndough 4y ago
    You can approximate the Bézier curves with circular arcs and store those in the "SDF" instead. https://github.com/behdad/glyphy https://github.com/behdad/glyphy
- jstimpfle 4y ago
  What I was referring is SDFs/MSDFs as in https://github.com/Chlumsky/msdfgen 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...

pyrolistical 4y ago

SDF are not precomputed. The SDF is implemented in the shader code itself. Added shader toy link in my OP

Lichtso 4y ago
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?).
- moonchild 4y ago
  > 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.
  - pcwalton 4y ago
    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.) :)
    - Lichtso 4y ago
      > 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 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.
    - moonchild 4y ago
      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).
- johndough 4y ago
  You can approximate the Bézier curves with circular arcs and store those in the "SDF" instead. https://github.com/behdad/glyphy https://github.com/behdad/glyphy
jstimpfle 4y ago
What I was referring is SDFs/MSDFs as in https://github.com/Chlumsky/msdfgen 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...