Inleiding
Nu Flash wat serieuzer werk is geworden, verschijnen er steeds meer leuke dingen. Neem nu Papervision3D, één van de 3D engines die je kunt gebruiken voor Flash. Jawel, ook met Flash kun je ook eenvoudige 3D dingen doen.

In dit blog artikel wil ik een korte introductie/tutorial geven op Papervision3D. Dit omdat het simpelweg een van de meest gebruikte 3D engines voor Flash is en vooral, omdat het leuk is.

3D engine
Wat is een 3D engine? 3D engines zijn vaak de motoren (het woord zegt het eindelijk al) achter de modernere games. Neem bijvoorbeeld de Unreal engine, Tech 5 engine, Frostbite etc. Met deze engines kunnen 3D objecten worden weergegeven op een tweedimensionaal vlak. Uiteraard kunnen zulke engines nog meer dan alleen dit (zoals interactie met de gebruiker, effecten etc.) maar in feite is dit de basis van elke 3D engine.

Papervision3D is eigenlijk ook zo’n soort engine maar dan voor Flash/Flex. En, niet al te onbelangrijk, bevat niet alle functionaliteit van zulke uitgebreide engines maar beperkt zich voornamelijk tot de basis. Het fijne aan PV3D is, doordat het voor Flash is, dat je geen aparte software nodig hebt om het voor een grote groep gebruikers beschikbaar te stellen. Uiteraard heb je wel de Flash plugin nodig maar die heeft vrijwel iedereen geïnstalleerd tegenwoordig.

3D wereld
Wat is die basis? Grofweg gezegd heb je een 3D omgeving, een aantal objecten en een camera. Een object bestaat meestal uit een X aantal polygonen en die kunnen op hun beurt worden aangekleed met een “texture”. Een object kan ook op andere manieren worden aangekleed door bijvoorbeeld combinaties te maken met textures en effecten.

Objecten kunnen worden geplaatst in een virtuele 3D wereld. Dit wordt in PV3D een “scene” genoemd. Door een camera te gebruiken kun je bepalen hoe een gebruiker de scene bekijkt.

Voor dit blog artikel zal ik mij nu alleen concentreren op de basis.

Aan de slag
Ok, nu het echte werk. PV3D is zo opgezet dat de gemiddelde Flex programmeur vrijwel direct aan de slag kan. Heel erg ingewikkeld hoeft het in eerste instantie niet te worden. Wat wel even wennen is, is dat we nu ook te maken hebben met een Z as.

Net als in Flash kun je in PV3D heel makkelijk objecten op het scherm “plaatsen” dmv. het container principe (tree). Elk object is zo’n container. De 3D wereld (Scenario), de objecten zelf (DisplayObject3D) en zelfs de camera’s (Camera3D).

The Great White
De beste versie om mee aan de slag te gaan is PV3D The Great White 2.0. Dit is een beta 2.0 versie van een nog te releasen versie. Ondanks dat het een beta versie is, is er prima mee te werken. Met subversion kan je de boel uitchecken: http://code.google.com/p/papervision3d/source/checkout.

Zorg er uiteraard voor dat je de library in Flex include in je project.

Een plane!
Een plane? Ja een plane. Een plane is “plat” een vlak. Op dit vlak gaan we een bitmap projecteren (texture). We beginnen eerst met het aanmaken van het project “Hello” en het declareren van onze variabelen (tip: maak in Flex een Actionscript 3.0 project aan).

package
{
  import flash.display.Sprite;
  import flash.display.Bitmap;
  import flash.display.BitmapData;
  import flash.display.DisplayObject;
  import flash.events.Event;
  import org.papervision3d.cameras.*;
  import org.papervision3d.materials.*;
  import org.papervision3d.objects.*;
  import org.papervision3d.objects.primitives.Plane;
  import org.papervision3d.render.BasicRenderEngine;
  import org.papervision3d.scenes.*;
  import org.papervision3d.view.*;
 
  [SWF(backgroundColor="0xFFFFFF")]
  public class pv3d extends Sprite
 
  {
    private var viewport:Viewport3D = new Viewport3D(640, 480);
    private var camera:Camera3D;
    private var scene:Scene3D = new Scene3D();
    private var renderer:BasicRenderEngine = new BasicRenderEngine();
    private var plane:Plane;
 
    [Embed(source="afbeelding.png")] private var textureClass:Class;
    private var texture:Bitmap = new textureClass();
  }
}

We hebben nu alle imports die we nodig hebben en properties. De “viewport” is het vlak waarop onze 3D wereld (scene) straks getekend wordt. We hebben deze viewport nu op 640 x 480 pixels gezet. Hoe hoger deze resolutie gezet wordt, hoe trager de applicatie straks wordt. Let er goed op dat Flash momenteel geen 3D acceleratie ondersteund. PV3D toepassingen kunnen dus heel erg traag worden.

Terug naar de 3D wereld. Het is tijd dat we de camera op de juiste plek zetten in onze 3D wereld:

public function pv3d()
{
  // create the camera
  camera = new Camera3D();
  camera.x = 0;
  camera.y = 90;
  camera.z = -1450;
  camera.rotationX = 0;
 
  addChild(viewport);
}

Met de regel addChild(viewport) voegen we het gerendere vlak nu aan de canvas van de applicatie toe.

Nu is het tenslotte zaak dat we elk frame de beelden “renderen” naar de viewport. Deze functionaliteit nemen we op in de constructor van de applicatie (pv3d).

...
  addEventListener(Event.ENTER_FRAME, function():void
  {
    renderer.renderScene(scene, camera, viewport);
  });
}

Nu we kunnen renderen, hebben we alleen nog niet veel om te laten zien. We gaan nu een plane maken aangekleed met een texture. We gaan een methode initObject() aanmaken waarin we de plane initializeren. De plane maken we even groot als de texture waar we deze mee aan gaan kleden.

public function initObject():void
{
  var bitmapData:BitmapData;
  var bitmapMaterial:BitmapMaterial;
 
  bitmapMaterial = new BitmapMaterial(texture.bitmapData);
  ...

Nu is een texture normaal alleen te bekijken van één kant. Aangezien we hier met een plat object te maken hebben, zou wel handig zijn om het aan beide kanten aan te kleden. Dat kan als volgt worden gedaan:

bitmapMaterial.smooth = true;
bitmapMaterial.doubleSided = true;

Tevens geven we hierboven aan dat “smoothing” moet worden toegepast. Dit zorgt ervoor dat als je sterk in of uitzoomt op een bitmap, de bitmap niet al te korrelig wordt. Nu is het zaak dat we de plane gaan aanmaken:

plane = new Plane(bitmapMaterial, texture.width, texture.height, 2, 2);
plane.x = 0;
plane.y = 0;
plane.z = 0;
scene.addChild(plane);

Zoals je ziet geven we bij het aanmaken van de plane aan dat we bitmapMaterial willen gebruiken als texture. En als laatste regel voegen we de plane toe aan de scene. Nu moet er alleen nog voor gezorgd wordt dat de plane wordt aangemaakt voordat er gerenderd wordt. De constructor komt er dan als volgt uit te zien:

public function pv3d()
{
  // create the camera
  camera = new Camera3D();
  camera.x = 0;
  camera.y = 90;
  camera.z = -1450;
  camera.rotationX = 0;
 
  addChild(viewport);
 
  initObject();
 
  addEventListener(Event.ENTER_FRAME, function():void
  {
    plane.rotationX++;
    plane.rotationY++;
    plane.rotationZ++;
    renderer.renderScene(scene, camera, viewport);
  });
}

Run et voila! Je hebt nu een roterende plane!

Conclusie
Je kunt uiteraard nog veel meer met PV3D. Kijk op http://blog.papervision3d.org/ voor een paar goede voorbeelden. Je kunt de camera bewegen, gebruikersinteractie aangaan op 3d objecten etc. etc. etc. PV3D is een leuke techniek om eens een keer wat anders te gaan doen met Flash. 3D icm. met userinterfaces kan voor bepaalde toepassingen de toekomst hebben. Denk aan bijvoorbeeld aan de bekende Apple coverflow interface.