4 ms·

Thanks for sharing! Author here, happy to answer any questions.

Moosturm 2y ago
What an absolutely fantastic read.
flohofwoe 2y ago
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.
ferbivore 2y ago
> 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.
- mastax 2y ago
  I’m definitely seeing similar artifacts when at 2x on an iPhone 15 Pro.
  - ferbivore 2y ago
    Through Metal or in a web browser? Apple's docs say it's supposed to use the standard 0.75/0.25 sample positions with 2x MSAA: https://developer.apple.com/documentation/metal/mtldevice/2866120-getdefaultsamplepositions https://developer.apple.com/documentation/metal/mtldevice/28...
    - mastax 2y ago
      Viewing the article in Safari.
- FrostKiwi 2y ago
  Yes, that also surprised me and I tested it on multiple mobile Apple devices. It's not really a mistake per se, the implementation is free to do what it wants. Selecting MSAAx2 on these types of mobile GPUs simply has no upside and isn't really supported over MSAAx4 and I guess apple still wanted to make the choice somehow possible, as opposed to Android, where there is only an illusion of choice. It's just so happens to produce visible artifacts in this case. I suppose for 3D scenes it's mostly fine.
ferbivore 2y ago
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.
- deleted 2y ago
  [deleted]
- FrostKiwi 2y ago
  True, this is something I struggled with writing and ended up with just a small note commenting that this is not widely applicable. Will clarify more in coming posts. It's all incredibly context specific. The reason for this order, is that you can very much can use all these approaches (SSAA, FXAA, MSAA etc.) for rendering simpler shapes and HUDs. So going through them, where these approaches break down and when it does make sense to go the extra mile with SDFs. Still, non-standard rendering approaches are very much a thing [1] and I could see setups like [2] be used in scientific particle visualizations. [1] https://www.youtube.com/watch?v=9U0XVdvQwAI https://www.youtube.com/watch?v=9U0XVdvQwAI [2] https://bgolus.medium.com/rendering-a-sphere-on-a-quad-13c92025570c https://bgolus.medium.com/rendering-a-sphere-on-a-quad-13c92...
amitp 2y ago
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-gamma-correct-font-rendering/ https://www.puredevsoftware.com/blog/2019/01/22/sub-pixel-ga... [2] http://hikogui.org/2022/10/24/the-trouble-with-anti-aliasing.html http://hikogui.org/2022/10/24/the-trouble-with-anti-aliasing... [3] https://news.ycombinator.com/item?id=12023985 https://news.ycombinator.com/item?id=12023985 [4] http://hikogui.org/2022/10/24/the-trouble-with-anti-aliasing.html http://hikogui.org/2022/10/24/the-trouble-with-anti-aliasing...
- FrostKiwi 2y ago
  > Do you have advice on linear vs srgb space antialiasing? Unfortunately, this is completely context dependent. One central point is, whether or not the graphics pipeline is instructed to perform corrections (GL_FRAMEBUFFER_SRGB in OpenGL), as that changes the answer. Another point is, in which context blending is performed. Luckily the developer has full freedom here and can even specify separate blending for alpha and color [1], something that GPU accelerated terminal emulator Alacritty makes use of [2], though it doesn't do MSDF rendering. One thing I can say though: The alpha, the fading of edge, has to be linear at the end or perceived as such. Or rather if the edge were to be stretched to 10 pixels, each pixel has to be a 0.1 alpha step. (If smoothstep is used, the alpha has to follow that curve at the end) Otherwise the Anti-Aliasing will be strongly diminished. This is something you can always verify at the end. Correct blending of colors is of course a headache and context specific. > fonts have been tweaked to compensate, so sometimes srgb is better This should not concern MSDF rendering. These tweaks happened at specific resolutions with monitors popular at that time. Especially when considering HiDPI modes of modern window systems, all bets are off, DPI scaling completely overthrows any of that. MSDF is size independent and the "tweaks" are mainly thickness adjustments, which MSDF has control over. So if the font doesn't match as it looks in another rendering type, MSDF can correct for it. [1] https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/blendFuncSeparate https://developer.mozilla.org/en-US/docs/Web/API/WebGLRender... [2] https://github.com/search?q=repo%3Aalacritty%2Falacritty+blendFuncSeparate&type=code https://github.com/search?q=repo%3Aalacritty%2Falacritty+ble...
