Hacker News Reader

Comment by pyrolistical | Hacker News Reader

This seems like a silly way to do vector graphics in a shader.

What I've done in the past is representing the shape as a https://en.wikipedia.org/wiki/Signed_distance_function to allow each pixel to figure out if it is inside or outside the shape. This avoids the need to figure out the winding.

Anti-aliasing is implemented as a linear interpolation for values near zero. This also allows you to control the "thickness" of the shape boundary. The edge become mores blurry if you increase the lerp length.

Shader toy demo https://www.shadertoy.com/view/sldyRj

View on HN

Signed distance fields only work well for relatively simple graphics.

If you have highly detailed characters like Chinese or emojis, you need larger resolution to faithfully represent every detail. The problem is that SDFs are sampled uniformly over the pixel grid. If the character is locally complex, a high resolution is required to display it, but if the character has simple flat regions, memory is wasted. One way to get around excessive memory requirements is to store the characters in their default vector forms and only render the subset of required characters on demand, but then you might as well render them at the required pixel resolution and do away with the additional complexity of SDF rendering.

SDFs are still useful though if you have to render graphics at many different resolutions, for example on signs in computer games, as seen in the original Valve paper https://steamcdn-a.akamaihd.net/apps/valve/2007/SIGGRAPH2007...

SDF is cool but not a generally good solution to GPU vector graphics. It only works for moderate scaling up before looking bad, the CPU prep figuring out the data the GPU needs takes far longer than just rasterizing on CPU would, etc. It's great as a model for games where there are many renders as world position changes but that's about it.

> It only works for moderate scaling up before looking bad

That problem has been solved by multi-channel signed distance fields https://github.com/Chlumsky/msdfgen

The decomposition method used by msdfgen works well enough for fonts, but I'm not sure if it would work for more complex vector drawings. Probably would need much more than 3 color channels (= decompositions) to render something like the tiger SVG...

Seems like you're thinking of precomputed SDFs that are stored in a texture. They don't have to be :) (for example, my little library: https://github.com/audulus/vger)

If you are talking about analytic SDFs, then you need a good "decomposition" method that can divide an arbitrary SVG into simple SDF-friendly primitives. Mabye it could be done, I think it can be a good research topic.

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...

I did vector graphics using SDFs in this library (https://github.com/audulus/vger). Works pretty well for my uses which are rendering dynamic UIs, not rendering SVGs. But I can still do some pretty gnarly path fills!

Reply on news.ycombinator.com