inductible

The purpose of this tutorial is to identify a viable pipeline for the production of 3D assets in open-source modelling tool Blender, for use with open-source Flash 3D api Papervison. Basically I mean to describe a method of getting an asset from Blender into PV3D, in a reproducible and consistent fashion.

This tutorial covers the export of static UV textured models for Papervision 2.0 (Great White branch) using the Collada (.dae) open format.

Source:
[download zip - 227kb]

We’ll be dealing with the latest version of Blender (as of July 2008): 2.46 - download it from blender.org

Blender employs Illusoft’s Collada export script, in its export to the .dae format, readable by PV3D; this is included in the typical install of 2.46 as far as I’m aware, but hit that link if you have any trouble with the export as you may need to install the python runtime (version 2.4) linked from the Illusoft supporting documentation.

1. Begin
Fire up Blender. We’ll start with a ‘complex’ mesh in order to get right up to speed with the kind of object you might like to throw around in Flash - the Blender mascot monkey will do just nicely.

- Start a fresh blender file and delete the default cube
- Press space to bring up the contextual menu; select add > mesh> monkey

- Monkey will need rotated as he’s facing upwards by default. In side view (View > Side) select monkey (right click him) and press ‘R’ to begin rotate transformation. Turn him so he faces forwards.

2. Creating a UV texture map
Lets give the object a suitable skin…

- Select the monkey (right click him)
- Go to edit mode (press tab)
- Make sure that all the faces are selected (press ‘A’ so that the monkey is highlit in yellow)
- Unwrap the mesh; the default smart projection settings will work fine for now: select mesh > UV Unwrap > Unwrap (smart projections) > OK

- bring up the UV/Image Editor pane

- We need to export the UV face layout; select UVs > Scripts > Save UV Face Layout > OK

- Choose a location to save the image as a Targa file [.tga]

- Lets make this targa image available to Flash in a format in can read: open the file you just saved in Photoshop and save it for the web in a suitable format (.png, .jpg or .gif should suffice). In fact, whilst we’re in Photoshop, you could get creative and draw a texture onto the UV map

- Back in Blender, we need to link our monkey mesh to the image we just saved. Select Image > Open > …and choose your skin image saved from Photoshop.

So far so good:

3. Exporting
In fact, we’re ready to export the .dae!

- Make sure that the monkey is the only selected object in the scene; Select File > Export > Collada 1.4(.dae)

- On the export screen choose the same directory for the export as the location you saved your texture. Choose [Triangles], [Only Export Selection] and [Use UV Image Mats]; then press Export and Close:

4. Fixing a bug

Here’s a source for possible frustration in translating from Blender into Papervision - the image path in the .dae xml is incorrect. Open the .dae in your favourite xml editor. We’re looking for a single reference to our texture image, within a node named [library_images] > [init-from]. I find it easy to simply search for my texture extension e.g. ‘.jpg’ - this takes me right to the source of the problem; an absolute path to the texture file. Delete the path up to the file name e.g. it should read ‘monkeyFace.jpg’ only. A quick note, using the [Use Relative Paths] option from the Blender Collada exporter does not rectify this problem - you need to manually fix the path in either case.

An important final note regarding this path - ultimately it should point to the texture file relative to the .dae that requires it. Not relative to your .swf or .html page, like we’re generally used to with Flash.

5. Into Papervision
The following code initialises a PV3D 2.0 scene and places our textured .dae, with a simple yaw rotation in each frame:

// IMPORT
import flash.display.MovieClip;
import flash.display.StageScaleMode;
import flash.display.StageAlign;
import flash.display.Stage;

import flash.events.Event;

// -Papervision3D
import org.papervision3d.objects.parsers.Collada;
import org.papervision3d.cameras.*;
import org.papervision3d.scenes.*;
import org.papervision3d.render.*;
import org.papervision3d.view.*;

public class MAIN_BlenderImportDemo extends MovieClip{

// PRIVATE VARS —————————————————————–

public var viewport :Viewport3D;
public var scene :Scene3D;
public var camera :Camera3D;
public var renderer :BasicRenderEngine;

public var monkeyObj :Collada;

// CONSTRUCTOR ——————————————————————
public function MAIN_BlenderImportDemo(){

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

init3D();

addEventListener(Event.ENTER_FRAME,update);
}

// PRIVATE METHODS ————————————————————–

public function init3D():void{

renderer = new BasicRenderEngine();
scene = new Scene3D();
camera = new Camera3D();

camera.z = -1000;
viewport = new Viewport3D(0,0,true,true);
addChild(viewport);

monkeyObj = new Collada(”assets/monkeyFace/monkeyFace.dae”); // PATH RELATIVE TO HOSTING HTML DOC
monkeyObj.scale = 2;
scene.addChild(monkeyObj);

//initial render
renderer.renderScene(scene,camera,viewport);

}

private function update(par_e:Event):void{
monkeyObj.yaw += 1;
renderer.renderScene(scene,camera,viewport);
}

}
}