Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How does the anti-aliasing version works ? #207

Closed
lgarczyn opened this issue Oct 30, 2024 · 7 comments
Closed

How does the anti-aliasing version works ? #207

lgarczyn opened this issue Oct 30, 2024 · 7 comments
Assignees
Labels
question Further information is requested

Comments

@lgarczyn
Copy link

I've looked through the code, but I can't find anywhere how the AA version works.

It's not a render texture per the Readme, but I don't see how you can use a stencil to do this kind of effect.

@lgarczyn lgarczyn added the question Further information is requested label Oct 30, 2024
@mob-sakai
Copy link
Owner

The basic principles of AA masking mode can be easily tested even without SoftMaskForUGUI.

First, here’s the default Mask.
As you can see, the jagged edges are clearly visible.

Next, let’s try reducing Image.color.a.
Surprisingly, the jagged edges become less noticeable.
This is because the clipping sensitivity indirectly increases.

However, as it stands, it will disappear when CanvasGroup.alpha is reduced, so a bit more adjustment is needed.

@lgarczyn
Copy link
Author

I feel like I must be missing some important points, but wouldn't reducing the image.color.a just... Make the image transparent?

@mob-sakai
Copy link
Owner

The Image.color.a I’m referring to is the masking graphic (i.e., a graphic with a Mask component).

In the UI/Default shader, the stencil mask is implemented as follows:

#ifdef UNITY_UI_ALPHACLIP
clip (color.a - 0.001);
#endif

In other words, pixels with an alpha value near zero are clipped.
Looking at the alpha histogram of the masking graphic, there’s a noticeable gap at an alpha value of 0, which results in jagged edges.

Now, let’s try multiplying the alpha by a small value.
The gap becomes smaller than before, and the edges are now smooth, without jagged.

@lgarczyn
Copy link
Author

lgarczyn commented Nov 1, 2024

The Image.color.a I’m referring to is the masking graphic (i.e., a graphic with a Mask component).

In the UI/Default shader, the stencil mask is implemented as follows:

#ifdef UNITY_UI_ALPHACLIP
clip (color.a - 0.001);
#endif

In other words, pixels with an alpha value near zero are clipped.
Looking at the alpha histogram of the masking graphic, there’s a noticeable gap at an alpha value of 0, which results in jagged edges.

Now, let’s try multiplying the alpha by a small value.
The gap becomes smaller than before, and the edges are now smooth, without jagged.

Right, but whatever happens, the mask still only has 1 bit of depth. Offsetting the clipping value of the mask will simply appear to grow or shrink the mask by one pixel, but shouldn't give smooth edges.

@mob-sakai
Copy link
Owner

In clipping, referencing the bilinearly interpolated pixel values for small gaps provides a stencil result with a higher resolution than the actual pixel size.

BTW, this method cannot be used with point-filtered sprites.

@lgarczyn
Copy link
Author

lgarczyn commented Nov 2, 2024

In clipping, referencing the bilinearly interpolated pixel values for small gaps provides a stencil result with a higher resolution than the actual pixel size.

BTW, this method cannot be used with point-filtered sprites.

Oh! So the clipping is still perfectly binary, but it solves the issue of a mask with too low resolution

@mob-sakai
Copy link
Owner

Exactly!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

2 participants