Poor mans Antialias

[DiffrenzyKeymaster]

I have the need for antialiasing my vectordrawings, and after several attemts, I’ve come up with this simple aproach that seems to work well. The idea is to render an oversized copy, and then draw it in tiles, downscaled to fit the target.

Extra memory needed is only temporarily an extra target image size.

 

Monkey

' Poor mans antialias. ' Antialias a vector drawing ( or anyting really if modified) by oversamling, and tiledrawing to a canvas. ' Tested on MacOS, iOS and Android ' by Peter Scheutz aka Diffrenzy ' 2017.01.10 ' #Import "<std>" #Import "<mojo>" Using std.. Using mojo.. Class AAPolygonTest Extends Window Field img:Image Field points:Float[] Method New() local pointlist:= New List<Float> Local radius:Float = 200 local offx:Float = 200 Local offy:Float = 200 For Local angle:Float = 0 to Pi*2 Step Pi/4.0 Local x:float = Cos(angle)*radius+offx Local y:float = Sin(angle)*radius+offy pointlist.AddLast(x) pointlist.AddLast(y) Next points= pointlist.ToArray() img = Polygon2AAImage(points,Color.Red,420,420) End Method OnRender( canvas:Canvas ) Override App.RequestRender() canvas.Clear( Color.White) canvas.Alpha=1 Local time:Float = Millisecs() *0.0005 Local x:Float = Cos(time)*100 Local y:Float = Sin(time)*100 ' draw normal polygon canvas.Color = Color.Blue canvas.DrawPoly(points) ' draw oversampled image canvas.Color = Color.White canvas.DrawImage(img,x,y) End End Function Main() New AppInstance New AAPolygonTest App.Run() End ' oversample polygon by drawing it ovesized, and scaling it down Function Polygon2AAImage:Image(points:Float[],fill:Color,w:Int,h:Int) Local anti:Int = 4 ' scale points Local drawpoints:= New Float[points.Length] For Local i:Int =0 Until points.Length drawpoints[i] = points[i] * anti next ' the image to return Local finalimage:Image = New Image(w,h) Local finalcanvas:= New Canvas(finalimage) ' the image we render the anti*anti parts to Local tempimage:Image = New Image(w,h) Local tempcanvas:= New Canvas(tempimage) ' remember to set mipmap flag for downscaling tempcanvas.TextureFilter = TextureFilter.Mipmap finalcanvas.Clear( New Color(0,0,0,0 )) Local sc:Float = 1.0/anti ' downscale the "brush" image tempimage.Scale = New Vec2f(sc,sc) tempcanvas.Color = fill ' tile render with offset ' remember to Flush(), or you will only see the last tile. For Local y:Int = 0 Until anti For Local x:Int = 0 Until anti tempcanvas.Clear( New Color(0,0,0,0 )) tempcanvas.PushMatrix() tempcanvas.Translate(-x*w,-y*h) tempcanvas.DrawPoly(drawpoints) tempcanvas.Flush() tempcanvas.PopMatrix() finalcanvas.DrawImage(tempimage,x*w/anti,y*h/anti) finalcanvas.Flush() next next Return finalimage End Function

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133

' Poor mans antialias. ' Antialias a vector drawing ( or anyting really if modified) by oversamling, and tiledrawing to a canvas. ' Tested on MacOS, iOS and Android ' by Peter Scheutz aka Diffrenzy ' 2017.01.10 '   #Import "<std>" #Import "<mojo>" Using std.. Using mojo..   Class AAPolygonTest Extends Window   Field img:Image Field points:Float[]   Method New() local pointlist:= New List<Float> Local radius:Float = 200 local offx:Float = 200 Local offy:Float = 200 For Local angle:Float = 0 to Pi*2 Step Pi/4.0 Local x:float = Cos(angle)*radius+offx Local y:float = Sin(angle)*radius+offy pointlist.AddLast(x) pointlist.AddLast(y) Next points= pointlist.ToArray() img = Polygon2AAImage(points,Color.Red,420,420) End   Method OnRender( canvas:Canvas ) Override App.RequestRender()   canvas.Clear( Color.White) canvas.Alpha=1 Local time:Float = Millisecs() *0.0005 Local x:Float = Cos(time)*100 Local y:Float = Sin(time)*100   ' draw normal polygon canvas.Color = Color.Blue canvas.DrawPoly(points) ' draw oversampled image canvas.Color = Color.White canvas.DrawImage(img,x,y) End   End   Function Main()   New AppInstance New AAPolygonTest App.Run()   End   ' oversample polygon by drawing it ovesized, and scaling it down Function Polygon2AAImage:Image(points:Float[],fill:Color,w:Int,h:Int)   Local anti:Int = 4 ' scale points Local drawpoints:= New Float[points.Length] For Local i:Int =0 Until points.Length drawpoints[i] = points[i] * anti next   ' the image to return Local finalimage:Image = New Image(w,h) Local finalcanvas:= New Canvas(finalimage) ' the image we render the anti*anti parts to Local tempimage:Image = New Image(w,h) Local tempcanvas:= New Canvas(tempimage) ' remember to set mipmap flag for downscaling tempcanvas.TextureFilter = TextureFilter.Mipmap finalcanvas.Clear( New Color(0,0,0,0 ))   Local sc:Float =  1.0/anti ' downscale the "brush" image tempimage.Scale = New Vec2f(sc,sc) tempcanvas.Color = fill ' tile render with offset   ' remember to Flush(), or you will only see the last tile. For Local y:Int = 0 Until anti For Local x:Int = 0 Until anti tempcanvas.Clear( New Color(0,0,0,0 )) tempcanvas.PushMatrix() tempcanvas.Translate(-x*w,-y*h) tempcanvas.DrawPoly(drawpoints) tempcanvas.Flush() tempcanvas.PopMatrix() finalcanvas.DrawImage(tempimage,x*w/anti,y*h/anti) finalcanvas.Flush() next next Return finalimage End Function

Attachments:

1. 

   Skærmbillede-2017-01-10-kl.-12.11.23.png
   

[CopperCircleParticipant]

Great, that works well.

[coconParticipant]

This looks very good for a graphics filter.

[Mark SiblyKeymaster]

This is apparently done with shaders a lot these days – possibly not quite as good, but not 4x slower either:

https://blog.codinghorror.com/fast-approximate-anti-aliasing-fxaa/

http://www.iryoku.com/smaa/

[Author]

Posts