Complete C# part of antialiasing, with temporary shader.

Author: Yuncong Zhang

Runtime/Resources/UIWidgets_canvas.cginc

@@ -178,3 +178,11 @@ fixed4 frag_mf (v2f i) : SV_Target {
 
      return color;
 }
+
+float strokeMask(float u, float v) {
+    return min(1.0, (1.0 - abs(u * 2.0 - 1.0)) * _alpha) * min(1.0, v);
+}
+
+fixed4 frag_stroke_alpha(v2f i) : SV_Target {
+    return _color * strokeMask(i.ftcoord.x, i.ftcoord.y);
+}

Runtime/Resources/UIWidgets_canvas_strokeAlpha.shader

@@ -0,0 +1,29 @@
+Shader "UIWidgets/canvas_strokeAlpha"
+{
+    Properties {
+       _SrcBlend("_SrcBlend", Int) = 1 // One
+       _DstBlend("_DstBlend", Int) = 10 // OneMinusSrcAlpha
+       _StencilComp("_StencilComp", Float) = 3 // - Equal, 8 - Always 
+    }
+   
+    SubShader {
+        ZTest Always
+        ZWrite Off
+        Blend [_SrcBlend] [_DstBlend]
+        
+        Stencil {
+            Ref 128
+            Comp [_StencilComp]
+            Pass IncrSat
+        }
+
+        Pass { // 0, color
+            CGPROGRAM
+            #define UIWIDGETS_COLOR
+            #include "UIWidgets_canvas.cginc"
+            #pragma vertex vert
+            #pragma fragment frag_stroke_alpha
+            ENDCG
+        }
+    }
+}

Runtime/Resources/UIWidgets_canvas_strokeAlpha.shader.meta

