A few days ago, our latest Away Media work  was made public. This time it's www.mydreamdevice.com, a website where you can arrange existing 3D models into all kinds of creations. The site is a simple but fun way to promote Qualcomm's Smartbook computer: you can create your dream device with components that all exist miniaturized in the Smartbook. Right after the site became live, people started to effectively use the tools we provided, but not precisely in the way we had in mind. But hey, I have to admit that I couldn't stop laughing after seeing some of the obscenities that were created! Too bad there has to be a moderator :-/

Our main focus was to make the manipulation of 3D elements as simple as possible and as least "techy" as possible. It's pretty amazing how hard this is to do once you get involved with the task: you need to manipulate things in 3D with a 2D interface BUT you can't introduce abstract concepts, a complex interface, just 3 or 4 buttons! It was quite a challenge, but I think we did a reasonable job. While doing this I studied a lot of 3D interfaces in different softwares. They vary a lot and are usually very effective but they all require you to "learn" how to use the rather complex controls. None seem to have what we tried to accomplish here: A set of controls that you don't need time to adapt to, just a few clicks and tests and you're ready to go after a few seconds. In real life, you don't need to know about X, Y, Z in order to manipulate objects, so why would you need to be familiar with 3D tools in order to effectively drag things around in virtual 3D. I must admit though that the only way I see to do this perfectly is to actually have a 3D interface, but I guess that won't happen for a while. Anyway, there is a lot behind the apparent simplicity of the results and the topic of natural, simple interfaces for 3D editing is very interesting.

Another nice thing that we dealt with in the project is OBB collisions and collision response. I wrote about how to detect OBB collisions before, but not about how to resolve them. The challenge here was to make the colliding objects respond physically, without having the user loose control of what's in his grasp, which is the typical response a real physics engine would cause. In the end, the physics are so simple that its nice not to have to use a full 3D physics engine.

It has been very nice to work with such level of designers from Cocomino (www.cocomino.com). I really hope we create more cool stuff with them!

Click on image to view the demo (view source enabled).

Its just a basic implementation of the method of separating axes for 3D OBB's (oriented bounding boxes). It detects collisions between cubes in a way that is slightly more advanced than spherical collisions, which are merely based on distances and radii. Collisions are not resolved in the demo though, only detected.

The point of the experiment is to show that it isn't hard at all to detect collisions between 3D objects if considering only their bounding boxes for their 'physical volume' is enough; if we just need to detect if objects are colliding or not, we don't actually need to bring in a heavy, cpu thirsty, 3D physics engine.

The code is not optimized (in fact quite the contrary so that its easy to read), but it runs quite smoothly with 15 cubes, where each cube is checked with all others for collision. If, for example, a character needed to be checked for collisions against static objects in a 3D scene, we would just need to compare his bounding box with the scene's static bounding boxes, so a large number of physically active objects could be used to describe a pretty complex scene. Furthermore, if any of these boxes were axis aligned, they are no longer OBB's, but rather AABB's (axis aligned bounding boxes) and collision checks could be made much faster. Something like this I imagine:

return (obj1MinX < obj2MaxX) && (obj1MaxX > obj2MinX) &&
(obj1MinY < obj2MaxY) && (obj1MaxY > obj2MinY) &&
(obj1MinZ < obj2MaxZ) && (obj1MaxZ > obj2MinZ);

The experiment is clarifying in understanding how the method of separating axis works, and I guess it gave me a quick glimpse at how a advanced physics engines like JigLibFlash might work. The code is heavily commented, so have a look if you're interested in understanding OBB collisions.

Another obsolete experiment! Click on the image to view it (view source enabled).

The concept is simple: alternate squares and triangles to produce a fractal tree-like structure. On each step, either triangles or squares are drawn in the edges of the last set of drawn elements. If the last set was triangles, squares are drawn and vice versa. Two squares can sprout from a triangle and a single triangle can sprout from a square, hence, triangles are the cause for bifurcations. That's it! Pretty simple, yet beautiful; the simple rules produce some very complex variations. I hope it is inspiring to produce more complex fractal beings.

Play around with the parameters:

[growthRate: Time in ms between the creation of each step] [maxSteps: The number of recursive iterations. Be careful not to go above 25! It could crash your browser] [Triangle base factor: From 0 to 1, controls the inclination of the triangles. 0.5 makes the tip of the triangle be above the mid point of the base] [Triangle height factor: Relationship of the height of tris to their base] [Square height factor: Relationship of the height of squares to their base].

[UPDATE] You can find a couple of demos for this in THIS post in the Away3D site.

One of the things I've been wanting for Away3D for a while is the ability to warp a textfield onto a bezier path and animate the text along the path. The proper way of doing this is not just to position and rotate the characters to fit the path, but to actually deform them to adapt to the path. To do this, the x dimension of the text is transformed into an arc-length parameterized value along the path's length and the other 2 dimensions are then recalculated in this new space.

