Advanced Performance & Profiling in Silverlight 4

Seema RamchandaniProgram ManagerMicrosoft Corporation

CL02

1. Adjective2. Medical Diagnostic3. Adjective4. Sport5. 2nd Sport6. Human Organ7. Sport (gerund)8. UI Interaction9. Household Appliance10.UI Element11.2nd UIElement

Give me a…1. Burly 2. CT Scan3. Churlish4. Racquetball5. Curling6. Brain7. Boxing8. Double-Click9. Espresso Machine10. Ribbon11.Accordian Control

Why Profile?

1. Burly 2. CT Scan3. Churlish4. Racquetball5. Curling6. Brain7. Boxing8. Double-Click9. Espresso Machine10. Ribbon11.Accordian Control

Advanced Performance & Profiling in Silverlight 4

Seema RamchandaniProgram ManagerMicrosoft Corporation

P09-10

> Measuring & Profiling> Employing the GPU> Understanding the Layers

Agenda

1. Identify potential problem areas> Startup? Memory? Framerate?

2. Monitor as changes are made> Framerate: size of dirty regions

3. Test on a range of hardware

4. Verify that things are as expected

Iteratively measure perf

Virtualized ListBox?UISpy.exe (as admin)

demo

33 msec

Frame BasedModel

132msecSilverlight’s Real-TimeAnimation

time

BUSYSkip 3 turns

Threads> UI Thread

> User Code> Control Code> Animations> Layout

> Non-UI Thread> Frame

Rasterization> Media Decoding

Event Handler

s

Tick

Any property changes

?

Layout

Queue up

rendering

changes

Rasterize in back buffer

Hey browser! Show

my Frame

4 Ways to Measure & Profile1. Do the changes impact framerate?

EnableFrameRateCounterMaxFramerate

4 Ways to Measure & Profile1. Do the changes impact framerate?

EnableFrameRateCounter

2. Visualize the Pain PointsEnableRedrawRegionsEnableCacheVisualization

Screen UpdatingWe only draw what is “dirty”,

….as far as we can figure out,

…sometimes we are too sensitive to bindings or property changes.

(You should always double-check.)

EnableRedrawRegions<param name="enableRedrawRegions" value="true" />

demo

4 Ways to Measure & Profile1. Do the changes impact framerate?

EnableFrameRateCounter2. Visualize the Pain Points

EnableRedrawRegions

3. Big Picture: What is the actual diff?Profile: User & Platform CodeVSTS2010 + Silverlight 4 CLR

Profile with VSTS 2010

demo Instructions will be posted on http://blogs.msdn.com/seema vsperfclrenv /sampleon

set CORECLR_ENABLE_PROFILING=1set CORECLR_PROFILER=%COR_PROFILER%

vsperfcmd /start:sample /output:myProfile.vspvsperfcmd /launch:"c:\Program Files\Internet Explorer\iexplore.exe“ navigate, play with app, Shut down.vsperfcmd /shutdown

4 Ways to Measure & Profile1. Do the changes impact framerate?

EnableFrameRateCounter2. Visualize Pain Points

EnableRedrawRegions3. Big Picture: What is the actual diff?

Profile: User & Platform Code

4. Profile: Unmanaged Platform CodeVSTS2010 for SL4 or XPerf for SL3

Profiling with XPerf> ETW – Event Tracing for Windows

> Tracing mechanism for both user-mode & kernel-mode apps.

> Silverlight & CLR have embedded ETW events.

> Analyzes unmanaged callstack.> Describes CPU cycles over time

Instructions: http://blogs.msdn.com/seema

Demo ListBox in SW / HWProfile Instructions:http://blogs.msdn.com/seema --> search “xperf”demo

ListBox: Software vs. Hardware

> Measuring & Profiling> Employing the GPU> Understanding the Layers

Agenda

Let’s define “software” and “hardware”

How we draw1. ParentNode2. Layout Offset (internal LayoutTransform)3. RenderTransform4. Clip5. Opacity6. OpacityMask7. Children

How we draw1. ParentNode2. Layout Offset (internal LayoutTransform)3. RenderTransform4. Perspective5. Clip6. Effect7. Opacity8. OpacityMask9. Children

Intermediate surface

Apply Effect

Features that use RenderToIntermediate

> WriteableBitmap> Effects> Projection> GPU Caching

Video card

+

: Strengths+

BitBlt

ScaleTransforms

TranslateTransformsRotateTransforms

…and so much more, but let’s just start with these…

Blending

1. ParentNode2. Layout Offset3. RenderTransfor

m4. Perspective5. Clip6. Effect7. Opacity8. OpacityMask9. Hardware Cache10.Children

Effect GPU Cache

Opacity

Rect Clip

Render Trans

Layout Offset

Parent Node

Opac Mask Opac Effect Clip Persp

TransRend Trans

Layout

Offset

Parent

Node

Child

CPU

GPU

OR

CPU

Effect GPU Cache

Opacity

Rect Clip

Render Trans

Layout Offset

Parent Node

Opac Mask Opac Effect Clip Persp

TransRend Trans

Layout

Offset

Parent

Node

Child

CPU

GPU

OR

CPU

Hardware Acceleration> Plugin Setting EnableGPUAcceleration

> UIElement.CacheMode=BitmapCache> API: “Cache” this element as a bitmap.> Behavior: GPU handles Transforms*, Blends, and

Clips.> Ex: GPU handles Media shrink or stretch

> Support:> Windows: Browser & Fullscreen (all DX9.0c drivers)> Mac: Fullscreen

Where to set BitmapCache?> Animated Properties but Static Content

