BLITZ creativity at its finest. RT: @vejnoska Probably should have expected this...http://t.co/VvY6b62ey6

posted 23 hours ago on twitter

close

Paper Visions Come to Life in 3D Flash

There are many open source Flash projects out there these days, but one of the most exciting ones is PaperVision3D. This relatively new API empowers you to import and render 3D objects in real time! Today we will be presenting this subject at the LA Flash User Group, a web cast of the presentation should be on their site shortly so be sure to head over to http://www.laflash.org/ to check it out.

I know you might be thinking “fine we can do 3D in Flash, but why bother?” or “what does that empower me to do, that we can’t do already?” So in our effort to explore this ever opening envelope of technology, and answer that exact question we have cooked up a few little demos to show just what is possible in Flash 8 and 9, and how that can totally change the web as we know it.

Sample Space Simulation

Let’s say you want to build an educational site that tours the solar system. But you don’t want just another plain old catalogue type website, you want more. Something that can really give kids an idea of the scope and scale of space, the planets, and our sun. Using PaperVision, you could model the solar system, and then even animate the planets orbiting through space. If your math is really good, you could even make them match the actual locations of the real planets at any given moment.

To test the plausibility of this, we set up a little space sim, that makes use of a custom camera class that we built on top of Papervision. Click the image below to take it for a test run.

Click here to launch demo

Use the W, A, S, and D keys to move.
Move your mouse away from the center to look.

Sample First Person Shooter

Let’s say that instead you want to make a hip game for a viral marketing campaign, but you want it to have the look of a modern game like Tony Hawk, or Half-Life. Now that is within reach, and all while still staying in the Flash player. Below is a little demo that uses almost identical code to the one above, the only difference being a different control scheme for the look controls.

Click here to launch demo

Use the W, A, S, and D keys to move.
Click and drag your mouse to look.

Getting Started…

The COLLADA Plugin
“COLLADA defines an open standard XML schema for exchanging digital assets among various graphics software applications that might otherwise store their assets in incompatible formats. COLLADA documents that describe digital assets are XML files, usually identified with a .dae (digital asset exchange) filename extension.” -Wikipedia

Installing COLLADA
The COLLADA plugin is available for current versions of MAX, Maya, and Blender and can be downloaded from http://www.feelingsoftware.com/. Download and install the plugin, it should auto detect which 3D package you are using and install the appropriate files.

Getting PaperVision

PaperVision3D is an open source project started by Carlos Ulloa, it’s a simple to use graphics API in both AS2 and AS3 flavors. A copy of the example .fla and model files used to create the “Sample First Person Shooter” source files are located here. The most recent build of PaperVision can be retrieved from OSFlash’s Subversion Repository (SVN) here. If you do not use the Subversion control system, or want to use the same build we are using for this tutorial, you can download a zip of the class package in AS2 here. (Revision 21)

Regardless of how you get PaperVision, once you have a copy of it on your machine you will need to remember to add the class path to PV3D in your publish settings. The

Workflow

Preparing your model
The first thing we need is a textured low poly model. The processes of low poly modeling, texturing, and unwrapping are sophisticated arts unto themselves and the details of that process is outside of the scope of this humble post. Suffice it to say though that there is an incredible volume of information on these subjects available in book stores, online, and taught in fine institutions around the world, not to mention many are available for sale on TurboSquid’s website.

Assuming you, already have those bases covered, here’s what you need to do:

1. Open up your 3D application of choice, and import or build your low poly model.

Low poly room model without texturing

2. Then you are going to want to apply a UVW modifier to your model, and unwrap and layout your UVs for texturing in Photoshop. Essentially painting on your flattened model.

UVW unwrap

UVW texture in Photoshop

3. The next step is to apply that material to the diffuse channel of a default material, and then apply that material to your model.

Applying your texture to your model

4. You should now see your newly painted textures on the faces of your model. If you would like to add lighting effects or shadows to your model, now is the time to add lights and set up your scene. When you are finished, open up the rendering dialogue and render to texture, this will rewrite your .jpg texture so that lights and shadows are now “baked” in.(Baked is the gaming industry term for rendering the environment effects back onto the existing textures so that you don’t need to render those effects at run-time. More realisim, with less clock cycles. Careful though, don’t bake shadows onto things that will move, as it wont look right.)

