Everyday 3D

Creative use of technology // A blog about 3D Flash and Actionscript by Bartek Drozdz

Paper simulation in with AS3Dmod and Away3D

Since I released the bend modifier a lot of people have been asking how to bend an object not only along one of its axes, but along any angle. That was clearly a feature missing, but I also didn't have a clue ho to do that. Now, a after a good few days of struggle, and with a little help from my friends - here it is.

The Bend class now takes 3 arguments in the constructor, the third being the angle at which the bend is executed. Please mind, that this argument expects an angle in radians. In the code it looks like this:

Actionscript:
  1. var mesh:Mesh = [a mesh]
  2. var stack:ModifierStack =
  3.     new ModifierStack(new LibraryAway3d(), mesh);
  4. var bend:Bend = new Bend(1, .5, 1.2);
  5. stack.addModifier(bend);
  6. stack.apply();

Of course, there is also a getter/setter for the angle, which allows to change the value dynamically, and to use libraries such as Tweener to animate it.

The Bend modifier is now part of the AS3Dmod library. Since AS3Dmod is cross-engine, the above demo was done with Away3D, but of course, the same functionality can be used with other engines, including Papervision3D.

For those of you who remember the initial bending demo, I used a 100$ bill as a graphic element then. I thought it would fun to be consistent and to stay in the American theme. Therefore, this time you can play with the Declaration of Independence. Fans of "National Treasure" should be delighted.

As usual the sources are available and you can get them here. I hope you like the demo and that you will find the code useful. To compile it you need the latest versions of AS3Dmod, Away3D and Tweener libraries.

Update: what’s up with AS3Dmod?

A few weeks passed since I wrote about the AS3Dmod library and released an initial version of the code. Some new stuff has happened since, so here's an update.

First of all AS3Dmod has a new team member - Makc. Makc has been involved in several AS open-source projects, most notably Sandy3D. You can read more about Makc, here, where you will also find some cool Flash experiments.

The code has also evolved, and was moved to a modest 0.2 version. The most important changes are some fixes in the imports that prevented the compilation of the project so far.

The 0.2 version has 5 new modifiers: Bloat, Twist, Taper, Skew and a UserDefined modifier that allows to create custom vertex manipulation and easily integrate it into the stack.

Other then that, there is now an ANT script that allows to compile the demos for all 4 engines, and also to generate API Docs. Of course the documentation is ever evolving, but the latest version is always available here. Please note, that API docs are synchronized with the contents of the SVN repository. The zipped sources available on the project home page are there for reference, but they quickly become outdated.

Last but not least, there already are a few demos that use AS3Dmod. I allowed myself to gather a short list of what I found out there:

Thanks to everyone! We will try to put in more and more features, document the code and also create a tutorial, so stay tuned.

AS3Dmod, a modifier library for all Flash 3d engines

Meet AS3Dmod, a cross-engine 3d modifier library for Flash. Sounds cool? Yeah, I am sure it does! Just in case, however, let's see what it does step by step.

A. Cross-engine. 3D in Flash is around here for some time now, and it resulted in quite a few engines available. Each engine has some cool features of its own, and sometimes having to choose between them can result in a headache. While AS3Dmod won't solve this situation, it is an attempt to create some functionality that will be available across different engines.

B. Modifier library. The readers of this blog probably remember the Bend modifier I wrote for PV3D. Well, it is one of many possible modifiers. Classic 3d packages come equipped with at least a dozen of them, which include: taper, twist, noise, skew, etc. Modifiers are basically functions that can be applied to a 3d object to transform it in a certain way. They can be used separately, but when combined they become a very powerful tool. In this, they are much like filters in Photoshop.

C. Flash. Instead of explaining how modifiers work in Flash, here's a short list of some of the possible uses: a sheet of paper, a ribbon, a waving flag, water, cloth, a tree or other plant, a butterfly, a birds wing... They could also be helpful in animating a human face, and in many other situations where animations exported from 3d editors might fall short.

Does it sound cooler now? It sounded to me when I had the idea a few days ago. As you can imagine I was not able to develop anything close to a full featured library in this short time. Nevertheless, I publish what I was able to come up so far, so that you can all see where I am heading. For the moment, here's what's in there:

