How to eliminate weird moire and line jitter (View zoom/antialiasing)

[mkalex777]

here is short example which demonstrates the issue:

(click to show/hide)

using System;
using System.Linq;
using System.Collections.Generic;
using SFML.Graphics;
using SFML.System;
using SFML.Window;

namespace TestAntialias
{
    class Program
    {
        static void Main(string[] args)
        {
            using (var app = new App())
            {
                app.Run(args);
            }
        }
    }

    public sealed class App : IDisposable
    {
        private View _view;
        private Vector2f _center = new Vector2f(0F, 0F);
        private float _scale = 5;
        private float _targetScale = 0.05F;

        public App()
        {
            _view = new View();    
        }
       
        public void Dispose()
        {
            if (_view != null)
            {
                _view.Dispose();
                _view = null;
            }
        }

        public void Run(string[] args)
        {
            using (var window = new RenderWindow(
                new VideoMode(800, 800),
                "Test Antialias",
                Styles.Default,
                new ContextSettings() { AntialiasingLevel = 16 }))
            {
                window.Closed += (s, e) => window.Close();
                window.SetVerticalSyncEnabled(true);
                window.SetFramerateLimit(0);
                window.SetVisible(true);
                window.SetActive(true);
                window.RequestFocus();
                while (window.IsOpen)
                {
                    window.DispatchEvents();
                    Update();
                    Render(window);
                    window.Display();
                }
            }
        }

        private void Update()
        {
            _scale += 0.005F * (_targetScale - _scale) * _scale;
        }

        private void Render(RenderTarget target)
        {
            target.Clear(Color.White);
           
            _view.Size = (Vector2f)target.Size;
            _view.Zoom(1F / _scale);
            _view.Center = _center;
            target.SetView(_view);

            // draw grid
            const int step = 50;
            const int halfSize = step * 100;
            var color = Color.Black;
            for (var i = -halfSize; i <= halfSize; i += step)
            {
                DrawLine(
                    target,
                    new Vector2f(-halfSize, i),
                    new Vector2f(halfSize, i),
                    i % (step * 10) == 0 ? 4F : 1F,
                    color);
                DrawLine(
                    target,
                    new Vector2f(i, -halfSize),
                    new Vector2f(i, halfSize),
                    i % (step * 10) == 0 ? 4F : 1F,
                    color);
            }
        }

        public static void DrawLine(
            RenderTarget target,
            Vector2f start,
            Vector2f end,
            float thickness,
            Color color)
        {
            var dv = end - start;
            var dl = (float)Math.Sqrt(dv.X * dv.X + dv.Y * dv.Y);
            var uv = dv / dl;
            var up = new Vector2f(-uv.Y, uv.X);
            var offset = up * (thickness / 2F);
            var array = new[]
            {
                new Vertex(start + offset, color),
                new Vertex(end + offset, color),
                new Vertex(end - offset, color),
                new Vertex(start - offset, color),
            };
            target.Draw(array, PrimitiveType.Quads);
        }
    }
}
 

I tried different ways but didn't found any solution to this.
Those distortions and moire looks very bad with some scale values.
Could you please help me to eliminate those weird distortions?

May be there is any way to fix it with some kind of shaders and post processing effects?

Also it looks much worse on the system which doesn't support MSAA (OpenGL 2.3).
Is there any way to fix it? May be there is any kind of software MSAA?

Here is screenshot:

[mkalex777]

Tried the same test on D2D with using built-in RenderTarget.DrawLine function, it works a little better (moire is not so high like with SFML example), but it's still exists.

Here is screenshot with comparison between SFML and D2D:

(click to show/hide)

Here is screenshot with comparison for the last frame in the animation:

(click to show/hide)

As you can see D2D antialiasing works much better, but it's still has some issues.

I read some articles on the internet and it seems that it's impossible to render good antialiased line with using of standard MSAA. I found some suggestions to implement DrawLine with shaders. I didn't worked with shaders before. Can anyone help me with examples on how to utilize it for DrawLine function?