Textures applied to your model and lights added to the scene

Your new texture .jpg with the lates baked in

Exporting Your Model
5. Now we are ready to export the model and import it into flash. This is as simple as selecting your model, and going to File -> Export Selected and selected the COLLADA (.DAE) file type from the drop down menu.

File -> Export Selected Select DAE file type

Ready To Go
Now your model is ready to be imported into PaperVision3D, if you’ve downloaded the provided “Sample First Person Shooter” files you can have it load your model and texture by simply replacing the texture in the .swf’s library, and saving your new model over the existing one, or by changing the path to the model in the main.as file.

Have fun!

{ 40 comments }

oliver_l1 February 8, 2007 at 7:48 am

hi,

is there a collada plugin for cinema 4d 10 ?

MFG

Wim Vanhenden February 9, 2007 at 4:48 am

Very nice!

Major thank you!

Antonio February 9, 2007 at 10:14 am

Hey guys,

Can anyone help me in explaing th following line in the fla of this demo…

this.__proto__ = Main.prototype;
Main["apply"]( this, null );

I understand the prototype, but the second line is a bit confusing. Can anyone shed some light. Thanks in advance.

remi February 9, 2007 at 12:28 pm

Nice work !

Wanted to provide a few more pointers regarding COLLADA (all caps).
http://www.khronos.org/collada is where you will find the specification
(CILLADA is an industry standard, hosted by the Khronos Group, at the same level as OpenGL and OpenGL ES)
http://www.collada.org is the community web site, where you will find all the links (See quick links on the first page), and all the information in the forum. There’s lots of source code, samples there, as well as information about tools that have COLLADA support, where to find those, where to report bugs…

Steven de la Torre February 12, 2007 at 5:27 pm

I found this post, and it appears that as of right now there is not a built in exporter for Cinema 4D. However it does seem like the community is putting the pressure on for an exporter to be made. If you would like to tell Maxon, Cinema4D’s creator that you would like this feature, please submit a feature request here.

Now don’t forget that you can also use the ASE file type, you just have to use the ASE object constructor in place of the COLLADA one. The PaperVision3D team has talked about focusing on supporting COLLADA primarily, but ASE totally works as of this writing.

Also keep in mind that you may be able to use another application to open your Cinema file and do the conversion for you.

Bunga February 27, 2007 at 4:37 pm

http://www.bit-101.com/blog/?p=857

A bit of an explanation of the wierd __proto__ syntax. I’m not sure if I quite understand it though.

Rostislav Siryk March 13, 2007 at 4:36 am

Johh, I’ve tried to export simple box from Maya 7.0 using COLLADA plugin, but when I try to use this model in PV3D, I get strange object with 1-2 triangles rendered.

Is Maya work flow supported in PV3D at the moment? Probably I make mistakes (I’ve tried to triangulate objects before export from Maya, but with no success)?

jdamicobna April 17, 2007 at 3:15 am

This is a great post about PV3D, Blitz is a great authority. But regarding this:

>

Where can I find this, either a direct link or directions from the laflash site? Looked around at laflash and could not find it.

slowx April 17, 2007 at 7:29 am

Can papervision3d create simple 3D objects from scratch, like cubes etc.?

I’m not a 3D guy, and don’t have Maya etc.

Can that work?
If so, any tutorials for that?

Steven de la Torre | BLITZ April 17, 2007 at 11:09 am

In answer to your question, PaperVision does have native 3D primitives, I think they are limited to Box, Cone, Sphere, and Plane. A simple example of how to use the Plane primitive and the Camera can be found in the examples folder under PaperCloud in the SVN repository: http://svn1.cvsdude.com/osflash/papervision3d

If you just want to do some experimental stuff, this should fit the bill nicely. You can also manually code your own shapes or change existing ones. However if you would like to delve more into games, or other complex content, then I would strongly suggest getting a 3D modeling environment that you are comfortable with. They can be somewhat expensive, so if you don’t want to drop any dough on Max or MAYA then you can get Blender, which is totally free and has a strong community. There are many free ware 3D tools out there, I’m just suggesting the ones that I have personally used.

