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.
Thank you for the excellent writeup, terrific work!
> Whole communities rally around fixing this, like the reddit communities “r/MotionClarity” or the lovingly titled “r/FuckTAA”, all with the understanding, that Anti-Aliasing should not come at the cost of clarity. FXAA creator Timothy Lottes mentioned, that this is solvable to some degree with adjustments to filtering, though even the most modern titles suffer from this.
I certainly agree that the current trend of relying on upscalers has gone too far and results in blurry and artifact riddled AAA game experiences for many. But after seeing this [1] deep dive by Digital foundry I find the arguments he makes quite compelling. There is a level of motion stability and clarity only tech like DLSS can achieve, even outperforming SSAA. So I've shifted my stance from TAA == blurry, TAA + ML when used right == best AA possible currently for 3D games.
I have done a few live visualization based blog posts, and they take me ages to do. I kind of think that's the right idea though. There is so much content out there, taking longer to produce less content at a higher quality benefits everyone.
One small bit of tecnical feedback for the website itself: it would be nice if the links in the article open in a new tab by default, because reloading the webpage via the back button is a little broken on my mobile browsers. I suspect it has something to do with trying to restore the state of the page while also having WebGL contexts.
Not a question but some unsolicited (sorry) feedback. The intro seems designed to set people up for disappointment. You start off by talking about AA methods used for 3D scenes, and you've picked a very cool way to present them... but the article is actually about antialiased drawing of SDFs, which is not exactly a hard problem and not applicable to 3D scenes. Unless your scene is made up of SDF shapes, but I don't think the method you're presenting would be fast enough on a nontrivial scene as you would need to rely on alpha-blending across seams. (I think Alex Evans' talk on Dreams mentions they tried something similar to get fuzzy shapes but dropped it due to perf and sorting issues.) In any case, it would have been nice for the article's intro to more clearly say what it's about and what the technique is useful for.
Great write up, excellent explorables. I skimmed some parts so forgive me if this was covered, but I wonder what happens with overlapping shapes in this approach. For example, a white background with a black disc and then a white disc of the exact same size and position would probably leave a fuzzy gray hairline circle? With regular antialiasing it should be all white.
Can you elaborate a bit on the tech-stack used for this blog? I didn't find any hints in the source (but I'm not an expert). Is it some known framework? What does the input look like (Markdown etc).?
Massive thanks for this! I’m already using my own version of analytical antialiasing but there were some bits I couldn’t get quite right so this is perfect!
Sorry, was most likely funnier in my head then it really is, but I was committed to the bit once I had the idea. I was exited to see Neotokyo mention somewhere popular.
NeoTokyo and Dystopia regulars compete in each others tournaments and are always looking forward to new players :)
Biggest Tournament of the year:
- 5v5 matches of ~4-6 teams
- broadcasted on twitch with
- 1 camera person
- 2-3 casters/commentators
- definitely overproduced
- to an audience of 15-25
Tangent: my biggest problem with AA is something adjacent to it, which is that almost none of my games bother explain what the differences are between the different abbreviations available in the settings, half of which are completely unknown to me. Like, sure, I can look them up but a little bit of user-friendliness would be appreciated.
This article will probably help for future reference though!
Games/graphics are one of those domains with a lot of jargon for sure. If you don't want to be a wizard you can just mess with it and see what happens. I like how dolphin approaches this with extensive tooltips in the settings, but there's always going to be some implicit knowledge.
On a meta level - I feel like I've seen anti-acronym sentiment a lot recently. I feel like it's never been easier to look these things up. There's definitely levels of acronyms which are anti-learning or a kind of protectionism, but to my mind there are appropriate levels of it to use because you have to label concepts at a useful level to accomplish things, and graphics settings of a game definitely are on the reasonable side.
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:
Steve Wittens also does a lot of these kinds of articles (math with WebGL-infused illustrations, etc.) at https://acko.net/
One of my favorites: https://acko.net/blog/how-to-fold-a-julia-fractal/. This helped me understand the relationship between trigonometric functions and complex numbers like nothing else I've ever seen.
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.
The even more amazing thing is that it's still actively played. There is a full server every Friday night (sometimes also in Saturday/Sunday). It has got some quite dedicated fan base and I've never seen such dedication in another old multiplayer game.
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.
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.
Appreciated that link out to Captain Disillusion. I had not heard of that guy. Incredible work, here's a direct link for those interested in video effects: https://www.youtube.com/@CaptainDisillusion
amazing blog, both in content and presentation. Love it when articles give you controls to play with. Gives me hope for the future of the web. the NeoTokyo mention reveals great taste.
I really miss MSAA. I still dislike DLSS personally. I realize many people seem to like it, but it just does not look that good to me. Or as good as things used to look or I believe could look.
Sure it's better than TAA, but come on, this can't be the ultimate end for gaming graphics... At least I hope it isn't.
Now I'm very curious about analytical AO and shadows as you mentioned Last Of Us uses. I'd heard about the spheres but never seen an explanation of how they get turned into shadows
[+] [-] FrostKiwi|1 year ago|reply
[+] [-] aappleby|1 year ago|reply
[+] [-] amitp|1 year ago|reply
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...
[+] [-] flohofwoe|1 year ago|reply
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.
[+] [-] Voultapher|1 year ago|reply
> Whole communities rally around fixing this, like the reddit communities “r/MotionClarity” or the lovingly titled “r/FuckTAA”, all with the understanding, that Anti-Aliasing should not come at the cost of clarity. FXAA creator Timothy Lottes mentioned, that this is solvable to some degree with adjustments to filtering, though even the most modern titles suffer from this.
I certainly agree that the current trend of relying on upscalers has gone too far and results in blurry and artifact riddled AAA game experiences for many. But after seeing this [1] deep dive by Digital foundry I find the arguments he makes quite compelling. There is a level of motion stability and clarity only tech like DLSS can achieve, even outperforming SSAA. So I've shifted my stance from TAA == blurry, TAA + ML when used right == best AA possible currently for 3D games.
Thoughts?
[1] https://youtu.be/WG8w9Yg5B3g
[+] [-] Lerc|1 year ago|reply
I have done a few live visualization based blog posts, and they take me ages to do. I kind of think that's the right idea though. There is so much content out there, taking longer to produce less content at a higher quality benefits everyone.
[+] [-] vanderZwan|1 year ago|reply
[+] [-] enbugger|1 year ago|reply
[+] [-] ferbivore|1 year ago|reply
[+] [-] tobr|1 year ago|reply
[+] [-] MintPaw|1 year ago|reply
I think this is the same method Skia uses, and it doesn't work for rendering vectors from SWF files in my experience because of this problem.
[+] [-] meta-level|1 year ago|reply
[+] [-] ferbivore|1 year ago|reply
On what GPUs and through what APIs did you see this? This seems fairly weird. I especially wouldn't expect Apple to have problems.
[+] [-] zadler|1 year ago|reply
[+] [-] tomrod|1 year ago|reply
[+] [-] Moosturm|1 year ago|reply
[+] [-] Sweepi|1 year ago|reply
I am sorry, but may I ask you, do you uphold your duties as a NeoTokyo fan, by promoting both the 2 best (un-)dead Source Mods, NeoTokyo and Dystopia?
https://store.steampowered.com/app/17580/Dystopia/ https://store.steampowered.com/app/244630/NEOTOKYO/
Sorry, was most likely funnier in my head then it really is, but I was committed to the bit once I had the idea. I was exited to see Neotokyo mention somewhere popular. NeoTokyo and Dystopia regulars compete in each others tournaments and are always looking forward to new players :)
Biggest Tournament of the year: - 5v5 matches of ~4-6 teams - broadcasted on twitch with - 1 camera person - 2-3 casters/commentators - definitely overproduced - to an audience of 15-25
Its so much fun ^.^
[+] [-] vanderZwan|1 year ago|reply
This article will probably help for future reference though!
[+] [-] ndileas|1 year ago|reply
On a meta level - I feel like I've seen anti-acronym sentiment a lot recently. I feel like it's never been easier to look these things up. There's definitely levels of acronyms which are anti-learning or a kind of protectionism, but to my mind there are appropriate levels of it to use because you have to label concepts at a useful level to accomplish things, and graphics settings of a game definitely are on the reasonable side.
[+] [-] amjoshuamichael|1 year ago|reply
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:
https://www.adriancourreges.com/blog/
[+] [-] TimTheTinker|1 year ago|reply
One of my favorites: https://acko.net/blog/how-to-fold-a-julia-fractal/. This helped me understand the relationship between trigonometric functions and complex numbers like nothing else I've ever seen.
[+] [-] art0rz|1 year ago|reply
[+] [-] unknown|1 year ago|reply
[deleted]
[+] [-] apexalpha|1 year ago|reply
[+] [-] rootext|1 year ago|reply
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/...
[+] [-] Lichtso|1 year ago|reply
[0]: https://www.microsoft.com/en-us/research/wp-content/uploads/... [1]: https://patents.google.com/patent/US20070097123A1/en
[+] [-] aappleby|1 year ago|reply
Had to do a _lot_ of work to make it production-ready, as their voronoi-based tesselation goes pathological on a lot of Asian glyphs.
[+] [-] Asooka|1 year ago|reply
[+] [-] unknown|1 year ago|reply
[deleted]
[+] [-] serf|1 year ago|reply
[+] [-] jezek2|1 year ago|reply
[+] [-] Lichtso|1 year ago|reply
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|1 year ago|reply
(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...
[+] [-] kookamamie|1 year ago|reply
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.
[+] [-] bredren|1 year ago|reply
[+] [-] TinkersW|1 year ago|reply
TAA covers all types of aliasing, while this only covers edge aliasing.
Many modern games use monte carlo based approaches for indirect lighting and other effects, which basically requires TAA.
[+] [-] globular-toast|1 year ago|reply
Hmm... On my Android phone I definitely see a difference between 2x and 4x, but it's not "rounded" like the iPhone one.
[+] [-] polytely|1 year ago|reply
[+] [-] theandrewbailey|1 year ago|reply
[+] [-] wizzard0|1 year ago|reply
[+] [-] hoseja|1 year ago|reply
[+] [-] SirMaster|1 year ago|reply
Sure it's better than TAA, but come on, this can't be the ultimate end for gaming graphics... At least I hope it isn't.
[+] [-] 01HNNWZ0MV43FF|1 year ago|reply
[+] [-] nxnxhxnxhz|1 year ago|reply
[deleted]