Blog Papervision3D

Coordonnées 2D du sommet haut gauche d’une Plane.

Ocelyn — Thu, 12 Nov 2009 23:00:15 +0000

Suite à l’article sur comment obtenir les coordonnées 2D du centre d’une Plane, je vous présente ici une astuce pour trouver les coordonnées 2D du somment haut gauche d’une Plane (comme si ce n’était qu’un simple MovieClip aligné en 0,0)

Cet article implique donc que vous ayez lu le précédent article, afin d’aller directement à l’essentiel

Tout d’abord, nous créons un DisplayObject3D (ligne 23), auquel nous ajoutons une Plane.

Comme vous le voyez (ligne 25) notre Plane fait 80 pixels par 80 pixels, pour pouvoir centrer en 0,0 notre plane dans notre DisplayObject3D.

Nous la déplaçons en x de la moitié de sa largeur (ligne 27) et en y (ligne 28) de -(sa hauteur divisé par deux).

Enfin nous activons le autoCalcScreenCoords non pas sur la Plane mais sur le DisplayObject3D (ligne 33).

Tout ceci nous permet avec la même formule que dans l’exemple précédent, de pouvoir positionner notre Sprite sur le sommet haut gauche de notre Plane.

package{
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.view.BasicView;
 
import flash.display.Sprite;
import flash.events.Event;
 
public class BasicScene extends BasicView {
 
public function BasicScene()
{
topLeftPlane();
 
startRendering();
}
 
private function topLeftPlane() : void
{
var mt : ColorMaterial = new ColorMaterial(0×0000ff);
 
do3d = new DisplayObject3D();
 
var tlPlane : Plane = new Plane(mt, 80, 80);
do3d.addChild(tlPlane);
tlPlane.x = 40;
tlPlane.y = -40;
 
scene.addChild(do3d);
do3d.z = ( camera.zoom * camera.focus ) – Math.abs (camera.z);
 
do3d.autoCalcScreenCoords = true;
 
//—-
 
topLeftSprite = new Sprite();
topLeftSprite.graphics.beginFill(0xff0000, 0.2);
topLeftSprite.graphics.drawRect(0, 0, 40, 40);
addChild(topLeftSprite);
}
 
override protected function onRenderTick(event:Event=null):void
{
do3d.x -= 0.2;
do3d.y -= 0.2;
 
topLeftSprite.x = ( do3d.screen.x + (this.width / 2 ) );
topLeftSprite.y = ( do3d.screen.y + (this.height / 2 ) );
 
//—-
 
super.onRenderTick(event);
}
 
private var do3d             : DisplayObject3D;
 
private var topLeftSprite     : Sprite;
}
}

Tutoriel Papervision3D 3.0 – Classe Squelette

Ocelyn — Thu, 29 Oct 2009 11:00:53 +0000

Salut à tous,

Comme demandé dans un commentaire voici une classe squelette de la nouvelle monture de Papervision : Papervision3D 3.0.

En pré-requis, il vous faudra bien entendu le package Papervision3D 3.0 que vous pouvez récupérer ici.

La possibilité de compiler en Flash Player 10 (avec Flash CS4, ou autre) et le Flash Player 10 pour pouvoir lire la scène. (si vous avez des erreurs à l’ouverture du swf ça viens surement de ça)

Une classe comme BasicView n’ayant pas encore été implanté, il nous faudra recréer notre scène à la main (ce qui n’est pas plus mal pour comprendre les nouveautés).

La première Chose est de créer notre Viewport (lignes 38-39), notre scene (ligne 41), qui maintenant est un DisplayObject3D en attendant la création de la classe Scene3D, notre caméra (lignes 43-44) qui maintenant doit être ajoutée à notre scene !

Et enfin nous créons notre rendrerer (ligne 49).

Puis nous créons notre Cube (lignes 52-54) en lui passant un WireframeMaterial , pour l’instant notre cube ne peu recevoir qu’un seul material et qu’une seule taille (on peu le scaler en X ou en Y pour le transformer par contre).

Enfin nous obligeons notre camera à regarder le cube, grâce à la propriété lookAt (ligne 56).

