View Issue Details

Jump to NotesJump to History
IDProjectCategoryView StatusDate SubmittedLast Update
0002043NoesisGUIUnrealpublic2021-06-07 18:562021-06-08 16:57
Reportersergey_sitnikov_ninjatheory Assigned Tohcpizzi  
PrioritynormalSeveritymajor 
Status resolvedResolutionfixed 
Product Version3.0.12 
Summary0002043: Element is not shown when used LinearGradientBrush as an OpacityMask in UE4
Description

UE4 renderer doesn't show an element when it uses LinearGradientBrush as an OpacityMask.
It is working correctly in WPF and XamlPlayer

Steps To Reproduce
  1. Add provided xaml to the VS WPF solution and launch it.
  2. Observe that the circle is visible
  3. Import provided xaml to UE4 and add it to viewport
  4. Observe that the circle is not visible

Expected behaviour:
OpacityMasks work the same way in both WPF and UE4 plugin of Noesis

Attached Files
Welcome.xaml (4,027 bytes)    
<ContentControl
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      mc:Ignorable="d" 
      d:DesignHeight="1080" d:DesignWidth="1920"
	  Width="Auto"  Height="Auto">

	<ContentControl.Resources>
		<Color x:Key="Theme_Transparent">#00FFFFFF</Color>
		<Color x:Key="Theme_Highlight">#FFFFFFFF</Color>

		<Color x:Key="Theme_Col_6">#FF80D4FF</Color>

		<Style x:Key="SpinningRing" TargetType="{x:Type ContentControl}">
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate>

						<!--////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
						<!--STORYBOARDS-->
						<!--////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->

						<ControlTemplate.Resources>
							<Storyboard x:Key="SpinningAnimation" RepeatBehavior="Forever">
								<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="Ring">
									<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
									<EasingDoubleKeyFrame KeyTime="0:0:2" Value="360"/>
								</DoubleAnimationUsingKeyFrames>
							</Storyboard>
						</ControlTemplate.Resources>

						<!--////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
						<!--CONSTRUCTION-->
						<!--////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->

						<Viewbox HorizontalAlignment="Center" VerticalAlignment="Center">
							<Ellipse x:Name="Ring" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Height="100" Stroke="{DynamicResource Grad_3}" StrokeThickness="0.5" RenderTransformOrigin="0.5,0.5">
								<Ellipse.RenderTransform>
									<TransformGroup>
										<ScaleTransform/>
										<SkewTransform/>
										<RotateTransform/>
										<TranslateTransform/>
									</TransformGroup>
								</Ellipse.RenderTransform>
								<Ellipse.Effect>
									<DropShadowEffect Color="{DynamicResource Theme_Col_6}" Opacity="1" ShadowDepth="0" BlurRadius="5"/>
								</Ellipse.Effect>
								<Ellipse.OpacityMask>
									<LinearGradientBrush>
										<GradientStop Color="{StaticResource Theme_Transparent}" Offset="0"/>
										<GradientStop Color="{StaticResource Theme_Transparent}" Offset="0.5"/>
										<GradientStop Color="{StaticResource Theme_Highlight}" Offset="0.75"/>
										<GradientStop Color="{StaticResource Theme_Highlight}" Offset="1"/>
									</LinearGradientBrush>
								</Ellipse.OpacityMask>
							</Ellipse>
						</Viewbox>

						<!--////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
						<!--TRIGGERS-->
						<!--////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->

						<ControlTemplate.Triggers>
							<EventTrigger RoutedEvent="FrameworkElement.Loaded">
								<BeginStoryboard x:Name="SpinningAnimation_BeginStoryboard" Storyboard="{StaticResource SpinningAnimation}"/>
							</EventTrigger>
						</ControlTemplate.Triggers>

					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
	</ContentControl.Resources>
	
	<Grid x:Name="Grid">
		<ContentControl Style="{StaticResource SpinningRing}"/>
	</Grid>

</ContentControl>
Welcome.xaml (4,027 bytes)   
WPF_RingVisible.jpg (144,035 bytes)   
WPF_RingVisible.jpg (144,035 bytes)   
Gui.XamlPlayer_RingInvisible.jpg (27,250 bytes)   
Gui.XamlPlayer_RingInvisible.jpg (27,250 bytes)   
PlatformAny

Activities

sfernandez

sfernandez

2021-06-07 20:24

manager   ~0007278

Hi Sergey,

If I add the missing "Grad_3" gradient as a resource, then I can see the ring correctly rendered in our XamlPlayer.
Is it possible you have that gradient defined somewhere else in the VS project?
sergey_sitnikov_ninjatheory

