Build 2016 - P492 - The Power of the EffectBrush in Windows UI

#Build2016

Effects in the Visual LayerWindows Composition: The Windows 10 EffectBrushChris RaubacherSenior Dev LeadKelly RennerSenior Program Manager

Effects designed and developed for UI

Click icon to add picture

Effect feature principlesEffect graphs can support multiple effects that can refer to one and other Wherever possible effects support animatable effect propertiesPerformance is a high priority - Effect rendering must maintain high and consistent framerates, no glitchesDevelopers can use the power of graphics and rendering without extensive knowledge of D3D or D2DRequirements are driven by both developers and designers so designs can be realized in code

What is a Composition Effect?A composition effect supports real time UI processing to create or manipulate imagery

• Visuals - How your tree structured• Visual Tree – A hierarchical collection of visual objects• SpriteVisual - The visual that is used to draw content on screen

• Brushes - CompositionEffectBrush paints a visual with the contents of a composition effect

• UWP - Where possible use Win2D (OSS graphics C# runtime) packages for effect descriptions

Key Concepts

Simple Effect Recipe Create a SurfaceBrush to hold your source content

CompositionSurfaceBrush surfaceBrush = _compositor.CreateSurfaceBrush();LoadImage(surfaceBrush, new Uri("ms-appx:///Assets/cat.png"));

Describe your effectvar graphicsEffect = new SaturationEffect

Saturation = 0.0f, Source = new CompositionEffectSourceParameter("mySource")

Compile your effect var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

var myEffect = effectFactory.CreateBrush(); myEffect.SetSourceParameter("mySource", surfaceBrush);

Apply your effectvar myVisual = _compositor.CreateSpriteVisual()myVisual.Brush = myEffect; myVisual.Size = new Vector2(220, 300);

_root.Children.InsertAtBottom(myVisual);

Simple Effect Recipe Chain an effect At the description step – Add another effect as source input to the effect

var graphicsEffect = new CompositeEffect {      Mode = CanvasComposite.DestinationIn,            Sources =                {                 new SaturationEffect                {                        Saturation = 0,                        Source = new CompositionEffectSourceParameter("image")                 },                    new Transform2DEffect                    {                        Name = "maskTransform",                        Source =  new CompositionEffectSourceParameter("mask")                    }                }

Simple Effect Recipe Add AnimationAt the compile step - specify animatable properties

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect, new[] { "SaturationEffect.Saturation" });

var myEffect = effectFactory.CreateBrush(); myEffect.SetSourceParameter("mySource", surfaceBrush);

myEffect.Properties.InsertScalar("saturationEffect.Saturation", 0f);

Create your animationScalarKeyFrameAnimation effectAnimation =

_compositor.CreateScalarKeyFrameAnimation(); effectAnimation.InsertKeyFrame(0f, 0f); effectAnimation.InsertKeyFrame(0.50f, 1f); effectAnimation.InsertKeyFrame(1.0f, 0f); effectAnimation.Duration = TimeSpan.FromMilliseconds(2500); effectAnimation.IterationBehavior = AnimationIterationBehavior.Forever;

Start the animation on the saturation property_myEffect.Properties.StartAnimation("saturationEffect.Saturation", effectAnimation);

Demo Chaining and Animating Effects

Image Lighting

Light TypesPoint Point lights have color and position within a scene, but no single direction. They give off light equally in all directions. Like a lightbulb Directional lights have only color and direction, not position. They emit parallel light. This means that all light generated by directional lights travels through a scene in the same direction. Like the sunSpot Spotlights have color, position, and direction in which they emit light. Light emitted from a spotlight is made up of a bright inner cone and a larger outer cone. Like a flashlight.

Image Reflection Diffused Diffused light appears to be a non-reflective surface and the light is scattered in all directionsSpecular Specular lighting effect appears to be a reflective surface Height Maps Height maps create an image with surface and elevation information to create an illusion of light falling on the textures of an image.

Demo Animating Image Light with Heightmaps

How to get started with the Visual Layer and EffectsSamples: github.com/microsoft/compositionRe-visit Build on Channel 9MSDN: search for windows.ui.compositionEffects System Overviewhttps://msdn.microsoft.com/en-us/windows/uwp/graphics/composition-effects

Questions? Feedback?External, general questions: wincomposition@microsoft.com

Follow us on Twitter@wincomposition