Perspective : modèles 3D basiques pour Silverlight 5

Perspective : modèles 3D basiques pour Silverlight 5

La bibliothèque Perspective for Silverlight permet de composer facilement des scènes 3D pour Silverlight au moyen de modèles prédéfinis :

  • Box : cube, ou parallélépipède obtenu au moyen d'un transformation Scaling.
  • Spherical : modèle sphérique.
  • Square : carré (plat), ou rectangle obtenu au moyen d'une transformation Scaling.
  • Polygon : polygone (plat), dont les coins peuvent être arrondis.
  • Bar : barre ou cylindre avec une section polygonale.
  • Conical : pyramide ou cône avec une section polygonale.
  • Ring : anneau avec une section polygonale.
  • Dart : flèche.

Leur mise en oeuvre requiert une connaissance de base du développement 3D avec Perspective .

Une scène 3D Perspective peut être définie en XAML (objet du présent article) ou en code .NET (C#, Visual Basic, etc.) .

Cube et parallélépipède

La classe Box représente un modèle cubique. La taille des arêtes est de 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

Un parallélépipède peut être obtenu au moyen d'une transformation Scaling :

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

Box

Ce type de déformation peut bien entendu s'appliquer à tous les modèles Perspective.

Modèles sphériques

La classe Spherical définit une sphère de rayon 1. La finesse de l'aspect sphérique est définie à l'aide de la propriété ParallelCount.

Le nombre de méridiens est 2 fois supérieur au nombre de parallèles.

<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

Modèles plats (2D)

La classe Square définit un carré... 2D !

<p:Square />

Square

Par défaut, la face arrière est invisible. Pour la rendre visible, il faut assigner une texture à la propriété BackTexture. De même, il existe une propriété BackMaterial (facultative, une matière par défaut lui étant assignée automatiquement).

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

Square

La classe Polygon définit un polygone régulier plat. Le nombre de cotés est déterminé par la propriété SideCount.

<p:Polygon SideCount="6" />

Polygon

Le polygone s'inscrit dans un cercle de rayon 1 dans le plan X,Y. Les sommets du polygone sont calculés en divisant la circonférence par la valeur de SideCount. Par défaut, le 1er point est en 1,0,0. La propriété InitialAngle permet de déplacer ce point selon l'angle du segment qu'il forme avec l'origine par rapport à l'axe des X. Exemple pour un angle de 30 degrés :

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

Polygon InitialAngle=30

La propriété RoundingRate permet d'arrondir les sommets du polygone. La valeur doit être comprise entre 0.0 et 0.5. Elle représente la proportion d'un coté soumise à l'arrondi de chaque coté du sommet. Une valeur de 0.5 génère donc un cercle parfait. Exemple avec une valeur de 0.15 :

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

Polygon arrondi

Modèles à section polygonale

La classe Bar définit une barre de section polygonale, la section ayant les mêmes caractéristiques qu'un Polygon : nombre de cotés, angle initial et arrondi. Par défaut, la longueur de la barre est de 1 unité. Pour l'augmenter, on utilisera une transformation Scaling.

<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

Pour construire un cylindre de rayon 1.0, il suffit d'augmenter la propriété SideCount :

<p:Bar SideCount="100">

Cylindre

Le modèle Conical est un cône de base polygonale, et fonctionne selon le même principe que Bar...

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

Cône

Enfin le modèle Ring forme un anneau de section polygonale. Il dispose de propriétés supplémentaire pour indiquer son rayon (Radius) et le nombre de 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

Flèche

La bibliothèque Perspective est extensible, et il est facile de définir en code .NET (C# ou Visual Basic) de nouvelles classes de modèles assemblés, telles que la flèche Dart. Voici comment l'utiliser en XAML :

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

Dart

Modèles composites personnalisés

La classe CompositeModel permet de créer un modèle composite personnalisé au moyen de XAML (mais peut aussi bien entendu être configurée en code .NET). Il est ainsi possible d'appliquer une transformation ou une animation au regroupement de modèles qui en résulte.

<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

A propos de cet article

Auteur : Olivier Dewit

Historique :

  • 27 octobre 2012 : antialiasing, lien sur les scènes dynamiques .
  • 6 février 2012 : la classe Dart remplace Arrow.
  • 28 décembre 2011 : validation pour Silverlight 5 RTM.
  • 15 août 2011 : retouches mineures dans le texte.
  • 29 juin 2011 : première publication pour Silverlight 5 bêta.