3D Capabilities in Silverlight 3
 
Published: 30 Jun 2009
Abstract
In this article, Sergey examines the 3D capabilities in Silverlight 3 that were not supported in previous versions of Silverlight. It became possible in Silverlight 3 to create 3D projections of content in an application. Sergey provides a detailed explanation of the various aspects with relevant source code examples along with screen shots including the usage of animation.
by Sergey Zwezdin
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 35920/ 69

Introduction

Silverlight platform (WPF/E) emerged as a branch of Windows Presentation Foundation platform. While WPF was essential to create well-established user interfaces of desktop applications, Silverlight was focused on Internet applications. A special feature of Silverlight technology is that it can work under various operational systems and browsers. Also, work of Silverlight application should not take a lot of system resources. So, a specificity of Silverlight technology is the realization of a powerful user interface based on the declarative markup for a wide variety of platforms with full compatibility between them.

All these conditions create certain restrictions for development and construction of the platform. First, the need to support several platforms simultaneously increases the amount of works to develop a platform and time spent on it. Secondly, Silverlight applications should consume a few (not too many) system resources. For these reasons the Silverlight functionality is less than WPF once from the beginning. Both versions 1.0 and 1.1 of Silverlight were basically focused on creation media applications. It was heavy to build any serious business solutions based on these platforms. Silverlight 2.0 already contained a set of control elements and tools for various business scenarios implementation. Nevertheless, until that time there was no possibility to work with 3D- graphics within Silverlight applications. Some tools which allow building user interfaces in a 3D mode have appeared in Silverlight 3.

In this article we will consider 3D-possibilities of Silverlight 3 for application programming. Approaches for building static 3D-projections and animations with 3D will be considered. Prototypes of user interfaces for business applications with use of 3D transformations in Silverlight will be also considered.

Work with 3D-projections

As it has already been said, Silverlight platform has essential limitations on execution environment. Well, there are serious restrictions on work with 3D in Silverlight. Unlike WPF, in Siliverlight there is work with 3D-projections of 2D-objects organized. Actually, in Silverlight 3 there are no full 3D objects and scenes, and there are only 3D projections of 2D objects. It means that it is impossible to load 3D objects from (for example) 3D Max Studio in Silverlight applications. But this functionality is usually enough for most business applications.

As well as in any other 3D system, in Silverlight 3 there are three axes where you can rotate the two-dimensional objects. You can set the object centre that will be the start point of rotation and bias of the object. There are two types of object offset - local and global. Local specifies the positioning of an object in a container. Global offsets or sets positioning of objects on all windows.

The centre of rotation of an object is set with help of 3D-projection parameters. It is important to indicate that the centre of an abject is set in relative coordinates on axes X and Y (by default 0.5), and it is absolute on axis Z (by default 0).

It is possible to set transformations on several parameters for one object. Thus, it is possible to turn an object on coordinates X and Y and to set any global offset. Also, it is possible to transform an object at once on all three axes.

Figure 1: Direction of axes in Silverlight 3

Projection property is used to set 3D projections for Silverlight control elements. In Silverlight 3 all control elements have this property. If there is need to set a 3D projection for an object, you should initialize this property with PlaneProjection object. In object PlaneProjection 3D, there are transformations on all axes and also local and global biases are set.

Listing 1 - Button control with 3D-projection

<Button Content="Click me">
  <Button.Projection>
    <PlaneProjection RotationX="45"
             RotationY="15"
             RotationZ="90"/>
  </Button.Projection>
</Button>

Similarly to this, you can to set transformations to all control elements in Silverlight 3. And all control elements are still functional, i.e. we can enter a text, click them, etc. The following example shows the panel with several TextBox control elements. In this case, 3D transformations are applied to the root panel, instead of child control elements. But, if it is necessary, it is possible to apply transformations to control elements too.

Listing 2 - 3D-projection for StackPanel control

<StackPanel Margin="15">
  <StackPanel.Projection>
    <PlaneProjection RotationY="-50"/>
  </StackPanel.Projection>
  
  <TextBlock Text="First name:"/>
  <TextBox />
 
  <TextBlock Text="Last name:"/>
  <TextBox />
  <TextBlock Text="E-mail:"/>
  <TextBox />
</StackPanel>

In this case, we get the user interface as it is shown below.

Figure 2: 3D-projection for StackPanel control

In this example it is well visible that the controls are rotated on axis Y on 50 degrees.

PlaneProjection object can be used for appendix animation. Thus, it is possible to change rotation coordinates on axes or to change the rotation centre.

An Animation

