Forums | NoesisGUI

Welcome to our official discussion site. You’ll find topics on features, bugs, development, and general support here
https://www.noesisengine.com/forums/

Effects/Opacity Issues

https://www.noesisengine.com/forums/viewtopic.php?t=2787

Page 1 of 1

Effects/Opacity Issues

Posted: 11 Nov 2022, 13:33
by Killian
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:
Code: Select all
<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.

Re: Effects/Opacity Issues

Posted: 11 Nov 2022, 17:30
by sfernandez
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.

Re: Effects/Opacity Issues

Posted: 11 Nov 2022, 23:26
by Killian
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):
Code: Select all
    <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>

Re: Effects/Opacity Issues

Posted: 14 Nov 2022, 16:43
by jsantos
Could you please reproduce the issue in XamlToy and paste here the XAML?

Re: Effects/Opacity Issues

Posted: 14 Nov 2022, 20:10
by Killian
Could you please reproduce the issue in XamlToy and paste here the XAML?
Sure, I'll try that asap.

Re: Effects/Opacity Issues

Posted: 14 Nov 2022, 23:06
by Killian
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.
Code: Select all
<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>

Re: Effects/Opacity Issues

Posted: 15 Nov 2022, 11:03
by sfernandez
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.

Re: Effects/Opacity Issues

Posted: 15 Nov 2022, 11:32
by Killian
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

Re: Effects/Opacity Issues

Posted: 16 Nov 2022, 16:55
by sfernandez
Thanks for the report.
All times are UTC+01:00
Page 1 of 1
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/