(X) Hide this
    • Login
    • Join
      • Say No Bots Generate New Image
        By clicking 'Register' you accept the terms of use .

10 Laps around Silverlight 5 (Part 3 of 10)

(14 votes)
Michael Crump
>
Michael Crump
Joined Nov 12, 2010
Articles:   18
Comments:   17
More Articles
13 comments   /   posted on Oct 25, 2011
This article is sponsored by Telerik RadControls for Silverlight. For similarly awesome content check out Telerik XAMLflix, your step-by-step guide to Telerik Silverlight and WPF controls. Get access to video tutorials, written tutorials, and tons of code!

Tweet This!This article is Part 3 of the series “10 Laps around Silverlight 5.” If you have missed any other section then please see the Roadmap below.

To contact me directly please visit my blog at http://michaelcrump.net/ or through twitter at http://twitter.com/mbcrump.

To refresh your memory on what Silverlight is:

Microsoft Silverlight is an application framework for writing Rich Internet Applications.

The run-time environment is available as a plug-in for most web browsers and works on a variety of operating systems including Windows, Mac and Linux.

To recap what we learned in the previous section:

  • We created a sample project for Ancestor Relative Source Binding and Implicit Data Templates.
  • We took a look at other binding features that are included with Silverlight 5 and provided a definition and relevant links.

In this article, we are going to take a look at the new XNA 3D API and Improved Graphics Stack. Please review the Roadmap for the series before going any further.

The Roadmap for this Series

I’ve included the Roadmap for the series below as you may want to visit other sections as you learn Silverlight 5. I picked the following features as I thought that you may find them useful in your day-to-day work. If you want a specific topic covered then please leave it in the comments below.

1) Introduction to SL5 – This post which provides a brief history of Silverlight and relevant links.

2) Binding - Ancestor Relative Source Binding and Implicit Data Templates.

3) Graphics [This Post] –XNA 3D API and Improved Graphics Stack.

4) Media - Low-Latency Sound using XNA and Remote Control and Media Command (Keys) Support.

5) Text - Text Tracking and Leading, Linked and Multi-column Text, OpenType Support, Pixel Snapped Text and TextOptions.

6) Operating System Integration Part 1 - P/Invoke, Multiple Windows and Unrestricted File System Access in Full Trust.

7) Operating System Integration Part 2 - Default Filename for SaveFileDialog, 64-bit browser support and Power Awareness.

8) Productivity and Performance - XAML Binding Debugging, Parser Performance Improvements and Multi-core JIT for improved start-up time.

9) Controls - Double and Triple click support, PivotViewer and ComboBox Type-Ahead.

10) Other items - In-Browser HTML, PostScript and Tasks for TPL.

What exactly is XNA?

Before we get started diving into XNA, it’s important to understand what it is first:

Microsoft XNA is a set of tools with a managed runtime environment provided by Microsoft that facilitates video game development and management. XNA attempts to free game developers from writing "repetitive boilerplate code"[1] and to bring different aspects of game production into a single system.[2] 

Source: WikiPedia

As you can see XNA got it’s roots for video game development. So you may be asking, “What is it doing in Silverlight 5?” Developers have realized for a long time that things like 3D Graphics inside of a web browser would be beneficial for many applications including : medical, transportation, government and of course gaming. They requested the feature using Microsoft’s UserVoice and Microsoft added it as part of Silverlight 5. Silverlight 5 implementation of 3D is the most powerful yet running inside of a web browser.

Now that we know a little more about XNA, let’s get started…

Let’s Begin with XNA Visual Studio Templates

Creating 3D application with Silverlight 5 requires some familiarity with concepts such as vertex shaders, sprites, DrawingSurface and others. If you are like me and have a majority of your experience developing Line of Business Applications then the road to XNA will be somewhat challenging. There is good news though as the latest Silverlight 5 Toolkit provides XNA Templates. Since I assume that most readers of this series is LOB developers, we will begin with a template. You may customize the template as needed later.

Let’s get Started…

Install the Silverlight 5 Toolkit and open Visual Studio 2010 and create a new Silverlight project. You should see the following new templates.

1

Select “Silverlight 3D Application” and give it any name that you want.

You will notice when the project loads up, we will have 4 projects inside our solution.

2

