Pixelated small images and circles

Wugenois · 15 Dec 2020, 14:31

The images are added in a folder called "Content" in the build folder (with sub-folders for images' categories), and then this class load the images for the ViewModel:

namespace TMPC
{
    public static class LoadImage
    {
        /// <summary>
        /// Load an image in Content folder
        /// </summary>
        /// <param name="folderName"></param>
        /// <param name="fileName"></param>
        public static ImageSource  GetImageSource(string folderName, string fileName)
        {
            var filePath = Path.Combine("Content", folderName, fileName);
            if (!File.Exists(filePath))
            {
                return null;
            }

#if NOESIS
            var fileData = File.ReadAllBytes(filePath);
            var tex = new Texture2D(2, 2, TextureFormat.RGBA32, false);
            tex.LoadImage(fileData); 

            return new TextureSource(tex);

#else
            return new BitmapImage(new Uri($"pack://siteoforigin:,,,/{filePath}"));
#endif
        }

        /// <summary>
        /// Load an image in Content folder
        /// </summary>
        /// <param name="filePath"></param>
        public static ImageSource GetImageSource(string filePath)
        {
            if (!File.Exists(filePath))
            {
                return null;
            }

#if NOESIS
            var fileData = File.ReadAllBytes(filePath);
            var tex = new Texture2D(2, 2, TextureFormat.RGBA32, false);
            tex.LoadImage(fileData); 

            return new TextureSource(tex);

#else
            return new BitmapImage(new Uri($"pack://siteoforigin:,,,/{filePath}"));
#endif
        }

        /// <summary>
        /// Get Path for image
        /// </summary>
        /// <param name="folderName"></param>
        /// <param name="fileName"></param>
        /// <returns></returns>
        public static string GetPath(string folderName, string fileName)
        {
            return Path.Combine("Content", folderName, fileName);
        }
    }
}

This class is used in the ViewModels, for example like this :

                msg.SenderImg = LoadImage.GetImageSource(msgR.PathImgSender);

In xaml, the images are displayed with a binding :

            <Border Grid.Column="1" Grid.RowSpan="2" HorizontalAlignment="Center" VerticalAlignment="Center" Width="45" Height="45" CornerRadius="45">
                <Border.Background>
                    <ImageBrush ImageSource="{Binding SenderImg}"/>
                </Border.Background>
            </Border>

There is no "noesis:Dependency" in xaml, the images are not used in WPF or Unity, only after the project is built.

for information, I am only the integrator working in the xaml file so I didn't write the C#
Several developpers write the ViewModels, not always use the LoadImage class but it seems they always use the "Texture2D(TextureSource)"

15 Dec 2020, 16:30

From your code:

var tex = new Texture2D(2, 2, TextureFormat.RGBA32, false);

You are creating the textures without mipmaps, so I guess if you just pass there a true Unity will autogenerate the mipmaps.

Wugenois · 15 Dec 2020, 19:01

oh thank you, I didn't know this. I will try that and share it with the team.

15 Dec 2020, 20:21

Circles fixed :
Changing the "Offscreens Sample Count" to "8x" fixes the pixelation.

By the way, multisampling on the offscreens can be expensive. We always recommend 1x and enabling PPAA.

Wugenois · 16 Dec 2020, 11:04

thank you, passing the bool mipmaps parameter to true removes the aliasing and blurs the images (similarly to images added in Unity). I will just enlarge a bit the avatar picture for better resolution of the image. The mipmaps blurs a bit the large image of profile too (which that is normal)

I reduced the "Offscreens Sample Count" to 4x and will reduce to 1x later if we will not need it anymore.

Pixelated small images and circles

Re: Pixelated small images and circles

Re: Pixelated small images and circles

Re: Pixelated small images and circles

Re: Pixelated small images and circles

Re: Pixelated small images and circles

Who is online