slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Introducing DirectComposition: Smooth composition and animations for desktop applications PowerPoint Presentation
Download Presentation
Introducing DirectComposition: Smooth composition and animations for desktop applications

Loading in 2 Seconds...

play fullscreen
1 / 36

Introducing DirectComposition: Smooth composition and animations for desktop applications - PowerPoint PPT Presentation


  • 326 Views
  • Uploaded on

Introducing DirectComposition: Smooth composition and animations for desktop applications. Silvana Moncayo Program Manager 4-021. Fast and Fluid. Agenda. What is DirectComposition? Why use DirectComposition? How to use DirectComposition

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Introducing DirectComposition: Smooth composition and animations for desktop applications' - ajay


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
introducing directcomposition smooth composition and animations for desktop applications

Introducing DirectComposition: Smooth composition and animations for desktop applications

Silvana Moncayo

Program Manager

4-021

agenda
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
what is directcomposition
What is DirectComposition?
  • Windows composition engine
  • Start screen
  • Windows desktop apps
  • Windows store apps
  • Optimized for usage with Direct2D, DXGI
key platform apis
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

why use directcomposition
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
slide10

Direct2D

HWND

Direct2D bitmap

DXGI video

how to use directcomposition
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
how to use directcomposition1
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
device and hwnd c omposition t arget
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
composed window example
Composed window example

Composed Window

TopDirectCompositionLayer

ChildWindow

ParentWindow

structure visuals and visual t ree
Structure: Visuals and visual tree

TopDirectCompositionLayer

Composition Target for application window

Root Visual for Top DirectComposition layer

Container Visual

BottomRightTapeVisual

TopRightTapeVisual

BottomLeftTapeVisual

TopLeftTapeVisual

visual studio
Visual Studio

Create DirectComposition device

Create HWND composition target

Set up the visual tree

how to use directcomposition2
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
visual s content composition surfaces
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
content updates logical and virtual surfaces
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 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 studio1
Visual Studio

Create DirectComposition surface for tape

Associate it with 4 child tape visuals

how to use directcomposition3
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
visual properties
Visual properties
  • Offset
  • Clip
  • 2D affine transforms
  • Perspective transforms
  • Opacity
  • Interpolation and edge mode
  • Composite mode
  • Backface visibility
visual studio2
Visual Studio

6. Position tape visuals appropriately via visual properties

how to use directcomposition4
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
directcomposition a nimation
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
visual studio3
Visual Studio

Animate container visual and its children tape visuals

Commit

hwnd based directcomposition surface
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?
animating hwnd based visual
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
visual studio4
Visual Studio
  • Layer web browser child window
  • Create/Set DirectComposition animation
  • Cloak/Uncloak layered browser child window
  • Animate DirectComposition HWND-based visual
you are ready to use directcomposition

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
resources
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
evaluate this session

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!