Animer un modèle Perspective 3D

Animer un modèle Perspective 3D

Position et dimension d'un modèle Perspective 3D

Les objets Perspective 3D sont créés par défaut en (0, 0, 0) ou à proximité. Leurs dimensions sont unitaires ou proches de l'unité. Pour modifier l'emplacement ou les dimensions de ces modèles, il faut leur appliquer des transformations 3D WPF.

Mais pourquoi les modèles Wpf3D ne disposent-ils pas de propriétés permettant de gérer leurs dimensions et leur emplacement ? Les 2 raisons à cela sont la modularité et la performance :

  • La modularité, car la conception du modèle est indépendante de l'utilisation qui en est faite (mise à l'échelle, déplacement, rotation).
  • La performance car les transformations 3D sont prises en charge par le processeur graphique (GPU), ce qui libère le processeur central (CPU).

Animer un modèle Perspective 3D basique

Pour animer un modèle Perspective 3D, il suffit d'animer les transformations qui lui sont appliquées.

Je vais décrire ici comment faire tourner sur lui-même un panneau (de type Square3D) tout en le déplaçant.

Panneau animé - Cliquer pour démo en ligne

La rotation est définie au moyen d'un objet RotateTransform3D et le déplacement au moyen d'un TranslateTransform3D. Les 2 transformations sont regroupées dans un objet Transform3DGroup, lui même assigné à la propriété Transform du Square3D. Les transformations qui font l'objet d'animation doivent être désignées par un nom dans l'attribut x:Name. Il est inutile de donner une valeur aux propriétés animées (cela sera fait dans la définition des animations).

<p:Square3D 
    Material="{StaticResource GlossyMaterial}" 
    BackMaterial="{StaticResource GlossyMaterial}">
    <p:Square3D.Transform>
        <Transform3DGroup>
            <RotateTransform3D CenterX="0.5">
                <RotateTransform3D.Rotation>
                    <AxisAngleRotation3D 
                        x:Name="modelRotation" 
                        Axis="0,1,0" />
                </RotateTransform3D.Rotation>
            </RotateTransform3D>
            <TranslateTransform3D 
                x:Name="squareTranslation"/>
        </Transform3DGroup>
    </p:Square3D.Transform>
</p:Square3D>

Les animations sont regroupées dans un Storyboard. Chacune fait référence à une propriété donnée (TargetProperty) d'une transformation donnée (TargetName). Le Storyboard est déclenché sur l'événement Loaded de la fenêtre au moyen d'un Trigger du Viewport3D ou du Workshop3D.

Workshop3D est une classe Perspective, qui regroupe un Viewport3D, son éclairage et sa caméra. La caméra peut être déplacée au clavier ou au moyen d'un peanneau de contrôle.

<p:Workshop3D.Triggers>
    <EventTrigger RoutedEvent="p:Workshop3D.Loaded">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation From="0" To="10" Duration="0:0:4" 
                       Storyboard.TargetName="squareTranslation"
                       Storyboard.TargetProperty="OffsetX" RepeatBehavior="Forever"/>
                    <DoubleAnimation From="0" To="5" Duration="0:0:4" 
                       Storyboard.TargetName="squareTranslation"
                       Storyboard.TargetProperty="OffsetY" RepeatBehavior="Forever"/>
                    <DoubleAnimation From="0" To="15" Duration="0:0:4" 
                       Storyboard.TargetName="squareTranslation"
                       Storyboard.TargetProperty="OffsetZ" RepeatBehavior="Forever"/>
                    <DoubleAnimation From="0" To="360" Duration="0:0:2" 
                       Storyboard.TargetName="modelRotation"
                       Storyboard.TargetProperty="Angle" RepeatBehavior="Forever"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
</p:Workshop3D.Triggers>

Le code source est disponible dans le fichier Square3DAnimation.xaml du projet PerspectiveDemo.UI, dossier Pages/pWpf3D.

Animer un modèle 3D composite

Plusieurs objets 3D élémentaires peuvent être regroupés dans Un ModelVisual3D ou un ContainerUIElement3D (objets conteneurs). Une transformation appliquée au conteneur s'applique globalement aux différents objets qui le composent. Un conteneur peut aussi contenir d'autres conteneurs, qui chacun peuvent disposer de transformations. Il est ainsi possible d'animer de façon indépendante les différentes parties d'un modèle composite.

La classe Gyroscope3D de Perspective exploite cette technique. L'animation est déclenchée quand on clique sur le gyroscope.

Gyroscope animé - Cliquer pour démo en ligne

Le visuel de Gyroscope3D est défini dans un skin au moyen du fichier Gyroscope3D.xaml (assembly Perspective.Wpf3D, dossier Skins). L'organisation générale du fichier est la suivante :

  • ensemble composite rotor et axe : transformation PART_RotorRotation.
  • anneau intérieur.
  • ensemble composite de 2 anneaux extérieurs : transformation PART_RingModelRotation. Anneau externe : transformation PART_FrameRingRotation.

Une première animation appliquée à la transformation PART_RotorRotation est ainsi établie pour le rotor. Les 2 anneaux extérieurs forment un modèle composite animé (animation appliquée à PART_RingModelRotation). Au sein de cette paire d'anneaux, l'anneau extérieur subit lui-même une animation (appliquée à PART_FrameRingRotation).

A propos de cet article

Auteur : Olivier Dewit

Historique :

  • 15 mai 2008 : adaptation à la version 0.9 de Perspective.
  • 23 décembre 2006 : création.