As all properties of PlaneProjection object are DependencyProperty, it is possible to use them for the creation of animation. It is possible to animate any properties of this object (rotation, the object centre, and positioning).

Let us consider a small example. In this application there is a panel with controls and animation, which is located in resources.

Listing 3 - An animation of 3D-projection for StackPanel control

<Grid.Resources>
  <Storyboard x:Name="Rotation">
    <DoubleAnimation 
           Storyboard.TargetName="Projection" 
           Storyboard.TargetProperty="RotationX"
           From="0"
           To="360"
           RepeatBehavior="Forever"
           AutoReverse="True"
           Duration="0:00:02.5"/>
  </Storyboard>
</Grid.Resources>
 
<StackPanel Margin="15">
  <StackPanel.Projection>
    <PlaneProjection x:Name="Projection" RotationY="-50"/>
  </StackPanel.Projection>
  
  <TextBlock Text="First name:"/>
  <TextBox />
 
  <TextBlock Text="Last name:"/>
  <TextBox />
 
  <TextBlock Text="E-mail:"/>
  <TextBox />
 
  <Button Content="Click!" Click="Button_Click"/>
</StackPanel>

Besides, it is necessary to define the moment of the beginning of this animation. In this case, animation will begin when the button is pressed.

Listing 4 - Beginning of animation moment

private void Button_Click(object sender, RoutedEventArgs e)
{
  Rotation.Begin();
}

In an example, animation on an axis X on 360 degrees is set. After the start of this animation, it will repeat infinitely because RepeatBehavior property is declared. Also the rotation will work in both ways because AutoReverse property is declared.

Figure 3: Sample application

Similarly, it is possible to define animations for other properties of PlaneProjection object.

Examples of construction of the user interfaces

Now, when ways of creation of 3D projections in Silverlight have been considered, we will consider examples of construction of the user interfaces with use of the given possibilities.

One of interesting examples for the user applications is collapsing of inactive panels. For example, in the application there can be some textboxes. One textbox is filled necessarily, and others - not necessarily. In this case, it is possible to make two panels which settle down one over another. On the panel which is above, it is possible to place fields which are required for filling. On this panel it is possible to place the button for opening of the second panel. On another panel it is possible to place fields unessential for filling. By pressing the button rotation of the main panel on axis Y, it will be made so that it has decreased in size. Besides, the transparency of this panel will decrease to value 0.3. Thus, we will receive the following code for definition of two panels.

Listing 5 - Defining of two panels

<StackPanel Margin="80,15,35,15">
      <!-- Additional panel -->
</StackPanel>
 
<StackPanel Margin="15" Name="Panel1" Background="White">
  <StackPanel.Projection>
    <PlaneProjection x:Name="Projection"/>
  </StackPanel.Projection>
 
      <!-- Main panel -->
</StackPanel>

We will receive a code which contains animations for the main panel.

Listing 6 - Storyboard for main panel a showing and a hiding

<Storyboard x:Name="HidePanelAnimation">
  <DoubleAnimation 
         Storyboard.TargetName="Projection" 
         Storyboard.TargetProperty="RotationY"
         To="-80"
         Duration="0:00:00.3"/>
  <DoubleAnimation 
         Storyboard.TargetName="Panel1" 
         Storyboard.TargetProperty="Opacity"
         To="0.3"
         Duration="0:00:00.3"/>
</Storyboard>
<Storyboard x:Name="ShowPanelAnimation">
  <DoubleAnimation 
         Storyboard.TargetName="Projection" 
         Storyboard.TargetProperty="RotationY"
         To="0"
         Duration="0:00:00.3"/>
  <DoubleAnimation 
         Storyboard.TargetName="Panel1" 
         Storyboard.TargetProperty="Opacity"
         To="1"
         Duration="0:00:00.3"/>
</Storyboard>

Starting this or that animation, it is possible to hide or show the main panel. In this case the application will look as follows.

Figure 4: Sample application - storyboard of hiding of main panel

An application in which there is a panel with two parties (the main and the back) can be another example. On the main panel settle down fields which are required for filling. On the back there are other fields. By pressing the button the form is rotated by 180 degrees and the back is displayed.

Figure 5: Model of animation

To implement similar behavior, we will create a main Grid object in which we will place two additional Grid objects. Each such additional Grid object will contain one of the parties for display. Thus, the panel, which settles down on the back, is necessary to rotate 180 degrees. It is necessary that at a turn of the main panel 180 degrees, the underside was displayed without distortions. The additional panel (which is displayed on a back) is, by default, displayed by the transparent.

Listing 7 - Control with back panel

