#Build2016

Beyond the EffectBrush with Windows UINew Effects, Brushes, Shadows and LightingChris RaubacherSenior Dev LeadKelly RennerSenior Program Manager

Beyond the EffectBrush…New sources, brushes and effects.

New Inputs and Brushes LayerVisual SupportTree 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

BackDropBrushNew 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 painted with BackDropBrush

Background

Content to be drawn on top

Demo BackDropBrush

Shadows

Simple Effect Recipe – Cast shadowsCreate a red sprite visualvar myVisual = compositor.CreateSpriteVisual();myVisual.Brush = compositor.CreateColorBrush(Colors.Red);myVisual.Size = new Vector2(100, 100);

Create a drop shadow - define offset and colorvar shadow = compositor.CreateDropShadow();shadow.Offset = new Vector3(30, 30, 0);shadow.Color = Colors.Blue;myVisual.Shadow = shadow;

Simple Effect Recipe – add a mask to create custom shadow shapesRectangular 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 imageCompositionMaskBrush maskBrush = compositor.CreateMaskBrush();maskBrush.Source = compositor.CreateColorBrush(Colors.Red);maskBrush.Mask = maskImage;   Create DropShadow using Mask from CompsitionMaskBrushvar shadow = compositor.CreateDropShadow();shadow.Offset = new Vector3(30, 30, 0);shadow.Mask = maskImage;myVisual.Shadow = shadow;

Demo Shadows

SceneLighting

SceneLightingSource 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 Recipe1. Create and place the lights: Create various lights and place

them in coordinate space.2. Identify which objects are lit: Target the lights at the root or

any other visual in the tree.3. [Optional] Define how individual objects react to these lights:

Use SceneLightingEffect in the EffectBrush used to customize displaying the SpriteVisual.

Demo SceneLighting

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