Effects in the Visual Layer Windows Composition: The Windows 10 EffectBrush Chris Raubacher Senior Dev Lead Kelly Renner Senior Program Manager

Effects designed and developed for UI 12/5/2018 1:51 AM Effects designed and developed for UI © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

12/5/2018 1:51 AM What is a Composition Effect? A composition effect supports real time UI processing to create or manipulate imagery Effect feature principles Effect graphs can support multiple effects that can refer to one and other  Wherever possible effects support animatable effect properties Performance is a high priority - Effect rendering must maintain high and consistent framerates, no glitches Developers can use the power of graphics and rendering without extensive knowledge of D3D or D2D Requirements are driven by both developers and designers so designs can be realized in code © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Key Concepts Visuals - How your tree structured Microsoft Build 2016 12/5/2018 1:51 AM Key Concepts 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 © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Simple Effect Recipe Create a SurfaceBrush to hold your source content 12/5/2018 1:51 AM 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 effect var 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 effect var myVisual = _compositor.CreateSpriteVisual() myVisual.Brush = myEffect; myVisual.Size = new Vector2(220, 300); _root.Children.InsertAtBottom(myVisual); © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Simple Effect Recipe Chain an effect 12/5/2018 1:51 AM 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")                     }                 }               © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Simple Effect Recipe Add Animation 12/5/2018 1:51 AM Simple Effect Recipe Add Animation At 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 animation ScalarKeyFrameAnimation 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); © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Demo Chaining and Animating Effects Microsoft Build 2016 12/5/2018 1:51 AM Demo Chaining and Animating Effects © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

12/5/2018 1:51 AM Image Lighting © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

12/5/2018 1:51 AM Light Types Point 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 sun Spot 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. © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Image Reflection Diffused Specular Height Maps 12/5/2018 1:51 AM Image Reflection Diffused Diffused light appears to be a non-reflective surface and the light is scattered in all directions Specular 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. © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Demo Animating Image Light with Heightmaps Microsoft Build 2016 12/5/2018 1:51 AM Demo Animating Image Light with Heightmaps © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

How to get started with the Visual Layer and Effects 12/5/2018 How to get started with the Visual Layer and Effects Samples: github.com/microsoft/composition Re-visit Build on Channel 9 MSDN: search for windows.ui.composition Effects System Overview https://msdn.microsoft.com/en-us/windows/uwp/graphics/composition-effects Questions? Feedback? External, general questions: wincomposition@microsoft.com Follow us on Twitter @wincomposition © 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.