[Mario]

You could draw one of those quads (i.e. the repeating pattern) to a texture that's actually two or even four times the final display size/resolution. Then render the repeated texture to one single big quad.

[mkalex777]

I found strange issue with SFML antialiasing.
Here is screenshot (I used the same source with static scale=1):

(click to show/hide)

All lines were drawn with Color.Black. But as you can see, SFML antialiasing changes color to grey incorrectly.
While D2D antialiasting shows still black lines.


Here is a small fix in DrawLine function (with line thickness).
It works incorrectly, because draws line 2x times bold.
With using it, SFML result looks very close to D2D.

        public static void DrawLine(
            RenderTarget target,
            Vector2f start,
            Vector2f end,
            float strokeWidth,
            Color color)
        {
            var dv = end - start;
            var dl = (float)Math.Sqrt(dv.X * dv.X + dv.Y * dv.Y);
            var uv = dv / dl;
            var up = new Vector2f(-uv.Y, uv.X);
            var offset = up * strokeWidth;
            var array = new[]
            {
                new Vertex(start + offset, color),
                new Vertex(end + offset, color),
                new Vertex(end - offset, color),
                new Vertex(start - offset, color),
            };
            target.Draw(array, PrimitiveType.Quads);
        }
 

Here is comparison between SFML and D2D antialiasing:

(click to show/hide)

As you can see, the image is very close. But...
There is an issue with line jitter for both - SFML and D2D. May be it's related to precision of float value.

With take into account this issue, D2D antialiasing works great. It shows all lines with no skip.
But there is another picture for SFML - some lines just disappearing.
So, it's definitely SFML antialiasing issue.

[Laurent]

"SFML antialiasing" is just OpenGL multi-sampling. There's nothing much we can do...

D2D anti-aliasing is probably a totally different one, since it is optimized for 2D.

[Mario]

Forgot to mention it earlier. If possible, you should provide a comparison either using raw OpenGL or some other OpenGL library. Behind the scenes the driver will most likely execute the very same instructions, but there might be different defaults and/or commands (as Laurent mentioned).

[mkalex777]

"SFML antialiasing" is just OpenGL multi-sampling. There's nothing much we can do...

I think it's not "just OpenGL", because OpenGL MSAA depends on many opengl settings (and it's configuration sequence) which is configured by SFML. I read about some issues which happens with OpenGL MSAA with some specific combination of opengl settings.

For example:

opengl antialiasing does not work properly in recent processing versions unless you
first do a " hint(DISABLE_OPENGL_2X_SMOOTH);" Then you can reenable it or
smooth() or whatever. If you don't disable it first, you don't get the
best AntiAlias quality.

I'm not sure if it's the root of cause, because this commet was related to another software, but incorrect configuration may leads to poor antialiasing

Just look at this test example:

(click to show/hide)

using System;
using System.Linq;
using System.Collections.Generic;
using SFML.Graphics;
using SFML.System;
using SFML.Window;

namespace TestAntialias.SFML
{
    class Program
    {
        static void Main(string[] args)
        {
            using (var app = new App())
            {
                app.Run(args);
            }
        }
    }

    public sealed class App : IDisposable
    {
        private View _view;

        public App()
        {
            _view = new View();    
        }
       
        public void Dispose()
        {
            if (_view != null)
            {
                _view.Dispose();
                _view = null;
            }
        }

        public void Run(string[] args)
        {
            using (var window = new RenderWindow(
                new VideoMode(800, 800),
                "Test Antialias SFML",
                Styles.Default,
                new ContextSettings() { AntialiasingLevel = 16 }))
            {
                window.Closed += (s, e) => window.Close();
                window.SetVerticalSyncEnabled(true);
                window.SetFramerateLimit(0);
                window.SetVisible(true);
                window.SetActive(true);
                window.RequestFocus();
                while (window.IsOpen)
                {
                    window.DispatchEvents();
                    Render(window);
                    window.Display();
                }
            }
        }

