Introduction à Minko

23 déc

Minko
Minko est un moteur de rendu 3D pour flashplayer 11 comme il en existe beaucoup d’autres (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.

Pré-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 Éléments 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 composant 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’extensions 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 :

[sourcecode language='js']
        private function buildCube():void
        {
            var mesh:CubeMesh = new CubeMesh();
            var texture:ColorTexture = new ColorTexture( 0xFF0000 );
            _cube.addChild( texture );
            _cube.addChild( mesh );
        }
 [/sourcecode]

La création de l’univers

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

[sourcecode language='js']
		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 );
		}
 [/sourcecode]

 

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 garantit que le rendu sera toujours par dessus. Bon j’ai pas bien compris le pourquoi du comment, là, mais je reviendrai 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-nous de notre handler pour modifier la position de la camera et déclencher le rendu de cette façon :

[sourcecode language='js']
		private function enterFrameHandler( event:Event ):void
		{
			_camera.rotation.y += 0.03;
			_viewport.render( _scene );
		}
[/sourcecode]

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é.

No comments yet

Leave a Reply

*