User avatar
Killian
Topic Author
Posts: 5
Joined: 14 Jul 2022, 12:32

Effects/Opacity Issues

11 Nov 2022, 13:33

Hi guys, I'm currently trying to implement some basic login screen in Unity3D and Noesis.

The overall pipeline or workflow is extremely nice especially for one like me coming from the WPF world.
Unfortunately I'm facing some issues that I seem unable to solve. When I place some controls that use a standard WPF blur effect the rendering (URP) looks weird in Unity.
This is how it looks in VS2022 when I run the Blend project:
Image
You can clearly see the blur/glow effects. Now, this is how Unity/Noesis renders it:
Image
There are no blur/glow effects at all. Colors also look quite different. Are these effects officially supported in Unity with URP?

I thought maybe these effects don't work and since Noesis comes with blending modes it might also ship with some effect for controls but all I could find were those image effects. I tried these but I receive an error on runtime.
Image
What am I possibly doing wrong?

The XAML code looks pretty easy:
<Image Source="/Assets/UI/Textures/tulip.png"
       Width="128"
       Height="128"
       Stretch="Uniform">
       <Image.Effect>
           <noesis:DirectionalBlurEffect />
       </Image.Effect>
</Image>
The style I'm aiming for is some sci-fi-ish glowing blurry something something so I'm wondering if Noesis is a valid way to go.

Could anyone please give some advice?


EDIT:
When I change color space settings in Unity from Gamma to Linear it looks even more strange.
Image

Also it seems like there are issues with controls that have an opacity value lower than 1.0. By default the blur/glow has an opacity of 0.5 and on mouse over trigger it switches to 0.8. If I set the mouse over value to 1.0 the glow is rendered ... somehow. Still it looks different than in VS2022.
Last edited by Killian on 11 Nov 2022, 23:31, edited 1 time in total.
 
User avatar
sfernandez
Site Admin
Posts: 2702
Joined: 22 Dec 2011, 19:20

Re: Effects/Opacity Issues

11 Nov 2022, 17:30

Hi Killian,

Which version of Noesis are you using? I did a test using blur and opacity<1 within a URP scene and it works fine.
Could you also share the button template you are using so I test with the same exact xaml?

Regarding the error with DirectionalBlurEffect, it is an extension that is not part of the core plugin, but you can find it if you import our VideoEffect sample.
 
User avatar
Killian
Topic Author
Posts: 5
Joined: 14 Jul 2022, 12:32

Re: Effects/Opacity Issues

11 Nov 2022, 23:26

Hi Sergio, thanks a lot for your quick reply. I'm using Noesis GUI 3.1.5 and Unity 2021.3.12f1 (running on DX11).
Regarding the error with DirectionalBlurEffect, it is an extension that is not part of the core plugin, but you can find it if you import our VideoEffect sample.
Okay, I see, thanks for pointing this out, I'll give the samples a try.

