IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Comprendre les lumières dans Sandy

Ce tutoriel offre une explication concernant les lumières dans le framework AS2 Sandy et propose un exemple d'utilisation. ♪

Article lu   fois.

L'auteur

Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Les lumières dans Sandy

Dans Sandy, les lumières sont des éléments très simples. Sandy ne possède pas de système de gestion d'éclairage très poussé. Il y a plusieurs raisons à cela, tout d'abord Flash ne permet pas d'implémenter des fonctions très avancées, et la théorie de l'éclairage est très compliquée et lourde en calculs.

Une lumière dans Sandy possède juste une direction et une puissance. Vous le voyez c'est très basique.

Maintenant concernant la direction, il faut imaginer que la source lumineuse émettrice est située à l'infini, et que ce que nous recevons est un champ de rayons lumineux parallèles d'intensité constante (imaginez le soleil comme source lumineuse. La distance est tellement importante que nous pouvons nous rapporter à ce cas de figure).

Cette direction est un vecteur, et possède donc un sens. Ce sens est pris en compte dans Sandy. Donc une lumière venant de la gauche n'éclairera pas les faces dont la normale pointe vers la droite.

La puissance de la lumière ne change pas selon la distance ou quoi que ce soit. Elle reste constante selon la direction et dans le temps. Plus vous augmentez la puissance de la lumière, plus vos objets seront éclairés, et même les faces qui ne sont pas à première vue dans le champ. Plus la puissance est faible, plus vous verrez les faces cachées ou légèrement visibles sombres.

Cette valeur est à ajuster selon l'effet voulu.

Une lumière est définie par défaut dans Sandy. Elle possède une direction dans l'axe de Z et une puissance de 50 (la plage de valeurs allant de 0 à 100).

Maintenant ce n'est pas parce qu'il existe une lumière dans la scène de Sandy que vos objets seront forcément illuminés. Pour changer l'éclairage sur vos objets, il faut appeler la méthode setLightingEnable du skin associé, avec comme paramètre true pour activer, et false pour désactiver.

II. Exemple

II-A. Le code

Voici comment ajouter une lumière au monde venant de la gauche et de faible intensité :

 
Sélectionnez
import sandy.core.data.*;
import sandy.core.group.*;
import sandy.primitive.*;
import sandy.view.*;
import sandy.core.*;
import sandy.core.light.*;
import sandy.skin.*;
import sandy.util.*;
import sandy.core.transform.*;
import sandy.events.*;
 
function init( Void ):Void
{
    // 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 );
    // on créé la lumière
    var l:Light3D = new Light3D( new Vector(1,0,0), 20 );
    // set light
    World3D.getInstance().setLight( l );
    // nous créons notre Group qui servira de racine
    var bg:Group = new Group();
    // et l'ajoutons au monde 3D. Par défaut le dernier branchGroup ajouté est celui qui est actif 
    // lors de la demande de rendu
    World3D.getInstance().setRootGroup( bg );
    // nous lançons la création de la scène
    createScene( bg );
    // maintenant que tout est créé nous pouvons lancer le rendu du monde
    World3D.getInstance().render();
}
 
function createScene( bg:Group ):Void
{
    // nous créons notre objet. Pour cela nous utilisons ici la primitive box.
    // cela créé une boite qui, dans le cas où les dimensions de hauteur, profondeur, largeur, sont les mêmes
    // génère un cube. Ici nous créons donc un cube de 50 pixels.
    var o:Object3D = new Box( 50, 50, 50, 'quad' );
    // on créé un skin qui va permettre d'habiller un peu mieux notre objet 3D.
    // ici le skin SimpleColor qui demande une couleur de replissage, la valeur de l'alpha et l'épaisseur du trait.
    var skin:Skin = new MixedSkin( 0x00FF00, 100, 0, 100 );
    skin.setLightingEnable( true );
    // on applique le skin sur l'objet.
    o.setSkin( skin );
    // Nous créons deux transform Group différents. Chacun correspondant à un noeud de la branche de transformations
    // que nous voulons créer.
    var tg1:TransformGroup = new TransformGroup();
    var tg2:TransformGroup = new TransformGroup();
    // Nous créons les objets permettant de transformer notre cube
    // Profitons-en d'ailleurs pour commencer à nommer nos variables correctement. Vous le verrez ceci 
    // deviens vite très important
    var translation:Transform3D = new Transform3D();    
    // creation d'un interpolateur à la place du transform3D
    var ease:Ease = new Ease();
    ease.linear();
    var rotint:RotationInterpolator = new RotationInterpolator( ease.create(), 200 );
    // translation de 500 pixels dans l'axe des Z.
    translation.translate( 0, 0, 500 );
    // Nous appliquons la translation au noeud 1
    tg1.setTransform( translation );
    // Pour le noeud de rotation, nous n'appliquons plus la transformation comme avant avec le setTransform,
    // mais nous ajoutons un fils à ce noeud
    tg2.setTransform( rotint );
    // nous ajoutons notre objet comme enfant du noeud correspondant à la rotation.
    // l'opération de rotation lui sera donc appliquée avant celle de translation
    tg2.addChild( o );
    // Maintenant nous relions nos deux noeuds, en mettant la translation en opération parent à celle de rotation.
    // Cet ordre est très important selon le résultat voulu !
    tg1.addChild( tg2 );
    // nous ajoutons le transformGroup comme fils du BranchGroup afin de créer l'arborescence 
    //et rendre l'objet affichable.
    bg.addChild( tg1 );
}
// Nous lançons la création du monde 3D
init();

Il est à noter qu'ici nous avons voulu spécifier notre lumière, mais si la lumière par défaut vous convient, seule l'activation auprès du skin est nécessaire.

II-B. Le rendu


Cliquez pour lire la vidéo



II-C. Les sources

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

Copyright © 2006-2007 Thomas Pfeiffer. Aucune reproduction, même partielle, ne peut être faite de ce site ni 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.