Developpez.com - Flash / Flex
X

Choisissez d'abord la catégorieensuite la rubrique :


Comprendre la librairie 3D Sandy

Date de publication : 27/03/2007

Par Thomas Pfeiffer (Mon site) (Mes articles sur developpez.com)
 

Découvrir et se familiariser avec l'approche 3D de la librairie Sandy.

               Version PDF (Miroir)

I. Version
II. Introduction
III. Construction d'une scène 3D
III-A. Racine
III-B. Noeuds
III-B-1. Group
III-B-2. TransformGroup
III-C. Feuilles
III-C-1. Object3D
III-C-2. Sprite2D
III-C-3. Sprite3D
III-D. Les transformations et les interpolateurs
III-E. Les Skins
IV. Initialisation d'une appli avec Sandy
V. Exemple


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 provient 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 reussir à optimiser au maximum la librairie tout en tenant compte des possibilitées 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 tout les éléments calculatoires comme des noeuds, et enfin tout 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, noeud 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. Noeuds


III-B-1. Group

Un noeud très important est l'objet Group. Cette objet est la raccordement 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 noeud TransformGroup est une sorte de Group spécial. En effet ce noeud , 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és 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 pre-rendu (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 imaginez cela comme les éléments utilisés pour déssiner un buisson dans un jeu de voiture sur console ou PC. Si vous remarquez bien, il s'agit d'un 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éréssantes 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 élements pre-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 camera.


III-D. Les transformations et les interpolateurs

Ce sont objets permettant de manipuler les noeuds TransformGroup et par conséquent appliquer des transformations à vos objets.

Jusqu'à la version 1.1 les interpolateur étaient considérés comme des feuilles, mais cela n'est plus le cas depuis.

Vous pouvez vous servir des objets suivants :


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ées 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. Seuls 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 :

  1. Créer un objet branchGroup et le relier au World3D.
  2. Créer des noeuds en se servant des relations père/fils pour créer l'arborescence de la scène 3D de Sandy.
  3. Ajouter des feuilles à certains noeuds.
  4. 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 ecran. Element primordial puisque c'est celui dans lequel les données seront affichées.
var ecran:ClipScreen = new ClipScreen( this.createEmptyMovieClip('ecran', 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, ecran);
// nous ajoutons notre camera au monde 3D
World3D.getInstance().addCamera( cam );
// nous créons notre Group racine qui servira de connection 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 creation de la scene. Ici nous appelons une fonction que vous
// devriez implémenter selon vos besoin, mais cela est purement libre.
createScene( bg );
// maintenant que tout est créé nous pouvons lancer le rencu 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.



               Version PDF (Miroir)

Valid XHTML 1.1!Valid CSS!

Copyright © 2006-2007 Thomas Pfeiffer. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Responsable bénévole de la rubrique Flash / Flex : Xavier Lecomte -