[Sample+Feature] Image Blending

[michael-hawker]

Discussed in Discord: https://discord.com/channels/372137812037730304/774042795530649600/807292130007318570

Describe the problem this feature would solve

Ability to blend two images dynamically with XAML Pipeline Brush Effects? Example of desired effect:

Images from Unsplash Glasses on Beach and Creek

Describe the solution

From @Sergio0694:

Ok so, I haven't tried this, but there's at least a couple possible ways to do this, depending on the approach you prefer. Each has its pros and cons.

1. "Live": create a pipeline with a canvas geometry that splits the image in two along the center. Apply a gaussian blur to it to fade it at the center. Load one of the two images, apply that mask to it. Load the other image, then place the first one on top of it with a blend effect and overlay mode.
2. "Offline": use a library like ImageSharp to just load the first image, then draw the second one on top of that with that blurred masking, then display that. This has the advantage of being less computationally intensive, as you only create it once and then display it, rather than using pixel shaders at runtime to render it.
   I'm thinking some of Ratish's APIs could be useful for this masking too, though I think the ones specifically for gaussian masking have not been integrated into the Toolkit just yet

From @ratishphilip:

Yes the GaussianMaskSurface would suit this purpose. I am currently working on porting the various RenderSurfaces from CompositionProToolkit to Microsoft.Toolkit.Uwp.UI.Media. Hope to submit a PR soon. 😃

Additional context & Screenshots

Should probably file supporting issues for the underlying features, but wanted to have a tracking issue for a supporting sample to demonstrate them.

• May be also more useful for this type of effect to blend to transparency with the image which could help with nice background effects for applications?

Would be nice to know if others need this type of effect too.

[ratishphilip]

@michael-hawker @Sergio0694
Here is a quick implementation I did with the GaussianMaskSurface in CompositionProToolkit.

Code can be found here.

[michael-hawker]

@ratishphilip that's amazing! 🦙❤ Can't wait to see this power and how it can integrate to the XAML layer with @Sergio0694's Pipeline Effects too. 🙂

@Sergio0694 any tips on how we can integrate your two API surfaces together? Maybe having a Wiki page about how the Pipeline and Effects architecture stuff works under the hood would be a good idea?

[michael-hawker]

@ratishphilip wanted to check-in and see if you were planning to add more to the Toolkit for 7.1 in the next month or so. If so, let us know, and I can leave this or other items in our milestone for tracking. Otherwise, I can move this out for later when you have more time again in the future, as I know you had mentioned wanting to bring more things over. Thanks!

[ratishphilip]

@michael-hawker yes, I will be able to add in the Surface Brushes to the toolkit for 7.1 by next month. Coding is almost complete. Preparing the samples and documentation right now. Hope to finish it soon. 🤞

[michael-hawker]

Awesome, good to know @ratishphilip. Feel free to submit a draft PR if you're looking for any early feedback or assistance with integrating to any of @Sergio0694's APIs.

[ratishphilip]

Hi @Sergio0694 @michael-hawker ,
I have submitted the draft PR for the render surfaces and their corresponding XAML brushes.
Kindly review it.

Still working on the documentation. Will update PR once done.