Minko est un moteur de rendu 3D pour flashplayer 11 comme il en existe beaucoup d’autre (Alternativa3D, UnrealEngine 3, Unity3D).

Mais c’est le premier framework gratuit, open source, et maintenu par une entreprise, Aerys.

Si tout le monde comprend l’intérêt de profiter d’un outil gratuit, le fait qu’il soit open source est un confort immense pour le développeur et pour comprendre comment il fonctionne. Cela permet egalement de participer à l’amélioration de celui-ci en proposant des correctifs ou de nouveaux éléments.
Qu’une entreprise s’occupe de le maintenir est aussi un avantage … et un inconvénient. Je ne vais pas rentrer dans les détails mais c’est très comparable au framework Flex. Cela peut rassurer quand à la pérennité de l’outil mais également inquiéter sur sa gouvernance.

Maintenant je vous propose de créer notre première scène avec Minko et Flex, en produisant quelque chose de comparable à mon dernier tutoriel sur Alternativa3D.

Pre-Requis

Attention à bien respecter ces points avant de commencer, au risque de passer beaucoup de temps à chercher sur le net des solutions.

- cibler flashplayer 11
- ajouter « -swf-version=13 » aux options de compilations
- sous firefox virer FireBug & Co au risque d’avoir des erreurs de type ReferenceError: Error #1065: Transform3DController
- utiliser le wmode= »direct » comme expliqué ici en cas de Error #2044: ErrorEvent non pris en charge : text=Error #3702: Context3D non disponible.

Les Elements de mon univers

L’affichage de la scène est pris en charge par le Viewport, un Sprite dédié au rendu de notre univers.

Tout est Group ! Dans Minko, tout les éléments composants notre univers sont des Group. Notre scène principale est un Group, une boite est un Group contenant texture, mesh, transformation, etc…
Bon on va voir un peu plus loin que tout n’est pas vraiment Group mais c’est un concept important et j’aime bien l’idée

L’observateur est une Camera, voilà un concept qui ne devrait pas nous dépayser.

Enfin la lumière est fournie par … Light, bon là aussi ça devrait aller mais par contre il faudra ajouter l’extension minko-lighting au framework. Ah oui parce qu’il existe pas mal d’extension pour ajouter des fonctionnalités au framework de base, pour par exemple charger des 3DS, apporter la physique, l’éclairage, etc…

Bien créons notre propre univers 3D maintenant et comme un bon cuisinier nous allons commencer par préparer nos ingrédients :

private var _camera:ArcBallCamera = new ArcBallCamera();
private var _cube:Group = new Group();
private var _display3DContainer:UIComponent = new UIComponent();
private var _scene:Group = new Group();
private var _viewport:Viewport = new Viewport();

_display3DContainer est là pour contenir dans viewport car nous sommes dans un projet Flex et il n’est pas possible d’ajouter autre chose qu’un UIComponent dans notre application.

Maintenant préparons notre Cube ainsi :

        private function buildCube():void
        {
            var mesh:CubeMesh = new CubeMesh();
            var texture:ColorTexture = new ColorTexture( 0xFF0000 );
            _cube.addChild( texture );
            _cube.addChild( mesh );
        }
 

La creation de l’univers

Maintenant que nous avons tout nos ingrédients sous la min, allons y pour un peu de cuisine.
Je vais faire ça sur à la réception du FlexEvent.APPLICATION_COMPLETE. C’est un détail qui n’a pas beaucoup d’importance.

		private function applicationCompleteHandler( event:FlexEvent ):void
		{
			_camera.distance = 3.0;
			_scene.addChild( _camera );

			buildCube();
			_scene.addChild( _cube );

			_viewport.alwaysOnTop = true;
			_display3DContainer.addChild( _viewport );
			addElement( _display3DContainer );
		}
 

Je commence par placer ma camera au bon endroit puis je l’ajoute à ma scène.
Ensuite je lance la fabrication de mon cube et je l’ajoute à la scène.
Enfin j’ajoute mon viewport à mon UIContainer que j’ajoute egalement à mon application.

A noter cette instruction :

_viewport.alwaysOnTop = true;

Elle garantie que le rendu sera toujours par dessus. Bon j’ai pas bien compris le pourquoi de comment là, mais je reviendrais dessus.

Pour finir nous allons animer le tout par une petite rotation de la camera autour du cube.

Rendu et Animation

Terminons ce premier tutoriel par l’ajout d’une petite animation et surtout … le rendu de notre scène !
Ajoutons un listener sur Event.ENTER_FRAME.

addEventListener( Event.ENTER_FRAME, enterFrameHandler );

Servons de notre handler pour modifier la position de la camera et déclencher le rendu de cette façon :

		private function enterFrameHandler( event:Event ):void
		{
			_camera.rotation.y += 0.03;
			_viewport.render( _scene );
		}

Notre camera est une ArcBallCamera. C’est à dire qu’elle est braquée sur une cible (par defaut 0,0,0) et va tourner autour via sa propriété rotation.
Il nous suffit de l’incrémenter à chaque itération pour obtenir l’animation désirée.

Pour le rendu c’est simple, on demande au viewport de rendre notre scène et le tour est joué.