Remix.run Logo
Lichtso 6 days ago

Great write-up!

Though a little caveat from my side, as I have written both 2D and 3D rendering engines. Let me tell you, they could not be more different. It is not just another dimension but completely different goals, use-cases and expectations.

So instead of:

> Everything we talked about extends to the 3D case as well.

I would say the entire post is mostly about 3D, not 2D rendering. If you are curious about this topic being approached for 2D rendering here is a nice write-up I found about that: https://ciechanow.ski/alpha-compositing/

One particular criteria for AA techniques that no one cares about in 3D but is very relevant in 2D is correctness and bias. AAA for example is heavily biased and thus incorrect. Drawing the exact same shape multiple times in the same place will make it more opaque / darker. The same thing does not happen with MSAA which has a bounded error and is unbiased.

lagrange77 6 days ago | parent | next [-]

Hey, i'm brainstorming for a 3d vector renderer in WebGPU on JS/TS and stumbled on your project [0] yesterday.

(Thick) line drawing is especially interesting to me, since it's hard [1].

I also stumbled upon this [2] recently and then wondered if i could use that technique for every shape, by converting it to quadratic bezier curve segments.

Do you think that's a path to follow?

[0] https://github.com/Lichtso/contrast_renderer

[1] https://mattdesl.svbtle.com/drawing-lines-is-hard

[2] https://scribe.rip/@evanwallace/easy-scalable-text-rendering...

Lichtso 6 days ago | parent [-]

My implementation does:

- Implicit Curve Rendering (Loop-Blinn) and stencil geometry (tessellation-less) for filling

- Polygonization (with tangent space parameter distribution) of offset curves for stroking

> by converting it to quadratic bezier curve segments

Mathematically, the offset curve of a bezier curve is not a bezier curve of the same degree in the general case (exceptions are trivial cases like straight lines, circles and ellipses). Instead you get terrible high degree polynomials. You will have to approximate the offset curve anyway. I choose to use polygons (straight line segments), but you could also use splines (bezier segments), it is just overtly complex for little to no benefit IMO.

BTW, distance fields and offset curves are very similar. In fact the distance field is the set of all possible offsets of offset curves and the offset curves are the isolines on the distance field.

Here is a good summary of all the edge cases to think about in 2D rendering: https://www.slideshare.net/slideshow/22pathrender/12494534

About subpixel AA: Don't bother, LCDs are on the down trend.

wtallis 5 days ago | parent | next [-]

> About subpixel AA: Don't bother, LCDs are on the down trend.

OLEDs have subpixels, too. The real problem is the growing diversity in subpixel arrangements, making it impractical to have a good subpixel AA method for every display type on the market. And mobile platforms have it worse, because screen rotation means you need to be able to change AA methods on the fly.

lagrange77 5 days ago | parent | prev [-]

Thank you very much for the hints! This rabbit hole gets deeper every day. :D

kookamamie 5 days ago | parent | prev [-]

I don't think the article generalizes trivially to 3D, though.

The solution presented relies on signed distance fields, yet skims over the important part - a distance to what? In 2D it is obvious, we are measuring distance to an edge between the object and its background, to a silhouette.

In 3D, when objects may rotate producing self-occlusions, things get more complicated - what are we measuring the SDF against? The silhouette of a 3D object's 2D projection is ever-changing and cannot be trivially precomputed.