Home Technology Writing Download About Misc Contact

SilverLight Introduction

Contents

3D Graphics in SilverLight

SilverLight Showing 3D Graphics (Rotating and Mouse-interactive) in Browser.

Introduction : What is SilverLight?

Alright, so you already heard a lot about SilverLight launch and that it is a Adobe Flash competitor etc, etc. :) So I tought I would share some of my experience with its early days. This article is a very basic introduction of what SilverLight is and shows one example of using 3D graphics in SilverLight.

So primarily Microsoft SilverLight is a development platform with following key features:

SilverLight Integrates with Browser

SilverLight Integrates with Browser. © suchit-tiwari.org

There are some more important features of SilverLight: In a nutshell, the SilverLight can be modeled as a tetra-hedron with following components.

SilverLight Tetra-hedron

SilverLight Tetra-hedron. © suchit-tiwari.org

For more detailed component view, refer to the following pictorial overview of SilverLight. MSDN site has a high resolution poster available.

SilverLight Developer Reference

SilverLight Developer Reference (Source: Microsoft MSDN Site)

What do you need to run this code?

 You will need to install Microsoft SilverLight developer release from SilverLight Downloads.

3D Graphics Introduction

Now before we jump into explanation of code, let's understand some basics of 3D graphics. The world in which we live is 3D. The computer screen in 2D. So when we have to visualize 3D world on to 2D computer screen, we need to "take care" of the extra dimension. This "taking care" is called as projection. The projections can be done using Synthetic Camera Model.

In brief, the Synthetic Camera model assumes a virtual camera in 3D world. The camera film is the computer screen. And whenever we take a snap using that camera, the picture on the film needs to be mapped onto the computer screen. Following figure shows that.

Synthetic Camera Model

Synthetic Camera Model. © suchit-tiwari.org

SilverLight provides transformation matrix to achieve this camera modeling. The camera location is also called as Point Of View (POV). Setting different POVs over period of time can create beautiful animations. The film directors do that very nicely by swinging cameras over the cars and out of home windows. While you program this 3D world, it is pretty much like playing the director of the movie! For more detailed overview of Synthetic Camera Model, you can refer to this white paper.

Now let's understand how the 3D objects represented in virtual world. There are many different ways of modeling 3D objects - polygonal, parametrics, procedural. These advanced topics are beyond the scope of this article. We will assume the polygonal modeling. Refer to the figure below.

3D Objects Representation

3D Objects Representation. © suchit-tiwari.org

The objects can be seen as made up of the vertices and their connecting edges that form the faces or polygons of the object. When we enter the code, you will understand how this modeling is done in SilverLight. To understand 3D modeling theory, do following:

Code Explanation

Let's start with embedding SilverLight into your web page. Making this embedding cross-browser compatible is a crux of the starting step. This is simplified by reusing SilverLight.js script in the \js sub-folder. This file basically create HTML block for various browsers and create the SilverLight object. Look for var AgControl = new ActiveXObject("AgControl.AgControl");.

An XAML model is associated with this SilverLight object. This XAML file contains shape definition for one ball object. This ball object is replicated for multiple instances.

File: srtSilverLight.htm
<body>
	<div id="wpfe">
		<div id="wpfeHost" class="host"> </div>
		    <script type="text/javascript">

        	Sys.Silverlight.createObjectEx(
			{
				source: 'assets/ball_n.xaml', 
				parentElement: document.getElementById("wpfeHost"),
				id: 'wpfeBlock',
				properties:
				{
					width:'500',
					height:'500',
					background:'white',
					. . .
					. . .
Once the SilverLight object is created, it is time to initialize the virtual world. Since XAML model is associated with this scene, using JavaScript in SilverLight, you can extract indivual XAML objects and create your JavaScript objects that are based upon this XAML objects.

Following code create the 4 balls around the Teta-hedron.

    . . .
	this._ballsO[0] = new WPFEBall(this._wpfeBlock, "wpfe_ball_0");

	for (var i=1; i<this._N; i++)
		this._ballsO[i] = this._ballsO[0].clone("wpfe_ball_" + i);
    . . .

And the Teta-hedron is created using 3D modeling theory (with faces/polygons).

    . . .
	wall = new WPFEFace(this_._wpfeBlock, wpfeRoot,
			[
			[this.minx, 0, 0],
    		[this.maxx, 0, 0],
	    	[(this.minx+this.maxx)/3, this.maxy*Math.tan(60*Math.PI/180)/3,
	    	this.maxx*Math.tan(60*Math.PI/180)]
		    ]
			);
	wall._elem.fill = "#99FF0000";
	model.walls.shapes.push(wall);
    . . .
The mathematics behind the tan(60), sin(6) etc is simple. It just calculates the lengths of front and adjacent sides of the polygonal patches. Since Teta-hedron is based on equilateral triangle, the angle of 60 appears in the code.

The mouse-drag-3D-rotate operation is a standadrd JavaScript combined with POV.

    function onMouseMove(sender, eventArgs)
    {
	  if (!mouseData) return;

	  var pt = eventArgs.getPosition(null);
	  var dy = (pt.y - mouseData.e.y)/200;
	  var dx = (pt.x - mouseData.e.x)/200;
	  _wpfeTest.setPOV(mouseData.start.z + dy, mouseData.start.y + dx);
    }
The changes in the POV cause the 3D view to be changed.

And that is it. Refer to the JavaScripts and excellent OOP code by Alexey Gavrilov in \js folder.

Resources

Credits

 The code from this article is based on a nice example from http://bubblemark.com/3d/silverlight1.1.htm.

Hope you enjoyed knowing a bit of SilverLight in this article. If you have any questions or suggestions, please post them here or drop me a line. srt@Suchit-Tiwari.Org or Suchit.Tiwari@Ge.com Your suggestions and comments are most welcome.