Introducing DirectComposition: Smooth composition and animations for desktop applications

Silvana MoncayoProgram Manager4-021

Fast and Fluid

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

Windows composition engine• Start screen• Windows desktop apps• Windows store appsOptimized for usage with Direct2D, DXGI

What is DirectComposition?

Click icon to add picture

Key Platform APIs

Direct2D, DirectWrite

Direct3D

Dyna

mic

DPI

Desktop Applications

DirectComposition

Rem

aind

er o

f Win

32

Real

time

Styl

us

Ink

Reco

gniti

on

InteractionContext

WM_POINTER Family

DirectManipulation

Win32 apps

Windows Kernel Services

Input and Interaction Rendering and Composition

How does Windows use DirectComposition?

• 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

DirectComposition is here to support your fast and fluid scenarios just like we have for Windows experiences!

Why use DirectComposition?

Demo: The power of DirectComposition

Direct2D bitmap

DXGI video

Direct2D HWN

D

Building a DirectComposition application

How to use DirectComposition1. Create DirectComposition device2. Create HWND composition target3. Set up the structure for the composition

visual tree4. Set up the content for the composition

visual tree5. Bind content and structure6. Create/set visual properties7. Create/set animations8. Commit

How to use DirectComposition1. Create DirectComposition device2. Create HWND composition target3. Set up the structure for the composition

visual tree4. Set up the content for the composition visual

tree5. Bind content and structure6. Create/set visual properties7. Create/set animations8. Commit

Device and HWND composition targetThe main DirectComposition object is the “device”LightweightFactory for all DirectComposition objectsCoordinates transactional behaviorMay be associated with a DXGI or D2D device for content updates

DirectComposition content must be bound to an HWNDTop level windowChild window

Two DirectComposition conceptual layers per windowOne below child windowsOne on top of child windows

ParentWindow

BottomDirectComposition

Layer

ChildWindow

TopDirectCompositio

nLayer

Composed Window

Composed window example

ParentWindow

ChildWindow

TopDirectComposition

Layer

Composed Window

Structure: Visuals and visual treeComposition Target for application window

Root Visual for Top DirectComposition layer

Container Visual

TopLeftTape Visual

TopRightTape Visual

BottomRightTape Visual

BottomLeftTape Visual

TopDirectComposition

Layer

Visual Studio1. Create DirectComposition device 2. Create HWND composition target3. Set up the visual tree

How to use DirectComposition1. Create DirectComposition device2. Create HWND composition target3. Set up the structure for the composition visual

tree4. Set up the content for the composition

visual tree5. Bind content and structure6. Create/set visual properties7. Create/set animations8. Commit

Visual’s Content: Composition surfaces

Four types of content:DirectComposition Surface• Logical surface - all pixels are realized in video

memoryDirectComposition Virtual Surface• Sparsely realized in video memory as needed

DXGI Swap Chain• Offers deep queuing of buffers + presentation

intervalsLayered Child Window• HWND-based content

DirectComposition visuals can be bound to different types of content

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

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

Visual Studio4. Create DirectComposition surface for tape5. Associate it with 4 child tape visuals

How to use DirectComposition1. Create DirectComposition device2. Create HWND composition target3. Set up the structure for the composition visual

tree4. Set up the content for the composition visual

tree5. Bind content and structure6. Create/set visual properties7. Create/set animations8. Commit

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

Visual Studio6. Position tape visuals appropriately via visual properties

How to use DirectComposition1. Create DirectComposition device2. Create HWND composition target3. Set up the structure for the composition visual

tree4. Set up the content for the composition visual

tree5. Bind content and structure6. Create/set visual properties7. Create/set animations8. Commit

DirectComposition AnimationLow level, flexible animation execution systemPiecewise function that maps time to one floating point valueEach segment is one of the following:

• Cubic polynomial• Sinusoidal• Repeat

Visual Properties: Every scalar setter has a corresponding animation setterAnimations end by replacing function with a constant scalar value

Visual Studio7. Animate container visual and its children tape

visuals8. Commit

Interoperability

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 alphaOR • 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?

Animating HWND-based VisualUse 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

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

Add engaging, smooth composition and animation scenarios to your application by using DirectComposition!

Move existing code forward without having to change rendering paths

You are ready to use DirectComposition!

ResourcesRelated 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

Evaluate this session

Scan this QR code to evaluate this session and be automatically entered in a drawing to win a prize!

© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.