Le reste ne change pas, dans notre fonction EnterFrame, nous lançons le rendu de la scène

Papervision3D 3.0 débute mais ça annoncera surement que du bon !

package
{
import flash.display.Sprite;
import flash.events.Event;
 
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.materials.WireframeMaterial;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.primitives.Cube;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.view.Viewport3D;
 
public class BasicScene extends Sprite
{
 
public function BasicScene()
{
addEventListener(Event.ADDED_TO_STAGE, addedToStage);
}
 
private function addedToStage(e:Event):void
{
removeEventListener(Event.ADDED_TO_STAGE, addedToStage);
 
init();
}
 
private function init() : void
{
initScene();
buildCube();
 
addEventListener(Event.ENTER_FRAME, render);
}
 
private function initScene():void
{
viewport = new Viewport3D(0, 0, true);
addChild(viewport);
 
scene = new DisplayObject3D();
 
camera = new Camera3D();
scene.addChild( camera );
camera.z = 1000;
 
renderer = new BasicRenderEngine();
}
 
private function buildCube():void
{
var wfm : WireframeMaterial = new WireframeMaterial(0xff00ff);
cube = new Cube(wfm, 200);
scene.addChild( cube );
 
camera.lookAt(cube);
}
 
private function render(event:Event=null):void
{
cube.rotationX++;
cube.rotationY++;
 
renderer.renderScene(scene, camera, viewport);
}
 
private var cube : Cube;
private var camera : Camera3D;
private var viewport : Viewport3D;
private var scene : DisplayObject3D;
private var renderer : BasicRenderEngine;
}
}

Papervision3D 3.0 – Release

Ocelyn — Wed, 28 Oct 2009 13:19:12 +0000

Si vous n’êtes pas encore au courant (ce qui n’est finalement pas si grave, vous allez voir), la nouvelle version de Papervision3D (anciennement connu sous le nom de PapervisionX) viens de sortir.

Vous pouvez la récupérer à cette adresse : http://github.com/Papervision3D/Papervision3D

Il faut savoir que le moteur a été réécrit entièrement pour profiter des fonctionnalité du Flash Player 10.

Quoi de beau, dans cette nouvelle version ? Et bien pas grand chose pour l’instant, je n’ai pas encore eu l’occasion de la tester mais en navigant dans les différents dossier, j’ai vu qu’il n’y a pour l’instant que peu de classes qui ont été réécrites, il faudra donc attendre encore un peu pour l’utiliser dans vos sites web

Coordonnées 2D du centre d’une Plane.

Ocelyn — Wed, 28 Oct 2009 08:00:28 +0000

Dans cet article, nous allons voir comment récupérer les coordonnées 2D (x et y) d’une Plane dans Papervision, grâce à la propriété autoCalcScreenCoords.

Pour cet exercice nous allons créer une Plane et un rectangle 2D, ce dernier ira récupérer les coordonnées 2D de notre Plane pour se positionner en son centre, ceci étant la méthode la plus facile.

Nous créons notre Plane (lignes 21-25) et passons la propriété autoCalcScreenCoords de cette dernière à true (ligne 27), cette propriété nous permet d’activer la possibilité de récupérer les coordonnées 2D de notre Plane.

Puis nous créons notre rectangle 2D un Sprite (lignes 31-34) qui sera positionné au centre de la Plane, vous pourrez noter que à la création du rectangle (ligne 34) nous le centrons en lui même.

A partir de là dans notre fonction onRenderTick (ligne 37) nous déplaçons notre Plane en x et en y (lignes 39-40) pour voir le déplacement de notre Sprite que nous bougeons (lignes 42-43) grâce à la formule pour l’axe X par exemple :

centerSprite.x = ( plane.screen.x + (this.width / 2 ) );

Vous remarquez qu’au lieu de faire plane.x nous rajoutons la propriété screen qui permet d’obtenir la coordonnée X de la Plane sur le plan 2D et nous ajoutons à cette dernière, le centre de notre classe BasicScene grâce à la formule, largeur de notre classe (this.width this faisant référence à notre classe BasicScene) divisé par deux.