enbugger 2y ago
As a non-gamedev person but just gamer, I should expect that this will replace TAA anytime soon? Should it replace TAA?
- Arelius 2y ago
  Basically no... Analytic AA is a really hard problem for video games, and I know of no general purpose solutions. For font and 2D vector rendering it's likely, in fact afaik, some solutions, such as Slug already do. But for 3d rendering I don't know of any solutions. For an intuition, consider two triangles that intersect the same pixel. Consider if say one has 20% coverage and the other 30%, does that pixel have 50% coverage, 30% by one, 20% by one and 10% by another, or any other conceivable mix? It's very difficult to say without selecting specific points and sampling directly.
  - woctordho 2y ago
    There're already games fully using SDF rendering, such as Dreams [0]. It even made a SIGGRAPH talk [1]. [0] https://en.wikipedia.org/wiki/Dreams_(video_game) https://en.wikipedia.org/wiki/Dreams_(video_game) [1] https://www.youtube.com/watch?v=u9KNtnCZDMI https://www.youtube.com/watch?v=u9KNtnCZDMI
    - Arelius 2y ago
      Whe SDFs are being used in games, SDFs don't really change the Analytical AA story much. SDFs are generally evaluated with ray marching, which is a form of discret sampling that has the same issue regarding coverage. I think dreams might be using splats? It's possible that something like splats combined with a form of OIT along with an art style that is tolerant to certain types of artifacts could use Analytical AA. I don't know the specifics on Dreams, but i'd be surprised if even they would be using AAA.
- 0-_-0 2y ago
  I tried to do this for polygons rendered aliased by computing edge position and reweighting pixel colours. It looks great when polygons are large but it breaks for small polygons (when polygon size is close to pixel size)
Lerc 2y ago
How long did this take to write? 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.
- FrostKiwi 2y ago
  The commit history [1] reveals that, took a while. I don't write professionally, something I do in lunch breaks from time to time. Thanks for the kind words. [1] https://github.com/FrostKiwi/treasurechest/commits/main/posts/analytical-anti-aliasing/analytical-anti-aliasing.md https://github.com/FrostKiwi/treasurechest/commits/main/post...
tobr 2y ago
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.
- FrostKiwi 2y ago
  What happens during overlap, is something you control fully, at every step. (Except when using this with MSAA, as that is implementation defined) How intersections happen when blending shapes of multiple draw calls or multiple quads is defined by the blending function you set before issuing the draw call. In WebGL the call is blendFunc() [1] and there are a bunch of options. How to blend multiple shapes on the same quad, within a draw call is shown in the section "Drawing multiple?". There you fully control the intersection with the blending math. Finally, there is always the gamma question, which is true for all AA solutions. This is not covered in the post, but that might mess with the results, as is true for any kind of blending. [1] https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/blendFunc https://developer.mozilla.org/en-US/docs/Web/API/WebGLRender...
  - edflsafoiewq 2y ago
    I think the point is that a correct analytical result needs to be computed for all shapes at once. You can't composite overlapping shapes individually, since the alpha value (subpixel coverage), even if analytically correct, is lossy; you lose the information about the exact subpixel geometry, which is needed to do correct compositing (eg. does this shape completely occlude this other one within this pixel?). The standard Porter-Duff blend function assumes the subpixel geometry is a uniform random mist, which is not necessarily a great assumption for AA.
vanderZwan 2y ago
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.
- FrostKiwi 2y ago
  Ohh right! I'm sure the must be an Eleventy setting for that...
  - vanderZwan 2y ago
    Hope it's not too much of a hassle. Also, forgot to mention that I really enjoyed the article, and I'm not even a gamer! You're totally right in that the graphics community is a lovely one to follow on a technical level, even if you don't play games. Articles like yours are part of the reason for that
    - FrostKiwi 2y ago
      Thanks for the kind words <3 Implemented the opening of links in new tabs. Turns out there was a package for that [1]. Will go to good use in up-coming articles. [1] https://github.com/crookedneighbor/markdown-it-link-attributes https://github.com/crookedneighbor/markdown-it-link-attribut...
