SilverLite

Tips for creating massive amounts of shapes

2009-05-28T20:10:00Z

I am often asked how to reduce the creation time for a massive number of shapes.

Try a few things:

1) Use XamlReader.Load when you can (with the mini-language), which allows you to use the native parser and not managed code to create new shapes

2) Use the mini-language for Paths or lines (whether using Xamlreader or C#) – both Silverlight and WPF optimize the mini-language internally, in different ways. When the mini-language is used, Silverlight does not create managed object for each PathFigure, Point etc– which saves creation time and space:

http://msdn.microsoft.com/en-us/library/cc189041(VS.95).aspx

3) Switch to Bitmaps if appropriate.

4) Prototype! Prototype! Prototype! Don't write everything and realize that SL can't generate 100,000 managed objects every 10msec. =)

Generally, for drawing massive number of shapes, you want to reduce the amount of time spent in managed creation time.

-Seema

Video of "Deep Dive into SL Graphics" is posted

2009-03-28T07:30:00Z

The video for my talk on graphics is now posted, with slides:

http://videos.visitmix.com/MIX09/T17F

Demos:

Note that I deleted the original images from the project -- so, before pressing F5, replace trees.jpg and spring.jpg with actual images.
I'll post detailed steps shortly, but this should get most of you unblocked. Make sure to install the Pixel Shader Build Task before using (see below)

Pixel Shader Resources:

WPF's Build Task for building Pixel Shaders in a VS template -- read the readme!
Greg Schechter's great series of posts on building Pixel Shaders for WPF
WPF Effects Library, which can also be used within Silverlight

Enjoy!
Seema

Summary of the 20min perf talk

2009-03-25T04:26:00Z

The 20 minute talk is posted here. I spoke till the speaker timer started to flash at me (giant flashing clock), which resulted in having no time for a forum Q&A, but feel free to post your questions/comments down below. I'm always curious about what perf issues people are hitting.

Understanding perf issues gives me an idea of how people are stretching the platform beyond our key scenarios, and which APIs/codepaths we should improve in the next version.

Tim Sneath wrote an excellent writeup of my 20min mix session on writing an optimized SL app. I almost wish that I had his post to read off as a script!

Talk Video & PPT: http://videos.visitmix.com/MIX09/T67M
Tim's great summary: http://blogs.msdn.com/tims/archive/2009/03/24/building-an-optimized-graphics-intensive-silverlight-application.aspx

Cheers, Seema

See you in Vegas!

2009-03-17T00:22:00Z

Headed to Vegas tomorrow for Mix09. If you join us at The Venetian, either in person or online, check out my two talks:

Deep Dive into Silverlight Graphics, Thurs at 10:30-11:45am
Building an Optimized, Graphics-Intensive Silverlight Application, Fri at 9:00 - 9:30am

Karen Corby has a great list of Silverlight-related sessions here, and you can build your session schedule here.

Cheers!
Seema

Published the Source code for Silverlight 2 Runtime & SDK Controls

2009-01-08T04:46:00Z

Hi all,

We’ve just published the sample source code for the Silverlight 2 Controls as shipped in the runtime and the SDK.

Within the RuntimeControls folder, you’ll see a Solution that contains three projects:

1. SilverlightControls – One can edit the source and default control templates of the controls in order to build a DLL containing custom versions of the controls.

2. Controls Sample – One can take the SilverlightControls DLL from #1 and include it in a project such as this. If you press F5, this app will launch displaying the controls created in #1.

3. System.Windows.Design – This project is here largely for reference, it shows how to build a Design dll for VisualStudio and Expression Blend such that your custom controls would display within the toolbox.

Disclaimer: Note that we did take a small amount of changes in the Runtime Controls to get the project to properly build outside of our internal build environment.

The source for the following controls was released:

- Managed Runtime Controls:

o ButtonBase

o Button

o HyperlinkButton

o CheckBox

o RadioButton

o ToggleButton

o RangeBase

o ProgressBar

o Slider

o ScrollBar

o Thumb

- SDK classes:

o Calendar

o DatePicker

o DataGrid

o TabControl

o GridSplitter

- Unite Tests for the SDK controls

- Appropriate sub-types (eventargs/ handlers, etc)

Have fun and let us know what you build!

Seema, Andre Michaud, & Jon Sheller

What is the Silverlight Font?

2008-11-26T02:12:00Z

Saw this forum post, and thought it worthwhile to send out an FYI to the rest of the world:

In Silverlight 1.0, we use Lucida as the default font. For Silverlight 2 apps, we created a world-friendly font, called the Portable UI font (PUI!), which uses the Verdana glyphs for the Western characters and a variety of other glyphs for other languages.

