Click here to Skip to main content
Click here to Skip to main content

SilverLight Introduction

, 26 May 2007
Rate this:
Please Sign up or sign in to vote.
Tinkering with SilverLight to get a 3D scene rendered in the Browser.

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. 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

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

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

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

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

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:

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.

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

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

.Suchit
Architect GE India Innovation Center
India India
Suchit is an Architect at GE India Innovation Center, Hyderabad.
 
He architected and developed portions of Proficy RX, a Process Analytical Technology (PAT) Solution of GE Fanuc Intelligent Platforms.
 
He also is the Architect of OPC Server for hardware devices of GE Sensing. These devices sense temperature, humidity, combustibles, fluid flow, pressure and various engineering parameters - primarily used in Industrial Automation & Process Control applications.
 
Interests: Computer Graphics, Mathematical Modeling, Scientific Applications Development.
 
He lives in Hyderabad India with his wife and 2 kidbots. Loves reading books if these 2 small buddies allow him to. Smile | :)
 
Homepage : http://www.Suchit-Tiwari.Org

Comments and Discussions

 
GeneralThis Demo application is not working as it should be Pinmemberbibin_kumar20-May-09 2:29 
GeneralRe: This Demo application is not working as it should be PinmemberKelvin Armstrong4-Jun-11 22:11 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.141015.1 | Last Updated 27 May 2007
Article Copyright 2007 by .Suchit
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid