Effects/Opacity Issues
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:
You can clearly see the blur/glow effects. Now, this is how Unity/Noesis renders it:
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.
What am I possibly doing wrong?
The XAML code looks pretty easy:
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.
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.
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:
You can clearly see the blur/glow effects. Now, this is how Unity/Noesis renders it:
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.
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>
Could anyone please give some advice?
EDIT:
When I change color space settings in Unity from Gamma to Linear it looks even more strange.
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.
-
sfernandez
Site Admin
- Posts: 2984
- Joined:
Re: Effects/Opacity Issues
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.
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
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).
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):
Okay, I see, thanks for pointing this out, I'll give the samples a try.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.
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
Could you please reproduce the issue in XamlToy and paste here the XAML?
Re: Effects/Opacity Issues
Sure, I'll try that asap.Could you please reproduce the issue in XamlToy and paste here the XAML?
Re: Effects/Opacity Issues
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.
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>
-
sfernandez
Site Admin
- Posts: 2984
- Joined:
Re: Effects/Opacity Issues
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.
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
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
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
Who is online
Users browsing this forum: Semrush [Bot] and 93 guests