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.

<p:Workshop3DX 
  Name="workshop3DX">
  <p:Scene>
    <p:Scene.Camera>
      <p:PerspectiveCamera 
        Position="10 2 10"
        LookTarget="0 1 0"
        FieldOfView="25"/>
    </p:Scene.Camera>
    <p:XyzAxis Length="3"/>
    <p:Box />
  </p:Scene>
</p:Workshop3DX>

Box

A Parallelepiped can be obtained using a Scaling transformation :

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

Box

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:Spherical
  ParallelCount="80">
  <p:Spherical.Texture>
    <p:ColorTexture R="0.55" G="0.15" B="0.87" A="1"/>
  </p:Spherical.Texture>
  <p:Spherical.Material>
    <p:ModelMaterial 
      Diffuseness="1.0"
      Specularness="1" 
      Shininess="0.8" />
  </p:Spherical.Material>
</p:Spherical>

Spherical

Flat models (2D)

Square class defines... a 2D square !

<p:Square />

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:Square>
  <p:Square.BackTexture>
    <p:ColorTexture R="0.55" G="0.15" B="0.87" A="1"/>
  </p:Square.BackTexture>
</p:Square>

Square

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

<p:Polygon SideCount="6" />

Polygon

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">
  <p:Bar.Material>
    <p:ModelMaterial 
      Diffuseness="1.0"
      Specularness="1" 
      Shininess="0.8" />
  </p:Bar.Material>
</p:Bar>

Bar

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

<p:Bar SideCount="100">

Cylinder

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

<p:Conical SideCount="100">
  <p:Conical.Material>
    <p:ModelMaterial 
      Diffuseness="1.0"
      Specularness="1" 
      Shininess="0.8" />
  </p:Conical.Material>
</p:Conical>

Conical

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

<p:Ring 
  Radius="10" SegmentCount="100"
  SideCount="6" InitialAngle="30" RoundingRate="0.15">
  <p:Ring.Material>
    <p:ModelMaterial 
      Diffuseness="1.0"
      Specularness="1" 
      Shininess="0.8" />
  </p:Ring.Material>
</p:Ring>

Ring

Arrow

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 :

<p:Dart>
  <p:Dart.Material>
    <p:ModelMaterial 
      Diffuseness="1.0"
      Specularness="1" 
      Shininess="0.8" />            
  </p:Dart.Material>
</p:Dart>

Dart

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:CompositeModel.Transform>
    <p:ModelTransformGroup>
      <p:Scaling ScaleY="0.2" />
    </p:ModelTransformGroup>
  </p:CompositeModel.Transform>
  <p:Spherical ParallelCount="50"/>
  <p:Spherical ParallelCount="50">
    <p:Spherical.Transform>
      <p:Translation OffsetX="3"/>
    </p:Spherical.Transform>
  </p:Spherical>
  <p:Spherical ParallelCount="50">
    <p:Spherical.Transform>
      <p:Translation OffsetX="6"/>
    </p:Spherical.Transform>
  </p:Spherical>
</p:CompositeModel>

CompositeModel

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.