Node icons in the 3D views have a crusty outline

[mieldepoche]

Godot version

v4.2.dev.custom_build [e948ce405], but previous versions too

System information

linux

Issue description

there's a like 1px outline around the icons that flickers a bit when translated relative to the camera.

simplescreenrecorder-2023-09-30_10.42.10.mp4

simplescreenrecorder-2023-09-30_10.44.19.mp4

Steps to reproduce

add a camera or a decal or an audiostreamplayer3d to a scene and move the camera

Minimal reproduction project

any

[capnm]

CC @MewPurPur 383c011 - 3D troubles with the stroke-opacity on the background path?

[Calinou]

This may be due to a ThorVG rasterization artifact. I'd suggest using the ThorVG reference rasterizer and outputting a 128×128 PNG to make sure (or use an editor plugin to save the editor icon as a PNG).

Perhaps using premultiplied alpha to draw 3D editor gizmo icons will hide the issue without having to modify how the images themselves are generated.

[capnm]

EDIT: I read it too fast as unpremultiplied alpha :)

Godot gets the correct unpremultiplied alpha raster image process/fix_alpha_border doesn't change anything,
IMO it looks like a 3D alpha blending issue...

5x

[Calinou]

I've tried to use premultiplied alpha using #68548, but it breaks icon rendering:

godot/editor/plugins/node_3d_editor_gizmos.cpp

Line 929 in 0ca8542

icon->set_render_priority(StandardMaterial3D::RENDER_PRIORITY_MIN);

I guess ThorVG needs to be told to generate textures for premultiplied alpha (and we need to add an option for it).

[capnm]

$ git grep premultiply_al
core/io/image.cpp:3458: ClassDB::bind_method(D_METHOD("premultiply_alpha"), &Image::premultiply_alpha);
core/io/image.cpp:3726:void Image::premultiply_alpha() {
core/io/image.h:380:    void premultiply_alpha();

https://thorvg.github.io/thorvg.viewer/

++ Maybe you could scale the foreground path 1-3 pixels larger to avoid the black pixels when rendering small icons (floating point inaccuracy issues)

[MewPurPur]

Oh yeah, I immediately realized what the deal was, I just forgot to have a fill attribute there. I'll go over gizmos to see where else this problem appears.

[MewPurPur]

Correction, I fixed the little black border above, but I actually don't know what the deal with the white outline is. In general I often find white pixels around icons in the editor, so it's probably not fixable by changing the icons themselves 🤷‍♀️

[capnm]

I don't know how you trigger that, I don*t see any such issues.

[MewPurPur]

I get it in Autocomplete.

[MewPurPur]

Can you give an update on whether you see any issues in beta5?

[mieldepoche]

didn't test with beta 5, but still there in master

[capnm]

interface/editor/code_font_size = 22 x 4

[MewPurPur]

So, transparent pixels become white?

Image.fix_alpha_edges() is a possible expensive workaround for projects, but IMO it should be fixed properly for Godot if possible. Otherwise SVG parsing gets way slower.

[aXu-AP]

Is this problem caused by having bilinear filtering on? Since svg icons are rasterized at the native resolution (AFAIK, feel free to correct me), filtering should be turned off wherever the icons are being rendered.

[Calinou]

Is this problem caused by having bilinear filtering on? Since svg icons are rasterized at the native resolution (AFAIK, feel free to correct me), filtering should be turned off wherever the icons are being rendered.

Using bilinear filtering isn't a problem if the texture is drawn at 1:1 scale compared to the viewport resolution.

However, gizmo icons are not always drawng at 1:1 scale – it depends on viewport resolution, whether Half Resolution is enabled, and so on.

Bilinear	Nearest

Nearest gets rid of the outlines, but it makes the scaling look ugly due to uneven pixel scaling.

Bilinear filtering with alpha scissor transparency gets rid of the issue as well:

However, while this would also resolve transparency sorting issues with gizmos, this prevents gizmos from having translucent areas.

With a tweaked design (no more translucent area, thinner opaque outline), we can get something that looks nicer:

However, the outline artifacts are back in this case as long as we keep using bilinear filtering.

[aXu-AP]

Hmm, too bad... Either way as Mew said, the problem should get fixed properly.
Somewhat related, I've noticed a similiar problem with partly transparent fills (which the fix alpha border cannot fix):

Would it be possible to add bias in bilinear filtering towards opaque pixels? It could solve or at least mitigate the problem? Would of course complicate the shader somewhat, so performance testing would be needed.

Here's modified icon.svg to test the problem above: