feat(composition): Implement grayscale effect + sample

jeromelaban · Mar 2, 2024 · 2273c1f · 2273c1f
1 parent 545004e
commit 2273c1f
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 11 deletions.
diff --git a/src/SamplesApp/UITests.Shared/Windows_UI_Composition/EffectBrushTests.xaml b/src/SamplesApp/UITests.Shared/Windows_UI_Composition/EffectBrushTests.xaml
@@ -9,7 +9,8 @@
     d:DesignHeight="300"
     d:DesignWidth="400">
 
-	<Grid>
-		<Grid x:Name="testGrid" Width="200" Height="200" VerticalAlignment="Top" HorizontalAlignment="Left"/>
-	</Grid>
+	<StackPanel Orientation="Horizontal" Spacing="25">
+		<Grid x:Name="blurGrid" Width="200" Height="200" VerticalAlignment="Top" HorizontalAlignment="Left"/>
+		<Grid x:Name="grayGrid" Width="200" Height="200" VerticalAlignment="Top" HorizontalAlignment="Left"/>
+	</StackPanel>
 </UserControl>
diff --git a/src/SamplesApp/UITests.Shared/Windows_UI_Composition/EffectBrushTests.xaml.cs b/src/SamplesApp/UITests.Shared/Windows_UI_Composition/EffectBrushTests.xaml.cs
@@ -23,7 +23,7 @@
 
 namespace UITests.Windows_UI_Composition
 {
-	[Sample("Windows.UI.Composition", Name = "CompositionEffectBrush", Description = "", IsManualTest = true)]
+	[Sample("Windows.UI.Composition", Name = "CompositionEffectBrush", Description = "Paints a SpriteVisual with the output of a filter effect. The filter effect description is defined using the CompositionEffectFactory class.", IsManualTest = true)]
 	public sealed partial class EffectBrushTests : UserControl
 	{
 		public EffectBrushTests()
@@ -34,11 +34,27 @@ public EffectBrushTests()
 
 		private void EffectBrushTests_Loaded(object sender, RoutedEventArgs e)
 		{
-			testGrid.Background = new TestBrush();
+			var compositor = Window.Current.Compositor;
+
+			var effect = new SimpleBlurEffect() { Source = new CompositionEffectSourceParameter("sourceBrush"), BlurAmount = 5.0f };
+			var factory = compositor.CreateEffectFactory(effect);
+			var effectBrush = factory.CreateBrush();
+
+			blurGrid.Background = new EffectTesterBrush(effectBrush);
+
+			var effect2 = new SimpleGrayscaleEffect() { Source = new CompositionEffectSourceParameter("sourceBrush") };
+			var factory2 = compositor.CreateEffectFactory(effect2);
+			var effectBrush2 = factory2.CreateBrush();
+
+			grayGrid.Background = new EffectTesterBrush(effectBrush2);
 		}
 
-		private class TestBrush : Windows.UI.Xaml.Media.XamlCompositionBrushBase
+		private class EffectTesterBrush : XamlCompositionBrushBase
 		{
+			private CompositionEffectBrush _effectBrush;
+
+			public EffectTesterBrush(CompositionEffectBrush effectBrush) => _effectBrush = effectBrush;
+
 			protected override void OnConnected()
 			{
 				var compositor = Window.Current.Compositor;
@@ -48,12 +64,9 @@ protected override void OnConnected()
 					if (o.Status == LoadedImageSourceLoadStatus.Success)
 					{
 						var brush = compositor.CreateSurfaceBrush(surface);
-						var effect = new SimpleBlurEffect() { Source = new CompositionEffectSourceParameter("sourceBrush"), BlurAmount = 5.0f };
-						var factory = compositor.CreateEffectFactory(effect);
-						var effectBrush = factory.CreateBrush();
 
-						effectBrush.SetSourceParameter("sourceBrush", brush);
-						CompositionBrush = effectBrush;
+						_effectBrush.SetSourceParameter("sourceBrush", brush);
+						CompositionBrush = _effectBrush;
 					}
 				};
 			}
@@ -135,5 +148,30 @@ public object GetProperty(uint index)
 			public IGraphicsEffectSource GetSource(uint index) => Source;
 			public uint GetSourceCount() => 1;
 		}
+
+		[Guid("36DDE0EB-3725-42E0-836D-52FB20AEE644")]
+		private class SimpleGrayscaleEffect : IGraphicsEffect, IGraphicsEffectSource, IGraphicsEffectD2D1Interop
+		{
+			private string _name = "SimpleGrayscaleEffect";
+			private Guid _id = new Guid("36DDE0EB-3725-42E0-836D-52FB20AEE644");
+
+			public string Name
+			{
+				get => _name;
+				set => _name = value;
+			}
+
+			public IGraphicsEffectSource Source { get; set; }
+
+			public Guid GetEffectId() => _id;
+
+			public void GetNamedPropertyMapping(string name, out uint index, out GraphicsEffectPropertyMapping mapping) => throw new NotSupportedException();
+
+			public object GetProperty(uint index) => throw new NotSupportedException();
+
+			public uint GetPropertyCount() => 0;
+			public IGraphicsEffectSource GetSource(uint index) => Source;
+			public uint GetSourceCount() => 1;
+		}
 	}
 }
diff --git a/src/Uno.UI.Composition/Composition/CompositionEffectBrush.skia.cs b/src/Uno.UI.Composition/Composition/CompositionEffectBrush.skia.cs
@@ -49,6 +49,28 @@ private SKImageFilter GenerateEffectFilter(object effect, SKRect bounds)
 										return SKImageFilter.CreateBlur(sigma, sigma, sourceFilter, new(bounds));
 									}
 
+									return null;
+								}
+							case EffectType.GrayscaleEffect:
+								{
+									if (effectInterop.GetSourceCount() == 1 && effectInterop.GetSource(0) is IGraphicsEffectSource source)
+									{
+										SKImageFilter sourceFilter = GenerateEffectFilter(source, bounds);
+										if (sourceFilter is null)
+											return null;
+
+										return SKImageFilter.CreateColorFilter(
+											SKColorFilter.CreateColorMatrix(
+												new float[] // Grayscale Matrix
+												{
+													0.21f, 0.72f, 0.07f, 0, 0,
+													0.21f, 0.72f, 0.07f, 0, 0,
+													0.21f, 0.72f, 0.07f, 0, 0,
+													0,     0,     0,     1, 0
+												}),
+											sourceFilter, new(bounds));
+									}
+
 									return null;
 								}
 							case EffectType.Unsupported: