Add "universal" anti-aliasing in 2D (MSAA and/or SSAA)

[nathanfranke]

Old Issue: godotengine/godot#12840
See above issue for previous discussion

Describe the project you are working on:
Any project

Describe the problem or limitation you are having in your project:
In some instances aliasing is very clear to see. It would be optimal to make AntiAliasing work in 2D.

For example, background stars in a space game that are the size of only a few pixels.

Describe the feature / enhancement and how it helps to overcome the problem or limitation:
AntiAliasing settings should work in both 2D and 3D. (Even if eventually we add FXAA, SSAA, etc.)

Describe how your proposal will work, with code, pseudocode, mockups, and/or diagrams:
Ideally, this would work with the already existing rendering/quality/filters/msaa project setting.

If this enhancement will not be used often, can it be worked around with a few lines of script?:
This setting will be used often, but it also cannot be worked around easily.

Is there a reason why this should be core and not an add-on in the asset library?:
This is a core renderer problem so unlikely to be solved in an add-on.

[Zylann]

You mention stars in a background, however it's important to know what rendering technique you refer to. I'm not sure if MSAA works with pixels of textures, only polygon edges (quads that make up sprites, lines etc), doesn't it?
Although it's true that if that feature works in 3D there is no reason to not have it in 2D.

[Calinou]

Do we want to be able to use different MSAA levels in 2D and 3D in the same viewport? For instance, if you want lines to always be smooth but can't afford using MSAA in 3D for performance reasons.

'm not sure if MSAA works with pixels of textures, only polygon edges (quads that make up sprites, lines etc), doesn't it?

Individual rects are considered polygons, but a single texture with stars inside will be a single polygon. Therefore, MSAA won't be able to smooth out the insides of a texture.

[fire]

I discussed some approaches for implementing here. godotengine/godot#40866

[nathanfranke]

Eventually it will be nice to support SSAA which would fix the texture issue. But for now we should set the precedent of anti aliasing settings to be both 2D and 3D

[Calinou]

@nathanfranke SSAA is already supported. See the 3D viewport scaling demo (which can also apply to 2D the same way).

Keep in mind it has a significant performance cost though, making it less than ideal for 2D rendering. There are usually better ways to solve aliasing compared to a brute-force approach (except for offline rendering where quality is your primary goal).

[kCenk]

@nathanfranke SSAA is already supported. See the 3D viewport scaling demo (which can also apply to 2D the same way).

Keep in mind it has a significant performance cost though, making it less than ideal for 2D rendering. There are usually better ways to solve aliasing compared to a brute-force approach (except for offline rendering where quality is your primary goal).

I couldn't figure out a way to use this on a 2D project, the image outputted was only 1/2 my resolution.

[nathanfranke]

@kCenk I got it to work. Did you enable filtering in Viewport texture -> resource?

[kCenk]

@nathanfranke TextureRect Flags? I did set it to 4, texture_rect.texture.flags = 4

[golddotasksquestions]

Rotated Sprites and TextureRects will always have staircase edges, regardless of any project or import settings:

This is especially problematic for cardgames. Exampe:
https://www.reddit.com/r/godot/comments/id17lf/how_do_i_smoothen_these_edges/

Only workaround I found was to use Polygon2D instead of Sprites and TextureRects, enable the "antialiased" property and assign it the texture.

[Calinou]

@golddotasksquestions There are two other ways to solve it:

• Use a supersampled viewport with Filter enabled. That is, use a TextureRect to display a filtered ViewportTexture whose resolution is greater than the window size. See 3D Viewport Scaling demo for an example of this (it applies to 2D as well). This has a significant performance cost, but it works for literally anything that will be rendered.
• Add a transparent 1-pixel border on each side of the sprites and make sure filtering is enabled. This has no noticeable performance cost and still provides good smoothing.

[nathanfranke]

For rotated sprites, there should definitely be a MSAA option for 2D (Or just making the current option work for 2D).