meta-level 2y ago
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).?
- Cieric 2y ago
  Not the parent, but seems this is the source code for the blog. https://github.com/FrostKiwi/treasurechest https://github.com/FrostKiwi/treasurechest Found it by going to the comments since the comments are GitHub issues the "x comment" is a link to the issues page.
- FrostKiwi 2y ago
  The blog is built with eleventy https://www.11ty.dev/ https://www.11ty.dev/ and as the previous reply already mentioned, the source code is on GitHub [2]. All posts are single Markdown file each with HTML inserted where I need it. The javascript for the demos is custom and changes from post to post. The basic style comes from Sakura CSS [3] with a bunch of custom stuff on top. [1] https://www.11ty.dev/ https://www.11ty.dev/ [2] https://github.com/FrostKiwi/treasurechest https://github.com/FrostKiwi/treasurechest [3] https://github.com/oxalorg/sakura https://github.com/oxalorg/sakura
aappleby 2y ago
Google Maps uses AAA on capsule shapes for all road segments - I wrote it ~10 years ago. :D
- delusional 2y ago
  Neat. Does that mean that every road segment is a separate mesh?
  - aappleby 2y ago
    Depends on what you mean by "mesh". Each road segment is an instanced rectangle that gets extruded and beveled so that it fits tightly against adjacent segments, and then the pixels are shaded using AAA (with a capsule-shaped distance field) so that the result looks like an antialiased wide line with round end caps and joints.
    - david-gpu 2y ago
      This brought back some memories. Long ago I had to do some AAA for line rendering on some hardware that didn't support line AA natively. A big customer was furious that they had bought a part that didn't perform the way they wanted, so I was voluntold to fix it. I was given a ridiculous timeframe to come up with a solution and present them to our customer in a big in-person meeting with all the decision makers. I managed to implement three different alternatives so that the customer would feel they had some agency selecting the one they liked the most. The best looking by far was a form of AAA. This was one out of several of these big last minute fires I was assigned to solve. Years later my manager told me how great it was knowing that the could throw any crap at me and I would be able to fix it in time. However, these sort of experiences are why I struggled with burnout during my career, which led me to save like crazy to retire as early as possible, which I did. For younglings out there: when they ask you to do the impossible, remember that failure IS an option. Push back if you think they are asking you for something unreasonable.
      - rglynn 2y ago
