Silverlight Underground

Démo en Silverlight 3 : Affichage d'un cube 3D en HD

Pour voir d'un peu plus près ce que Silverlight 3 a dans le ventre, j'ai fait une petite démo assez sympathique.

Cliquez ici pour voir la démo.

Cette démo met en scène les fonctionnalités suivantes :

- Affichage d'une vidéo HD en 852x480 au format H.264 et AAC. La source utilisée est carrément un trailer disponible dans la gallerie HD de QuickTime 7 (.mov) qui est lu en streaming directement. Si si, c'est possible !

- Utilisation de l'accélération matérielle et du nouveau compteur de FPS pour voir les performances obtenues.

- Utilisation des effets de perspective 3D de Silverlight. C'est pas encore de la vraie 3D mais on s'en rapproche. Ici j'ai simulé l'affichage d'un cube (enfin un cube 16:9ème).

Voici un extrait du code source XAML :

<Canvas x:Name="Face1" Width="0" Height="0" Background="Black">
   <MediaElement x:Name="Video" Width="0" Height="0" Source="http://images.apple.com/movies/us/hd_gallery/gl1800/480p/batman_begins_m480p.mov" />
   <Canvas.Projection>
      <PlaneProjection RotationY="0" />
   </Canvas.Projection>
</Canvas>
<Canvas x:Name="Face2" Width="0" Height="0" Background="Black">
   <Image x:Name="Silverlight" Width="0" Height="0" Source="http://www.innoveware.com/ql3/silverlight.png" />
   <Canvas.Projection>
      <PlaneProjection RotationY="0" />
   </Canvas.Projection>
</Canvas>

J'utilise ici deux objets Canvas sur fond noir, l'un avec la vidéo H.264, l'autre avec une image de logo Silverlight. Il s'agit des deux faces principales du cube. Deux faces suffisent pour afficher le cube, inutile de s'encombrer de quatre faces (d'autant plus que la vidéo consomme beaucoup de ressources).

Voici maintenant un extrait du code source C# :

// Simulate cube faces with only two faces.
double rangle1 = (angle < 90 || angle > 270) ? 90 + angle : 270 + angle;
double rangle2 = (angle < 180) ? 360 + angle : 180 + angle;

// Compute first face position.
double x = distance * Math.Cos(DegreeToRadian(rangle1));
double z = distance * Math.Sin(DegreeToRadian(rangle1));

// Project face.
Face1.Projection.SetValue(PlaneProjection.RotationYProperty, rangle1 - 90);
Face1.Projection.SetValue(PlaneProjection.GlobalOffsetXProperty, x);
Face1.Projection.SetValue(PlaneProjection.GlobalOffsetZProperty, z - distance);

// Compute second face position.
x = distance * Math.Cos(DegreeToRadian(rangle2));
z = distance * Math.Sin(DegreeToRadian(rangle2));

// Project face.
Face2.Projection.SetValue(PlaneProjection.RotationYProperty, rangle2 - 90);
Face2.Projection.SetValue(PlaneProjection.GlobalOffsetXProperty, x);
Face2.Projection.SetValue(PlaneProjection.GlobalOffsetZProperty, z - distance);

Il s'agit de la boucle d'affichage principale. On va incrémenter l'angle de rotation Y du cube d'un degré en un degré. On détermine tout d'abord quelles sont les angles de projection des faces à afficher en alternance (je rappelle qu'on n'utilise que deux faces et non quatre).

Ensuite on utilise les propriétés GlobalOffsetX et GlobalOffsetZ de la projection perspective de Silverlight 3. C'est ce qui va nous permettre de déplacer le cube autour de son centre. Par défaut les objets 3D en Silverlight tournent sur eux-mêmes.

Cela correspond en fait à faire tourner nos coordonnées X et Z sur un cercle de rayon égal à la moitié de notre image. On positionne aussi le centre du cube sur l'axe des Z en arrière avec ce même rayon.

N.B: Pour l'instant, je n'ai pas réussi à faire mieux qu'un cube qui tourne sur un seul axe comme ici. Une double rotation impliquerait ici des calculs encore plus complexes. Mon prochain défi : une boule en 3D :)