Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The Silverlight world has been begging for 3D support since the first Silverlight version appeared. Now that Silverlight 5 is available, we can finally create our 3D masterpieces. Microsoft has several 3D frameworks which are currently usable for active development. DirectX is a huge framework, packed with graphic tools for the Windows operating system. It is a C and C++ API for very low- level graphics programming, and it is a powerhouse tool for creating graphics applications and games. Direct3D is the 3D portion of the DirectX family.
XNA is a relative newcomer to the 3D scene. It is a managed-code version of DirectX. The WPF team decided to create their own wrapper for Direct3D. When it was the Silverlight's team turn, they decided to integrate XNA instead of creating their own. Silverlight uses a subset of the XNA game studio libraries. If you are an experienced XNA developer, you should have no problem adapting to the Silverlight version. If you're just getting started with 3D development, you'll have some brain-twisting discoveries in your future. There are a few steps to getting your Silverlight project ready for XNA.
Because XNA injects code into the GPU, there is a security concern. Silverlight 5 addresses the security issue by requiring either elevated trust or end user confirmation. Another requirement is that your Silverlight app must have the EnableGPUAcceleration set to True. The XNA libraries are split across the Silverlight runtime, the Silverlight SDK, and the Silverlight toolkit. The teams put the assemblies this way to minimize the runtime footprint of applications which do not use 3D. The Silverlight toolkit is where you'll find the Visual Studio project templates.
Speaking of templates, let's go create a Silverlight 3D application. To do that, I'll open up Visual Studio. I already have the Silverlight toolkit installed on my computer, so I can go to File > New > Project and then select Silverlight and then Silverlight 3D Application. I'll go ahead and accept the default names and click OK. The template included in Silverlight toolkit contains four projects. They're listed over here in the Solution Explorer. This first project is my Silverlight 3D Application.
The second project is a Content project that contains things like sound effects and textures for my application. And of course these other two are web-related applications. Let's look at my Silverlight3dApp. I go to Properties. For my demonstration, I'm going to enable running the application out of the browser. Then I'm going to go to Out-of-Browser Settings and choose Use GPU Acceleration. I'll also check this box, Require elevated trust when running outside the browser. As to the rest of my application, you can see that it is a regular Silverlight app by looking at MainPage.xaml.
If I open up MainPage.xaml, you'll see that I have the normal Silverlight designer, the normal XAML editor, and that it derives from the UserControl base class. Where it gets different is that I have this element called the DrawingSurface element, which is where the XNA will draw the 3D objects. Let's talk about that. Silverlight is the host for the XNA rendering. The DrawingSurface element is the target for that rendering. You can place that DrawingSurface element anywhere in your XAML tree.
Silverlight then treats it like any other element in the visual tree. It responds to layout requests, it can be sized, and you can layer it over other parts of your user interface. A realistic 3D application consists of a number of interwoven parts. Here is a partial list of what you must master to be a competent 3D programmer. I have details on later slides. The scene becomes the stage on which your output is rendered. Here you can define a background color, zero or more models, the scene is where you find the camera, and there's also a reference in the scene to the ContentManager class.
The ContentManager class retrieves resources that are stored inside my content project. The scene class has a Draw event to render the scene. To ask for a redraw, set e.InvalidateSurface to True. In my project, I have a Scene.cs file. This is where you'll find the Scene class. If you look inside the Creation section, you'll see a constructor that gets a reference to the drawingSurface, references some SizeChanged events, gets a reference to that ContentManager I mentioned a few minutes ago, and here's the important part for today: it creates an instance of my Cube class.
The Cube is where you'll find my model information. Then we'll go look at MainPage.xaml. Remember this drawing surface? How do I get the scene into the drawing surface? That's done in the code behind. In the UserControl_Loaded event, we're doing some graphics checking to see if we're in the correct hardware mode. And then if we are, it's instantiating an instance of our scene. Then every time there's a request for a redraw, this code runs. Inside here we call the Draw method on our scene, and then we ask for an InvalidateSurface, which gives us another turn.
You have to have a camera to see the scene. The Camera class provides that view. The scene can also contain more than one camera. Models are the cornerstone of 3D applications. You can set up a scene, add lights and cameras, but if you don't have a model, there is nothing to look at. Models are complex entities built out of these pieces. There's the idea of vertices, which represents three values stored in a unit. These usually represent the X, Y, and Z coordinates of a point in space. When you have the 3D points defined, you can create a triangle out of those vertices.
Then the model is constructed from many triangles. As you can see on this slide, there are other details. There's something called a model winding. There are these things called primitives. For instance, I could use the line primitive to draw a line in a 3D scene. It's time to look at our model. Our model lives over here in this Cube class. Let's look at this Creation section. Here is my constructor. If you look through the code in this section, you'll see a lot of code that's creating the vertices, the triangles, setting up color normals, and many other settings.
Imagine in real-world complex geometry, you would have thousands of lines of code. Finally, I want to look at effects. You apply effects to a model to make it look more realistic. There are two kinds of effects: vertex shader effects and pixel shader effects. I think we should look at our model running in the application. I'll switch back to Visual Studio, press F5 to run my application. That is my 3D model, and as you can see, it's being animated on the scene.
If you don't see this, you might need to change some things. To do that, I'll go to the Silverlight application and then click on Permissions. You look for your application in this list. It will probably say Deny here in the Permissions column. Then you click on the Allow button and then OK. For my last demonstration, we'll look at a sample from the Silverlight toolkit. This is a sample application from the Silverlight toolkit called Skinning. It uses a model file instead of a model class to define the 3D model. That's listed here, dude.fbx.
Press F5 to run the application. There is a more complex animated model. This also demonstrates something called skinning, which is taking textures from the ContentManager and applying them to the model. Learning 3D is a big challenge, but the payoff is invaluable when you have an application that needs 3D support.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101804 Viewers
61 Video lessons · 88555 Viewers
71 Video lessons · 72373 Viewers
56 Video lessons · 104074 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.