sergey_sitnikov_ninjatheory

2021-06-08 14:44

reporter   ~0007279

Thank you Sergio,

You are right. My fault here that I forgot to add that resource preparing the sample. I can confirm that it is working in the XamlPlayer. However, I still can't see it in UE4, it is only visible when I comment the OpacityMask part.

So it looks like a UE4 only issue then.

Sergey
sergey_sitnikov_ninjatheory

sergey_sitnikov_ninjatheory

2021-06-08 14:48

reporter   ~0007280

I have updated issue information.
sergey_sitnikov_ninjatheory

sergey_sitnikov_ninjatheory

2021-06-08 15:08

reporter   ~0007281

Just a tiny update: it does work in UE4 if I replace the LinearGradientBrush with the SolidColorBrush
sfernandez

sfernandez

2021-06-08 16:18

manager   ~0007282

Ok, we've been able to reproduce it in UE4, it is related to using Effect + OpacityMask in the same element.
It can be workaround right now by applying the effect to an outer element.

<Border HorizontalAlignment="Center" VerticalAlignment="Center">

<Border.Effect>

<DropShadowEffect Color="{DynamicResource Theme_Col_6}" Opacity="1" ShadowDepth="0" BlurRadius="5"/>

</Border.Effect>

<Ellipse x:Name="Ring" Width="100" Height="100" Stroke="{DynamicResource Grad_3}" StrokeThickness="5">

<Ellipse.OpacityMask>

<LinearGradientBrush>

<GradientStop Color="{StaticResource Theme_Transparent}" Offset="0"/>

<GradientStop Color="{StaticResource Theme_Transparent}" Offset="0.5"/>

<GradientStop Color="{StaticResource Theme_Highlight}" Offset="0.75"/>

<GradientStop Color="{StaticResource Theme_Highlight}" Offset="1"/>

</LinearGradientBrush>

</Ellipse.OpacityMask>

</Ellipse>

</Border>
sergey_sitnikov_ninjatheory

sergey_sitnikov_ninjatheory

2021-06-08 16:55

reporter   ~0007283

Awesome! Thank you Sergio! I can confirm it is working correctly now when the effect is in the parent element.
hcpizzi

hcpizzi

2021-06-08 16:57

developer   ~0007284

It's been fixed on revision 10313 on our Subversion repository.

Issue History

Date Modified Username Field Change
2021-06-07 18:56 sergey_sitnikov_ninjatheory New Issue
2021-06-07 18:56 sergey_sitnikov_ninjatheory Tag Attached: WPF
2021-06-07 18:56 sergey_sitnikov_ninjatheory Tag Attached: xaml
2021-06-07 18:56 sergey_sitnikov_ninjatheory File Added: Welcome.xaml
2021-06-07 18:56 sergey_sitnikov_ninjatheory File Added: WPF_RingVisible.jpg
2021-06-07 18:56 sergey_sitnikov_ninjatheory File Added: Gui.XamlPlayer_RingInvisible.jpg
2021-06-07 20:24 sfernandez Assigned To => sfernandez
2021-06-07 20:24 sfernandez Status new => feedback
2021-06-07 20:24 sfernandez Note Added: 0007278
2021-06-08 14:44 sergey_sitnikov_ninjatheory Note Added: 0007279
2021-06-08 14:44 sergey_sitnikov_ninjatheory Status feedback => assigned
2021-06-08 14:47 sergey_sitnikov_ninjatheory Summary Element is not shown when used LinearGradientBrush as an OpacityMask => Element is not shown when used LinearGradientBrush as an OpacityMask in UE4
2021-06-08 14:47 sergey_sitnikov_ninjatheory Description Updated
2021-06-08 14:47 sergey_sitnikov_ninjatheory Steps to Reproduce Updated
2021-06-08 14:48 sergey_sitnikov_ninjatheory Note Added: 0007280
2021-06-08 15:08 sergey_sitnikov_ninjatheory Note Added: 0007281
2021-06-08 16:15 sfernandez Assigned To sfernandez => hcpizzi
2021-06-08 16:18 sfernandez Note Added: 0007282
2021-06-08 16:55 sergey_sitnikov_ninjatheory Note Added: 0007283
2021-06-08 16:57 hcpizzi Status assigned => resolved
2021-06-08 16:57 hcpizzi Resolution open => fixed
2021-06-08 16:57 hcpizzi Fixed in Version => 3.0.13
2021-06-08 16:57 hcpizzi Note Added: 0007284