Here is a breakdown of the projects:

  • Silverlight3dApp – Our main Silverlight project. (Did you notice that using this template that you did not have to select which version of Silverlight to target?)
  • Silverlight3dAppContent – The content project attached with the main Silverlight Project. It contains Microsoft.Xna.Framework.Content.Pipeline references as well as CustomEffect.slfx. This extension stands for Silverlight Effect.
  • Silverlight3dWeb – Our standard website that host the 3D Application.
  • Silverlight3dWebContent – The content project attached with the web application. It also contains Microsoft.Xna.Framework.Content.Pipeline references.

Let’s run it.

Now that we have a brief understanding of what makes up the application, let’s go ahead and run it by hitting F5. We should see the following cube rotating inside of our browser. 

3

But how exactly does this work?

Part 1: The Silverlight Application

References

The first thing that you may notice is the new references to XNA as shown below:

4

The files highlighted are not found in the standard Silverlight 5 application template. They are only added to a 3D Silverlight 5 application that uses XNA. They are necessary to perform complex calculations that things like 3D requires.

Cube.cs

If you open this class then you will see several regions such as Fields, Properties, Creation and Methods. The one that you want to pay special attention to is the “Creation” region.

Go ahead and double click on Cube.cs and expand it and you will see that it uses ContentManager to retrieve a slfx file from the content project. You can create your own silverlight effect files and add them to the ContentManager this way.

5

We won’t dive deep into these classes as we are just looking for a overview. I encourage you to review the other regions inside the Cube/Scene/VertexPositionColorNormal classes.

Scene.cs

The scene actually creates the ContentManager and registers for a size changed event to update the aspect ratio.

MainPage.xaml

The MainPage.xaml contains a new control called DrawingSurface. You can see that they only added a name and gave it an event named myDrawingSurface_Draw which we will look at in a moment.

 1: <Grid x:Name="LayoutRoot" Background="White">
 2:        <!--3D drawing surface-->
 3:        <DrawingSurface x:Name="myDrawingSurface" Draw="myDrawingSurface_Draw"/>
 4:        <TextBlock Text="My Silverlight 3D Application" VerticalAlignment="Top" 
 5:                   HorizontalAlignment="Center" Margin="0,30" Foreground="White" 
 6:                   FontSize="40"/>
 7: </Grid>

MainPage.xaml.cs

A fairly simple class as it checks to see if the GPU is on, then creates the scene which will render in the users web browser.

 1: public partial class MainPage
 2:     {
 3:         Scene scene;
 4:  
 5:         public MainPage()
 6:         {
 7:             InitializeComponent();
 8:         }
 9:  
 10:         private void myDrawingSurface_Draw(object sender, DrawEventArgs e)
 11:         {
 12:             // Render scene
 13:             scene.Draw();
 14:  
 15:             // Let's go for another turn!
 16:             e.InvalidateSurface();
 17:         }
 18:  
 19:         private void UserControl_Loaded(object sender, RoutedEventArgs e)
 20:         {
 21:             // Check if GPU is on
 22:             if (GraphicsDeviceManager.Current.RenderMode != RenderMode.Hardware)
 23:             {
 24:                 MessageBox.Show("Please activate enableGPUAcceleration=true on your Silverlight plugin page.", "Warning", MessageBoxButton.OK);
 25:             }
 26:  
 27:             // Create the scene
 28:             scene = new Scene(myDrawingSurface);
 29:         }
 30:     }

Part 2: The Web Application

The main thing to notice here is that the following line has been added to both the .html and .aspx pages inside of the Silverlight object data.

 

 1: <param name="enableGPUAcceleration" value="true" />

 

If this tag is missing, then Silverlight will display the following error message.

6

Also as stated earlier, we have a Silverlight3dWebContent project that includes the following references:

7

At this point, we have taken a quick look at XNA in Silverlight 5. But our journey doesn’t have to end here. Microsoft included a ton of sample projects that will get you up to speed quickly.

Sample Source Code for XNA projects.

You can find sample source code for many XNA projects located in your C:\Program Files (x86)\Microsoft SDKs\Silverlight\v5.0\Toolkit\Sep11\Source directory. Simply extract the zip file and navigate to XNA.

Conclusion

At this point, we have seen how you would use the XNA 3D API in your Silverlight 5 Applications. We have also discussed a few other features included with the improved graphic stack engine in Silverlight 5. In the next part of the series, I am going to take a look at the new media features in Silverlight 5 including: Low-Latency Sound using XNA and Remote Control and Media Command (Keys) Support and much more. Again, thanks for reading and please come back for the next part.


Subscribe