<Grid>
  <Grid.Projection>
    <PlaneProjection x:Name="Projection"/>
  </Grid.Projection>
 
 
  <Grid Name="MainPanel" Background="Silver">
    <Grid.Projection>
      <PlaneProjection RotationY="0"/>
    </Grid.Projection>
    <StackPanel Margin="15">
      <!-- ... -->
    </StackPanel>
  </Grid>
 
  <Grid Name="BackPanel" Opacity="0" Background="LightBlue">
    <Grid.Projection>
      <PlaneProjection RotationY="180"/>
    </Grid.Projection>
    <StackPanel Margin="15">
      <!-- ... -->
    </StackPanel>
  </Grid>
</Grid>

After that it is necessary to implement animation which will rotate the panel on axis Y. For this purpose it is necessary to create the objects implementing animation. Besides, at the display of the back panel it is necessary to set a value of a transparency equal to 100%. For these purposes it is possible to use DoubleAnimationUsingKeyFrames object. Thus, we will give the following definitions of animation.

Listing 8 - Animations for panels

<Storyboard x:Name="ShowBackPanel">
  <DoubleAnimation Storyboard.TargetName="Projection" 
           Storyboard.TargetProperty="RotationY"
           To="180"
           Duration="0:00:00.4"/>
  <DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackPanel"
      Storyboard.TargetProperty="Opacity">
    <DiscreteDoubleKeyFrame KeyTime="0:00:00.2" Value="1"/>
  </DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="ShowMainPanel">
  <DoubleAnimation 
           Storyboard.TargetName="Projection" 
           Storyboard.TargetProperty="RotationY"
           To="0"
           Duration="0:00:00.4"/>
  <DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackPanel"
       Storyboard.TargetProperty="Opacity">
    <DiscreteDoubleKeyFrame KeyTime="0:00:00.2" Value="0"/>
  </DoubleAnimationUsingKeyFrames>
</Storyboard>

Now it is necessary to press this button to start these animations.

Listing 9 - Begins of animations

private void MainPanelButton_Click(object sender, RoutedEventArgs e)
{
      ShowMainPanel.Begin();
}
 
private void BackPanelButton_Click(object sender, RoutedEventArgs e)
{
      ShowBackPanel.Begin();
}

After these operations the application looks as follows.

Figure 6

Downloads

Conclusion

The Silverlight 3 possibilities to work with 3D objects have been considered and explain in this article. As it was visible, Silverlight 3 does not support work with high-grade 3D-objects, but allows the building of 3D projections of 2D-objects.

It is enough that there are these possibilities for construction of beautiful animations in the majority business applications. If it is not enough, it is necessary to use a more powerful platform - Windows Presentation Foundation.

All examples of code are also accessible to download.



User Comments

Title: Silverlight 3D   
Name: I. Ivanov
Date: 2010-07-21 8:15:25 PM
Comment:
Hello. You can try our new Silverlight component for 3D visualization. We support many features common to the modern 3D engines and the rendering is fast. You can load your 3DS files with a single step. If you are interested go to http://postvision.net/SilverMotion/Demos.aspx to see some demos ;)
Title: Software Engineer   
Name: Sai
Date: 2009-12-20 11:41:53 PM
Comment:
It really helped me a lot, Thanks for your effort.
Title: Iulian   
Name: Iulian
Date: 2009-10-21 2:33:26 PM
Comment:
Very good tutorial. Anyway I have a question. How can I combine the next scenarious: When the button is clicked then the grid will zoom in 10% and after is RotationY=180 after the rotation is complet the zoom is coming back from 90% to 100%. Do you have an example for this? Thank you
Title: Jeroen   
Name: Jeroen
Date: 2009-07-14 8:57:51 AM
Comment:
Thanks, was looking for this as a beginning in Silverlight since I found out that 3D Direct X programming (or even XNA) will consume to much time and will not produce a product which makes me happy since

I hope in the next Silverlight they also allow 3DMax/DirectX x objects and animation to it. That would make it very interesting for small game dev. For example a web remake of Doom.

Thanks for the article. It is good, solid an easy to read.
Title: Idea   
Name: Daniel
Date: 2009-07-13 4:31:24 AM
Comment:
Quick way to show 3d features in silverlight3. Quick, helpful and easy :)
nice!
Title: Good work!   
Name: Manish Kumar
Date: 2009-07-03 1:47:20 AM
Comment:
Great article and useful for me
Title: Nice work   
Name: Mohammad Reza Pazooki
Date: 2009-06-30 10:59:42 PM
Comment:
I think we will see a great enhancement in web graphic.

good job Sergey Zwezdin






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2018 ASPAlliance.com  |  Page Processed at 2018-08-15 8:57:04 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search