Graphics programming analysis done using examples written in WebGL–genius. Hypertext that takes full advantage of the medium. This reminds me of something I'd see on https://pudding.cool/, but it goes far more in depth than anything there. Absolutely fantastic article.
I've been using MSAAx4 in my rendering engine for some time and only recently have considered switching to a FXAA / TAA implementation. I'm actually not sure I'm going to go through with that now. I definitely learned a lot here, and will probably use the analytical approach for UI items, I hadn't heard about that anywhere.
Not often you see graphics-programming stuff on HN. For anyone interested in more graphics write-ups, this list of frame breakdowns is one of my favorite resources:
I really dislike TAA, especially on lower framerates. There's too much ghosting. I often switch it to a slower algorithm just so I don't get ghosting.
Awesome article.
SDF(or mSDF) isn't the future. It's already "good enough" classic.
> This works, but performance tanks hard, as we solve every > bezier curve segment per pixel
This is "the future" or even present as used in Slug and DirectWrite with great performance
https://sluglibrary.com/ https://learn.microsoft.com/en-us/windows/win32/directwrite/...
Don't forget about implicit curve rendering [0]. The patent will expire soon [1].
[0]: https://www.microsoft.com/en-us/research/wp-content/uploads/... [1]: https://patents.google.com/patent/US20070097123A1/en
I may be remembering totally wrong, but isn't the algorithm used in Slug patented?
Thanks for sharing! Author here, happy to answer any questions.
Fantastic article! I've been trying to figure out antialiasing for MSDF fonts, and have run across some claims:
1. antialiasing should be done in linear rgb space instead of srgb space [1] [2]
2. because of the lack of (1) for decades, fonts have been tweaked to compensate, so sometimes srgb is better [3] [4]
Do you have advice on linear vs srgb space antialiasing?
[1] https://www.puredevsoftware.com/blog/2019/01/22/sub-pixel-ga...
[2] http://hikogui.org/2022/10/24/the-trouble-with-anti-aliasing...
[3] https://news.ycombinator.com/item?id=12023985
[4] http://hikogui.org/2022/10/24/the-trouble-with-anti-aliasing...
Great post! Minor nitpick: WebGL does support MSAA since WebGL1, but in WebGL1 only on the canvas, and you don't have any control over the number of samples (can only select antialiasing on/off) - not that it matters much anymore :)
What WebGL2 is still missing is MSAA texture objects (it only supports MSAA render buffers), which makes it impossible to directly load individual samples in a shader (useful for custom-resolve render passes). That's only possible in WebGPU.
As a non-gamedev person but just gamer, I should expect that this will replace TAA anytime soon? Should it replace TAA?
> Mobile chips support exactly MSAAx4 [...] the driver will force 4x anyways
On what GPUs and through what APIs did you see this? This seems fairly weird. I especially wouldn't expect Apple to have problems.
scrolling thru the post the NeoTokyo screenshot struck me instantly, I ran through the hallway thousands of times - I ran a server for that mod for some years and had great fun with a small community of good/capable people.
Those frames with the circle and zoomed bit are a fantastic way to convey this message, well done the whole article reads great.
I've been so used to screen space techniques that I initially read SSAA as "screen space antialiasing", not "super sampled antialiasing".
My favorite is stil SSSSS, or screen space sub surface scattering.
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.
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...
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.
[flagged]
Get a daily email with the the top stories from Hacker News. No spam, unsubscribe at any time.