        private void Render(RenderTarget target)
        {
            target.Clear(Color.White);
           
            _view.Size = (Vector2f)target.Size;
            _view.Zoom(1F / 0.0500074476F);
            _view.Center = new Vector2f(0F, 0F);
            target.SetView(_view);

            // draw grid
            const int step = 50;
            const int halfSize = step * 100;
            var color = Color.Black;
            for (var i = -halfSize; i <= halfSize; i += step)
            {
                DrawLine(
                    target,
                    new Vector2f(-halfSize, i),
                    new Vector2f(halfSize, i),
                    i % (step * 10) == 0 ? 4F : 1F,
                    color);
                DrawLine(
                    target,
                    new Vector2f(i, -halfSize),
                    new Vector2f(i, halfSize),
                    i % (step * 10) == 0 ? 4F : 1F,
                    color);
            }
            DrawLine(
                target,
                new Vector2f(-100, -100),
                new Vector2f(100, 100),
                25F,
                Color.Black);
        }

        public static void DrawLine(
            RenderTarget target,
            Vector2f start,
            Vector2f end,
            float strokeWidth,
            Color color)
        {
            strokeWidth *= 2F;
            var dv = end - start;
            var dl = (float)Math.Sqrt(dv.X * dv.X + dv.Y * dv.Y);
            var uv = dv / dl;
            var up = new Vector2f(-uv.Y, uv.X);
            var offset = up * strokeWidth / 2F;
            var array = new[]
            {
                new Vertex(start + offset, color),
                new Vertex(end + offset, color),
                new Vertex(end - offset, color),
                new Vertex(start - offset, color),
            };
            target.Draw(array, PrimitiveType.Quads);
        }
    }
}
 

Here is D2D test source:

(click to show/hide)

using System;
using System.Linq;
using System.Collections.Generic;
using Managed.Graphics.Direct2D;
using TestAntialias.D2D.Wrappers;

namespace TestAntialias.D2D
{
    class Program
    {
        static void Main(string[] args)
        {
            using (var window = new RenderWindow(new SizeU(800, 800)))
            {
                window.Closed += (s, e) => window.Close();
                window.RenderRequest += (s, e) => Render(window);
                window.Text = "Test Antialias D2D";
                window.SetPresentOptions(PresentOptions.None);
                window.SetAntialiasMode(AntialiasMode.PerPrimitive);
                window.SetVisible(true);
                while (window.IsOpen)
                {
                    window.DispatchMessages();
                    Render(window);
                }
            }
        }

        private static void Render(RenderWindow target)
        {
            target.BeginDraw();
            target.Clear(Color.FromKnown(Colors.White, 1F));

            var view = new View();
            view.Size = new SizeF(target.Size.Width, target.Size.Height);
            view.Scale = 0.0500074476F;
            view.Center = new PointF(0,0);
            target.SetView(view);

            // draw grid
            const int step = 50;
            const int halfSize = step * 100;
            var color = Color.FromKnown(Colors.Black, 1F);
            for (var i = -halfSize; i <= halfSize; i += step)
            {
                target.DrawLine(
                    new PointF(-halfSize, i),
                    new PointF(halfSize, i),
                    i % (step * 10) == 0 ? 4F : 1F,
                    color);
                target.DrawLine(
                    new PointF(i, -halfSize),
                    new PointF(i, halfSize),
                    i % (step * 10) == 0 ? 4F : 1F,
                    color);
            }
            target.DrawLine(
                new PointF(-100, -100),
                new PointF(100, 100),
                25F,
                Color.FromKnown(Colors.Black, 1F));
            target.EndDraw();
        }
    }
}
 

D2D test sample uses my wrapper, here is some code to understand what happens under the hood:

