Introducing DirectComposition: Smooth composition and animations for desktop applications

2. Introducing DirectComposition: Smooth composition and animations for desktop applications Silvana Moncayo Program Manager 4-021

3. Fast and Fluid

4. Agenda • What is DirectComposition? • Why use DirectComposition? • How to use DirectComposition • Learn best usage of the DirectComposition API • Build an application with a mix of existing and new content

5. What is DirectComposition? • Windows composition engine • Start screen • Windows desktop apps • Windows store apps • Optimized for usage with Direct2D, DXGI

6. Key Platform APIs Desktop Applications Win32 apps Input and Interaction Rendering and Composition DirectManipulation DirectComposition Remainder of Win32 InteractionContext Direct2D, DirectWrite Realtime Stylus Ink Recognition Dynamic DPI WM_POINTERFamily Direct3D Windows Kernel Services

7. How does Windows use DirectComposition?

8. Why use DirectComposition? • DirectComposition is here to support your fast and fluid scenarios just like we have for Windows experiences! • Smooth animations, panning and zooming • Best video playback experience • Interoperability with Win32 technologies • 2D and 3D transforms, clips and effects • Composition updates land atomically on screen

9. Demo: The power of DirectComposition

10. Direct2D HWND Direct2D bitmap DXGI video

11. Building a DirectComposition application

12. How to use DirectComposition • Create DirectComposition device • Create HWND composition target • Set up the structure for the composition visual tree • Set up the content for the composition visual tree • Bind content and structure • Create/set visual properties • Create/set animations • Commit

13. How to use DirectComposition • Create DirectComposition device • Create HWND composition target • Set up the structure for the composition visual tree • Set up the content for the composition visual tree • Bind content and structure • Create/set visual properties • Create/set animations • Commit

14. Device and HWND composition target Composed Window BottomDirectCompositionLayer ChildWindow TopDirectCompositionLayer ParentWindow • The main DirectComposition object is the “device” • Lightweight • Factory for all DirectComposition objects • Coordinates transactional behavior • May be associated with a DXGI or D2D device for content updates • DirectComposition content must be bound to an HWND • Top level window • Child window • Two DirectComposition conceptual layers per window • One below child windows • One on top of child windows

15. Composed window example Composed Window TopDirectCompositionLayer ChildWindow ParentWindow

16. Structure: Visuals and visual tree TopDirectCompositionLayer Composition Target for application window Root Visual for Top DirectComposition layer Container Visual BottomRightTapeVisual TopRightTapeVisual BottomLeftTapeVisual TopLeftTapeVisual

17. Visual Studio Create DirectComposition device Create HWND composition target Set up the visual tree

18. How to use DirectComposition • Create DirectComposition device • Create HWND composition target • Set up the structure for the composition visual tree • Set up the content for the composition visual tree • Bind content and structure • Create/set visual properties • Create/set animations • Commit

19. Visual’s Content: Composition surfaces • Four types of content: • DirectComposition Surface • Logical surface - all pixels are realized in video memory • DirectComposition Virtual Surface • Sparsely realized in video memory as needed • DXGI Swap Chain • Offers deep queuing of buffers + presentation intervals • Layered Child Window • HWND-based content • DirectComposition visuals can be bound to different types of content

20. Content updates: Logical and Virtual Surfaces • Need to be “checked out” for updates • BeginDraw/EndDraw paradigm to update surface • Call BeginDraw to initiate update • Retrieve a DXGI surface or a D2D device context and an offset • Draw updated contents at retrieved offset • Call EndDraw method to finish the update • Nothing updates on screen until Commit is called • DirectComposition Surface and Virtual Surface can be updated via BeginDraw/EndDraw calls

21. Content updates: DXGI swap chain & layered child window • Content changes trigger a screen recomposition independently of structural changes • DXGI swap chain updates when app calls “Present” • Layered child window updates when the app draws to the window • “Commit” does not play a role for these types of updates • Content updates are asynchronous for DXGI swap chain and layered child window

22. Visual Studio Create DirectComposition surface for tape Associate it with 4 child tape visuals

23. How to use DirectComposition • Create DirectComposition device • Create HWND composition target • Set up the structure for the composition visual tree • Set up the content for the composition visual tree • Bind content and structure • Create/set visual properties • Create/set animations • Commit

24. Visual properties • Offset • Clip • 2D affine transforms • Perspective transforms • Opacity • Interpolation and edge mode • Composite mode • Backface visibility

25. Visual Studio 6. Position tape visuals appropriately via visual properties

26. How to use DirectComposition • Create DirectComposition device • Create HWND composition target • Set up the structure for the composition visual tree • Set up the content for the composition visual tree • Bind content and structure • Create/set visual properties • Create/set animations • Commit

27. DirectComposition Animation • Low level, flexible animation execution system • Piecewise function that maps time to one floating point value • Each segment is one of the following: • Cubic polynomial • Sinusoidal • Repeat • Visual Properties: Every scalar setter has a corresponding animation setter • Animations end by replacing function with a constant scalar value

28. Visual Studio Animate container visual and its children tape visuals Commit

29. Interoperability

30. HWND-based DirectComposition surface • Child windows are only composed while layered • Add Windows 8 compatibility to your manifest • Set the WS_EX_LAYERED style bit on the window • Call SetLayeredWindowAttributes with desired constant alpha • OR • Call UpdateLayeredWindow if per-pixel alpha is needed • CreateSurfaceFromHwnd, bind Surface to Visual • Surface is just like a thumbnail -> 2nd instance of the window • I already have my content, how do I make it part of my DirectComposition scene?

31. Animating HWND-based Visual • Use Win32 HWND cloaking feature • Hides/shows the actual HWND • Use DirectComposition to animate HWND-based visual: • Create/Set DirectComposition animation • “Cloak” at the same time your animation starts • Use DwmSetWindowAttribute with “DWMWA_CLOAK” flag • “Uncloak” at the same time your animation is done

32. Visual Studio • Layer web browser child window • Create/Set DirectComposition animation • Cloak/Uncloak layered browser child window • Animate DirectComposition HWND-based visual

33. You are ready to use DirectComposition! • Add engaging, smooth composition and animation scenarios to your application by using DirectComposition! • Move existing code forward without having to change rendering paths

34. Resources • Related BUILD Talks • 3-017: Power-up your Desktop app with Windows 8.1 • 4-022: Make my desktop app great with touch, mouse, and pen • 4-184: Making your desktop apps shine on high-DPI displays • DirectComposition documentation • http://msdn.microsoft.com/en-us/library/windows/desktop/hh437371(v=vs.85).aspx • DirectComposition SDK Samples • http://msdn.microsoft.com/en-us/library/windows/desktop/hh437367(v=vs.85).aspx

35. Required Slide *delete this box when your slide is finalized Your MS Tag will be inserted here during the final scrub. Evaluate this session • Scan this QR codeto evaluate this session and be automatically entered in a drawing to win a prize!