When it comes to a feature like this its usually much harder for me to develop, but this time I must admit it was pretty simple thanks to THIS amazing almost cheat-like resource from Jay Clegg.

Click on the image to see the demo (use the keyboard and mouse to move around). I plan to refine this and upload a full demo/example soon. For now, If you wish to play with it, take a look at the new "AlignToPath.as" class in the geom package of Away3D for fp10.

We've added a simple class that provides extrusions for TextField3D objects. Right click on the demo to see the source and learn how to use the feature.

UPDATE: Properties "textColor" and "textAlpha" have been replaced by "material". Since TextField3D supports various material types now, these two properties are not applicable any more.

Away3D currently supports all the basic color materials on irregular shapes like these. You can use WireColorMaterial, ColorMaterial, WireframeMaterial and ShadingColorMaterial on vector text and vector graphics coming from Flash.

There is still a lot of work to do, but we're getting there!

In a very similar way we used the wumedia package to extract fonts from Flash, we can use it to extract vector graphics in general from Flash. This was possible before in Away3D using VectorSwf.as, as shown on a previous post, but the work flow that I will present now is so much simpler, that we've decided to deprecate VectorSwf.as and replace it with the much more powerful and easier to use Swf.as

Click on the image to see what I'm talking about (right-click view source enabled). The snowman was designed in Flash, and a swf was exported containing this graphic and other vector assets that may want to be used in 3D. After that, the assets swf is loaded using the following code, which is the same way many other external assets are loaded with Away3D, such as Collada, 3ds, Obj, etc:

_loader = Swf.load("assets/vectorassets.swf", {libraryClips:["Snowman"],  scaling:2});

"libraryClips" is an array containing all the linkage names of the clips that want to be extracted. It is important to set these linkages in Flash in order to be able to identify the clips from the main app. The parameter is optional however, if not supplied, Swf.as will attempt to extract the graphics from the stage. For this to be possible however, the instances on the stage must be set as graphics types.

Another thing to take into consideration is the flattening of the clips. As one of our current goals is to be able to extrude these clips, Away3D treats flattened graphics differently from graphics that are grouped, or on layers, and non flattened graphics might produce sorting problems at this stage. In order to correctly flatten a vector graphic in Flash (as for instance a drawing imported from Illustrator), the way I recommend it is:

- Alternate "break apart" with "distribute to layers" until no grouped elements are left.

- Select all the resulting shapes and go to Modify -> Shape -> Convert Lines to Fills.

- Copy the content of all the produced layers and paste it into a new clip.

This simple process has ensured me so far to be able to migrate any graphic from Flash to 3D properly. Even pretty complex ones copy-pasted from Illustrator.

Sometimes its good to keep layers however. Imagine a window component that you wish to take to 3D. The window could have a title, a title bar, a frame and a background. And now imagine that you want this window to remain in layers as opposed to being flat (eg, the title bar above the background, title above the title bar). What you do is skip the flattening and use:

{libraryClips:["Snowman"], scaling:2, perspectiveOffset:-100, perspectiveFocus:2000}

in the init object passed to the constructor. This example would separate the layers by 100 pixels backwards, and if viewed exactly 2000 pixels from the front of the container in which the graphics were imported to by Swf.as, you will see exactly what you saw in 2D! With perspective correction of course. As each element is drawn back, it is scaled up so that the overall image doesn't loose proportion in each of its elements. If you move from this focus point however, you should become aware of the layering and the offsets between the graphics.

I hope someone finds usefulness in all this. And please, do provide feedback if you've got any ideas or requests!

So, what's new with dynamic 3D text in Away3D now? Not much from the end-user point of view, but the internals have changed dramatically from previous implementations. What's most important is that TextField3D is now a permanent class in the engine. We no longer have to use the textfields branch in order to use vector features. The branch was experimental, is now deprecated, and all the investigated features are now being assimilated in the main trunk.

Dynamic textfields are now using Guojian Wu's powerful swf parser. You can see this magnificent tool and more of his work at wu-media.com. The parser allows us to use any font installed in the system, and provides many text wrapping features such as leading, kerning, alignment, etc.

There are many ways to use it. The basic principle is that Wu's parser identifyes a font's byte data in an swf and extracts its vector information. Font byte data can be in the same swf as the main application, or in a different asset swf. The way I recommend to use it is as follows:

1) Create a new FLA file with Flash, create a dynamic textfield for each font on stage, and on each use the properties panel to embed the characters you will want to be using. Export the swf as, for example, fonts.swf.

2) In another actionscript project, use an URLLoader to load the fonts.swf as binary data.

