Resolved Radial Progress Bar (custom mesh) with anti-aliasing

There is a nice tutorial how to create a radial progress bar in UI Toolkit: https://docs.unity3d.com/Manual/UIE-radial-progress.html

But the generated shape does not make use of anti-aliasing.

You can see this in the screenshot.
- left: radial progress bar (green), no anti-aliasing
- right: VisualElement with background-color and border-radius, with anti-aliasing

Question: How to apply anti-aliasing to custom meshes like the radial progress bar in UIToolkit?

 

I think this is a duplicate of https://forum.unity.com/threads/anti-aliasing-for-mesh-rendering-at-runtime.935213

> Also, since 2022.1 we provide a Vector API that you can use instead of the mesh API. The vector primitives are always antialiased: https://forum.unity.com/threads/introducing-the-vector-api-in-unity-2022-1.1210311/

@Unity, please extend the example of the Radial Progress Bar to use the vector API.

 

Oh my gosh, this is super simple using the vector API.
Simple, with anti-aliasing, and optionally with rounded start and end cap:

Code (CSharp):

1. using UnityEngine;
2. using UnityEngine.UIElements;
3.  
4. /**
5. * An element that displays progress inside a partially filled circle.
6. */
7. // Radial Progress Bar with mesh API https://docs.unity3d.com/Manual/UIE-radial-progress.html
8. // Vector API: https://forum.unity.com/threads/introducing-the-vector-api-in-unity-2022-1.1210311/
9. public class RadialProgressBarNew : VisualElement
10. {
11.     public new class UxmlFactory : UxmlFactory<RadialProgressBarNew, UxmlTraits> { }
12.     public new class UxmlTraits : VisualElement.UxmlTraits
13.     {
14.         UxmlFloatAttributeDescription m_ProgressAttribute = new UxmlFloatAttributeDescription() { name = "progress" };
15.         UxmlBoolAttributeDescription m_RoundLineCapAttribute = new UxmlBoolAttributeDescription() { name = "round-line-cap" };
16.  
17.         public override void Init(VisualElement ve, IUxmlAttributes bag, CreationContext cc)
18.         {
19.             base.Init(ve, bag, cc);
20.  
21.             RadialProgressBarNew target = ve as RadialProgressBarNew;
22.             target.progressInPercent = m_ProgressAttribute.GetValueFromBag(bag, cc);
23.             target.lineCap = m_RoundLineCapAttribute.GetValueFromBag(bag, cc) ? LineCap.Round : LineCap.Butt;
24.         }
25.     }
26.  
27.     private float progressInPercent;
28.     private float trackWidthInPx = 24;
29.     private float progressWidthInPx = 24;
30.     private float progressPercentInPx = 80f;
31.     private Color trackColor = Color.gray;
32.     private Color progressColor = Color.blue;
33.     private LineCap lineCap = LineCap.Round;
34.  
35.     void OnGenerateVisualContent(MeshGenerationContext mgc)
36.     {
37.         Painter2D painter = mgc.painter2D;
38.         float radius = contentRect.width / 2;
39.         float startAngle = -90;
40.         float endAngle = startAngle + (360 * progressInPercent / 100);
41.         Vector2 center = contentRect.center;
42.    
43.         // Draw Track
44.         painter.BeginPath();
45.         painter.strokeColor = trackColor;
46.         painter.lineWidth = trackWidthInPx;
47.         painter.lineCap = lineCap;
48.         painter.Arc(contentRect.center, radius, 0, 360);
49.         painter.Stroke();
50.    
51.         // Draw Progress
52.         if (progressInPercent > 0)
53.         {
54.             painter.BeginPath();
55.             painter.strokeColor = progressColor;
56.             painter.lineWidth = progressWidthInPx;
57.             painter.lineCap = lineCap;
58.             painter.Arc(center, radius, startAngle, endAngle);
59.             painter.Stroke();
60.         }
61.     }
62.  
63.     public RadialProgressBarNew()
64.     {
65.         generateVisualContent = OnGenerateVisualContent;
66.     }
67. }
68.  

The details of this control can be coded by the interested reader .

IMO, the Radial Progress example should be changed to use the vector API instead.