Silverlight 3’s New GPU Acceleration

Another new and notable feature of Silverlight 3 is support for hardware acceleration. In Silverlight 1 and 2, all rendering was done in software, which meant that the performance of complex animations and video playback depended heavily on the capabilities of the host PC. Silverlight 3, however, can take advantage of hardware GPUs. You can see this for yourself in Beta 1 and even measure the impact that it has on performance and CPU usage.

To demonstrate, I created a Silverlight 3 project named GPUDemo and added a bunch of XAML depicting a penguin to it. I set the penguin’s opacity to 0.5 and also defined some animations that rotate and scale the penguin continuously–all actions designed to stress a software rendering pipeline.

Here’s what the XAML looked like:

<UserControl x_Class=”GPUDemo.MainPage”

    

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

    <Grid x_Name=”LayoutRoot”>

        <Grid.Background>

            <LinearGradientBrush StartPoint=”0.5,0.0″ EndPoint=”0.5,1.0″>

                <GradientStop Color=”#e08080″ Offset=”0″ />

                <GradientStop Color=”#8080e0″ Offset=”1″ />

            </LinearGradientBrush>

        </Grid.Background>

        <Canvas x_Name=”Penguin” Width=”340″ Height=”322″ Opacity=”0.5″>

            <Canvas.Triggers>

                <EventTrigger RoutedEvent=”Canvas.Loaded”>

                    <BeginStoryboard>

                        <Storyboard>

                            <DoubleAnimation

                                Storyboard.TargetName=”Rotate”

                                Storyboard.TargetProperty=”Angle”

                                From=”0″ To=”360″ Duration=”0:0:0.5″

                                RepeatBehavior=”Forever” />

                            <DoubleAnimation

                                Storyboard.TargetName=”Scale”

                                Storyboard.TargetProperty=”ScaleX”

                                From=”1.0″ To=”1.5″ Duration=”0:0:0.5″

                                AutoReverse=”True” RepeatBehavior=”Forever” />

                            <DoubleAnimation

                                Storyboard.TargetName=”Scale”

                                Storyboard.TargetProperty=”ScaleY”

                                From=”1.0″ To=”1.5″ Duration=”0:0:0.5″

                                AutoReverse=”True” RepeatBehavior=”Forever” />

                        </Storyboard>

                    </BeginStoryboard>

                </EventTrigger>

            </Canvas.Triggers>

            <Canvas.RenderTransform>

                <TransformGroup>

                    <RotateTransform x_Name=”Rotate”

                        CenterX=”167″ CenterY=”202″ />

                    <ScaleTransform x_Name=”Scale”

                        CenterX=”167″ CenterY=”202″ />

                </TransformGroup>

            </Canvas.RenderTransform>

            <!– Penguin XAML goes here –>

        </Canvas>

    </Grid>

</UserControl>

 

When I ran the program, I used Task Manager to gauge CPU usage. The reading varied from 13% to 35%, with the average being in the mid to high 20s. When a single application is using a third of the CPU, that application is obviously stressing the host PC.

Then I repeated the test with GPU support enabled. First, I opened GPUDemoTestPage.html and added one line to the <OBJECT> element that instantiates the Silverlight control:

 

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

 

Second, I added the following XAML to the penguin canvas to enable the entire penguin to be cached as a bitmap and rendered by the GPU:

<Canvas.CacheMode>

    <BitmapCache />

</Canvas.CacheMode>

When I ran the application again, CPU usage ranged from 2% to 8%, clearly demonstrating that much of the rendering load had been offloaded to the GPU.

You can achieve similar results when you play video in a MediaElement, especially if the video is displayed at a non-native resolution, or if the video is an H.264/MP4 video–another new feature of Silverlight 3.

Incidentally, Silverlight 3 offers a cache visualization feature that’s enabled by including the following <PARAM> element in the control’s <OBJECT> tag:

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

When cache visualization is enabled, objects that are cached (that is, handled by the GPU) are displayed in their normal colors, while objects that aren’t cached are tinted.

SIDE NOTE: Things have changed a lot in India since I was last here in November. Cars have to queue for inspection before they pull up to a hotel, and before you’re allowed into a hotel, you go through airport-like security. Security is especially tight at hotels in Mumbai, but you see it in here in Hyderabad, too. I don’t mind a little inconvenience to know that I’m safe in my hotel room and that there likely won’t be a repeat of the attacks of 26/11.