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

2. 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.

3. 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.

4. 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.

5. 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.

6. 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.

7. 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.

8. 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.

9. 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.

10. 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.

11. 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.

12. 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.

13. 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
Questions? Feedback?
External, general questions:
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.