I. Version▲
Ce tutoriel se réfère à la version 1.1 de la librairie Sandy.
II. Introduction▲
Sandy est une librairie écrite en AS2 permettant de manipuler et afficher des objets 3D dans Flash.
Flash ne permet pas de réaliser nativement des opérations sur des objets 3D. Cela est vraiment une fonctionnalité manquante qu'Adobe devrait combler dans un futur proche. Pour l'instant nous n'avons pas la possibilité de bénéficier des accélérations matérielles offertes par les cartes graphiques, et nous devons par conséquent nous satisfaire des performances permises par le player Flash.
Sandy est une librairie très orientée objet, fortement inspirée sur le fonctionnement de Java3D. En effet la construction de la scène 3D, ainsi que le nommage de certaines classes proviennent de Java3D. Cependant malgré cette ressemblance « externe », je n'ai jamais eu à regarder le code source de Java3D lors du développement de Sandy, pour la simple raison que Flash est un environnement particulier et que je souhaitais réussir à optimiser au maximum la librairie tout en tenant compte des possibilités du player Flash.
III. Construction d'une scène 3D▲
La création d'une scène 3D avec Sandy demande de comprendre la notion d'arbre. C'est notion est très naturelle puisqu'il s'agit d'imaginer le monde comme étant la racine de l'arbre, et ensuite tous les éléments calculatoires comme des nœuds, et enfin tous les éléments affichables (à l'exception des interpolateurs, voir plus bas) comme des feuilles.
Pour commencer à rentrer dans la librairie, voici en détail ce que j'appellerai racine, nœud et feuilles.
III-A. Racine▲
Une seule classe possède le rôle de racine dans notre représentation de scène 3D, c'est la classe World3D. World3D est donc le point d'entrée de notre scène 3D. Nous pourrons lui ajouter des fils qui seront forcement des Group.
III-B. Nœuds▲
III-B-1. Group▲
Un nœud très important est l'objet Group. Cet objet est le raccord entre notre monde 3D (World3D) et ce qui va être affiché. Une seule racine (Group) de l'arbre ne peut exister. Donc il faut ajouter au moins un Group défini en tant que racine World3D.setRootGroup( Group ) à notre World3D pour commencer un quelconque rendu graphique.
III-B-2. TransformGroup▲
Le nœud TransformGroup est une sorte de Group spécial. En effet ce nœud , en plus de pouvoir posséder des enfants et donc des feuilles, peut regrouper une opération de transformation (chose que nous allons expliquer plus tard).
III-C. Feuilles▲
Un objet affichable est une feuille. Par conséquent sont considérées comme feuilles les classes suivantes : Object3D, Sprite2D, Sprite3D.
III-C-1. Object3D▲
Structure de donnée permettant d'afficher un vrai élément 3D. Par cela il faut comprendre qu'une fois cet objet affiché à l'écran, nous obtenons le rendu exact de sa projection entre l'espace 3D et l'espace 2D. Le rendu est donc réel, et c'est ce qui fait de Sandy un moteur 3D temps réel.
III-C-2. Sprite2D▲
Faux objet 3D, les sprites permettent d'inclure dans un vrai espace 3D des éléments graphiques 2D prérendus (des images donc) et de réaliser un simple effet de perspective dessus. Par conséquent le Sprite2D montre la même face peut importe la position de la camera. Son image nous fait toujours face.
Vous pouvez imaginer cela comme les éléments utilisés pour dessiner un buisson dans un jeu de voiture sur console ou PC. Si vous remarquez bien, il s'agit d'une simple image 2D qui vous fait toujours face. Cela donne donc l'impression que l'objet est parfaitement symétrique et qu'il donne donc le même rendu peut importe d'où on regarde.
III-C-3. Sprite3D▲
Faux objet 3D lui aussi, il est comme le Sprite2D un objet permettant d'afficher un élément prérendu. Seulement cet objet permet de rendre les choses plus intéressantes puisqu'il comporte un habillage (skin, voir détail plus loin) possédant 360 images, ce qui lui permet de reproduire un effet de vraie 3D avec des éléments prérendus. Tout comme le Sprite2D un effet de perspective est appliqué, mais en revanche il ne montre plus la même image selon l'angle de vue qu'il a avec la caméra.
III-D. Les transformations et les interpolateurs▲
Ce sont objets permettant de manipuler les nœuds TransformGroup et par conséquent d'appliquer des transformations à vos objets.
Jusqu'à la version 1.1, les interpolateurs étaient considérés comme des feuilles, mais cela n'est plus le cas depuis.
Vous pouvez vous servir des objets suivants :
- Rotation : crée une rotation de votre objet selon un axe et un angle ;
- Translation : déplace votre objet d'un certain offset selon les trois axes ;
- Scale : modifie la dimension (zoom) de votre objet ;
- RotationInterpolator : permet de réaliser une rotation en continu de votre objet d'un angle à un autre ;
- ScaleInterpolator : réalise un effet de zoom en continu.
- PositionInterpolator : déplace en continu votre objet d'une position à une autre ;
- PathInterpolator : déplace en continu l'objet sur une courbe de Bezier 3D ;
- VertexInterpolator : modifie les valeurs des vertices d'un objet afin de le rendre animé.
III-E. Les Skins▲
Un skin est un habillage d'objet 3D. Afin de modifier l'apparence d'un objet, nous pouvons changer son skin et varier ainsi les possibilités d'affichage.
Les skins sont des éléments que l'utilisateur peut rajouter selon sa convenance et ses besoins.
Un skin doit être attribué pour chaque objet. Seules les feuilles de type Object3D possèdent un skin par défaut. Autrement tout objet (Sprite ou Clip3D) ne possédant pas de skin adapté (!) ne sera pas affichable.
IV. Initialisation d'une appli avec Sandy▲
Donc pour bien commencer une application Sandy il faut donc :
- Créer un objet branchGroup et le relier au World3D ;
- Créer des nœuds en se servant des relations père/fils pour créer l'arborescence de la scène 3D de Sandy ;
- Ajouter des feuilles à certains nœuds ;
- Ajouter au moins une camera au monde (World3D) après avoir créé un écran (Screen) sur lequel les données seront affichées.
V. Exemple▲
// nous créons notre écran. Élément primordial puisque c'est celui dans lequel les données seront affichées.
var ecran:ClipScreen = new ClipScreen( this.createEmptyMovieClip('écran', 1), 600, 600 );
// nous créons notre camera. Le second paramètre est la distance nodale, qui donne donc l'effet
// de perspective aux objets affichés
var cam:Camera3D = new Camera3D( 700, écran);
// nous ajoutons notre camera au monde 3D
World3D.getInstance().addCamera( cam );
// nous créons notre Group racine qui servira de connexion avec le monde 3D
var bg:Group = new Group();
// et l'ajoutons au monde 3D. Il devient donc la racine de notre arborescence
// et le rendu se fera à partir de celui-ci
World3D.getInstance().setRootGroup( bg );
// nous lançons la création de la scène. Ici nous appelons une fonction que vous
// devriez implémenter selon vos besoins, mais cela est purement libre.
createScene( bg );
// maintenant que tout est créé nous pouvons lancer le rendu du monde
World3D.getInstance().render();
function createScene( bg:Group ):Void
{
;// Création de votre arborescence
}Certaines parties doivent encore vous sembler floues, mais cela devrait être corrigé avec les tutoriels suivants qui, plus ciblés, détaillent plus en profondeur le fonctionnement de Sandy.