Hi all,
What is the best practice to perform anti-aliasing on mesh generated in UI Toolkit?
I did some digging in the forum and it seems that there is only a solution for the editor but not runtime?
Hi all,
What is the best practice to perform anti-aliasing on mesh generated in UI Toolkit?
I did some digging in the forum and it seems that there is only a solution for the editor but not runtime?
That’s correct. MSAA is basically ignored at the time the UI Toolkit hierarchy is rendered.
We have other antialiasing plans in the future, but as a workaround, you can render the hierarchy in a RenderTexture with a sample count > 1, then overlay that texture over the screen.
Hello mcoted3d,
Is there an ETA for the future antialiasing solution?
Cheers,
Rayming
Our goal is to provide antialiasing without the need for an MSAA-enabled render target, but we can’t provide an ETA at this time unfortunately.
Thank you.
Is this still the suggested way of doing AA at runtime? And if so is there an example of doing this somewhere?
It’s still the suggested way of doing it.
You can get a similar example in the Window > UI Toolkit > Examples > Rendering > RenderTexture 3D sample. This example renders the UI Toolkit hierarchy in a RenderTexture that’s applied on 3D objects. You can apply it on a simple quad that’s oriented towards the camera instead.
Interesting, would this also be how you’d suggest rendering worldspace UI Toolkit elements?
At this time, it’s the only way to do UI Toolkit world space rendering.
We will eventually provide a real world-space panel that doesn’t require a RenderTexture.
According to the roadmap, anti aliasing is supposed to arrive in 2021.2. But that is almost 1 whole year from now. Would it be possible to shift it a little forward in the priority queue given how important it is to have sharp UI. Currently everything looks good rendering wise except for the fact that my elements look like this: (Image below shows 2 elements with border radius 50%)
In contrast, this is how round edges should look like (Screengrab from browser search bar).
I understand the importance of this feature, but I don’t see a path where we could ship this sooner. So, you’ll have to rely on MSAA to have antialiasing in UI Toolkit.
Note that if you are using UI Toolkit at runtime, you’ll have to use a RenderTexture with MSAA enabled as the PanelSetting’s target to achieve antialiasing.
But will buttons work then? And what is the best way to get a render texture to cover the entire screen?
Buttons (assuming you are using UI Toolkit styles for rounded borders) should smooth out when rendered in an MSAA-enabled target.
If you know beforehand the target resolution, you can create a RenderTexture asset with the appropriate size. Otherwise, you can programmatically create a RenderTexture that uses Screen.width and Screen.height for its size, and assign it to the PanelSetting’s targetTexture property.
You can then assign this texture to a full screen quad parented to the camera in the 3D scene.
Yeah, I got it working by adding a default canvas with a raw image and setting its texture to my render texture. This works, but would it theoretically be possible to make a scriptable render feature with anti aliasing and apply that to the whole screen?
In theory yes. In practice, the UI Toolkit overlay is rendered after the cameras and postprocessing effects, so we’re out of luck. Our “antialiasing without MSAA” effort motivation was partly caused by these limitations.
So even if I chose “After Rendering” which one would think should happen after the entire frame has been rendered it will not work?
Correct. UI Toolkit is currently rendered after all cameras and postprocessing. Even if your main camera has MSAA enabled, the MSAA will already be resolved by the time UI Toolkit starts rendering. This is an unfortunate limitation that we may try to alleviate in the future.
Hmm. A possible temporary solution could be to give the user the ability to change where the UI is rendered, or would that cause some problems? In my case I have a 100% UI based application so rendering the UI before anything would cause no problem as I do not have any cameras in my scene.
Noted, thanks for the feedback. It’s not 100% clear to me what would be the consequences of triggering the UI render before the cameras, but it’s worth investigating. Thanks!
From untiy3d 2021.2 “What’s new in UI Toolkit”
I have put UITookit vector image as background for Visual Element.
It did not look like it was anti aliased.
So is Vector image not anti aliased even with this new feature ?
Or should this new feature be enabled in some way.
So following this thread, I have created another UI document with VisualElement only and render to texture with MSAA.
And later I use this Render texture as background image for visual element in different document, it works and image is anti aliased. One problem that I have is that i have to control the size of this render texture manually.
Now also the question arise, should I do it this way or it’s better to render everything to texture and just place it as full screen Visual Element ?