Il ne nous reste plus qu’à faire la même manipulation pour l’axe Y en remplaçant :

centerSprite.y = ( plane.screen.y + (this.height/ 2 ) );

package {
        import org.papervision3d.materials.ColorMaterial;
        import org.papervision3d.objects.DisplayObject3D;
        import org.papervision3d.objects.primitives.Plane;
        import org.papervision3d.view.BasicView;
 
        import flash.display.Sprite;
        import flash.events.Event;
 
        public class BasicScene extends BasicView {
                
                public function BasicScene() 
                {       
                        centerPlane();
                        
                        startRendering();
                }
 
                private function centerPlane() : void 
                {
                        var mt : ColorMaterial = new ColorMaterial(0×0000ff);
                        
                        plane = new Plane(mt, 80, 80);
                        scene.addChild(plane);
                        plane.z = ( camera.zoom * camera.focus ) – Math.abs (camera.z);
                        
                        plane.autoCalcScreenCoords = true;
                         
                        //—-
                         
                        centerSprite = new Sprite();
                        centerSprite.graphics.beginFill(0xff0000, 0.2);
                        centerSprite.graphics.drawRect(-20, -20, 40, 40);
                        addChild(centerSprite);
                }
 
                override protected function onRenderTick(event:Event=null):void
                {
                        plane.x += 0.2;
                        plane.y += 1;
                        //—-
                        centerSprite.x = ( plane.screen.x + (this.width / 2 ) );
                        centerSprite.y = ( plane.screen.y + (this.height / 2 ) );
                        //—-
                        super.onRenderTick(event);
                }
                
                private var plane                       : Plane;
                private var centerSprite        : Sprite;
        }
}

Chargement de modèle 3D, les fichiers DAE.

Ocelyn — Thu, 15 Oct 2009 08:00:28 +0000

Aujourd’hui, nous allons voir une des manières possible pour charger un modèle 3D dans Papervision et plus précisément un fichier DAE tiré de Google Sketchup.

Google Sketchup propose une grande base de donnée de modèle 3D, vous trouverez facilement votre bonheur sur ce site

Dans le cadre de notre exercice, nous allons utiliser une tour Eiffel.

Vous verrez que vous avez la possibilité de télécharger plusieurs type de modèle, pour notre exemple nous téléchargerons le fichier Collada contenu dans un zip.

Astuce : Vous pouvez aussi télécharger le fichier Google Earth 4 .kmz et remplacer l’extension par un .zip vous aurez alors le même type de fichier qu’au dessus

Après avoir téléchargé votre .zip en le décompressant vous aurez un dossier nommé Untitled, dedans 2 fichiers et 2 dossiers, vous pouvez supprimer les deux fichiers doc.kml et textures.txt qui ne nous sont pas utile.

Enfin copiez votre dossier Untitled à coté de votre fichier .html

Nous pouvons passer au code :

Nous créons un nouveau objet DAE (ligne 17) et chargeons notre modèle (ligne 18) en lui passant le chemin vers le modèle DAE, ici le dossier Untitled / models / model.dae, si vous ouvrez votre swf dans une page HTML le chemin sera par rapport à la position de notre page HTML, si vous faites les tests en ouvrant directement votre fichier swf alors le chemin sera par rapport à ce dernier, le mieux est d’avoir notre fichier swf dans le même dossier que notre page HTML.

Puis nous changeons la taille de notre objet avec l’attribut scale (ligne 19) pour le réduire de taille si nous passons un chiffre inférieur à 1 ou l’agrandir si supérieur à 1.

Nous le déplaçons sur notre scène (ligne 20) et enfin l’ajoutons à notre scène (ligne 21).

Nous lui faisons subir une rotation sur Y (ligne 26) pour le voir sur toutes les coutures.