Why? SL1 needed a web-friendly font. SL2 wanted to ship a font that looked great with our controls. The decision to use Lucida and Verdana depending on whether you host CLR was a compromise that I brokered between our designer, the text team, and the compat folks.

If you find yourself in a jam where you need to match the standard Silverlight 2 font, set the FontFamily to Verdana at the top of your application. If the characters are Western, we will use Verdana. If the characters are not supported by Verdana, it will fall back to our PUI.

(The issue in the linked post is a bug, we should detect that it is a Silverlight 2 app regradless of the extension. Let us know if you see any other variants of this bug, would love to hammer those out.)

Cheers, Seema

Silverlight Tip of the Day, some tips from the Silverlight perf talk

2008-11-26T00:27:00Z

Mike Snow posted a few of the tips from my PDC talk here, it's a great summary. You can check it out here. Cheers! Seema

Getting to the Media FastPath

2008-11-08T05:15:00Z

Earlier this week, us in the Silverlight perf and media teams reviewed Ben Waggoner's tutorial on how to build fast media players, check it out here:

http://on10.net/blogs/benwagg/Building-high-performance-Silverlight-Media-Players/

Tis a great how to guide.

(now I'm really going home. Seema)

EnableFramerateCounter, Setting your Framerate correctly

2008-11-08T04:39:00Z

Debug tool
I posted about EnableFramerateCounter before -- it is a simple little debugging setting that you can use when trying to figure out:

Which of these designs hurts my framerate more?
If I add this module in, does it hurt my framerate?

To figure these out, you can:

Set the plugin's desired framerate at 1000 (silverlightObject.settings.MaxFrameRate OR Silverlight.CreateObjectEx({properties:{framerate:'framerate'}}))
Turn on the EnableFramerateCounter, which should show up in the status bar (IE/Firefox --> View --> Status Bar).

Desired Framerates
Make sure to reset the framerate to the suggested framerates for your app: Media apps @60fps or RIA/Control apps @20fps before launching your app to the public.
When trying to figure out the desired framerate of an animation or control-heavy app, use real people (not developers/designers) to gauge whether increasing the fps above 20fps makes sense. If you set your framerate at an unnecessarily high value, it will throttle the computer's cycles -- and could result in a jerkier effect than if you just had a lower framerate. So where 60fps might be slick and easy for your devbox, it could be a pain for your customer's machine -- so only use what you need.

The desired framerate of plugin hosting media is always 60fps -- this gives the media pipeline the most number of ticks to figure out the optimal timing of presenting a frame. Silverlight will decode at the framerate of the encoded video (this usually is <32fps), and we present the frames in sync with the audio. To summarize roughly, if the platform doesn't receive a tick in sync with the audio, then the platform will decode the frame, and then just throw it away. If you don't understand this, just trust me and use framerate=60.

Technically, you could set the framerate dynamically -- I haven't tried this, but it might be a useful thing to try out if your app has both media and heavy controls/animations.

Debugging Settings

So here are the debugging settings that I use (not all at once, of course)

Sys.Silverlight.createObjectEx({

     source: "xaml/Scene.xaml",

     parentElement: document.getElementById("SilverlightControlHost"),

     id: "SilverlightControl",

     properties: {

          width: "500", height: "500",

         isWindowless: false,

          background: "FF000000",

          framerate: "10000"      },

     events: { onLoad:onLoadHandler} });

function onLoadHandler() {

     agControl = document.getElementById("SilverlightControl");

     /* To see the framerate displayed in the browser status bar */

     agControl.settings.EnableFrameRateCounter = true;

     /* To see the redraw regions*/

     agControl.settings.EnableRedrawRegions= true;

}

I accidentally dumped the sugar canister into my tea, time to go home.
Seema

PDC: Deep Dive into building an optimized graphics-intensive SL app

2008-11-03T22:57:00Z

Thank you everyone for attending. For those who could not make it, you can check out my talk here on channel9, it was PC06:

In this deep dive session we pull the covers off of the layout, rendering, and media pipelines to discuss how things work and how to optimize your application. This session covers how to set goals with your designer and developer teams, what happens behind the scenes with control visuals, the underlying mechanisms of our media stack, and how to profile your application.

My deck is here, my halo video player is here. The instructions to use xperf are available at this post.

Please fill out an eval after watching. I was honored to do a talk at PDC and I do read and appreciate all feedback.

Cheers, S

We Shipped! See you at the PDC!

2008-10-22T01:56:00Z

We shipped Silverlight 2! Hurrah!

We made a push to fix several perf improvements throughout the platform between the RC and RTM, let me know if a) you see an improvement that you like! b) something that we still need to fix!

