Blog Papervision3D

Blog Français sur Papervision3D

Statsview voir les performances de vos scène Papervision3D.

Posté par Ocelyn le 13 octobre, 2009 | Pas de commentaire 
Publié dans Tutoriaux

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.

  1. package {
  2.         import org.papervision3d.materials.special.Letter3DMaterial;
  3.         import org.papervision3d.typography.Text3D;
  4.         import org.papervision3d.typography.fonts.HelveticaBold;
  5.         import org.papervision3d.view.BasicView;
  6.         import org.papervision3d.view.stats.StatsView;
  7.  
  8.         import flash.events.Event;
  9.  
  10.         public class BasicScene extends BasicView {
  11.                
  12.                 public function BasicScene()
  13.                 {      
  14.                         initStats();
  15.                         buildLetters();
  16.                 }
  17.  
  18.                 private function initStats() : void
  19.                 {
  20.                         var sv : StatsView = new StatsView(renderer);
  21.                         addChild(sv);
  22.                 }
  23.  
  24.                 private function buildLetters() : void
  25.                 {
  26.                         var font : HelveticaBold = new HelveticaBold();
  27.                        
  28.                         var material : Letter3DMaterial = new Letter3DMaterial(0xff00ff);
  29.                         material.doubleSided = true;
  30.                        
  31.                         txt3d = new Text3D("Blog Papervision3D", font, material);
  32.                        
  33.                         scene.addChild(txt3d);
  34.                        
  35.                         startRendering();
  36.                 }
  37.  
  38.                 override protected function onRenderTick(event:Event=null):void
  39.                 {
  40.                         txt3d.rotationY++;
  41.                         super.onRenderTick(event);
  42.                 }
  43.                
  44.                 private var txt3d : Text3D;
  45.         }
  46. }

Text3D dans Papervision.

Posté par Ocelyn le 2 octobre, 2009 | Pas de commentaire 
Publié dans Tutoriaux

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.

  1. package {
  2.         import org.papervision3d.materials.special.Letter3DMaterial;
  3.         import org.papervision3d.typography.Text3D;
  4.         import org.papervision3d.typography.fonts.HelveticaBold;
  5.         import org.papervision3d.view.BasicView;
  6.  
  7.         import flash.events.Event;
  8.  
  9.         public class BasicScene extends BasicView {
  10.                
  11.                 public function BasicScene()
  12.                 {      
  13.                         buildLetters();
  14.                 }
  15.  
  16.                 private function buildLetters() : void
  17.                 {
  18.                         var font : HelveticaBold = new HelveticaBold();
  19.                        
  20.                         var material : Letter3DMaterial = new Letter3DMaterial(0xff00ff);
  21.                         material.doubleSided = true;
  22.                        
  23.                         txt3d = new Text3D("Blog Papervision3D", font, material);
  24.                        
  25.                         scene.addChild(txt3d);
  26.                        
  27.                         startRendering();
  28.                 }
  29.  
  30.                 override protected function onRenderTick(event:Event=null):void
  31.                 {
  32.                         txt3d.rotationY++;
  33.                         super.onRenderTick(event);
  34.                 }
  35.                
  36.                 private var txt3d : Text3D;
  37.         }
  38. }

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

Posté par Ocelyn le 1 octobre, 2009 | 1 commentaire 
Publié dans Tutoriaux

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.

  1. package {
  2.         import org.papervision3d.events.InteractiveScene3DEvent;
  3.         import org.papervision3d.materials.ColorMaterial;
  4.         import org.papervision3d.objects.DisplayObject3D;
  5.         import org.papervision3d.objects.primitives.Sphere;
  6.         import org.papervision3d.view.BasicView;
  7.  
  8.         public class BasicScene extends BasicView {
  9.                
  10.                 public function BasicScene()
  11.                 {      
  12.                         buildSphere();
  13.                         viewport.interactive = true;
  14.                 }
  15.  
  16.                 private function buildSphere() : void
  17.                 {
  18.                         do3d = new DisplayObject3D();
  19.                        
  20.                         //—
  21.                         var material : ColorMaterial = new ColorMaterial(0×000fff);
  22.                         material.interactive = true;
  23.                         sphere = new Sphere(material, 200, 20, 20);
  24.                        
  25.                         //—
  26.                         var material2 : ColorMaterial = new ColorMaterial(0xff0000);
  27.                         sphere2 = new Sphere(material2, 80, 20, 20);
  28.                         sphere2.x = 320;
  29.                        
  30.                         //—
  31.                         do3d.addChild(sphere);
  32.                         do3d.addChild(sphere2);
  33.                         scene.addChild(do3d);
  34.                        
  35.                         sphere.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, handleClick);
  36.                        
  37.                         singleRender();
  38.                 }
  39.                
  40.                 private function handleClick(event : InteractiveScene3DEvent) : void
  41.                 {
  42.                         do3d.rotationY += 10;
  43.                         singleRender();
  44.                 }
  45.                
  46.                 private var sphere : Sphere;
  47.                 private var sphere2 : Sphere;
  48.                 private var do3d : DisplayObject3D;
  49.         }
  50. }

Fog avec Papervision3D.

Posté par Ocelyn le 29 septembre, 2009 | 2 commentaires 
Publié dans Tutoriaux

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.

  1. package {
  2.         import org.papervision3d.core.render.filter.FogFilter;
  3.         import org.papervision3d.materials.ColorMaterial;
  4.         import org.papervision3d.materials.special.FogMaterial;
  5.         import org.papervision3d.objects.primitives.Sphere;
  6.         import org.papervision3d.view.BasicView;
  7.  
  8.         import flash.events.Event;
  9.  
  10.         public class BasicScene extends BasicView {
  11.                
  12.                 public function BasicScene()
  13.                 {      
  14.                         initFog();
  15.                         buildSphere();
  16.                 }
  17.                
  18.                 private function initFog() : void
  19.                 {
  20.                         var fogMaterial : FogMaterial = new FogMaterial(0xffffff);
  21.                         renderer.filter = new FogFilter(fogMaterial, 50, 1500, 2000);
  22.                 }
  23.  
  24.                 private function buildSphere() : void
  25.                 {
  26.                         var material : ColorMaterial = new ColorMaterial(0×000000);
  27.                         material.smooth = true;
  28.                        
  29.                         sphere = new Sphere(material, 200, 20, 20);
  30.                         scene.addChild(sphere);
  31.                        
  32.                         startRendering();
  33.                 }
  34.  
  35.                 override protected function onRenderTick(event:Event=null):void
  36.                 {
  37.                         sphere.z += 5;
  38.                         super.onRenderTick(event);
  39.                 }
  40.                
  41.                 private var sphere : Sphere;
  42.         }
  43. }

Shadow sur une texture image.

Posté par Ocelyn le 24 septembre, 2009 | 2 commentaires 
Publié dans Tutoriaux

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.

  1. package  {
  2. import org.papervision3d.lights.PointLight3D;
  3. import org.papervision3d.materials.BitmapMaterial;
  4. import org.papervision3d.materials.shaders.PhongShader;
  5. import org.papervision3d.materials.shaders.ShadedMaterial;
  6. import org.papervision3d.objects.primitives.Sphere;
  7. import org.papervision3d.view.BasicView;
  8.  
  9. import flash.display.BitmapData;
  10. import flash.display.Loader;
  11. import flash.events.Event;
  12. import flash.net.URLRequest;
  13.  
  14. public class BasicScene extends BasicView {
  15.  
  16. public function BasicScene()
  17. {
  18. initMaterial();
  19. }
  20.  
  21. private function initMaterial() : void
  22. {
  23. myLoader = new Loader();
  24. myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadComplete);
  25. myLoader.load(new URLRequest("URL IMAGE"));
  26. }
  27.  
  28. private function onLoadComplete(event : Event) : void
  29. {
  30. myLoader.contentLoaderInfo.removeEventListener(Event.COMPLETE, onLoadComplete);
  31.  
  32. bmpData = new BitmapData(myLoader.width, myLoader.height);
  33.  
  34. bmpData.draw(myLoader);
  35.  
  36. buildPlane();
  37. }
  38.  
  39. private function buildPlane() : void
  40. {
  41. var light : PointLight3D = new PointLight3D();
  42. scene.addChild(light);
  43.  
  44. var material : BitmapMaterial = new BitmapMaterial(bmpData);
  45. var ps : PhongShader = new PhongShader(light, 0xffffff, 0×000000, 10);
  46.  
  47. var shadeMaterial : ShadedMaterial = new ShadedMaterial(material, ps);
  48. shadeMaterial.doubleSided = true;
  49.  
  50. sphere = new Sphere(shadeMaterial, 200, 12, 12);
  51. scene.addChild(sphere);
  52.  
  53. startRendering();
  54. }
  55.  
  56. override protected function onRenderTick(event:Event=null):void
  57. {
  58. sphere.rotationY += 3;
  59. super.onRenderTick(event);
  60. }
  61.  
  62. private var sphere : Sphere;
  63. private var myLoader : Loader;
  64. private var bmpData : BitmapData;
  65. }
  66. }
Page 2 sur 10«12345»...Last »