godotengine / godot

Godot Engine – Multi-platform 2D and 3D game engine
https://godotengine.org
MIT License
89.42k stars 20.24k forks source link

Pixel artifacts on model in 3D - Gets more prevalent the lower the resolution #91602

Open Knairda0 opened 4 months ago

Knairda0 commented 4 months ago

Tested versions

System information

MacOS 14.4.1 - M1 Pro - Vulkan (Forward+) / Windows 11 23H2 - GTX 1060 6GB

Issue description

Pixel artifacts appear on the player character model in the 3D scene. The rogue pixels appear to be behaving with an "X-ray" effect, where it shows color of the geometry behind what should be rendered in front.

Notice how the artifacts become much more frequent and noticeable the lower resolution the game is set at. Videos of tested resolutions are as follows:

https://github.com/godotengine/godot/assets/65742713/c16ec3e8-9962-4426-963a-aa463621df21

https://github.com/godotengine/godot/assets/65742713/5098d100-6ae2-45f1-965a-6b11c9a5d48f

https://github.com/godotengine/godot/assets/65742713/0b9316a7-cc60-44b7-a942-821757c5695d

https://github.com/godotengine/godot/assets/65742713/f5619b1f-cbcb-4e30-ad02-ca270bd1034c

Steps to reproduce

  1. Open the attached MRP and run the game.
  2. Walk around with A/D and jump with Space.
  3. Observe artifacts as the player model animates.
  4. Experiment with the resolution in Project > Project Settings > Window > Size.

I worked with the Godot Discord community to troubleshoot for a few days, including ensuring model LODs were turned off, changing rendering and AA settings, but nothing fixed the issue.

Minimal reproduction project (MRP)

Pixel Artifacts.zip

lawnjelly commented 4 months ago

Have you got enough border area around each UV island? Typically you would use an automated dilate to duplicate edge texels around UV islands, but for drawn stuff, you can draw in the borders manually.

You need some kind of dilation to account for texture filtering, mipmapping, and filtering accuracy error.

Here's an example dilated texture: frog1

Also I would double check there is no transparency selected for the material, it will run faster if opaque.

EDIT: Looks like photopea.com can do this. Just choose filter/3d/texture_dilation.

huwpascoe commented 4 months ago

Have you got enough border area around each UV island

Yep, confirmed it looking at their MRP

See that one pixel border, not enough. The moment mipmaps are generated, it's leaking into the rest of the image. image

If I flood fill the transparent area blue, you can see a blue outline around the face image

lawnjelly commented 4 months ago

Dilated texture seems to fix it for me:

Lily

Here is more info on edge padding: http://wiki.polycount.com/wiki/Edge_padding

Knairda0 commented 4 months ago

Thank you both for the valuable info and resources, I tried it out and it fixed the problem!

https://github.com/godotengine/godot/assets/65742713/b19fdeb3-48a2-42f5-a420-f7f9ba555535

AThousandShips commented 4 months ago

Let's keep this open so we can document this solution