3D is a whole science unto itself. The process of preparing models is a bit of an art, and the requirements of each individual project may require different tools of the trade. Moreover some concepts like normals and UVW mapping can only really be understood by digging into a 3D app and learning the hard way.

Good luck

anonym April 20, 2007 at 4:44 am

Hello, I don’t understand really the process above.
So my question is:
After building the model with 3Ds Max (just the model without textures), then you go to photoshop and build the texture, but my problem is how do you apllly the texture to the medel and WHERE ?? is that in main.as ??
And how dose the textures (the file roomCompleteMap) match perfectly with each object in the room ?!!!!!!!!!

Can you explain in 2 lines how you did that project .

Thinks a lot.

re_sync April 25, 2007 at 7:48 pm

Hello, and thanks for this post + source.

I tried mucking around with the PaperCloud example ( it’s well over my head ). I’m pretty sure I have it all set up properly. I defined the class path as ../../src, yet I still get a compiler error. Specifically, “1017: The definition of base class CameraObject3D was not found.” I’ll continue checking out the other stuff.

Thanks again.

Gianluca May 18, 2007 at 12:16 am

I’ve tried to do that with blender(a simple cube has been made) but it dosn’t work and all i can see is a sky as background.

guy May 30, 2007 at 5:09 am

this.__proto__ = Main.prototype;
Main[”apply”]( this, null );

this just loads up the external AS file

fontvir.us May 30, 2007 at 5:10 am

this is a good tutorial. im diggin the PV3D
now i gotta getin 3DSM! lol…

iggy July 4, 2007 at 1:24 am

hello!
DelaCamera is missing… i can’t find it in pv3d source

Steven de la Torre | BLITZ July 5, 2007 at 12:25 am

The DelaCamera Class is located in the .zip included with the tutorial. Along with that class the zip includes all the other classes form Papervision3D at the exact time I did this project. So if you’re having alot of trouble with converting it to match with the updated repository you can work entirely off of this package http://labs.blitzagency.com/wp-content/070207/PaperVisionAS2.zip

peace

iggy July 6, 2007 at 11:14 pm

hi!
in the meanwhile i’ve replaced delaCamera whit freeCamera+objectController and it works pretty cool but i couldn’t replace collada model… only one wheel of focus:) and nothing of models i’ve made in sketch up.
so please, if you have some tips, help me!

Art Gabriel July 8, 2007 at 6:01 pm

Yeh! cool…

is there AS3 version of this simple room? im a beginner and i have flash cs3 installed which is more compatible/supported (i think) with AS3 than AS2… thanks and godbless,,,

Art Gabriel July 8, 2007 at 7:16 pm

well, its so nice… just 1 thing… the camera passes through walls? i saw some tutorials which the camera is locked / tweening on the curved line (3d splines?) can it b (the camera) contain in a box??? thanks

Steven de la Torre | BLITZ July 12, 2007 at 12:04 pm

Hey Art,

There is not an AS3 version of this particular project, but If you download the source from the SVN repository (now available on Google Code) you will find several examples that can be quickly turned into this sort of thing.

As to the camera passing through walls, this example was used to illustrate the possibilities of PaperVision3D and was not really fine tuned to be a real game engine. So things like collision detection with the walls was never added. Despite that, you can definitely implement those features yourself.

Happy coding,
dela

Art July 12, 2007 at 6:05 pm

Hi dela,

Thanks and more power to you!

Art :)

sebastian August 17, 2007 at 2:29 pm

to get a 3D life player

Satu November 9, 2007 at 12:34 pm

