Pixelated small images and circles

Wugenois · 10 Dec 2020, 15:09

Hello

In our Unity project, we have a pixelation (or aliasing) problem with small images (avatar profile) and circles (currently paths in xaml).

Here the small circles used as background in Blend (blurred circles) and in Unity (deformed circles) :

: blend.PNG (13.84 KiB) Viewed 1961 times

: unity.PNG (10.87 KiB) Viewed 1961 times

The (very reduced) xaml for the circles :

<Path Fill="{TemplateBinding Foreground}" Opacity="0.3"
 Data="M732.348,17.261 C732.802,17.261 733.169,17.629 733.169,18.082 C733.169,18.536 732.802,18.903 732.349,18.903 C731.895,18.903 731.528,18.536 731.528,18.082 C731.528,17.629 731.895,17.261 732.348,17.261 ZM733.195,0.224 C733.196,0.702 732.809,1.089 732.332,1.089 C731.855,1.088 731.468,0.701 731.468,0.224 C731.468,0.145 731.493,0.073 731.513,-0.000 Z"/>

Here the result for the images in a Unity build :

: image.png (15.43 KiB) Viewed 1961 times

Note : these avatar's pictures are added after the project is builded, so we cannot ajust their setting on Unity (neither add the Noesis label).
I already tried to change the property "RenderOptions.BitmapScalingMode="HighQuality"" to "Linear" for small images, as explain in the Images Tutorial, but it didn't render less pixelated.
The xaml that contains the image :

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

In the Quality of the Project Settings, the anti-aliasing is set to 8x Multi Sampling.
In the Camera Inspector the MSAA and the Rendering Path are set to Use Graphics Setting.
In the Noesis View, the Enable PPAA is checked.

The game resolution is 1920*1080.

Is their a way to fixe the aliasing of (smalled) cercles and small pictures ?

thanks in advance

10 Dec 2020, 18:01

I think those small circles appear deformed because PPAA is not being used on that View, could you please verify that again? See the difference when using PPAA (left) or not using it (right):

: ppaa-noppaa.png (2.17 KiB) Viewed 1956 times

I want to remark also that the circles are being rendered in an opacity group as you are setting path Opacity="0.3" and default setting for 'Offscreen Sample Count' is 1x (so no MSAA is used for offscreen textures). Anyway it is more efficient if you set the opacity in the brush instead of the element to avoid the offscreen texture (in recent 3.0.8 version we automatically detect simple nodes to transfer opacity value to the brush to avoid offscreen rendering as much as possible).

Regarding the avatar pictures the aliasing is produced by using non-premultiplied alpha images, because I guess the circular alpha mask is included in the image, and we are blending the black pixels near the edge of the mask with the background producing unexpected colors (see the darker pixels on the edge of the image):

: pma.png (7.56 KiB) Viewed 1956 times

One solution is to have those runtime images already converted to premultiplied alpha.
And another option is to provide images without the mask (fully opaque) and let the Path or Border to do the clipping (when the image is applied to the circular geometry).

Please let us know if that fixes your problems.

Wugenois · 11 Dec 2020, 12:09

Circles fixed :
Changing the "Offscreens Sample Count" to "8x" fixes the pixelation.
For this specific background, I optimize the code by using the Foreground/Background/Borderbrush propreties of a Label to define the colors of several elements of the background. These elements can have differents opacities so defining opacity on the elements is necessary but thank a lot for your recommandation, I note that and I will eventually modify the brushes of our background template if we encounter again the pixelation.

Photos :
The circular shape is only made with two Borders CornerRadius, one white and one above with the clipped image as background.

            <Border Grid.Column="1" Grid.RowSpan="2" HorizontalAlignment="Center" VerticalAlignment="Center" Width="45" Height="45" CornerRadius="45" Background="{StaticResource WhiteBrush}" />
            <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>

The photos are already converted to premultiply alpha (using photoshop) and there is no circular border to these photos.
I supposed that we cannot have more pixels that the small proportion provides and need to blur the image.
Here the Inspector's infos when I just include the images in the project (without touching any settings)

Wugenois · 11 Dec 2020, 12:11

The "Alpha is Transparency" is not checked, so maybe I didn't converted perfectly the images in premultiply-alpha

11 Dec 2020, 12:23

What I meant about the photos is to avoid using transparency in the image and let the geometry do the clipping.
So instead of having this:

: photo-masked.jpg (20.86 KiB) Viewed 1940 times

Use something like this:

: photo-opaque.jpg (21.2 KiB) Viewed 1940 times

That way you don't need premultiplied alpha images at all, because they are totally opaque.

Wugenois · 11 Dec 2020, 16:14

In fact we need transparency to display the picture on others screen.
I redid the premultiplied alpha and here three different locations.

: premultiply-alpha.PNG (53.61 KiB) Viewed 1937 times

: smallRound.PNG (6.57 KiB) Viewed 1937 times

For the very small cricle avatar (compare with the text), I think we cannot avoid such a blurry pixelation for there is not enough pixels provided for display precisely a complete face.

15 Dec 2020, 10:56

I think I understand the problem now with the images, it is not about the borders of the image circle, but the aliasing in the image itself when rendered at small sizes.
You said that those images are added after Unity project is built so my guess is that images don't have mipmaps, could that be the issue?
Could you please attach here the original image, so we can also test it?

Wugenois · 15 Dec 2020, 12:21

Thank you for you reply, here the picture used for the tests above :

Wugenois · 15 Dec 2020, 12:37

After study what MIP mapping is, I think it's very probable that the pictures we used after the build don't have mipmaps.

In the Inspector's infos on Unity, it seemed that Unity can generate mipmaps so the images added after the build will surely not have mipmaps.

Is there a way to create mipmaps to pictures without Unity ?

15 Dec 2020, 13:04

How are you adding and loading the new images into your application once the project is built?
How are you referencing them in the xaml? Are you exposing a Texture2D (TextureSource) in your ViewModel that is then bound in the xaml?

Pixelated small images and circles

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

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