(click to show/hide)

        public void DrawLine(PointF start, PointF end, float width, Color color)
        {
            if (!IsOpen || _renderTarget == null || !_isBeginDrawOpen)
                return;
            _renderTarget.DrawLine(  // _renderTarget is D2D WindowRenderTarget
                ResourceManager.GetBrush(this, color),
                width,
                start,
                end);
        }

        public void SetView(View view)
        {
            if (!IsOpen || _renderTarget == null || !_isBeginDrawOpen)
                return;
            _renderTarget.Transform = view.Transform;
        }

// from View implementation:
        public Matrix3x2 Transform
        {
            get
            {
                if (!_transformUpdated)
                {
                    var hSize = new PointF(_size.Width / 2F, _size.Height / 2F);
                    _transform =
                        Matrix3x2.Translation(hSize.X - _center.X, hSize.Y - _center.Y) *
                        Matrix3x2.Scale(_scale, _scale, hSize) *
                        Matrix3x2.Rotation(-_rotation, hSize);
                    _transformUpdated = true;
                }
                return _transform;
            }
        }
 

Results:

(click to show/hide)

(click to show/hide)

SFML screenshot shows that antialiasing is very poor

[Laurent]

I think it's not "just OpenGL", because OpenGL MSAA depends on many opengl settings (and it's configuration sequence) which is configured by SFML

Not really... SFML enables multi-sampling if you tell it to, and uses the number of samples that you set in sf::ContextSettings. That's it for the "many OpenGL settings".

But if you have a good understanding of OpenGL anti-aliasing, and you think we do it the wrong way, why don't you test it yourself and try to come up with a better "configuration sequence"? That would be much more relevant than comparing the result to some other API about which we know nothing.

[mkalex777]

I think it's not "just OpenGL", because OpenGL MSAA depends on many opengl settings (and it's configuration sequence) which is configured by SFML

Not really... SFML enables multi-sampling if you tell it to, and uses the number of samples that you set in sf::ContextSettings. That's it for the "many OpenGL settings".

But if you have a good understanding of OpenGL anti-aliasing, and you think we do it the wrong way, why don't you test it yourself and try to come up with a better "configuration sequence"? That would be much more relevant than comparing the result to some other API about which we know nothing.

I'm noob in opengl. I just see poor antialiasing and trying to understand how to fix it
I see that D2D has much better MSAA. I'm not sure but I think that MSAA should works with the same quality (ok, with minor +-) on opengl and d2d. Because it uses the same technique (and probably the same code). But test shows that it works much worse. Why?

[Laurent]

I'm noob in opengl

So how do you know all that stuff?

OpenGL MSAA depends on many opengl settings (and it's configuration sequence)

I see that D2D has much better MSAA

How do you know it is MSAA?

But test shows that it works much worse. Why?

The only way to spot the difference is to know exactly how OpenGL MSAA works, and how D2D antialiasing works.

[mkalex777]

Just read some discussions about D2D internals and it seems that it's really using it's own antialiasing which is highly criticized for high cpu usage. It uses some heavy tessellation which splits even simple line into thousands of triangles and doing it on cpu. As result, it's complicated to make high performance for a lot of primitives with enabled antialiasing on D2D, because it leads to processing millions triangles inside D2D.
But result of D2D rendering is really impressive. I just implemented a small test to render outline texts, and it looks really cool. And the code is pretty easy, because all things to build outline geometry is done with several D2D calls. And the most cool thing is that D2D works good enough even with generating geometry just in real time. SFML lags like hell when I tried to render text with different sizes in real time. So, I implemented single text instance with fixed font size and scale it to desired size in render code. But with D2D it works well just out of the box with no any optimizations and with no need to scale.
Here is how the text looks with D2D (unfortunately I cannot achieve the same result with SFML):


The bad thing is that D2D can run on windows only

But my question is still open. How I can improve antialiasing with using SFML?

[Laurent]

But my question is still open. How I can improve antialiasing with using SFML?

The only option that SFML provides is the number of samples when you enable MSAA. For other solutions you'll have to look at what you can do with OpenGL directly. Google "2D antialiasing OpenGL" for a starting point