Omg, I’m sorry I’m this stupid but I have done a *.dae file with 3ds max and.. what do I do then??
I don’t get it “import it to papervision3D”, umm.. I (think I did) installed papervision3d (http://wiki.papervision3d.org/index.php?title=Getting_Started_FAQ#How_can_I_download_Papervision3D.3F)
but it’s just a plugin to flash? Where can I use the *.dae file and how will I use it?

Jack November 28, 2007 at 10:22 am

There is no collada plugin for cinema 4d, but you can export your cinema meshes as 3ds files, then import them into 3ds, and export as dae. Just make sure to triangulate those meshes before your export it!!

sstark December 15, 2007 at 8:49 pm

Nice job, pv3d is a lot of fun. I’ve done a couple tests, and now have made a small game with it. come have a look:

http://www.kongregate.com/games/sstark/christmas-chaos?referrer=sstark

M. Allen West December 20, 2007 at 2:20 pm

I’m not sure you need a plug for 3D max 9 after reading this….
http://update.multiverse.net/wiki/index.php/Installing_the_3ds_Max_COLLADA_Plugin

If you are using 3ds Max 9, you do not need the ColladaMax plugin from Feeling Software, since 3ds Max 9 includes a COLLADA exporter. If you have already installed the ColladaMax plugin, uninstall it.

With version 9, the internal FBX plugin does not currently work properly for animated meshes. (Max 9 includes its own COLLADA exporter in the form of the autodesk FBX exporter),(this also exports .dae files though it is not well documented).

NOTE: You will likely need to manually edit materials exported from 3ds Max 9. Occaisonally, after exporting, a model will appear incorrect in the viewport (specifically after being moved). This corruption persists in the model if it is saved. If you encounter this, do not save your model after exporting.

M. Allen West December 20, 2007 at 6:01 pm

So what I’d like to know is do I need a plug for max 9.
If so what one?
If not than how do I do this with what comes with max 9?
Any help would be great thanks.

Niechorze December 24, 2007 at 3:21 pm

Nice work – I’ll try it in next week and I’ll be back, See you soon ,,,

M. Allen West January 6, 2008 at 10:07 am
remy le beau January 13, 2008 at 12:11 am

Hello Steven! I’m not a flash actionscripter but more of a 3D artist, I was wondering if there is a way to script-in collision detection between the model(s) and the camera(s) (Actually how to do this)? And can we use multiple 3D objects in one scene (Again how)? Thanks in advance.

Bert Van Eeckhout March 21, 2008 at 2:41 pm

Hey, thanks a lot dude.

This tutorial was very handy for me.
I am wondering that it’s possible to move a separate vertex?
Because i am trying to make a application that reads a head movement by a web cam, and translate these movements to a 3D model in paper vision.

david April 4, 2008 at 4:07 pm

to do collison youi could use wow engine (3d physics)or do top view simple 3d detection

david April 4, 2008 at 4:07 pm

*2d detection

farah September 17, 2008 at 11:40 pm

Has anyone been able to re code this project in actionscript 3, because when ever i do i get errors.

var material :BitmapMaterial = new BitmapMaterial( texture );
material.oneSide = false; // Make it double sided

// Load sphere
sphere = new Collada( material, “colladaRoom.dae” );

i get an error with the above. Please can some help me

gecko December 18, 2008 at 7:18 am

for some reason i get ‘The class or interface ‘Main’ could not be loaded.’ why is this??

alexmathayes February 3, 2009 at 3:37 pm

Hi!

First of all a very tutorial indeed. this will save me a lot of time, BUT

The issue that I am facing is that I have a textured model made in 3ds max. Now there are around 28 different texture file that have been used for the different things in the model made in 3ds Max. How do I compile all of them to make it into 1 texture file? If not then how do I use all the different texture files?

thanks in advance

M. Allen West February 3, 2009 at 3:47 pm

“Rostislav Siryk Says:
March 13th, 2007 at 4:36 am
Johh, I?ve tried to export simple box from Maya 7.0 using COLLADA plugin, but when I try to use this model in PV3D, I get strange object with 1-2 triangles rendered.” Have you tried zooming out in PV3D, some times it doesn’t show up correct if your zoomed in to close. you may be seeing the inside of the object, or it wasn’t centered correctly when exported.

BdcdBluerainsc June 4, 2009 at 12:58 am

Hello Friend,

Please go through this link http://70.86.44.10/~demo/design/firewolf/index-main.php.
I want to make a gallery just like the header section. Should I use Papervision3d to make it? Can any one give some example of this kind of gallery?
I have a very little knowledge of pv3d. Can any one help me.

arindam.mojumder@gmail.com

Crazy45 October 22, 2009 at 11:54 am

Dear sir, What a sublimely satisfying anecdote. ,