- a framework for creating static and animated modifier stacks
- 3 basic modifiers: Noise, Bend and Perlin
- plug-ins for the most popular engines: Papervision3d, Away3d, Sandy3d and Alternativa3d
- a simple demo for each engine
- basic documentation not yet :)

Source files. The project is at Google Code. You can do a checkout from SVN or download a ZIP.

Demo. In the repository you can find 4 demo SWFs, one for each engine. It features a basic stack of 4 modifiers - Noise, Perlin and Bend x2. You can also compile the project yourself. Just follow the instructions I added in the document class code.

Notes.
1. There is no plug-in for FIVe3D - that is because this engine works in a quite different way and doesn't use vertices which are fundamental to modifiers.
2. The Alternativa3d version works in a bit weird way. I think, it is because there's something I don't understand about this engine, but I will be figuring this out.

Away3d: experimenting with light and shading

Click to see the demo

A couple of weeks ago the Away3D team announced the release of version 2.0. The news was accompanied with a stunning demo called Green Planet. I was impressed, so I downloaded the source and started to play with it.

From the start I was interested in checking some light and shading possibilities that Away3D offers. I was not disappointed. It turns out that Away3D has some really nice features and they are easy to use. Not everything is well documented, so I had to opt for a trial-and-error technique, but it is ok, as it was released just a few days ago one cannot expect a full documentation. Click on the image above to see a demo I created. Below I share some hopefully useful tips.

For the light source I use the PointLight3D. It takes as initObject argument where you need to pass its x, y and z coordinates, but also some settings for the light itself. We have a brightness parameter, which is pretty self explanatory, and three others: ambient, diffuse and specular. Now, if you don't have a clue what these are, as it was the case with me, start by reading this. The exact values that those settings can take is not quite clear, but I tried different options and ended up with something like this:

Actionscript:
  1. sunLight = new PointLight3D(
  2.       { x:1200, y:0, z:-600,
  3.         brightness:5, ambient:30, diffuse:500, specular:180 } );

If you want your bitmap material to react to the light, a basic BitmapMaterial won't do the job. I experimented many materials available in the package and found out that WhiteShadingBitmapMaterial works pretty well. It is straightforward in setup as it just takes a bitmapData as argument. In my code it looks like this:

Actionscript:
  1. var earthMat:WhiteShadingBitmapMaterial =
  2.         new WhiteShadingBitmapMaterial(earthBmp.bitmapData);
  3. earth = new Sphere(
  4.       { material:earthMat, radius:150,
  5.         segmentsW:32, segmentsH:18, y:0, x:0, z:0 } );
  6. view.scene.addChild(earth);

The sun does not need to react to any light, for it is light itself. It also does not need any bitmap texture either, so I just use a basic ColorMaterial. But the sun needs to have a glow. And for that I found one super cool feature in Away3D, and it is called ownCanvas. It is a boolean value, and by setting it to true (default is false) you can assign filters to 3d objects exactly the same way you would assign them to regular sprites. Here's how it looks in the code:

Actionscript:
  1. var sunMat:ColorMaterial = new ColorMaterial(0xffffff);
  2. sun = new RegularPolygon(
  3.       { material:sunMat, radius:100, sides:32,
  4.         x:2400, y:0, z: -1200 } );
  5. sun.ownCanvas = true;
  6. sun.filters = [
  7.         new GlowFilter(0xffffbe, 1, 12, 12, 3, 3, false, false),
  8.         new GlowFilter(0xffffbe, 1, 12, 12, 3, 3, true, false)
  9. ];

A final tip, and this one I found on the Away3D discussion group, is to set the stage.quality to LOW. There is no visible difference in rendering quality, but a huge one in performance. And remember, that you can always check the performance by selecting 'Away3D project stats' option from the right-click menu.

UPDATE May 19th 2008. Source code. I was asked to post the source code of some other examples on the blog and I did it. Later on I thought there is no reason to leave this one behind. So, before anyone asks: the classes are commited to my Google Code account, and there is also a ZIP with the code and the assets here.



  • FITC10


  • FITC10


  • FITC10