I'll be heading to the PDC on Monday morning to give a talk:

Deep Dive: Building an Optimized, Graphics-Intensive Application in Microsoft Silverlight
Seema Ramchandani

In this deep dive session we pull the covers off of the layout, rendering, and media pipelines to discuss how things work and how to optimize your application. This session covers how to set goals with your designer and developer teams, what happens behind the scenes with control visuals, the underlying mechanisms of our media stack, and how to profile your application.

The talk wmv should be posted online afterwards. Please mail me any graphics/perf topics that you want to hear discussed, and I'll try to incorporate them into the talk (either in the deck or Q&A).

Cheers!

.seema

XPerf: A CPU Sampler for Silverlight

2008-10-09T07:59:00Z

For those of you who are a) building graphics-intensive applications or b) trying to debug your performance, I would like to introduce xperf and xperfview. These are two profiling tools which can be used to analyze the performance of any Microsoft technology, including Silverlight.

These tools have existed internally for quite some time, and I'm excited to see that they have been released. I use xperf as my first step for profiling any app -- it's a simple CPU sampler and gives you a peek to why on earth something is taking up so many CPU cycles. XPerf plugs into the Event Tracing for Windows library, and listens to all the internally embedded events that all Windows products trigger. With the publicly available Silverlight symbols, you can see how these events line back to what Silverlight is doing under the hood, while your app is running.

Note: with xperf, managed code (your app code) will show up as samples on the methods that your app code calls. XPerf does not have the capabilities to show CPU cycles in managed code.

With XPerf, one can find answers to questions like:

Is my app asking Silverlight to constantly spin on CPU cycles.
Whether one UI layout or design is more expensive than the other.
Whether the time is spent in drawing (agcore.dll), the plug-in’s interactions with (npctrl.dll), or in compilation/JIT (coreclr.dll)
How much is stretching/blending/rotating that video going to cost in terms of CPU cycles? How about if you encode it differently?

Please note that the tools only work on Vista and Windows Server 2k3. For profiling on a mac, see my previous post on how to use Shark from the Apple CHUD tools.

The first-time instructions are as follows:

1. Install XPerf (formerly xperfinfo) and xperfview (formerly xperf) as available here: http://msdn.microsoft.com/en-us/library/cc305187.aspx

