DropShadowEffect makes path pixelated

25 Sep 2023, 14:46

Hello,

I was playing around with Path and noticed that when applying DropShadowEffect it becomes pixelated. See attachments.

No shadow applied:

With DropShadowEffect:

xaml used:

<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Viewbox>
        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Margin="50">
            <Viewbox Width="300" Height="300">
                <Viewbox.Effect>
                    <DropShadowEffect
            BlurRadius="0"
            Direction="128"
            ShadowDepth="10"
            Opacity="0.5"
            Color="Black"/>
                </Viewbox.Effect>
                <Canvas Width="512" Height="512">
                    <Canvas.Resources>
                        <RadialGradientBrush x:Key="fill">
                            <GradientStop Offset="0" Color="#FF2892FC"/>
                            <GradientStop Offset="1" Color="#FF63B0FD"/>
                        </RadialGradientBrush>
                    </Canvas.Resources>
                    <Path Fill="{StaticResource fill}" Data="M484.512 143.416c-15.228-17.399-35.387-29.555-57.572-34.89  C411.459 52.307 360.013 12.5 300.91 12.5c-34.072 0-66.456 13.224-90.709 36.675c-14.924-8.461-31.718-12.88-49.262-12.88  c-51.057 0-93.635 38.84-99.477 88.547c-16.17 6.832-30.547 17.963-41.2 32.052C7.007 174.424 0 195.313 0 217.301  c0 55.28 44.932 100.254 100.159 100.254c14.055 0 27.91-2.987 40.71-8.718c27.378 31.324 67.337 49.687 109.289 49.687  c38.442 0 75.062-15.271 102.246-42.275c15.148 7.44 31.744 11.327 48.647 11.327c61.177 0 110.948-49.819 110.948-111.053  C512 189.633 502.238 163.67 484.512 143.416z"/>
                    <Path Fill="{StaticResource fill}" Data="M354 349.49c-30.327 0-55 24.675-55 55.004c0 30.329 24.673 55.004 55 55.004s55-24.675 55-55.004 C409 374.164 384.327 349.49 354 349.49z"/>
                    <Path Fill="{StaticResource fill}" Data="M467 409.494c-24.813 0-45 20.188-45 45.003s20.187 45.003 45 45.003s45-20.188 45-45.003 S491.813 409.494 467 409.494z"/>
                </Canvas>
            </Viewbox>
        </StackPanel>
    </Viewbox>
</Grid>

Did I mess up with some configuration? I'm using URP

Thanks!

26 Sep 2023, 11:43

This is because you have PPAA disabled in your view.

I assume this is on purpose because you want to use GPU MSAA right? In that case, make sure that in NoesisGUI Settings you change "Offscreen Sample Count" to "8x" or "Same as Unity".

But in general, we always recommend PPAA.

26 Sep 2023, 13:18

Yes, you are correct, I'm creating a World Space UI where characters can come close to a menu.

I have tried enabling the stuff you said, but the quality is still pixelated. Also enabled PPAA, which does not make a lot of difference.

PPAA enabled:

: PPAA-enabled.png (64.68 KiB) Viewed 3911 times

PPAA disabled:

: PPAA-disabled.png (63.05 KiB) Viewed 3911 times

Noesis View settings:

Noesis Settings:

I have restarted Unity several times, but no with effect. Maybe I missed something else?

The same thing with TextBlock, when you apply shadow

26 Sep 2023, 14:41

Also when running this: https://www.noesisengine.com/xamltoy/8b ... aee192e2bd, the font disappears when DropShadow effect is present.

26 Sep 2023, 18:21

Hi Otter,

The problem with WorldUI in combination with Effects was a known issue we've been working to solve for the next release. It has nothing to do with PPAA, the problem was that 3D transformations were not taken into account when generating the offscreen textures, so could be using smaller sizes than the ones required when rendering to the main screen.

With the new algorithm this is solved and everything looks as expected. See some examples below:
.

26 Sep 2023, 18:45

Also when running this: https://www.noesisengine.com/xamltoy/8b ... aee192e2bd, the font disappears when DropShadow effect is present.

And this is related to the same issue I explained before. With the new algorithm the result is ok:
.

26 Sep 2023, 18:55

That's awesome news! When can we expect next release?

Thanks!

26 Sep 2023, 19:46

It should happen this week...

03 Oct 2023, 19:45

This should be fixed now

04 Oct 2023, 09:21

Checked it and now its much better, thanks!

Although I have noticed that when PPAA is enabled, it gives me better quality on drop shadow elements but worse on elements without it.

DropShadow without PPAA:

: ShadowNoPPAA.png (6.26 KiB) Viewed 3819 times

DropShadow with PPAA:

: ShadowPPAA.png (8.89 KiB) Viewed 3819 times

Workaround for this would be that to add PPAAMode="Disabled" to every element not using DropShadow

Also there are some artifacts when drop shadow is near the edges of the screen.

Bottom:

Right Corner:

DropShadowEffect makes path pixelated Topic is solved

DropShadowEffect makes path pixelated

Re: DropShadowEffect makes path pixelated

Re: DropShadowEffect makes path pixelated

Re: DropShadowEffect makes path pixelated

Re: DropShadowEffect makes path pixelated

Re: DropShadowEffect makes path pixelated

Re: DropShadowEffect makes path pixelated

Re: DropShadowEffect makes path pixelated

Re: DropShadowEffect makes path pixelated

Re: DropShadowEffect makes path pixelated

Who is online