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

Build 2016 - P492 - The Power of the EffectBrush in Windows UI

Embed Size (px)

Citation preview

Page 1: Build 2016 - P492 - The Power of the EffectBrush in Windows UI

#Build2016

Effects in the Visual LayerWindows Composition: The Windows 10 EffectBrushChris RaubacherSenior Dev LeadKelly RennerSenior Program Manager

Page 2: Build 2016 - P492 - The Power of the EffectBrush in Windows UI

Effects designed and developed for UI

Click icon to add picture

Page 3: Build 2016 - P492 - The Power of the EffectBrush in Windows UI

Effect feature principlesEffect graphs can support multiple effects that can refer to one and other Wherever possible effects support animatable effect propertiesPerformance is a high priority - Effect rendering must maintain high and consistent framerates, no glitchesDevelopers can use the power of graphics and rendering without extensive knowledge of D3D or D2DRequirements are driven by both developers and designers so designs can be realized in code

What is a Composition Effect?A composition effect supports real time UI processing to create or manipulate imagery

Page 4: Build 2016 - P492 - The Power of the EffectBrush in Windows UI

• 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

Key Concepts

Page 5: Build 2016 - P492 - The Power of the EffectBrush in Windows UI

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 effectvar 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 effectvar myVisual = _compositor.CreateSpriteVisual()myVisual.Brush = myEffect; myVisual.Size = new Vector2(220, 300);

_root.Children.InsertAtBottom(myVisual);

Page 6: Build 2016 - P492 - The Power of the EffectBrush in Windows UI

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")                    }                }

             

Page 7: Build 2016 - P492 - The Power of the EffectBrush in Windows UI

Simple Effect Recipe Add AnimationAt 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 animationScalarKeyFrameAnimation 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);

Page 8: Build 2016 - P492 - The Power of the EffectBrush in Windows UI

Demo Chaining and Animating Effects

Page 9: Build 2016 - P492 - The Power of the EffectBrush in Windows UI

Image Lighting

Page 10: Build 2016 - P492 - The Power of the EffectBrush in Windows UI

Light TypesPoint 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 sunSpot 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.

Page 11: Build 2016 - P492 - The Power of the EffectBrush in Windows UI

Image Reflection Diffused Diffused light appears to be a non-reflective surface and the light is scattered in all directionsSpecular 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.

Page 12: Build 2016 - P492 - The Power of the EffectBrush in Windows UI

Demo Animating Image Light with Heightmaps

Page 13: Build 2016 - P492 - The Power of the EffectBrush in Windows UI

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