package {
import org.papervision3d.objects.parsers.DAE;
import org.papervision3d.view.BasicView;
 
import flash.events.Event;
 
public class BasicScene extends BasicView {
 
public function BasicScene()
{
loadDae();
startRendering();
}
 
private function loadDae() : void
{
eiffel = new DAE();
eiffel.load("Untitled/models/model.dae");
eiffel.scale = 0.1;
eiffel.y = -500;
scene.addChild(eiffel);
}
 
override protected function onRenderTick(event:Event=null):void
{
eiffel.rotationY++;
super.onRenderTick(event);
}
 
private var eiffel : DAE;
}
}

Statsview voir les performances de vos scène Papervision3D.

Ocelyn — Tue, 13 Oct 2009 16:18:34 +0000

Salut à tous,

Voici une astuce qui vous permettra de mesurer les performances de vos scène sous Papervision3D grâce à classe StatsView de Papervision.

J’ai repris le code de la leçon précédente en y ajoutant une fonction initStats (ligne 14), à l’intérieur de laquelle je créé un objets Statsview (ligne 20) et auquel je passe le BasicRenderEngine de la classe BasicView (renderer).

Il ne me reste plus qu’à l’addChilder sur ma scène (ligne 21).

Vous verrez apparaitre un carré noir contenant les différentes stats en haut à gauche de votre scène, les stats FPS (Nombres d’image par seconde), Mem (Mémoire utilisé par le flash player) vous permettront de voir rapidement les performances de vos applications, à noter que si vous avez d’autres sites ou applications flash lancée en même temps, la mémoire prendra en compte ces derniers.

package {
        import org.papervision3d.materials.special.Letter3DMaterial;
        import org.papervision3d.typography.Text3D;
        import org.papervision3d.typography.fonts.HelveticaBold;
        import org.papervision3d.view.BasicView;
        import org.papervision3d.view.stats.StatsView;
 
        import flash.events.Event;
 
        public class BasicScene extends BasicView {
                
                public function BasicScene() 
                {       
                        initStats();
                        buildLetters();
                }
 
                private function initStats() : void 
                {
                        var sv : StatsView = new StatsView(renderer);
                        addChild(sv);
                }
 
                private function buildLetters() : void 
                {
                        var font : HelveticaBold = new HelveticaBold();
                        
                        var material : Letter3DMaterial = new Letter3DMaterial(0xff00ff);
                        material.doubleSided = true;
                        
                        txt3d = new Text3D("Blog Papervision3D", font, material);
                        
                        scene.addChild(txt3d);
                        
                        startRendering();
                }
 
                override protected function onRenderTick(event:Event=null):void
                {
                        txt3d.rotationY++;
                        super.onRenderTick(event);
                }
                
                private var txt3d : Text3D;
        }
}

Text3D dans Papervision.

Ocelyn — Fri, 02 Oct 2009 08:00:58 +0000

Papervision3D nous offre la possibilité de créer des textes 3D, ceci en trois étapes.

Dans un premier temps nous allons créer notre Font, la police de caractère que nous allons appliquer à notre Text3D, il en existe 4 déjà définis dans Pv3d : HelveticaBold, HelveticaLight, HelveticaMedium et HelveticaRoman.

Nous créons donc notre font (ligne 18), puis notre Letter3DMaterial auquel nous passons une couleur et lui appliquons la propriété doubleSided (ligne 20 et 21).

Enfin nous créons notre Text3D (ligne 23), nous lui passons une chaine de caractère qui sera le texte affiché en 3D, notre font et notre material créés précédemment.

Si nous souhaitons changer le texte, il suffit simplement de faire txt3d.text = « Ma nouvelle chaine de caractère »; ou txt3d.text = txt3d.text + « -fr »; pour afficher Blog Papervision3D-fr.

package {
        import org.papervision3d.materials.special.Letter3DMaterial;
        import org.papervision3d.typography.Text3D;
        import org.papervision3d.typography.fonts.HelveticaBold;
        import org.papervision3d.view.BasicView;
 
        import flash.events.Event;
 
        public class BasicScene extends BasicView {
                
                public function BasicScene() 
                {       
                        buildLetters();
                }
 
                private function buildLetters() : void 
                {
                        var font : HelveticaBold = new HelveticaBold();
                        
                        var material : Letter3DMaterial = new Letter3DMaterial(0xff00ff);
                        material.doubleSided = true;
                        
                        txt3d = new Text3D("Blog Papervision3D", font, material);
                        
                        scene.addChild(txt3d);
                        
                        startRendering();
                }
 
                override protected function onRenderTick(event:Event=null):void
                {
                        txt3d.rotationY++;
                        super.onRenderTick(event);
                }
                
                private var txt3d : Text3D;
        }
}

