@DMGregory Yeah I actually saw him posting, but I guess I finally understood your explanations, except for one last detail, which why does this issue of waviness only happen in diagonal edges and not vertical/horizontal?

like my understanding was that, if we expand the bilinear formula, which is like mix(mix(a0, a1, x), mix(a2, a3, x), y) we get something like a general hyperbola equation (ax +by +cxy + d= e) with e = 0.5 usually, and since a,b,c,d are depending on the alpha values alone which are constant when we sample a particular pixel (since as long as we are sampling in the range [i + 0.5 , i + 1.5) , [j + 0.5 , j + 1.5) those alpha of the 4 nearest pixels are constant) so the equation of hyperbola

repeats and we we get a wavy-like shape, but 1) this should also happen in the case of horizontal sampling and vertical sampling and 2) I don't see how SDF avoids this problem?

A different way to see why SDF does not have this problem is when look at alpha testing, we have 3 delta functions, one is alpha = 1, next alpha = 0.5 and then alpha = 0. (delta as in dirac function)

or more like a square function actually since dirac is only at a particular time but when we sample the texture for alpha, we have 2 cases alpha = 1, alpha = 0 in our texture and this meant the bilinear interpolation when we are sampling near the alpha = 1.0 value, will drop down to 0 in a curvy way. Here are two photos to clarify what I meant

ibb.co/xhWFT3S here we have the alpha values of some pixels in some row, when X<= 2.0, we have alpha = 1, and when X > 2, we have alpha = 0.

This is not to scale drawing of what bilinear interpolation wants to do: ibb.co/XjjF0NT

with alpha testing >= 0.5, we clamp that curve when it reaches y= 0.5 instead of going all the way to y = 0, and this interpretation honestly would make sense why SDF solve the issue, because SDF have more values than just alpha = 0, and alpha = 1, and those continuous values will create a ramp like falloff when using nearest neighboring with SDF,

what I don't understand about this way of interpretation, is why bilinear interpretation without alpha testing creates blurry images in the first place, because valve paper lists 3 cases, blurry without alpha testing and wavy edges with alpha testing, and sharp edges with SDF.

the weird thing to me, is that, it is blurry without alpha testing, since all neighbor pixels of a font texture for a particular glyph should have equal alpha at the pixels we want to render the font and opposite alpha else where, so it would make sense if the edges are blurry, but why would the center of font be blurry as well? (too many questions again..)

sorry for the long message, I was lost in thoughts...

@Serilena Try working through a case where the top two corners have value 1 and the bottom two have value zero. The function collapses to a = py, and the a = 0.5 level set is a straight horizontal line.

@Serilena Samples inside a quad of all a = 1 texels, or samples inside a quad of all a = 0 texels are not blurry. The fuzziness only occurs at the edges, when you're interpolating between corners with distinct values - like at a quad straddling the 0-1 threshold, or places where the font texture included antialiasing to smooth the edges.

Here I calculated the difference between the alpha blended and alpha tested examples from the top of the Valve paper. You can see the difference is zero (black) outside and inside the glyph, and the non-zero difference traces the zig-zag of texel quads along the edges of the glyph.

(There are some false black pixels just along the alpha-test cut-off there, because I was going from a screenshot of a compressed image and had to do some scaling to make them line up correctly, resulting in intermediate colour values where there wouldn't be any if working directly with the original pixels.

I'm working on another game. discord.gg/cwj9rhtzyM if you want more info about it. Playable Version 4 in the #rocks channel. :D

I'm using gamemaker and so far I really like it.

if you just want to see video of it.

Nice! Giving me some Kessler Syndrome vibes with the cascading shrapnel leading to more shrapnel...

pew pew

@DMGregory haha yeah :D

@DMGregory but the image they used is actually blurry all over the glyph, both in the center and edges (regardless). ibb.co/6tnQC9Q

I indeed thought because we are sampling same color all inside the glyph it should not get any blurriness at all, but it seems they do? unless my understanding what alpha blending is (I assumed it is a linear interpolation based on alpha value), then I don't understand why it is blurry

I think you're seeing an optical illusion. I literally copied the image you just linked, overlaid the two halves in a photo editing tool, and computed the difference. The center of the glyph comes out black: there is no significant difference between the two images in the interior regions. (Excepting compression artifacts). Alpha testing or blending does not affect the interior of opaque regions.

Wow, that is amazing if that is truly an optical illusion, I will try to reproduce this on my machine with some photo editing tool.

because if it is true, I can not trust my eyes anymore.

(And yes, my logic was screaming, because it inside an interior region with monochrome images, alpha blending should not do anything because alpha's should add up to one from both samples and thus produce the full color intensity)