Silverlight 4 introduces GPU Acceleration to Perspective 3D Transforms (PlaneProjection), which allows much better performance with simple 3D effects. Perspective 3D Transforms were originally introduced in Silverlight 3, and allow 2D visual elements to be rotated in 3D space. Consider the example below…

The problem in Silverlight 3 was that PlaneProjection’s were rendered using software instead of the video card (GPU), so you could quickly peg the CPU if you overused this transform effect.

So how much faster is a PlaneProjection when using hardware acceleration? Well it all depends on your video card, but chances are it’s crazy fast J Here is a little sample that will let you compare software vs. GPU rendering in Silverlight 4:

VIEW THE SAMPLE WITHOUT GPU ACCELERATION. Add a bunch of phones and notice how the framerate starts to drop.

VIEW THE SAMPLE WITH GPU ACCELERATION. Add a bunch of phones and notice how the framerate remains consistently high.

DOWNLOAD THE SAMPLE. Requires Visual Studio 2010, Silverlight 4.

HOW TO GPU ACCELERATE A PLANEPROJECTION

We can apply hardware acceleration to a Perspective Transform in the same way as any UI element:

1.       First, enable GPU Acceleration at the plug-in level. Open you Silverlight host html page, and add the following parameters to the plug-in.

enableGpuAcceleration – required for any acceleration to take place
enableCacheVIsualization – if true, then any elements that are not cached will be tinted a color.
enableFrameRateCounter – will show a framerate counter at the top-left of the plug-in window.

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
  <param name="source" value="ClientBin/AccceleratedPersp3DSimple.xap"/>
  <param name="onError" value="onSilverlightError" />
  <param name="background" value="white" />
  <param name="minRuntimeVersion" value="4.0.50303.0" />
  <param name="autoUpgrade" value="true" />
  <param name="enableGpuAcceleration" value="true" />
  <param name="enableCacheVisualization" value="false" />
  <param name="enableFrameRateCounter" value="true" />
  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50303.0" style="text-decoration:none">
                <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
  </a>
</object>

2.       Next, apply a PlaneProjection to a visual element (in this case we’ll apply it to an Image element), and add in a CacheMode=”BitmapCache” attribute.

<Image x:Name="phoneFront" CacheMode="BitmapCache" Source="phoneSkin.png" Stretch="Fill" Width="303" Height="587" >
       <Image.Projection>
        <PlaneProjection x:Name="rotateFrontY" RotationY="0" GlobalOffsetZ="0"/>
       </Image.Projection>
</Image>

3.       That’s it! The PlaneProjection will now be rendered by the GPU.

SOME NOTES

This simple example makes it look easy, but as you get into more complicated examples you may run into issues. Keep in mind the following:

1.       Not all video cards are created equal. You will see entirely different performance and caching thresholds on different GPU’s. And on some low-end Netbooks, you may actually see worse performance when caching is turned on.

2.       The content of the PlaneProjection needs to stay static in order to keep the Cache valid. Think of the cache as a snapshot of the contents of the PlaneProjection which can be manipulated by scaling, clipping and perspective transforms. But if any of the contents are animated, it can invalidate the cache and you will lose most benefits of GPU acceleration.

3.       Be careful when setting properties on Visual elements such as Visibility. The Silverlight property system does not check if a property is “really” changed from its previous value, so if you change values often, you can incur extra rasterizations. If you look at the sample code, you’ll see that a _state flag that tells when to change Visibility to cover this issue. Thanks to David Ferguson at Microsoft for this tip!