Perspective : basic 3D models for Silverlight 5

Perspective : basic 3D models for Silverlight 5

The Perspective for Silverlight library allows easy composition of 3D scenes for Silverlight using predefined models :

  • Box : cube, or parallelepiped obtained through a Scaling transformation.
  • Spherical : spherical model.
  • Square : flat square, or rectangle obtained through a Scaling transformation.
  • Polygon : flat polygon, whose corners can be rounded.
  • Bar : bar or cylinder with a polygonal section.
  • Conical : pyramid or cone with a polygonal section.
  • Ring : ring with a polygonal section.
  • Dart.

Their use requires a basic knowledge of 3D programming with Perspective .

A Perspective 3D scene can be defined in XAML (present article) or in .NET code (C#, Visual Basic, etc.) .

Cube and parallelepiped

The Box class represents a cubic model. The size of the edges is 1 unit.

        Position="10 2 10"
        LookTarget="0 1 0"
    <p:XyzAxis Length="3"/>
    <p:Box />


A Parallelepiped can be obtained using a Scaling transformation :

    <p:Scaling ScaleX="2" ScaleZ="0.5"/>


Of course, this type of distortion can apply to all Perspective models.

Spherical models

Spherical class defines a sphere of radius 1. The smoothness of the spherical aspect is defined using the ParallelCount property.

The number of meridians is twice the number of parallels.

    <p:ColorTexture R="0.55" G="0.15" B="0.87" A="1"/>
      Shininess="0.8" />


Flat models (2D)

Square class defines... a 2D square !

<p:Square />


By default, the back side is invisible. To make it visible, you must assign a texture to the BackTexture property. Similarly, there is a BackMaterial property (optional, because a default material is assigned to it automatically).

    <p:ColorTexture R="0.55" G="0.15" B="0.87" A="1"/>


Polygon class defines a flat regular polygon. The number of sides is determined by the SideCount property.

<p:Polygon SideCount="6" />


The polygon fits in a circle of radius 1 in the xy-plan. The polygon vertices are calculated by dividing the circumference by the SideCount value. By default, the 1st point is at 1,0,0. The InitialAngle property moves this point according to the angle of the segment that it forms with the origin compared to the x-axis. Example for an angle of 30 degrees :

<p:Polygon SideCount="6" InitialAngle="30"/>

Polygon InitialAngle=30

The RoundingRate rounds the polygon vertices. The value must be comprised between 0.0 and 0.5. It represents a side proportion submitted to the rounding for the 2 sides of a vertex. Thus a value of 0.5 generates a perfect circle. Example with a value of 0.15 :

<p:Polygon SideCount="6" InitialAngle="30" RoundingRate="0.15"/>

Rounded Polygon

Models with a polygonal section

The Bar class defines a bar with a polygonal section. The section has the same characteristics than a Polygon : side count, initial angle and rounding rate. By default, the length of the bar is 1 unit. To increase it, we can use a Scaling transformation.

<p:Bar SideCount="6" InitialAngle="30" RoundingRate="0.15">
      Shininess="0.8" />


To build a cylinder of radius 1.0, we increase the SideCount property :

<p:Bar SideCount="100">


Conical model is a cone with a polygonal base, and operates on the same principle as Bar...

<p:Conical SideCount="100">
      Shininess="0.8" />


Finally the Ring model is a ring with a polygonal section. It has additional properties to specify the radius (Radius) and the number of segments (SegmentCount).

  Radius="10" SegmentCount="100"
  SideCount="6" InitialAngle="30" RoundingRate="0.15">
      Shininess="0.8" />



Perspective library is extensible, and it is easy to define new classes of assembled models such as the Dart using .NET code (C # or Visual Basic). Here is how to use it in XAML :

      Shininess="0.8" />            


Custom composite models

CompositeModel class allows to create a customized composite model using XAML (but, of course, it can also be configured in .NET code). Thus, it is possible to apply a transformation or an animation to a group of models.

<p:CompositeModel >
      <p:Scaling ScaleY="0.2" />
  <p:Spherical ParallelCount="50"/>
  <p:Spherical ParallelCount="50">
      <p:Translation OffsetX="3"/>
  <p:Spherical ParallelCount="50">
      <p:Translation OffsetX="6"/>


About this article

Author : Olivier Dewit.

History :

  • October 27, 2012 : antialiasing, link to dynamic scenes .
  • February 6, 2012 : Dart class replaces Arrow.
  • December 28, 2011 : validation for Silverlight 5 RTM.
  • August 15, 2011 : translation in English.
  • June 29, 2011 : 1st publication for Silverlight 5 beta, in French.