3) Once the data is loaded, use "VectorText.extractFont(_loader.data)" so that the parser can process the fonts. NOTE: In flex, you can also embed the fonts.swf file, and pass the bytes to extractFont() as "new FontBytes()".

4) You can now create TextField3D instances as:
var textfield:TextField3D = new TextField3D("Arial", {textAlpha:1, textColor:0x000000, text:"TextField3D", size:200, leading:0, kerning:0, textWidth:2000, align:"TL"});
_scene.addChild(textfield);

UPDATE: Properties "textColor" and "textAlpha" have been replaced by "material". Since TextField3D supports various material types now, these two properties are not applicable any more.

Click on the image above to see a demo, and then right-click on the demo to view the source.

What's next? In the next few days we will continue to assimilate features from the textfields branch into Away3D's main trunk. Amongst these coming features are vector text extrusion, support for advanced shading materials on vector primitives like text, importing of sprites from Flash with wu's parser in a very similar way as using text in this tutorial, tessellation tools for vector primitives, extrusion of sprites imported from Flash, etc.

I'll make sure to post any updates on this progress. On the mean time, I hope you enjoy these basic text features, and don't hesitate to post any suggestions here, or in the Away3D user group!

A simple lens flare effect has been added to Away3D's main trunk. Click on the image above to see the demo (view source enabled).

Please feedback any ideas, adjustments, etc that would make it more realistic!

Working with Morgan Stanley and a small team of superb designers from Adobe Profesional Services on this microsite was one of the best work experiences I've had. Have a look: www.morganstanley.com/matrixinfo

The site was built using Away3D + Awaybuilder, and it uses simple yet slick camera motion tweens to fly around a space crammed with vector content. Such content was provided with a friendly workflow using the JSFL tools from my previous posts. Additionally, a pretty interesting class was used to "perspectivate" the vector glyfs so that most of the text is only visible correctly from a given position in 3D space. The site is a pretty good example of the crisp look of vectors in 3D, and makes me think of all the possibilities we have with this sort of tools.

[UPDATE] VectorSwf.as is now deprecated. The replacement is Swf.as, which provides a much simpler workflow. See upcoming post!

This tutorial attempts to explain the features described in the previous post, so you can use them, and hopefully apply them for something more useful than this demo!

Setting up the project.
--------------------------------------------------------------------------------
1 - Create a new Actionscript project in Flex. Delete the default class created by Flex and paste these 2 classes into the project src folder. Set Main.as as the Default Application.
2 - Link your project to the latest Away3D trunk. You can either do this by setting up a separate library project and linking the AS project via properties/ActionScript Build Path/Library path or simply pasting a copy of the away3d lib in the src folder of your AS project.
3 - In the project properties/ActionsScript Compiler, add "-use-network=false" in the Additional Compiler arguments field to avoid security sandbox problems.
4 - In the src folder of your project create a new flash file named Assets.fla and allow it to publish at the same level Assets.swf.

Prepare your assets in Flash:
--------------------------------------------------------------------------------
5 - Create a new clip and, in it, draw some vector graphics. Make sure not to use strokes because they are not supported yet. Sorry! In my case I downloaded an .eps from www.freevectors.net and copy pasted the content into the clip.
6 - We now need to run a JSFL command from Flash in order to inject its vector data into a variable in the clip's timeline. For this download the jsflaway lib and place it in your flash commands folder. In my case it is "Users/yourUserName/Library/ApplicationSupport/Adobe/FlashCS3/en/Configuration/Commands/"... then while in the clip's edit mode (in its stage) in Flash, go to Commands, run Command and go to the jsflaway lib you just copied to your HD and select VectorDataInjector.jsfl in the components package of the lib. You will see that this should create a new layer in your clip called "vectorData".
7 - Drag an instance of your clip to the main stage of your Assets.fla and publish it.
8 - Repeat steps 5 to 7 to add more elements. As long as an element is on the stage, and the clip contains the vectorData layer, Away3D should be able to port it to 3D.

Away3D code.
--------------------------------------------------------------------------------
9 - You can tweak some settings in the src:
var vectors:ObjectContainer3D = VectorSwf.load("Assets.swf", {scaling:1, zOffset:100});
_scene.addChild(vectors);
Scaling speaks for itself, and zOffset is the z spacing applied between each clip in the main stage of the Assets fla.

SOURCE: http://www.lidev.com.ar/demos/textfieldsmerge/vectorswf/v5/tutorial_vectorSwf.zip

I hope you can find useful applications for this feature. You can use it to show vector interfaces in 3D, text, and practically anything made out of vectors. Steps 5 to 8 should be greatly simplifyed soon thanks to feedback I already recieved from you guys. I'll let you know when I have some updates. Enjoy!