수안이의 컴퓨터 연구실

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

Alright, so you already heard a lot about SilverLight launch and that it is a Adobe Flash competitor etc. So I thought I would share some of my experiences 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 the following key features:

• Browser Plugin compatible with Mozilla Firefox, Apple Safari, Microsoft Internet Explorer, Opera
• Supports ActiveX Wrapper Interfaces - so you can embed it in legacy applications

SilverLight Integrates with Browser. © suchit-tiwari.org

There are some more important features of SilverLight:

• Incorporates Windows Presentation Foundation Core
• Contains CLR (Common Language Runtime) and most important base classes from the .NET Framework
• Supports programming in C#, VB, JScript, Ruby, Python
• Embeds Communication Framework including WCF (Windows Communication Framework)
• Comes with Data Framework including LINQ

In a nutshell, SilverLight can be modeled as a tetra-hedron with the following components.

SilverLight Tetra-hedron. © suchit-tiwari.org

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

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.

• Unzip the sources in a folder
• Browse srtSilverLight.htm

3D Graphics Introduction

Now before we jump into explanation of the 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 a 3D world on a 2D computer screen, we need to "take care" of the extra dimension. This "taking care" is called projection. The projections can be done using a Synthetic Camera Model.

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

Synthetic Camera Model. © suchit-tiwari.org

SilverLight provides a transformation matrix to achieve this camera modeling. The camera location is also called Point Of View (POV). Setting different POVs over a 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 a more detailed overview of Synthetic Camera Model, you can refer to this white paper.

Now let's understand how the 3D objects are 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. © 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 the following:

• Download eLearning Player
• Save 3D Modeling Lecture on the local machine
• Double click to Open/Play this local lecture

Code Explanation

Let's start with embedding SilverLight into your web page. Making this embedding cross-browser compatible is the crux of the starting step. This is simplified by reusing SilverLight.js script in the \js sub-folder. This file basically creates an HTML block for various browsers and creates the SilverLight object. Look for:

var AgControl = new ActiveXObject("AgControl.AgControl");

An XAML model is associated with this SilverLight object. This XAML file contains a 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 the XAML model is associated with this scene, using JavaScript in SilverLight, you can extract individual XAML objects and create your JavaScript objects that are based on these XAML objects.

The following code creates 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 the front and adjacent sides of the polygonal patches. Since Teta-hedron is based on an equilateral triangle, the angle of 60 appears in the code.

The mouse-drag-3D-rotate operation is standard 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's it. Refer to the JavaScript and excellent OOP code by Alexey Gavrilov in the \js folder.

• Microsoft SilverLight Downloads
• Mix 2007 SilverLight Overview
• Microsoft WCF
• Microsoft LINQ
• How 3D is Viewed on 2D Computer Screen?
• 3D Objects Representation

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 at srt@Suchit-Tiwari.Org or Suchit.Tiwari@Ge.com Your suggestions and comments are most welcome.