The button itself sets IsDefault and binds the Command to a viewmodel property. The template is placed in a ResourceDictionary, it's quick and dirty with triggers and setters and no visual states yet. It should be ok for a first draft anyway. The contents there look like this (sorry for the long post):
    <sys:Double x:Key="ControlDecoratorOpacityValue">0.5</sys:Double>
    <sys:Double x:Key="ControlDecoratorOpacityHighlightValue">0.8</sys:Double>

    <Color x:Key="PanelGlowColor">DodgerBlue</Color>

    <SolidColorBrush x:Key="DefaultForegroundBrush"
                     Color="Ivory" />
    <SolidColorBrush x:Key="PanelGlowBrush"
                     Color="{StaticResource PanelGlowColor}" />
    <SolidColorBrush x:Key="ButtonPanelBrush"
                     Color="#FF111122" />

    <Style TargetType="{x:Type Control}"
           x:Key="BaseStyle">
        <Setter Property="FontSize"
                Value="18" />
        <Setter Property="Foreground"
                Value="{StaticResource DefaultForegroundBrush}" />
    </Style>

    <Style TargetType="{x:Type Button}"
           BasedOn="{StaticResource BaseStyle}">
        <Setter Property="Height"
                Value="40" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid x:Name="PART_ButtonMainGrid">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Grid x:Name="PART_ButtonLeftFrame"
                              Grid.Column="0"
                              Opacity="{StaticResource ControlDecoratorOpacityValue}"
                              noesis:Element.BlendingMode="Screen">
                            <Rectangle Fill="{StaticResource DefaultForegroundBrush}"
                                       Width="7" />
                            <Rectangle Fill="{StaticResource DefaultForegroundBrush}"
                                       Width="7">
                                <Rectangle.Effect>
                                    <BlurEffect Radius="10" />
                                </Rectangle.Effect>
                            </Rectangle>
                        </Grid>

                        <Grid x:Name="PART_ButtonPanel"
                              Grid.Column="1"
                              Opacity="{StaticResource ControlDecoratorOpacityValue}"
                              Margin="3 0">
                            <Border Background="{StaticResource ButtonPanelBrush}" />

                            <Border>
                                <Border.Background>
                                    <RadialGradientBrush>
                                        <GradientStop Color="{StaticResource PanelGlowColor}"
                                                      Offset="1.0" />
                                        <GradientStop Color="Transparent"
                                                      Offset="0.0" />
                                    </RadialGradientBrush>
                                </Border.Background>
                                <Border.Effect>
                                    <BlurEffect Radius="15" />
                                </Border.Effect>
                            </Border>

                            <Border BorderBrush="{StaticResource DefaultForegroundBrush}"
                                    BorderThickness="1"
                                    Opacity="{StaticResource ControlDecoratorOpacityValue}"/>

                            <Border BorderBrush="{StaticResource DefaultForegroundBrush}"
                                    BorderThickness="2"
                                    ClipToBounds="False">
                                <Border.Effect>
                                    <BlurEffect Radius="10" />
                                </Border.Effect>
                            </Border>
                        </Grid>

                        <Grid x:Name="PART_ButtonContent"
                              Grid.Column="1">
                            <ContentPresenter Margin="20 0"
                                              VerticalAlignment="Center" />
                            <ContentPresenter Margin="20 0"
                                              VerticalAlignment="Center">
                                <ContentPresenter.Effect>
                                    <BlurEffect Radius="10" />
                                </ContentPresenter.Effect>
                            </ContentPresenter>
                        </Grid>

                        <Grid x:Name="PART_ButtonRightFrame"
                              Grid.Column="3"
                              Opacity="{StaticResource ControlDecoratorOpacityValue}">
                            <Rectangle Fill="{StaticResource DefaultForegroundBrush}"
                                       Width="3" />

                            <Rectangle Fill="{StaticResource DefaultForegroundBrush}"
                                       Width="3">
                                <Rectangle.Effect>
                                    <BlurEffect Radius="20" />
                                </Rectangle.Effect>
                            </Rectangle>
                        </Grid>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver"
                                 Value="True">
                            <Setter TargetName="PART_ButtonLeftFrame"
                                    Property="Opacity"
                                    Value="{StaticResource ControlDecoratorOpacityHighlightValue}" />
                            <Setter TargetName="PART_ButtonPanel"
                                    Property="Opacity"
                                    Value="{StaticResource ControlDecoratorOpacityHighlightValue}" />
                            <Setter TargetName="PART_ButtonRightFrame"
                                    Property="Opacity"
                                    Value="{StaticResource ControlDecoratorOpacityHighlightValue}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
 
User avatar
jsantos
Site Admin
Posts: 3594
Joined: 20 Jan 2012, 17:18
Contact:

Re: Effects/Opacity Issues

14 Nov 2022, 16:43

Could you please reproduce the issue in XamlToy and paste here the XAML?
 
User avatar
Killian
Topic Author
Posts: 5
Joined: 14 Jul 2022, 12:32

Re: Effects/Opacity Issues

14 Nov 2022, 20:10

Could you please reproduce the issue in XamlToy and paste here the XAML?
Sure, I'll try that asap.
 
User avatar
Killian
Topic Author
Posts: 5
Joined: 14 Jul 2022, 12:32

Re: Effects/Opacity Issues

14 Nov 2022, 23:06

