GPU Acceleration is my favorite new feature in Silverlight 3 because I think it will truly enable new, unique web experiences.  GPU Acceleration allows Silverlight to use the video card to render portions of the User Interface, which can greatly improve performance. Under the covers, Silverlight uses DirectX in Windows, and OpenGL on the Mac to take advantage of the video hardware.

Enabling GPU Acceleration

By default, GPU Acceleration is not enabled in Silverlight. You need to opt in to this feature using the following steps:

First, add in a parameter to your Silverlight object tag as follows:

<object id="plugin1" data="data:application/x-silverlight-2," type="application/x-silverlight-2"

    width="100%" height="100%">

    <param name="source" value="ClientBin/ScrollMonster.xap" />

    <param name="onerror" value="onSilverlightError" />

    <param name="background" value="white" />

    <param name="minRuntimeVersion" value="3.0.40307.0" />

    <param name="autoUpgrade" value="true" />

    <param name="EnableGPUAcceleration" value="true" />

    <a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">

        <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight"

            style="border-style: none" />

    </a>

</object>

Now that you have enabled GPU Acceleration at the plug-in level, you can then enable Bitmap Caching on individual UI Elements. You should choose elements in the UI that are relatively static, such as scrolling backgrounds. Items that Rotate, Scale or Clip are also accelerated. But if an element changes (such as through StoryBoard animation), then it is not a good candidate for Bitmap Caching because the element will need to be re-rendered for each change and the cache will be invalidated.

Consider the following example which depicts a UserControl that has Bitmap Caching enabled:

<UserControl x:Class="ScrollMonster.ucMonkey"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    >

    <Canvas x:Name="LayoutRoot" Width="739" Height="700" >

        <Canvas.CacheMode>

            <BitmapCache/>

        </Canvas.CacheMode>

       <!—OTHER XAML CONTENT GOES HERE -->

    </Canvas>

</UserControl>

That’s it! They really made GPU Acceleration and Bitmap Caching easy to implement!

A Sample Application

Here is a little sample application that really shows just how dramatic the performance improvement is with GPU Acceleration and Bitmap Caching:

IMPORTANT: THE FOLLOWING IS A SILVERLIGHT 3 DEMO! SILVERLIGHT 3 IS CURRENTLY IN BETA AND YOU SHOULD ONLY INSTALL SL3 IF YOU ARE A DEVELOPER INTERESTED IN EXPERIMENTING!

[VIEW DEMO WITHOUT CACHING]  and note the Frames per second

[VIEW DEMO WITH CACHING] and note the Frames per second

[DOWNLOAD SOURCE]

Scrolling Game Sample

Parallax Scrolling is an old school method of introducing depth to a 2D scrolling game by providing several layers that move at different speeds (closer layers move by faster than layers farther away). In Silverlight 2, it was pretty difficult to pull this off because of performance constraints. But in Silverlight 3 we can take advantage of GPU Acceleration and do some very nice Parallax Scrolling effects J

Here is a little demo that shows off scrolling with GPU Acceleration in Silverlight 3. It uses the Physics Helper Library – actually a newer version of Physics Helper that I’ll be releasing soon.

IMPORTANT: THE FOLLOWING IS A SILVERLIGHT 3 DEMO! SILVERLIGHT 3 IS CURRENTLY IN BETA AND YOU SHOULD ONLY INSTALL SL3 IF YOU ARE A DEVELOPER INTERESTED IN EXPERIMENTING!

[VIEW DEMO WITH CACHING]

Debugging and Troubleshooting

What happens if you see no performance increase when turning on GPU Acceleration in Silverlight? It would be helpful if there was some way to determine if elements were successfully bitmap cached or not.

It turns out there is just such an option: EnableCacheVisualization. We just add in a param to our Silverlight <object> tag like so:

<param name="EnableCacheVisualization" value="true" />

… and what you will see is that any uncached object is tinted a color. That’s right: uncached objects are tinted, and cached objects appear normally.

One other note: you need to be careful of is the size (height and width) of your UI Elements that you are trying to cache. On some video cards, there is a limit to the size of the surface that can be handled by the hardware.  A good rule of thumb is to keep the height and width of your cached UI Elements under 2048 pixels.