Stopper le rendu d’une scène 3D.

Ocelyn — Thu, 01 Oct 2009 08:00:09 +0000

Un tutoriel très court mais qui concerne un point crucial sur Pv3d, la gestion de la mémoire.

La manière la plus efficace pour ne pas gaspiller vos ressources dans une scène 3D, est de stopper le rendu de votre scène, quand vous n’avez plus aucune animation à afficher.

Pour cela, deux solutions :

Dans le cas où vous avez créé votre scène 3D grâce à un BasicView ou ReflectionView et avez lancé un startRendering() pour afficher vos objets et animations, il vous suffit simplement de faire appel à la fonction stopRendering(); (ligne 43) pour stopper le rendu et refaire un startRendering(); pour le reprendre.

Si vous avez créé votre scène 3D par vous même il vous suffira de supprimer votre EnterFrame qui vous sert au rendu pour stopper le rendu et de le recréer pour le reprendre.

A noter que même si le rendu est stoppé, les interactions avec les objets 3D sont toujours actifs, dans l’exemple ci-dessous, nous créons nos objets 3D et ne lançons qu’un seul rendu pour les afficher n’ayant pas d’animation.

Puis au clique sur notre Sphere, nous appliquons une rotationY à notre DisplayObject3D (ligne 42), et relançons un rendu pour afficher cette modification (ligne 43), très utile pour des Roll Over par exemple.

package {
        import org.papervision3d.events.InteractiveScene3DEvent;
        import org.papervision3d.materials.ColorMaterial;
        import org.papervision3d.objects.DisplayObject3D;
        import org.papervision3d.objects.primitives.Sphere;
        import org.papervision3d.view.BasicView;
 
        public class BasicScene extends BasicView {
                
                public function BasicScene() 
                {       
                        buildSphere();
                        viewport.interactive = true;
                }
 
                private function buildSphere() : void 
                {
                        do3d = new DisplayObject3D();
                        
                        //—
                        var material : ColorMaterial = new ColorMaterial(0×000fff);
                        material.interactive = true;
                        sphere = new Sphere(material, 200, 20, 20);
                        
                        //—
                        var material2 : ColorMaterial = new ColorMaterial(0xff0000);
                        sphere2 = new Sphere(material2, 80, 20, 20);
                        sphere2.x = 320; 
                        
                        //—
                        do3d.addChild(sphere);
                        do3d.addChild(sphere2);
                        scene.addChild(do3d);
                        
                        sphere.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, handleClick);
                        
                        singleRender();
                }
                
                private function handleClick(event : InteractiveScene3DEvent) : void 
                {
                        do3d.rotationY += 10;
                        singleRender();
                }
                
                private var sphere : Sphere;
                private var sphere2 : Sphere;
                private var do3d : DisplayObject3D;
        }
}

Fog avec Papervision3D.

Ocelyn — Tue, 29 Sep 2009 08:00:26 +0000

Dans ce tutoriel nous allons créer un effets de brouillards dans Papervision3D.

Pour cela nous allons tout simplement utiliser un FogMaterial et un FogFilter que nous appliquerons à notre BasicRenderEngine (renderer).

Nous créons notre FogMaterial (ligne 20) et lui passons une couleur, le mieux est de choisir une couleur étant la même que votre couleur de fond. (blanc dans cet exemple)

Puis nous appliquons à notre renderer un nouveau filtre (ligne 21), un FogFilter qui reçoit 4 paramètres, le premier est notre FogMaterial créé précédemment puis le nombre de segments, c’est à dire le nombre de layers entre un fog à 0% et un fog à 100%, plus il y a de segments plus la progression vers le fond du brouillards seras détaillées.

Enfin nous lui passons les paramètres minDepth et maxDepth qui sont les points de départs et d’arrivé en Z de notre Fog.