Somehow xamltoy tags don't work (HTML rendering ends up destroyed), so I used the default code markup. Please just c/p all contents into xamltoy and observe the effect. When in normal mode the button shows no blur/glow effect at all but rather a vertical offset white gradient, well perceptible more on the right side. When you hover the mouse over it switches to a different opacity value (now being 1.0) and the glow seems to work. Feel free to play with the values at the very top, you'll see more strange behavior the lower or higher values get.

EDIT: Try setting ControlDecoratorOpacityValue to 0.1 and you'll see some weird artifacts.
<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:noesis="clr-namespace:NoesisGUIExtensions;assembly=Noesis.GUI.Extensions"
      xmlns:sys="clr-namespace:System;assembly=mscorlib">
    <Grid.Resources>
        <ResourceDictionary>
            <sys:Double x:Key="ControlDecoratorOpacityValue">0.6</sys:Double>
            <sys:Double x:Key="ControlDecoratorOpacityHighlightValue">1</sys:Double>

            <Color x:Key="PanelGlowColor">DodgerBlue</Color>

            <SolidColorBrush x:Key="DefaultForegroundBrush"
                             Color="Ivory" />
            <SolidColorBrush x:Key="PanelGlowBrush"
                             Color="{StaticResource PanelGlowColor}" />
            <SolidColorBrush x:Key="ButtonPanelBrush"
                             Color="#FF111122" />

            <Style TargetType="{x:Type Control}"
                   x:Key="BaseStyle">
                <Setter Property="SnapsToDevicePixels"
                        Value="True" />
                <Setter Property="UseLayoutRounding"
                        Value="True" />
                <Setter Property="FontSize"
                        Value="16" />
                <Setter Property="Foreground"
                        Value="{StaticResource DefaultForegroundBrush}" />
            </Style>

            <Style TargetType="{x:Type TextBlock}">
                <Setter Property="FontSize"
                        Value="16" />
                <Setter Property="Foreground"
                        Value="{StaticResource DefaultForegroundBrush}" />
            </Style>

            <Style TargetType="{x:Type Button}"
                   BasedOn="{StaticResource BaseStyle}">
                <Setter Property="Height"
                        Value="40" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Grid x:Name="PART_ButtonMainGrid">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <Grid x:Name="PART_ButtonLeftFrame"
                                      Grid.Column="0"
                                      Opacity="{StaticResource ControlDecoratorOpacityValue}">
                                    <Rectangle Fill="{StaticResource DefaultForegroundBrush}"
                                               Width="7" />
                                    <Rectangle Fill="{StaticResource DefaultForegroundBrush}"
                                               Width="7">
                                        <Rectangle.Effect>
                                            <BlurEffect Radius="20" />
                                        </Rectangle.Effect>
                                    </Rectangle>
                                </Grid>
                                <Grid x:Name="PART_ButtonPanel"
                                      Grid.Column="1"
                                      Opacity="{StaticResource ControlDecoratorOpacityValue}"
                                      Margin="3 0">
                                    <Border Background="{StaticResource ButtonPanelBrush}" />

                                    <Border>
                                        <Border.Background>
                                            <RadialGradientBrush>
                                                <GradientStop Color="{StaticResource PanelGlowColor}"
                                                              Offset="1.0" />
                                                <GradientStop Color="Transparent"
                                                              Offset="0.0" />
                                            </RadialGradientBrush>
                                        </Border.Background>
                                        <Border.Effect>
                                            <BlurEffect Radius="15" />
                                        </Border.Effect>
                                    </Border>

                                    <Border BorderBrush="{StaticResource DefaultForegroundBrush}"
                                            BorderThickness="1"
                                            Opacity="{StaticResource ControlDecoratorOpacityValue}" />

                                    <Border BorderBrush="{StaticResource DefaultForegroundBrush}"
                                            BorderThickness="2"
                                            ClipToBounds="False">
                                        <Border.Effect>
                                            <BlurEffect Radius="10" />
                                        </Border.Effect>
                                    </Border>
                                </Grid>

                                <Grid x:Name="PART_ButtonContent"
                                      Grid.Column="1">
                                    <ContentPresenter Margin="20 0"
                                                      VerticalAlignment="Center" />
                                    <ContentPresenter Margin="20 0"
                                                      VerticalAlignment="Center">
                                        <ContentPresenter.Effect>
                                            <BlurEffect Radius="10" />
                                        </ContentPresenter.Effect>
                                    </ContentPresenter>
                                </Grid>

                                <Grid x:Name="PART_ButtonRightFrame"
                                      Grid.Column="3"
                                      Opacity="{StaticResource ControlDecoratorOpacityValue}">
                                    <Rectangle Fill="{StaticResource DefaultForegroundBrush}"
                                               Width="3" />

                                    <Rectangle Fill="{StaticResource DefaultForegroundBrush}"
                                               Width="3">
                                        <Rectangle.Effect>
                                            <BlurEffect Radius="20" />
                                        </Rectangle.Effect>
                                    </Rectangle>
                                </Grid>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver"
                                         Value="True">
                                    <Setter TargetName="PART_ButtonLeftFrame"
                                            Property="Opacity"
                                            Value="{StaticResource ControlDecoratorOpacityHighlightValue}" />
                                    <Setter TargetName="PART_ButtonPanel"
                                            Property="Opacity"
                                            Value="{StaticResource ControlDecoratorOpacityHighlightValue}" />
                                    <Setter TargetName="PART_ButtonRightFrame"
                                            Property="Opacity"
                                            Value="{StaticResource ControlDecoratorOpacityHighlightValue}" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ResourceDictionary>
    </Grid.Resources>
    <Grid Background="Black">
        <Border>
            <Border.Background>
                <LinearGradientBrush StartPoint="0 0"
                                     EndPoint="0 1">
                    <GradientStop Offset="0.0"
                                  Color="#33FFFFFF" />
                    <GradientStop Offset="1.0"
                                  Color="#00FFFFFF" />
                </LinearGradientBrush>
            </Border.Background>
        </Border>

        <Border HorizontalAlignment="Center"
                VerticalAlignment="Center"
                CornerRadius="10">
            <Border.Background>
                <LinearGradientBrush StartPoint="0 0"
                                     EndPoint="0 1">
                    <GradientStop Offset="0.0"
                                  Color="#44FFFFFF" />
                    <GradientStop Offset="1.0"
                                  Color="#22FFFFFF" />
                </LinearGradientBrush>
            </Border.Background>
            <Grid Margin="20">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <TextBlock Text="%LoginTitle%"
                           FontWeight="Bold"
                           Margin="0 10" />
                <TextBlock Text="Username:"
                           Grid.Row="1" />
                <TextBox Text="{Binding Username, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                         Grid.Row="2"
                         Margin="0 10"
                         Width="200" />
                <TextBlock Text="Password:"
                           Grid.Row="3" />
                <TextBox Text="{Binding Password, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                         Grid.Row="4"
                         Margin="0 10" />
                <Button Content="Login"
                        Command="{Binding LoginCommand}"
                        IsDefault="True"
                        Grid.Row="5" />
            </Grid>
        </Border>
    </Grid>
</Grid>
 
User avatar
sfernandez
Site Admin
Posts: 2702
Joined: 22 Dec 2011, 19:20

Re: Effects/Opacity Issues

15 Nov 2022, 11:03

Thanks for the example xaml, I can reproduce it now.
The issue is happening when there is an opacity group (opacity < 1) wrapping elements with effects. Could you please report this in our bugtracker?

In the meantime you can workaround it by applying the opacity to the individual rectangles and borders, instead of the parent Grids.
 
User avatar
Killian
Topic Author
Posts: 5
Joined: 14 Jul 2022, 12:32

Re: Effects/Opacity Issues

15 Nov 2022, 11:32

Thanks for the confirmation, glad I'm not doing it the wrong way ;-)
I'll file a ticket for it in the tracker right away.

EDIT:
Ticket can be found here:
https://www.noesisengine.com/bugs/view.php?id=2460
 
User avatar
sfernandez
Site Admin
Posts: 2702
Joined: 22 Dec 2011, 19:20

Re: Effects/Opacity Issues

16 Nov 2022, 16:55

Thanks for the report.

Who is online

Users browsing this forum: Ahrefs [Bot] and 1 guest