#Build2016
Effects in the Visual LayerWindows Composition: The Windows 10 EffectBrushChris RaubacherSenior Dev LeadKelly RennerSenior Program Manager
Effects designed and developed for UI
Click icon to add picture
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
• 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
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);
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") } }
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);
Demo Chaining and Animating Effects
Image Lighting
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.
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.
Demo Animating Image Light with Heightmaps
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