As for anti-aliasing within textures of sprites, this can only be solved with SSAA (MSAA doesn't help with textures anyways). I propose an option next to MSAA for SSAA. I think this is a bit nicer than the viewport workaround.

[endlesstravel]

I have a very simple way to achieve this anti-aliased line:
One line (this is a CanvasItem(Node2D) ) for C# version, just copy Smooity.cs to your project
(here https://gist.github.com/endlesstravel/ae1b2adba9bebd872329d6118c0d87b2)
then :

// in overrid _Draw() , don't forget call Update() in _Process()
Smooity.DrawLine(this, new Vector2[] { Vector2.Zero, GetLocalMousePosition() }, Colors.White, 0.5f);

just checkout here:

---

Is no problem over here? Unfortunately not：
🤕

I have already implemented it, but I did not send it out because of the following points:

1. Performance issues:
   I tried to optimize performance with Mesh and DrawPolygon batch instead of calling a single DrawPolygon every time, but I failed:

• for dynamic build mesh each time, I encountered an unknown issue, Godot will draw the last line many times.
• for DrawPolygon at one time for mutiply line, it just can't handle closed poly, if it draw a circle , it will show error but draw noting.

2. Because of bugs, there are also problems with the processing of discounted edges.

---

Sincerely hope that bug(s) did not ruin godot 😢

[nathanfranke]

@endlesstravel CanvasItem.draw_line already has antialiased

Edit: I see that in Example.cs it is set to true. Not sure why the result looks so jagged then. That should be a separate bug report.

[Calinou]

In master, antialiasing is restored for line drawing using triangle strips but 2D MSAA still needs to be implemented for polygons and the like.

[Calinou]

@hazarek Please don't bump issues without contributing significant new information. Use the 👍 reaction button on the first post instead.

[nathanfranke]

@hazarek The vast majority of contributors to this project are doing so out of their own spare time for free. It is impossible to fix every issue in a small amount of time. The only way to speed up this issue is either solving it yourself, hiring someone who can, or donating to the project so the maintainers can hire someone themselves. (Edit: No further responses).

[setanarut]

It is impossible to fix every issue in a small amount of time.

This problem has existed for at least 6-7 years as far as I know. It's really pathetic to blame the users instead of apologizing to users.

[Calinou]

I released an add-on for better 2D line and polygon antialiasing in Godot 3.x. Check it out 🙂

[akien-mga]

Implemented by godotengine/godot#63003.

[Giwayume]

Can we get this backported to 3.x, should I open a different proposal for that?

[Calinou]

Can we get this backported to 3.x, should I open a different proposal for that?

godotengine/godot#63003 doesn't include the GLES3 part anymore (as per godotengine/godot#63003 (comment)), so @Geometror would have to make it available again somehow so this can be backported for 3.x.

I don't think you need to open a separate proposal – backports of fully backwards-compatible functionality are something anyone can work on.

[jordanlis]

Hi, sorry to comment again this closed issue, but I have two things to say :

• If if could be backported to 3.x, it could be great yeah !
• Does this apply to canvasLayer ? Because I think 2D graphics on viewports are smoother (not sure why), but on canvaslayer there are no options to improve 2D graphics.

I made an HD layer with a canvaslayer for my game, but the graphics are not so great because of this issue with MSAA

Not sure this is the good place to ask, but if anyone can tell me it could be great.

[Calinou]

It's technically possible to reimplement this in 3.x, but it's a lot of work – you can't just copy-paste code and expect it to work, even for GLES3. Also, nobody among the core contributors is available to do this work.

Because I think 2D graphics on viewports are smoother (not sure why)

If graphics appear smoother on a viewport, it's because you're downsampling it somehow (e.g. because you're using the 2d stretch mode and reduced the window size below the default). This has a significant performance cost.

I made an HD layer with a canvaslayer for my game, but the graphics are not so great because of this issue with MSAA

Are you sure the visual issue is because you don't have access to MSAA in 2D? Can you post a screenshot here? What's your project's base window size, and which stretch mode are you using?

[jordanlis]

It's technically possible to reimplement this in 3.x, but it's a lot of work – you can't just copy-paste code and expect it to work, even for GLES3. Also, nobody among the core contributors is available to do this work.

Understood. Well nevermind, I must be one of the only that wanted to stay on godot 3. I'm trying to port my game to godot 4.0 and I saw from the poll results that a vast majority of people is now using version 4.

If graphics appear smoother on a viewport, it's because you're downsampling it somehow (e.g. because you're using the 2d stretch mode and reduced the window size below the default). This has a significant performance cost.
Are you sure the visual issue is because you don't have access to MSAA in 2D? Can you post a screenshot here? What's your project's base window size, and which stretch mode are you using?

Well, first of all I'm not sure no, but how can I ? I just realized since I started this HD layer for my menu / inventory that HD graphics are downsampled whereas they are on an HD canvas.

Here's a screenshot of my game menu

This is acceptable, but not perfect. If you zoom, you see that this is different than in figma for example, and this is only because I'm using a huge size. I noticed that when using big texture images, it decreases the aliasing effect.
For example, the gun icon is 1200 x 600, so I had to apply a reducing factor to all of my icons (not a problem, but anyway I did what I could).

My base resolution is 1920 x 1080
Here's my window configuration

Here's the arborescence

Viewport node size

I should have given you a screenshot with the base size of my icons, I mean the real size before I use them with the big size. You can see better the issue.

EDIT :
For example, here's how the icon looks like in my file system with the size 150 x 76

Here's now how it looks like in the editor with the exact same size

In-game with this game size :

So... I think its perfect WTF :)

Ok, I know understand the issue. The fact is that I'm on my laptop which is 1980 x 1020 base resolution. And usually, I'm on my desktop PC which is with a 2K screen and I usually enlarge my window to test the game.
So the issue comes from the fact that my game is upscaled on 2K screen because of the game base resolution I think...

So maybe the solution could be to have a "stretchable" canvas ? In order to not render the texture in HD resolution and then upscale it, but display it automatically on it's base size ?
I don't even know if this is possible by parametring the nodes.