@@ -35,7 +35,8 @@ public static ClipElement create(int saveCount, uiPath uiPath, uiMatrix3 matrix,
             newElement.saveCount = saveCount;
 
             var pathCache = uiPath.flatten(scale);
-            var fillMesh = pathCache.getFillMesh(out newElement.convex);
+            pathCache.computeFillMesh(0.0f, out newElement.convex);
+            var fillMesh = pathCache.fillMesh;
             newElement.mesh = fillMesh.transform(matrix);
 
             var vertices = newElement.mesh.vertices;

Runtime/ui/renderer/cmdbufferCanvas/rendering/canvas_clip.cs

@@ -419,7 +419,7 @@ RenderLayer _createMaskLayer(RenderLayer parentLayer, uiRect maskBounds,
             var maskState = maskLayer.states[maskLayer.states.Count - 1];
             maskState.matrix = parentState.matrix;
 
-            drawCallback.Invoke(uiPaint.shapeOnly(paint), mesh, convex, alpha, tex, texBound, textMesh, notEmoji);
+            drawCallback.Invoke(uiPaint.shapeOnly(paint), mesh, null, convex, alpha, tex, texBound, textMesh, notEmoji);
 
             var removed = this._layers.removeLast();
             D.assert(removed == maskLayer);
@@ -528,40 +528,44 @@ void _drawWithMaskFilter(uiRect meshBounds, uiPaint paint, uiMaskFilter maskFilt
             layer.draws.Add(CanvasShader.texRT(layer, paint, blurMesh, blurLayer));
         }
 
-        delegate void _drawPathDrawMeshCallbackDelegate(uiPaint p, uiMeshMesh mesh, bool convex, float alpha,
+        delegate void _drawPathDrawMeshCallbackDelegate(uiPaint p, uiMeshMesh fillMesh, uiMeshMesh strokeMesh, bool convex, float alpha,
             Texture tex, uiRect textBlobBounds, TextBlobMesh textMesh, bool notEmoji);
 
-        void _drawPathDrawMeshCallback(uiPaint p, uiMeshMesh mesh, bool convex, float alpha, Texture tex,
+        void _drawPathDrawMeshCallback(uiPaint p, uiMeshMesh fillMesh, uiMeshMesh strokeMesh, bool convex, float alpha, Texture tex,
             uiRect textBlobBounds, TextBlobMesh textMesh, bool notEmoji) {
-            if (!this._applyClip(mesh.bounds)) {
-                ObjectPool<uiMeshMesh>.release(mesh);
+            if (!this._applyClip(fillMesh.bounds)) {
+                ObjectPool<uiMeshMesh>.release(fillMesh);
                 return;
             }
 
             var layer = this._currentLayer;
             if (convex) {
-                layer.draws.Add(CanvasShader.convexFill(layer, p, mesh));
+                layer.draws.Add(CanvasShader.convexFill(layer, p, fillMesh));
             }
             else {
-                layer.draws.Add(CanvasShader.fill0(layer, mesh));
-                layer.draws.Add(CanvasShader.fill1(layer, p, mesh.boundsMesh));
+                layer.draws.Add(CanvasShader.fill0(layer, fillMesh));
+                layer.draws.Add(CanvasShader.fill1(layer, p, fillMesh.boundsMesh));
+            }
+
+            if (strokeMesh != null) {
+                layer.draws.Add(CanvasShader.strokeAlpha(layer, p, 1.0f, strokeMesh));
             }
         }
 
-        void _drawPathDrawMeshCallback2(uiPaint p, uiMeshMesh mesh, bool convex, float alpha, Texture tex,
+        void _drawPathDrawMeshCallback2(uiPaint p, uiMeshMesh fillMesh, uiMeshMesh strokeMesh, bool convex, float alpha, Texture tex,
             uiRect textBlobBounds, TextBlobMesh textMesh, bool notEmoji) {
-            if (!this._applyClip(mesh.bounds)) {
-                ObjectPool<uiMeshMesh>.release(mesh);
+            if (!this._applyClip(strokeMesh.bounds)) {
+                ObjectPool<uiMeshMesh>.release(strokeMesh);
                 return;
             }
 
             var layer = this._currentLayer;
 
-            layer.draws.Add(CanvasShader.stroke0(layer, p, alpha, mesh));
-            layer.draws.Add(CanvasShader.stroke1(layer, mesh.duplicate()));
+            layer.draws.Add(CanvasShader.strokeAlpha(layer, p, alpha, strokeMesh));
+            layer.draws.Add(CanvasShader.stroke1(layer, strokeMesh.duplicate()));
         }
 
-        void _drawTextDrawMeshCallback(uiPaint p, uiMeshMesh mesh, bool convex, float alpha, Texture tex,
+        void _drawTextDrawMeshCallback(uiPaint p, uiMeshMesh fillMesh, uiMeshMesh strokeMesh, bool convex, float alpha, Texture tex,
             uiRect textBlobBounds, TextBlobMesh textMesh, bool notEmoji) {
             if (!this._applyClip(textBlobBounds)) {
                 ObjectPool<TextBlobMesh>.release(textMesh);
@@ -600,16 +604,19 @@ void _drawPath(uiPath path, uiPaint paint) {
                 var cache = path.flatten(state.scale * this._devicePixelRatio);
 
                 bool convex;
-                var fillMesh = cache.getFillMesh(out convex);
-                var mesh = fillMesh.transform(state.matrix);
+                cache.computeFillMesh(this._fringeWidth, out convex);
+                var fillMesh = cache.fillMesh;
+                var strokeMesh = cache.strokeMesh;
+                var fmesh = fillMesh.transform(state.matrix);
+                var smesh = strokeMesh?.transform(state.matrix);
 
                 if (paint.maskFilter != null && paint.maskFilter.Value.sigma != 0) {
-                    this._drawWithMaskFilter(mesh.bounds, paint, paint.maskFilter.Value, mesh, convex, 0, null,
+                    this._drawWithMaskFilter(fmesh.bounds, paint, paint.maskFilter.Value, fmesh, convex, 0, null,
                         uiRectHelper.zero, null, false, this.___drawPathDrawMeshCallback);
                     return;
                 }
 
-                this._drawPathDrawMeshCallback(paint, mesh, convex, 0, null, uiRectHelper.zero, null, false);
+                this._drawPathDrawMeshCallback(paint, fmesh, smesh, convex, 0, null, uiRectHelper.zero, null, false);
             }
             else {
                 var state = this._currentLayer.currentState;
@@ -629,21 +636,22 @@ void _drawPath(uiPath path, uiPaint paint) {
 
                 var cache = path.flatten(state.scale * this._devicePixelRatio);
 
-                var strokenMesh = cache.getStrokeMesh(
+                var strokeMesh = cache.computeStrokeMesh(
                     strokeWidth / state.scale * 0.5f,
+                    this._fringeWidth,
                     paint.strokeCap,
                     paint.strokeJoin,
                     paint.strokeMiterLimit);
 
-                var mesh = strokenMesh.transform(state.matrix);
+                var mesh = strokeMesh.transform(state.matrix);
 
                 if (paint.maskFilter != null && paint.maskFilter.Value.sigma != 0) {
                     this._drawWithMaskFilter(mesh.bounds, paint, paint.maskFilter.Value, mesh, false, alpha, null,
                         uiRectHelper.zero, null, false, this.___drawPathDrawMeshCallback2);
                     return;
                 }
 
-                this._drawPathDrawMeshCallback2(paint, mesh, false, alpha, null, uiRectHelper.zero, null, false);
+                this._drawPathDrawMeshCallback2(paint, null, mesh, false, alpha, null, uiRectHelper.zero, null, false);
             }
         }
 
@@ -958,7 +966,7 @@ void _drawTextBlob(TextBlob textBlob, uiOffset offset, uiPaint paint) {
                 return;
             }
 
-            this._drawTextDrawMeshCallback(paint, null, false, 0, tex, textBlobBounds, mesh, notEmoji);
+            this._drawTextDrawMeshCallback(paint, null, null, false, 0, tex, textBlobBounds, mesh, notEmoji);
         }
 
         public void flush(uiPicture picture) {

Runtime/ui/renderer/cmdbufferCanvas/rendering/canvas_impl.cs

@@ -152,6 +152,7 @@ static class CanvasShader {
         static readonly MaterialByBlendModeStencilComp _texMat;
         static readonly Material _stencilMat;
         static readonly Material _filterMat;
+        static readonly MaterialByBlendModeStencilComp _strokeAlphaMat;
 
         static CanvasShader() {
             var convexFillShader = Shader.Find("UIWidgets/canvas_convexFill");
@@ -179,6 +180,11 @@ static CanvasShader() {
                 throw new Exception("UIWidgets/canvas_stroke1 not found");
             }
 
+            var strokeAlphaShader = Shader.Find("UIWidgets/canvas_strokeAlpha");
+            if (strokeAlphaShader == null) {
+                throw new Exception("UIWidgets/canvas_strokeAlpha not found");
+            }
+
             var texShader = Shader.Find("UIWidgets/canvas_tex");
             if (texShader == null) {
                 throw new Exception("UIWidgets/canvas_tex not found");
@@ -199,6 +205,7 @@ static CanvasShader() {
             _fill1Mat = new MaterialByBlendMode(fill1Shader);
             _stroke0Mat = new MaterialByBlendModeStencilComp(stroke0Shader);
             _stroke1Mat = new Material(stroke1Shader) {hideFlags = HideFlags.HideAndDontSave};
+            _strokeAlphaMat = new MaterialByBlendModeStencilComp(strokeAlphaShader);
             _texMat = new MaterialByBlendModeStencilComp(texShader);
             _stencilMat = new Material(stencilShader) {hideFlags = HideFlags.HideAndDontSave};
             _filterMat = new Material(filterShader) {hideFlags = HideFlags.HideAndDontSave};
@@ -379,6 +386,18 @@ public static PictureFlusher.CmdDraw stroke1(PictureFlusher.RenderLayer layer, u
             );
         }
 
+        public static PictureFlusher.CmdDraw strokeAlpha(PictureFlusher.RenderLayer layer, uiPaint paint, float alpha, uiMeshMesh mesh) {
+            var mat = _strokeAlphaMat.getMaterial(paint.blendMode, layer.ignoreClip);
+            _getShaderPassAndProps(layer, paint, mesh.matrix, alpha, out var pass, out var props);
+
+            return PictureFlusher.CmdDraw.create(
+                mesh: mesh,
+                pass: 0,
+                material: mat,
+                properties: props
+            );
+        }
+
         public static PictureFlusher.CmdDraw stencilClear(
             PictureFlusher.RenderLayer layer, uiMeshMesh mesh) {
             Vector4 viewport = layer.viewport;