71–80 of 104 posts
Thanks for sharing! Author here, happy to answer any questions.
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.
Thanks for sharing! Author here, happy to answer any questions.
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 t…
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
[2] https://bgolus.medium.com/rendering-a-sphere-on-a-quad-13c92...
What's the catch?
The catch is the alpha-blending, which is something modern games avoid doing as much as possible which is why so many games use that dither-pattern transparency you may have seen before. To do alpha blending correctly you need to blend with what's behind the object. But what if you haven't rendered what's behind the object? You won't have anything to blend with! This means you first have to sort all the objects you'r…
Thanks for sharing! Author here, happy to answer any questions.
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).?
Thanks for sharing! Author here, happy to answer any questions.
> 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.
It's just so happens to produce visible artifacts in this case. I suppose for 3D scenes it's mostly fine.
Earlier quoted context omitted.
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.
My feeling is if I can render at 4K I can just not do AA at all. It really looks quite fine without, at least for me.
Thanks for sharing! Author here, happy to answer any questions.
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.
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/WebGLRender...
Earlier quoted context omitted.
Neat. Does that mean that every road segment is a separate mesh?
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.
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.
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/…
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/WebGLRender...
[2] https://github.com/search?q=repo%3Aalacritty%2Falacritty+ble...
Earlier quoted context omitted.
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.
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 man…
Also, going to add "voluntold" to my lexicon :D