tomrod 2y ago
I would love to connect on some ideas around using antialiasing as a way to extend inference in extracting information from computer vision outputs.
zadler 2y ago
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!
Voultapher 2y ago
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. Thoughts? [1] https://youtu.be/WG8w9Yg5B3g https://youtu.be/WG8w9Yg5B3g
- vanderZwan 2y ago
  Disclaimer: I haven't really played games with high-end graphics on a high-end system in over a decade, and have always had more of a soft spot for games that use beautiful art design to work around the limitations of "underpowered" systems (IMO the graphics in those games hold up much better throughout the decades anyway). And as I mentioned elsewhere I'm generally quite lost when it comes to AA names and abbreviations. It would be disingenuous of me to tell a community I'm not part of what the best solution is for them. However, on a meta-level I find something like “r/FuckTAA” fundamentally entitled and ungrateful to the people who put years of their lives into making these games. Of course the loudest gamers tend to be smaller subgroup of the entitled toxic ones, so perception is distorted anyway. Plus, I do get it to some degree: if you invest a lot of money and time into powerful hardware to get beautiful graphics, you'd like to actually get beautiful graphics out of it. Still, every time I read any article on the technical workings of modern graphics, it strikes me as a community full of extremely passionate people who care about squeezing beautiful graphics out of the available hardware. There are nicer ways to say "sorry but this particular technical solution/aesthetic trend doesn't vibe with me". (Obviously this is not aimed at your nuanced take with a sincere question for discussion. And thank you for the link, will watch, because the tech still is an interesting topic to me even if I don't play these types of games)
MintPaw 2y ago
If you fade out the edge pixels like that, won't that create a 1px gap between adjacent squares? What do you do about that? 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.
Sweepi 2y ago
"A scene from my favorite piece of software in existence: NeoTokyo°." 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/17580/Dystopia/ https://store.steampowered.com/app/244630/NEOTOKYO/ 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 ^.^

What an absolutely fantastic read.

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.

ferbivore 2y ago

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

mastax 2y ago
I’m definitely seeing similar artifacts when at 2x on an iPhone 15 Pro.
- ferbivore 2y ago
  Through Metal or in a web browser? Apple's docs say it's supposed to use the standard 0.75/0.25 sample positions with 2x MSAA: https://developer.apple.com/documentation/metal/mtldevice/2866120-getdefaultsamplepositions https://developer.apple.com/documentation/metal/mtldevice/28...
  - mastax 2y ago
    Viewing the article in Safari.
FrostKiwi 2y ago
Yes, that also surprised me and I tested it on multiple mobile Apple devices. It's not really a mistake per se, the implementation is free to do what it wants. Selecting MSAAx2 on these types of mobile GPUs simply has no upside and isn't really supported over MSAAx4 and I guess apple still wanted to make the choice somehow possible, as opposed to Android, where there is only an illusion of choice. It's just so happens to produce visible artifacts in this case. I suppose for 3D scenes it's mostly fine.

ferbivore 2y ago

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.

deleted 2y ago
[deleted]
FrostKiwi 2y ago
True, this is something I struggled with writing and ended up with just a small note commenting that this is not widely applicable. Will clarify more in coming posts. It's all incredibly context specific. The reason for this order, is that you can very much can use all these approaches (SSAA, FXAA, MSAA etc.) for rendering simpler shapes and HUDs. So going through them, where these approaches break down and when it does make sense to go the extra mile with SDFs. Still, non-standard rendering approaches are very much a thing [1] and I could see setups like [2] be used in scientific particle visualizations. [1] https://www.youtube.com/watch?v=9U0XVdvQwAI https://www.youtube.com/watch?v=9U0XVdvQwAI [2] https://bgolus.medium.com/rendering-a-sphere-on-a-quad-13c92025570c https://bgolus.medium.com/rendering-a-sphere-on-a-quad-13c92...

amitp 2y ago

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-gamma-correct-font-rendering/ https://www.puredevsoftware.com/blog/2019/01/22/sub-pixel-ga... [2] http://hikogui.org/2022/10/24/the-trouble-with-anti-aliasing.html http://hikogui.org/2022/10/24/the-trouble-with-anti-aliasing... [3] https://news.ycombinator.com/item?id=12023985 https://news.ycombinator.com/item?id=12023985 [4] http://hikogui.org/2022/10/24/the-trouble-with-anti-aliasing.html http://hikogui.org/2022/10/24/the-trouble-with-anti-aliasing...

FrostKiwi 2y ago
> Do you have advice on linear vs srgb space antialiasing? Unfortunately, this is completely context dependent. One central point is, whether or not the graphics pipeline is instructed to perform corrections (GL_FRAMEBUFFER_SRGB in OpenGL), as that changes the answer. Another point is, in which context blending is performed. Luckily the developer has full freedom here and can even specify separate blending for alpha and color [1], something that GPU accelerated terminal emulator Alacritty makes use of [2], though it doesn't do MSDF rendering. One thing I can say though: The alpha, the fading of edge, has to be linear at the end or perceived as such. Or rather if the edge were to be stretched to 10 pixels, each pixel has to be a 0.1 alpha step. (If smoothstep is used, the alpha has to follow that curve at the end) Otherwise the Anti-Aliasing will be strongly diminished. This is something you can always verify at the end. Correct blending of colors is of course a headache and context specific. > fonts have been tweaked to compensate, so sometimes srgb is better This should not concern MSDF rendering. These tweaks happened at specific resolutions with monitors popular at that time. Especially when considering HiDPI modes of modern window systems, all bets are off, DPI scaling completely overthrows any of that. MSDF is size independent and the "tweaks" are mainly thickness adjustments, which MSDF has control over. So if the font doesn't match as it looks in another rendering type, MSDF can correct for it. [1] https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/blendFuncSeparate https://developer.mozilla.org/en-US/docs/Web/API/WebGLRender... [2] https://github.com/search?q=repo%3Aalacritty%2Falacritty+blendFuncSeparate&type=code https://github.com/search?q=repo%3Aalacritty%2Falacritty+ble...

enbugger 2y ago

As a non-gamedev person but just gamer, I should expect that this will replace TAA anytime soon? Should it replace TAA?

Arelius 2y ago
Basically no... Analytic AA is a really hard problem for video games, and I know of no general purpose solutions. For font and 2D vector rendering it's likely, in fact afaik, some solutions, such as Slug already do. But for 3d rendering I don't know of any solutions. For an intuition, consider two triangles that intersect the same pixel. Consider if say one has 20% coverage and the other 30%, does that pixel have 50% coverage, 30% by one, 20% by one and 10% by another, or any other conceivable mix? It's very difficult to say without selecting specific points and sampling directly.
- woctordho 2y ago
  There're already games fully using SDF rendering, such as Dreams [0]. It even made a SIGGRAPH talk [1]. [0] https://en.wikipedia.org/wiki/Dreams_(video_game) https://en.wikipedia.org/wiki/Dreams_(video_game) [1] https://www.youtube.com/watch?v=u9KNtnCZDMI https://www.youtube.com/watch?v=u9KNtnCZDMI
  - Arelius 2y ago
    Whe SDFs are being used in games, SDFs don't really change the Analytical AA story much. SDFs are generally evaluated with ray marching, which is a form of discret sampling that has the same issue regarding coverage. I think dreams might be using splats? It's possible that something like splats combined with a form of OIT along with an art style that is tolerant to certain types of artifacts could use Analytical AA. I don't know the specifics on Dreams, but i'd be surprised if even they would be using AAA.
0-_-0 2y ago
I tried to do this for polygons rendered aliased by computing edge position and reweighting pixel colours. It looks great when polygons are large but it breaks for small polygons (when polygon size is close to pixel size)

Lerc 2y ago

How long did this take to write? 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.

FrostKiwi 2y ago
The commit history [1] reveals that, took a while. I don't write professionally, something I do in lunch breaks from time to time. Thanks for the kind words. [1] https://github.com/FrostKiwi/treasurechest/commits/main/posts/analytical-anti-aliasing/analytical-anti-aliasing.md https://github.com/FrostKiwi/treasurechest/commits/main/post...

tobr 2y ago

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.

FrostKiwi 2y ago
What happens during overlap, is something you control fully, at every step. (Except when using this with MSAA, as that is implementation defined) How intersections happen when blending shapes of multiple draw calls or multiple quads is defined by the blending function you set before issuing the draw call. In WebGL the call is blendFunc() [1] and there are a bunch of options. How to blend multiple shapes on the same quad, within a draw call is shown in the section "Drawing multiple?". There you fully control the intersection with the blending math. Finally, there is always the gamma question, which is true for all AA solutions. This is not covered in the post, but that might mess with the results, as is true for any kind of blending. [1] https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/blendFunc https://developer.mozilla.org/en-US/docs/Web/API/WebGLRender...
- edflsafoiewq 2y ago
  I think the point is that a correct analytical result needs to be computed for all shapes at once. You can't composite overlapping shapes individually, since the alpha value (subpixel coverage), even if analytically correct, is lossy; you lose the information about the exact subpixel geometry, which is needed to do correct compositing (eg. does this shape completely occlude this other one within this pixel?). The standard Porter-Duff blend function assumes the subpixel geometry is a uniform random mist, which is not necessarily a great assumption for AA.

vanderZwan 2y ago

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.

FrostKiwi 2y ago
Ohh right! I'm sure the must be an Eleventy setting for that...
- vanderZwan 2y ago
  Hope it's not too much of a hassle. Also, forgot to mention that I really enjoyed the article, and I'm not even a gamer! You're totally right in that the graphics community is a lovely one to follow on a technical level, even if you don't play games. Articles like yours are part of the reason for that
  - FrostKiwi 2y ago
    Thanks for the kind words <3 Implemented the opening of links in new tabs. Turns out there was a package for that [1]. Will go to good use in up-coming articles. [1] https://github.com/crookedneighbor/markdown-it-link-attributes https://github.com/crookedneighbor/markdown-it-link-attribut...

meta-level 2y ago

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

Cieric 2y ago
Not the parent, but seems this is the source code for the blog. https://github.com/FrostKiwi/treasurechest https://github.com/FrostKiwi/treasurechest Found it by going to the comments since the comments are GitHub issues the "x comment" is a link to the issues page.
FrostKiwi 2y ago
The blog is built with eleventy https://www.11ty.dev/ https://www.11ty.dev/ and as the previous reply already mentioned, the source code is on GitHub [2]. All posts are single Markdown file each with HTML inserted where I need it. The javascript for the demos is custom and changes from post to post. The basic style comes from Sakura CSS [3] with a bunch of custom stuff on top. [1] https://www.11ty.dev/ https://www.11ty.dev/ [2] https://github.com/FrostKiwi/treasurechest https://github.com/FrostKiwi/treasurechest [3] https://github.com/oxalorg/sakura https://github.com/oxalorg/sakura

aappleby 2y ago

Google Maps uses AAA on capsule shapes for all road segments - I wrote it ~10 years ago. :D

delusional 2y ago
Neat. Does that mean that every road segment is a separate mesh?
- aappleby 2y ago
  Depends on what you mean by "mesh". Each road segment is an instanced rectangle that gets extruded and beveled so that it fits tightly against adjacent segments, and then the pixels are shaded using AAA (with a capsule-shaped distance field) so that the result looks like an antialiased wide line with round end caps and joints.
  - david-gpu 2y ago
    This brought back some memories. Long ago I had to do some AAA for line rendering on some hardware that didn't support line AA natively. A big customer was furious that they had bought a part that didn't perform the way they wanted, so I was voluntold to fix it. I was given a ridiculous timeframe to come up with a solution and present them to our customer in a big in-person meeting with all the decision makers. I managed to implement three different alternatives so that the customer would feel they had some agency selecting the one they liked the most. The best looking by far was a form of AAA. This was one out of several of these big last minute fires I was assigned to solve. Years later my manager told me how great it was knowing that the could throw any crap at me and I would be able to fix it in time. However, these sort of experiences are why I struggled with burnout during my career, which led me to save like crazy to retire as early as possible, which I did. For younglings out there: when they ask you to do the impossible, remember that failure IS an option. Push back if you think they are asking you for something unreasonable.
    - rglynn 2y ago

tomrod 2y ago

I would love to connect on some ideas around using antialiasing as a way to extend inference in extracting information from computer vision outputs.

zadler 2y ago

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!

Voultapher 2y ago

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. Thoughts? [1] https://youtu.be/WG8w9Yg5B3g https://youtu.be/WG8w9Yg5B3g

vanderZwan 2y ago
Disclaimer: I haven't really played games with high-end graphics on a high-end system in over a decade, and have always had more of a soft spot for games that use beautiful art design to work around the limitations of "underpowered" systems (IMO the graphics in those games hold up much better throughout the decades anyway). And as I mentioned elsewhere I'm generally quite lost when it comes to AA names and abbreviations. It would be disingenuous of me to tell a community I'm not part of what the best solution is for them. However, on a meta-level I find something like “r/FuckTAA” fundamentally entitled and ungrateful to the people who put years of their lives into making these games. Of course the loudest gamers tend to be smaller subgroup of the entitled toxic ones, so perception is distorted anyway. Plus, I do get it to some degree: if you invest a lot of money and time into powerful hardware to get beautiful graphics, you'd like to actually get beautiful graphics out of it. Still, every time I read any article on the technical workings of modern graphics, it strikes me as a community full of extremely passionate people who care about squeezing beautiful graphics out of the available hardware. There are nicer ways to say "sorry but this particular technical solution/aesthetic trend doesn't vibe with me". (Obviously this is not aimed at your nuanced take with a sincere question for discussion. And thank you for the link, will watch, because the tech still is an interesting topic to me even if I don't play these types of games)

MintPaw 2y ago

If you fade out the edge pixels like that, won't that create a 1px gap between adjacent squares? What do you do about that? 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.

Sweepi 2y ago

"A scene from my favorite piece of software in existence: NeoTokyo°." 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/17580/Dystopia/ https://store.steampowered.com/app/244630/NEOTOKYO/ 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 ^.^