[10/9-9am I updated the above link: download link http://www.microsoft.com/whdc/system/sysperf/perftools.mspx]

Close everything that is not user-specific (close VS, but keep your virus checker, etc).

2. Startup your sample

I personally start up my sample without profiling because the startup sampling is very different from that of the runtime.

3. Open an Administrator-level command prompt. Set your symbol path in the cmd shell:
set _NT_SYMBOL_PATH= srv*C:\symbols*http://msdl.microsoft.com/downloads/symbols

This will set your symbol path to point to the Microsoft symbol server. The symbol server hosts debugging symbols for most all Microsoft products.

[update: cd into C:\Program Files\Microsoft Windows Performance Toolkit]

4. xperf -on base

Run the app for maybe 10 seconds for this initial run. We want to understand what method is taking up the most cycles. At the end of this, you will see a graph of CPU usage over time – so you can use various methods to see where time is going: repeatedly execute a user action (expand/collapse, scroll, etc), let the media play for a while, etc. If you are trying to compare several different options, you can execute different actions at widely-spaced intervals, and compare the graphs for each.

5. xperf –d myprofile.etl

Step #4 will both stop the profile and start the writing of the event trace log (etl) file. This can take a while, depending on the complexity of your application, how many other apps were running, and how long the profile extended.

6. xperfview myprofile.etl

We see now see multiple graphs. We are most interested in that of the CPU cycles, which will look something like this:

In my sample, I have a dual-core machine so you see two lines, one for each CPU. This graph is of a media file playing, which should have an almost steady hit for the CPU. I can drag and select any section of the graph and take a closer look:

7. TraceàLoad Symbols

8. Select the area of the CPU graph that you want to see

Right-click and select Summary Table

9. Accept the EULA for using symbols, expand IExplore.exe (or firefox.exe)

At this point, you’ll see how the time breaks down between the different processes and modules running within windows. Agcore.dll, npctrl.dll, and coreclr.dll are all Silverlight.

10. If the symbols server has correctly been set, you’ll see that you can expand and see the breakdown of time in each method call within agcore.dll:

The way to read this graph is that IE is taking up 40% of the CPU on average, during the selected sample. Within that, 32% of the time is spent in Silverlight core (graphics/decoding/property engine, etc are all represented in agcore.dll), and then of that time, 29% (9.24/32.33) of the drawing time is spent in one method call.

Note: with xperf, managed code (your app code) will show up as samples on the methods that your app code calls. XPerf does not have the capabilities to look at app code.

Now what? Well, with just the above think about how you can answer the questions at the top:

Is my app asking Silverlight to constantly spin on CPU cycles.
Do I see activity when the app does not seem to be doing anything? Where does the summary table say that time is going? Perhaps turn on EnableRedrawRegions and see if there is a draw being forced.
Whether one UI layout or design is more expensive than the other.
When I scroll now, is my average CPU higher or lower than before?
Whether the time is spent in drawing (agcore.dll), the plug-in’s interactions with (npctrl.dll), or in compilation/JIT (coreclr.dll)
How much is stretching/blending/rotating that video going to cost in terms of CPU cycles? How about if you encode it differently?
Are there new methods that you see in the stack, now that you have stretched the media? Blended it? What is the average time for CPU cycles compared to your baseline? I know that it is cheaper for me to embed an icon overlay directly into the video, but what does it really cost in terms of CPU time?

Note: The tools only work on Vista and Windows Server 2k3

For later usage, your usage pattern is quicker:

Set your symbol path in an Admin-level cmd shell:
set _NT_SYMBOL_PATH= srv*C:\symbols*http://msdl.microsoft.com/downloads/symbols
xperf -on base
xperf –d myprofile.etl
xperfview myprofile.etl

The platform code and the CPU samples will change version to version, so please keep that in mind when profiling between upgrades.

See anything interesting? Drop me a note!

Have fun!

.seema.

Perf Debugging Tips: EnableRedrawRegions & a performance bug in VideoBrush

2007-10-08T04:50:00Z

Was chatting with Andy Beaulieu at Remix Boston, and he was commenting that it seems that Silverlight only draws when needed -- it is true, we try to not waste your CPU cycles. For Perf debugging, a way to tell when you are causing a redraw is to turn on the control's EnableRedrawRegions property.

agControl.settings.EnableRedrawRegions = true;

With this feature on, when a section of the plugin causes a draw, that section will draw in a different color. This setting is not for those susceptible to seizures =P

Bug found: With this setting, I investigated a performance issue with VideoBrush. In our 1.0 Silverlight bits, VideoBrush always requests a redraw in the next frame. This is a bug. Unfortunately, if the control framerate is set to the default (60 fps), then any VideoBrush will be redrawn 60 times in a second. In actuality, VideoBrush should draw at the framerate that its media is getting refreshed (eg. 30fps, 15fps, or 0fps if paused), and should not take up so many CPU cycles. We have a fix for this bug in 1.1. If you are blocked by this bug, please let me know and I can pass the info along to our servicing team.

[update] By the way, this bug was fixed in a servicing pack in dec 2007.

A workaround is to set the framerate on your Silverlight control to be the same as the framerate of your video. There are visual artifacts to this workaround, but it is slight

Sys.Silverlight.createObjectEx({

source: "xaml/Scene.xaml",

parentElement: document.getElementById("SilverlightControlHost"),

id: "SilverlightControl",

properties: {

width: "500",

height: "500",

background: "black",

framerate: "30" //only as much as needed

}

Macintosh & Silverlight perf...

2007-10-02T23:15:00Z

I met recently with two designers trying to figure out "what was Silverlight doing under the covers? did I accidentally turn on some feature?"

My first thought is to reference my post on how to minimize CPU usage. We have to learn how to conserve not only energy but CPU cycles (yes, even if you don't see a difference on your dev box)

My second thought, as I stared at the designers' laptop: have you checked out Apple's Shark tool made for the Mac? Pretty quick and easy to learn -- you can navigate through the entire callstack of Silverlight.

For the Silverlight mac developers out there, check out Shark:

Using Shark: http://developer.apple.com/tools/performance/optimizingwithsystemtrace.html
Link to download "Computer Hardware Understanding Development" (CHUD) tools: http://developer.apple.com/tools/download/

My general usage:

Launch my silverlight application in a browser
Direct Shark towards the browser's process
Click on Start (it should have a 30sec timeout by default)

When you see the callstack, anything with agcore is from Silverlight.

Why is it named agcore? From Wikipedia: "Ag from the Latin Argentum is the chemical symbol for silver "

Enjoy, tell me about your experiences. Any successes? Any questions about what is showing up in the trace?

See you at Remix Boston!

2007-10-02T23:11:00Z

Weather has turned dreary in Seattle already, I'm headed to Boston for a bit of warmth and to see the leaves turn....but more importantly: I'm giving a talk at Remix Boston on Tuesday at 9am, introducing Silverlight as a developer and media platform. Send me a ping if you would like me to delve into a particular topic.

See you there,
Seema