Comments

  • -_-

    Re: 10 Laps around Silverlight 5 (Part 3 of 10)


    posted by on Oct 25, 2011 21:35

    Very interesting! Te use is in any context OOB, Web, Windows Phone 7?

    If the end user has not a discrete card. Is the performance best compared with a storyboard?

  • davidjjon

    Re: 10 Laps around Silverlight 5 (Part 3 of 10)


    posted by davidjjon on Oct 26, 2011 15:11

    Awesome!

    Thank you for sharing your hard work.

    David

     

     

  • faisal3096

    Re: 10 Laps around Silverlight 5 (Part 3 of 10)


    posted by faisal3096 on Dec 19, 2011 08:46

    i set

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

    but i am still getting Warning message,

    is my graphics card not supporting 3D?

  • mbcrump

    Re: 10 Laps around Silverlight 5 (Part 3 of 10)


    posted by mbcrump on Dec 19, 2011 16:16
    faisal3096

     What kind of Video Card do you have? You shouldn't be getting this message if you set that properly. Can you download the SL5 Toolkit and select The 3D template and hit F5 and let me know what it says?

  • faisal3096

    Re: 10 Laps around Silverlight 5 (Part 3 of 10)


    posted by faisal3096 on Dec 19, 2011 21:12

    Dear Sir,

     It says "Please activate  enableGPUAcceleration=true on your Silverlight plugin page"

    Thanks for your kind reply, one thing more i have built in graphics card 128mb on my system, do i need to increase my graphic card memory?

     

  • mbcrump

    Re: 10 Laps around Silverlight 5 (Part 3 of 10)


    posted by mbcrump on Dec 20, 2011 21:57
     faisal3096

    What kind of browser are you using? The default template already comes with the GPU parem in the .html/.aspx page. No, you should not need to increase graphic card memory. It should work out the box on just about any GPU. 

  • faisal3096

    Re: 10 Laps around Silverlight 5 (Part 3 of 10)


    posted by faisal3096 on Dec 20, 2011 22:12

    I am using firefox 5.0, 

  • TomaszKowalczyk

    Re: 10 Laps around Silverlight 5 (Part 3 of 10)


    posted by TomaszKowalczyk on Jan 04, 2012 13:24
  • QuentinLangeveldt

    Re: 10 Laps around Silverlight 5 (Part 3 of 10)


    posted by QuentinLangeveldt on Feb 03, 2012 19:54

    When the Message appears to enableGPUAcceleration, click on OK. Then in the browser window right click and click on the Silverlight button. Go to permissions and make sure everything is enabled.

    Hope it helps someone.

  • newbie

    Re: 10 Laps around Silverlight 5 (Part 3 of 10)


    posted by newbie on Nov 26, 2012 03:29
    The last post here is several months old, so I hope it isn't too late to make a comment. I am kind of new to Silverlight, and I don't use Windows very often, so I apologize if my question seems novice. I am also having the "Please activate enableGPUAcceleration=true on your Silverlight plugin page" error mentioned by faisal3096. Does anyone know were to find these .html and .aspx files or the object folder that mbcrump was talking about? I've looked around but I am not seeing them.
  • newbie

    Re: 10 Laps around Silverlight 5 (Part 3 of 10)


    posted by newbie on Nov 26, 2012 04:59
    The last post here is several months old, so I hope it isn't too late to make a comment. I am kind of new to Silverlight, and I don't use Windows very often, so I apologize if my question seems novice. I am also having the "Please activate enableGPUAcceleration=true on your Silverlight plugin page" error mentioned by faisal3096. Does anyone know were to find these .html and .aspx files or the object folder that mbcrump was talking about? I've looked around but I am not seeing them.
  • newbie

    Re: 10 Laps around Silverlight 5 (Part 3 of 10)


    posted by newbie on Nov 26, 2012 14:14
    The last post here is several months old, so I hope it isn't too late to make a comment. I am kind of new to Silverlight, and I don't use Windows very often, so I apologize if my question seems novice. I am also having the "Please activate enableGPUAcceleration=true on your Silverlight plugin page" error mentioned by faisal3096. Does anyone know were to find these .html and .aspx files or the object folder that mbcrump was talking about? I've looked around but I am not seeing them.
  • newbie

    Re: 10 Laps around Silverlight 5 (Part 3 of 10)


    posted by newbie on Nov 26, 2012 19:06

    OK, I found the testpage.html and the testpage.aspx, and they both have the line

    param name="enableGPUAcceleration" value="true" in them, but I am still getting the "Please activate enableGPUAcceleration=true on your Silverlight plugin page" error when I compile the project.

Add Comment

Login to comment:
  *      *       

From this series