1. Beyond the EffectBrush with Windows UI New Effects, Brushes, Shadows and Lighting
Chris Raubacher
Senior Dev Lead
Kelly Renner
Senior Program Manager

2. Beyond the EffectBrush… New sources, brushes and effects.
5/27/2018 8:45 PM
Beyond the EffectBrush… New sources, brushes and effects.
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

3. New Inputs and Brushes LayerVisual Support
5/27/2018 8:45 PM
New Inputs and Brushes
LayerVisual Support
Tree Effects – New releases will support the ability to set an effect to the root of my tree and see results passed down to its children
Properties are animatable
The tree is always flattened/intermediates are created
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

4. 5/27/2018 8:45 PM
BackDropBrush New brush type that can be used to select the current RenderTarget as input to an effect.
Background = new GaussianBlurEffect /* newly supported by Composition */
Chained with a sepia effect
Background
Content to be drawn on top
Background content painted with BackDropBrush
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

5. Demo BackDropBrush Microsoft Build 2016 5/27/2018 8:45 PM
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

6. 5/27/2018 8:45 PM
Shadows
© 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 – Cast shadows
Create a red sprite visual
var myVisual = compositor.CreateSpriteVisual();
myVisual.Brush = compositor.CreateColorBrush(Colors.Red);
myVisual.Size = new Vector2(100, 100);
Create a drop shadow - define offset and color
var shadow = compositor.CreateDropShadow();
shadow.Offset = new Vector3(30, 30, 0);
shadow.Color = Colors.Blue;
myVisual.Shadow = shadow;

8. Simple Effect Recipe – add a mask to create custom shadow shapes
Rectangular shadows are the default. By supplying a mask, a DropShadow will mimic your contents shape
Create a CompositionSurfaceBrush for your content
CompositionSurfaceBrush maskImage = compositor.CreateSurfaceBrush();
_image1 = LoadImage(maskImage, new Uri("ms-appx:// / Assets/CircleMask.png")  );
Create CompositionMaskBrush to represent the circle image
CompositionMaskBrush maskBrush = compositor.CreateMaskBrush();
maskBrush.Source = compositor.CreateColorBrush(Colors.Red);
maskBrush.Mask = maskImage;  
Create DropShadow using Mask from CompsitionMaskBrush
var shadow = compositor.CreateDropShadow();
shadow.Offset = new Vector3(30, 30, 0);
shadow.Mask = maskImage;
myVisual.Shadow = shadow;

9. Demo Shadows Microsoft Build 2016 5/27/2018 8:45 PM
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

10. 5/27/2018 8:45 PM
SceneLighting
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

11. 5/27/2018 8:45 PM
SceneLighting
Source Lights - When these lights target a visual, the visual and all of its descendants are aware of and respond this light source  
SceneLighting Effect - SceneLightingEffect is used to describe how content responds to light with reflective properties and providing an illusion of depth with a normal map.  
General Lighting Recipe
Create and place the lights: Create various lights and place them in coordinate space.
Identify which objects are lit: Target the lights at the root or any other visual in the tree.
[Optional] Define how individual objects react to these lights: Use SceneLightingEffect in the EffectBrush used to customize displaying the SpriteVisual.
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

12. Demo SceneLighting Microsoft Build 2016 5/27/2018 8:45 PM
© 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
5/27/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.