Chapter 4. 3D Animations in Silverlight

Silverlight provides perspective transform for creating simple 3D effects. Silverlight also allows using part of the XNA framework functionality with support for 3D models, effects, and creating vertex and pixel shaders, giving the developers a lot of power. Both these methods are described in this chapter.

Perspective transform

Perspective transform (also sometimes called projection transform) enables the developers to position or move Silverlight (2D) objects within 3D space. It is invaluable for creating simple but effective 3D animations, for example, for Silverlight banners.

Let's explain perspective transform while describing the corresponding sample located under the SAMPLES\CODE\ProjectionSample folder. This sample allows you to investigate all of the parameters of the perspective transform.

Perspective transform in Silverlight is achieved by setting the Projection property of a Silverlight object to contain the PlaneProjection object, whose parameters define the parameters of perspective transform. These parameters include three rotation angles corresponding to rotation around each axis X, Y, and Z, 3D coordinates of the center of rotation, global offset, specifying 3D translation in the viewer's coordinates and local offset, specifying the 3D translation in the coordinates that rotate...

Silverlight 5 three-dimensional functionality

Silverlight 5 introduced real 3D capabilities via access to a simplified version of XNA. Using this functionality one can build real complex 3D models of triangles, and create vertex and pixel shaders utilizing the full power of GPU to display them.

There are some shortcomings, however, to the new functionality provided. They are as follows:

• It is not multiplatform – it will only run on Windows (though it is multi-browser).

• If run within a browser, the client will be required to allow the blocked display drivers for that website and this might be a nuisance if you want your 3D animations to be widely available.

• The 3D code is essentially not part of the Silverlight framework. It is standalone functionality and the developer needs to spend some extra time and effort in order to make it interact properly with the rest of the Silverlight application.

3D models

3D models usually consist of triangles of different sizes. If the model looks smooth, this means...

Creating the moving triangle application

Here we show how to build triangle 3D animation. The code for this sample is located under the SAMPLES\CODE\MovingTriangle folder.

Try running this sample! During the first run, most likely you'll get the following warning message: Please enable your graphics drivers and reload the application. In order to be able to run the 3D application, you need to do the following:

1. Right mouse click onto this warning message (or anywhere around it).

2. Click on Silverlight.

3. Choose the Permissions tab, find and select the URL corresponding to the application (usually if you view it on the same machine, you'll be able to tell the correct URL by the port number).

   

4. Click on the Allow button at the bottom of the dialog box.

5. Click on the OK button.

6. Now restart the application if you are running it in the debugger, or restart the browser to refresh the application if you are running the application on a website.

When you run the application successfully, you will see a tricolored...

The moving prism application

We can spice up the model a little bit by creating a rotating prism, instead of the rotating triangle. The MovingPrismApplication project is located under the SAMPLES\CODE\ MovingPrismApplication folder.

When running MovingPrismApplication, do not forget to set the driver permissions for that application, just as you did for MovingTriangle.

The following is a screenshot of the moving prism:

The only differences from the MovingTriangle project are the following:

• The fourth vertex is being created shifted along the Z-axis from the rest of the vertices:

  // the 4th vertext to create the prism
  Vector3 zVertex = new Vector3(0, 0, 1); 

• The vertices array contains 12 vertices instead of 3; each three consecutive vertices corresponding to a side of the prism:

  // create an array of vertices
  // corresponding to the triangles
  // corresponding to the sides of the prism.
  // the same vertices will be repeated 
  // for different sides if needed
  VertexPositionColor[] vertices =
      new...

The 3D related topics that were left out

There is much more that can be said about 3D processing, but unfortunately due to time and space constraints, I'll have to leave it out for now. The following is a list of some other 3D topics that should be learned by those who want to have a good mastery of the subject:

• By using shaders that are more complex, you can create numerous 3D effects, including lighting, moving objects along some trajectories, and many others. I would recommend studying the HLSL and 3D math in order to be able to do that.

• Most developers prefer to create effects absorbing the complexity of interacting with specific vertex and pixel shaders. The purpose of the effect object is to pass parameters to the shaders and invoke the shaders when needed. Creating custom effects deserves a topic of its own.

• There is a bunch of built-in effects available from Silverlight XNA libraries. Studying these effects can also be of great help.

• Usually the complex 3D models are not created in code...

Summary

In this chapter, we have discussed different ways of creating 3D animations in Silverlight – using projection transform and using the Silverlight 3D XNA functionality.

The next chapter will provide examples of creating animated banners using Silverlight.