#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: [email protected]
Follow us on Twitter@wincomposition