Démo

Passez la souris sur l'objet 3D ci-dessous...

Ouai, c'est donc un Hello World pour valider l'intégration du modeleur 3D Blender avec la librairie Papervision3D pour application Flash.

Avec aussi animation de rotation 3D et le calcul d'ombres temps réel qui va avec...

Modélisation Blender et export au format Collada

Bon, quelque soit le modeleur 3D qu'on utilise (3ds Max, Maya, SketchUp, Blender), au départ il y a un petit temps d'apprentissage.

Avec blender.org, on est en plein dans le développement durable : logiciel libre, multi-plateforme. Ya plein de doc en ligne et pour n'en citer qu'une : http://en.wikibooks.org/wiki/Blender_3D:_Noob_to_Pro.

Après s'être familiarisé aux divers raccourcis clavier et techniques de modélisation comme l'extrusion, on peut construire sa première scène 3D.

Ensuite on peut exporter au format COLLADA. Un format d'échange standard en XML. Avec Blender, c'est simplement File>Export>Collada 1.4. On cochera les options :

• Triangles
• Only export selection

Effectivement notre librarie Papervision 3D fonctionne exclusievment par modélisation à l'aide de triangles.

Import dans appli Flash avec librairie Papervision 3D

Mise en place du projet Flex avec Papervision3D

Donc maintenant on est dans Eclipse avec typiquement Flash Builder 4. Enfin moi je préfère Flex Builder 3 / Linux. Ya plus qu'à télécharger Papervision3D : http://code.google.com/p/papervision3d. Au choix directement la librairie .swc ou alors le .zip avec le code source.

Pour explication des concepts de base de papervision3d on pourra juste lire l'article : first-application-with-papervision3d.

Effectivement il faut saisir le pourquoi de la source lumineuse et de la caméra et voir ou les placer par rapport à l'objet cible.

Un modèle de projet évoqué dans la partie "smart programmers use less code", servira de base. Ca peut servir de base, par exemple :

public class LegoWithLightAndShader extends BasicView {
    public function LegoWithLightAndShader() {
      super(0, 0, true, false);
      init();
    }
 
private var model:DisplayObject3D;
    private function init():void {
    opaqueBackground = 0xffffff;
      camera.x = 0;
      camera.y = 400;
      camera.z = -550;
 
      light = new PointLight3D(true);
      light.x =  100;
      light.y = 1000;
      light.z = -700;

Import du modèle .dae

private var model:DisplayObject3D;
		model = new DAE();
		(model as DAE).load("assets/MyLegoSample.dae");

Donc on le voit, l'import est très simple. Suffit de sourcer le fichier .dae.

Annimation de rotation via la souris

private var vpX:Number = stage.stageWidth/2;
    private var vpY:Number = stage.stageHeight/2;
    override protected function onRenderTick(event:Event=null):void {
      var angleX:Number = (mouseY - vpY) * .5;
      var angleY:Number = (mouseX - vpX) * .5;
      model.rotationZ = -angleY;
      model.rotationX = -angleX;
      super.onRenderTick(event);
    }

Oui, on peut choisir d'effectuer une rotation du modèle sur la base de la distance de la souris par rapport au milieu de l'écran. Maintenant, on a une animation correcte, mais le résultat est beaucoup trop médiocre.

Effectivement, on n'a pas de gestion d'ombres : les arrêtes ne se démarquent pas et on ne voit de distinction entre les faces. Alors que les yeux et le cerveau ont l'habitude de reconstituer le 3D justement via des modifications d'intensités lumineuses entre les faces de l'objet...

Gestion des ombres

Matériaux et import Blender -> Papervision

On peut avoir fait une modélisation Blender avec des matériaux présentant réflexion et réfraction. Mais à l'import du .dae, ceci est perdu et le modèle papervision3d instancié ne présente que des matériaux ColorMeterial. Donc sans calcul d'effet de lumière!

Choix des matériaux dans Papervision3D

Au prix d'un surcoût CPU, on peut induire papervision à une gestion fine de la lumière. Au lieu de ColorMaterial, on optera pour :

• FlatShadeMaterial
• GouraudMaterial
• PhongMaterial

Pour le premier, il s'agit d'un calcul global pour chaque face (triangle) de l'objet par rapport à la source lumineuse.

Le dernier est beaucoup plus réaliste (et couteux) avec une approche pixel par pixel. Le deuxième est un compromis : calcul triangle par triangle et interpolation pixel par pixel.

Pour notre Hello 3D World, très cubique, la première approche est parfaite.

Remplacement des materiaux en runtime

Reste à remplacer le ColorMaterial introduit lors de l'import par une instance de FlatShadeMaterial.

model.addEventListener(FileLoadEvent.LOAD_COMPLETE,modelLoaded);
 
	private function modelLoaded(e:FileLoadEvent):void		{
   		model.replaceMaterialByName(  new FlatShadeMaterial(light, 0xFFEEFF, 0x220000), "RED");
	}

Il suffit d'utiliser la méthode replaceMaterialByName(). Et de remplacer le matériaux dans le dictionnaire relatif à l'objet. Tout simplement!

On trouve plusieurs posts qui font état d'un fonctionnement étrange de Papervision (en tout cas jusqu'à 2.1). On peut tenter d'instancier un MaterialList, d'ajouter le matériau cible et de remplacer l'ancien via model.materials = ... Mais ceci n'a pas d'effet. Pourquoi?

Bon, on n'a pas toujours réponse à tout. L'essentiel est d'avoir une solution qui marche.

C'était la démo présentée en introduction.

Avec ce Hello 3D World, on a vu le chemin d'intégration Blender -> Papervision 3D. Incluant animation de rotation et surtout gestion réaliste de la lumière.

Sculpture numérique et visite virtuelle

On pourra maintenant sereinement retourner à Blender et faire un peu de sculpture numérique. On sait qu'on pourra ensuite exposer son chef d'oeuvre dans une simple application Flash, permettant au public une découverte sous tous les angles...

Si on fait une modélisation avec lissage, on préfèrera alors la mise en oeuvre d'un PhongMaterial, pour un calcul pixel par pixel de la lumière et un rendu des plus réalistes.