> Transform, Opacity, or Clip> No “SW-only properties” on self or parent

> Take care of your visual tree order.> Minimal Interleaving> No Nesting of Cached nodes

Background, is auto-cached with EnableGPUAcceleration

Static, included in background

Dynamic – Animating Translation CacheMode = BitmapCache

Dynamic – Animating Translation CacheMode = BitmapCache

Static

StaticDynamic – Cached

Dynamic – Cached

DynamicDo Not Cache

<Canvas> <Canvas.Background><!--Insert Kitty--> </> <Humpty Loaded="Play" /> <Seahorse /> <!-- Animated Seahorses --> <Seahorse Loaded="Move" CacheMode="BitmapCache" /> <Seahorse Loaded="Move" CacheMode="BitmapCache" /></Canvas>

Z-Order

Grid

Humpty Seahorse Seahorse Seahorse

ImageBrush

+ +

Intermediate for background

2 cached nodes

Z-Order

<Canvas> <Canvas.Background><!--Insert Kitty--> </> <Humpty Loaded="Fall" /> <Seahorse /> <!-- Animated Seahorses --> <Seahorse Loaded="Move" CacheMode="BitmapCache" /> <Seahorse Loaded="Move" CacheMode="BitmapCache" /></Canvas>

Z-Order

<Canvas> <Canvas.Background><!--Insert Kitty--> </> <Seahorse /> <!-- Animated Seahorses --> <Seahorse Loaded="Move" CacheMode="BitmapCache" /> <Humpty Loaded="Fall" /> <Seahorse Loaded="Move" CacheMode="BitmapCache" /></Canvas>

Z-Order

<Canvas> <Canvas.Background><!--Insert Kitty--> </> <Seahorse /> <!-- Animated Seahorses --> <Seahorse Loaded="Move" CacheMode="BitmapCache" /> <Humpty Loaded="Fall" CacheMode="None" /> <Seahorse Loaded="Move" CacheMode="BitmapCache" /></Canvas>

Z-Order

Grid

Seahorse Seahorse Humpty Seahorse

ImageBrush

+Cached node

+Cached node

+

Intermediate TextureIntermediate for background

Z-Order

Calvin & Hobbes

demo

More Practical uses> Media

Decode

YUV Conve

rt

Resize

(opt)Blend (opt) Draw

Rinse & Repeat, at the video framerate

Media: Every Pixel, Every frame.

> Encode at the minimum framerate possible.

> Encode at the desired size.> Blending with media is expensive.

More Practical uses> Media

Background(Final Buffer)

Cached Media Element

Top Level Stuff++

Enhancing media with GPU > Is the MediaElement doing any of

these?> Stretching> Rectangular clip> Blending via Opacity

> If so, then:> Plugin: EnableGPUAcceleration=true> MediaElement: CacheMode=BitmapCache> Debug:

EnableFrameRateCounterEnableCacheVisualization

> Profile: XPerf

Profiled on my own machines360p Silverlight H264 Video, Stretched to FS

CPU w/ SW Stretch

CPU w/ HW Stretch

% Diff

XP laptop ’041.3ghz single core

70% CPU 32% CPU -55%

Vista desktop ’04 2.4g single core

88% CPU 44% CPU -50%

Vista laptop ’072.3g core2duo

60% CPU 24% CPU -60%

540p Silverlight H264 Video, Stretched to FS

SW Stretch HW Stretch % Diff

XP laptop ’041.3ghz single core

69% CPU 59% CPU -15%

Vista laptop ’072.3g core2duo

71% CPU 37% CPU -47%

More Practical uses> Media

> Transitions: > Zoom in/out> Sliding in> Blending in

> Special Uses of Controls> ListBox from earlier

ListBox: Can I use Hardware?> Key concern: Scrolling> Knew my tree above and below

> Static content> Parent has neither effects

nor perspective, etc

> Changing HW-friendly properties:> Translation & Rectangular Clipping

> Knew explicit size> Smaller than Max Texture Size (~2048 in either direction)

ListBox: What changed with Hardware?> Scrolling is done by HW

> Text is not recalculated every frame> Faster> Uglier.

One can switch back to un-cached dynamically.

Know the road> Watch VRAM usage

> Note: SL4 Beta bug

> Watch your tree structure

> Ensure there is a positive impact> Use XPerf, F1, etc> Blts can be more expensive than a simple

transform

Decision tree for HW

visio ftw.

EnableCacheVisualization

> Draws HW surfaces with normal colors.

> Tints SW surfaces

> Measuring & Profiling> Employing the GPU> Understanding the Layers

Agenda

1. ParentNode2. Layout Offset3. RenderTransfor

m4. Perspective5. Clip6. Effect7. Opacity8. OpacityMask9. Children

Minimize Size of affected objects

Vs.

Rendering:Minimize Number of operations per frame> Opacity, OpacityMask, Clipping,

Perspective, Effects, etc

Vs.

HelloWorld

Hello

World

Rendering:Minimize Number of frames

Vs.

http://www.newyorker.com/images/2008/05/26/p233/080526_r17431_p233.jpg

…Ashraf, our gfx architect, covers the graphics pipelines in depth…

Author: Ashraf MichailPublisher: Addison-Wesley

Fill out Survey

PDC gives

$1

http://blogs.msdn.com/seema

Q&A

YOUR FEEDBACK IS IMPORTANT TO US! Please fill out session evaluation

forms online atMicrosoftPDC.com

Learn More On Channel 9> Expand your PDC experience through

Channel 9

> Explore videos, hands-on labs, sample code and demos through the new Channel 9 training courses

channel9.msdn.com/learnBuilt by Developers for Developers….

© 2009 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.