Enfin nous faisons avancer notre Sphere en Z (ligne 37) pour la voir s’enfoncer progressivement dans le brouillard.

package {
        import org.papervision3d.core.render.filter.FogFilter;
        import org.papervision3d.materials.ColorMaterial;
        import org.papervision3d.materials.special.FogMaterial;
        import org.papervision3d.objects.primitives.Sphere;
        import org.papervision3d.view.BasicView;
 
        import flash.events.Event;
 
        public class BasicScene extends BasicView {
                
                public function BasicScene() 
                {       
                        initFog();
                        buildSphere();
                }
                
                private function initFog() : void 
                {
                        var fogMaterial : FogMaterial = new FogMaterial(0xffffff);
                        renderer.filter = new FogFilter(fogMaterial, 50, 1500, 2000);
                }
 
                private function buildSphere() : void 
                {
                        var material : ColorMaterial = new ColorMaterial(0×000000);
                        material.smooth = true;
                        
                        sphere = new Sphere(material, 200, 20, 20);
                        scene.addChild(sphere);
                        
                        startRendering();
                }
 
                override protected function onRenderTick(event:Event=null):void
                {
                        sphere.z += 5;
                        super.onRenderTick(event);
                }
                
                private var sphere : Sphere;
        }
}

Shadow sur une texture image.

Ocelyn — Thu, 24 Sep 2009 08:00:39 +0000

Dans notre précédent tutoriel, nous avons vu comment texturer un objets 3D, pour afficher des effets d’ombres sur ces derniers.

Pour aller plus loin que ce dernier qui nous permettait seulement de faire une texture avec un dégradé entre deux couleurs, nous allons voir comment afficher une ombre sur une texture image.

Pour cela nous allons utiliser un BitmapMaterial (ligne 44) dont nous avions déjà parlé dans ce tutoriel, un PhongShader (ligne 45)qui va être le material qui affichera notre ombre, comme le PhongMaterial vu dans le tutoriel précédent, il reçoit notre objet lumière, la couleur de la lumière, la couleur de l’ombre, et le specularLevel.

Après avoir créé ces deux textures, il nous reste à créer un ShadedMaterial (ligne 47) dans lequel nous passerons les deux materials précédent, et que nous utiliserons comme texture pour notre Sphere.

package  {
import org.papervision3d.lights.PointLight3D;
import org.papervision3d.materials.BitmapMaterial;
import org.papervision3d.materials.shaders.PhongShader;
import org.papervision3d.materials.shaders.ShadedMaterial;
import org.papervision3d.objects.primitives.Sphere;
import org.papervision3d.view.BasicView;
 
import flash.display.BitmapData;
import flash.display.Loader;
import flash.events.Event;
import flash.net.URLRequest;
 
public class BasicScene extends BasicView {
 
public function BasicScene()
{
initMaterial();
}
 
private function initMaterial() : void
{
myLoader = new Loader();
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadComplete);
myLoader.load(new URLRequest("URL IMAGE"));
}
 
private function onLoadComplete(event : Event) : void
{
myLoader.contentLoaderInfo.removeEventListener(Event.COMPLETE, onLoadComplete);
 
bmpData = new BitmapData(myLoader.width, myLoader.height);
 
bmpData.draw(myLoader);
 
buildPlane();
}
 
private function buildPlane() : void
{
var light : PointLight3D = new PointLight3D();
scene.addChild(light);
 
var material : BitmapMaterial = new BitmapMaterial(bmpData);
var ps : PhongShader = new PhongShader(light, 0xffffff, 0×000000, 10);
 
var shadeMaterial : ShadedMaterial = new ShadedMaterial(material, ps);
shadeMaterial.doubleSided = true;
 
sphere = new Sphere(shadeMaterial, 200, 12, 12);
scene.addChild(sphere);
 
startRendering();
}
 
override protected function onRenderTick(event:Event=null):void
{
sphere.rotationY += 3;
super.onRenderTick(event);
}
 
private var sphere : Sphere;
private var myLoader : Loader;
private var bmpData : BitmapData;
}
}