Li : Dev Actionscript Development Blog

Away3D and Vectors

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

Long time no post. Sorry for that. The good news is that I've been extremely busy, specially with the way Away3D handles vector graphics, and this is the main reason why I haven't brought news any earlier. Let me get you updated now, tell you what's been going on, what tools I'm currently developing and what you can expect the future of vectors in Away3D to be.

First of all, development on the textfields branch has stopped. You can still use it for any of the functionalities described in previous posts, but the thing is that the branch was simply an experimental space intended for 3D vector graphics research and we've now moved on to the official development on the main trunk, where we've taken a completely different approach. The core concept is that now, a regular face can handle more than 3 sides, and these sides can be curved. It's a pretty radical approach since the basis of 3D is triangles. These triangles can now mutate and take any shape that can be described with bezier curves.

Another significant change is the priority given to the Flash IDE as a source for vector graphic elements. Although development on external ttf loading, dynamic font parsing, svg compatibility, etc, is still planned to be supported, the focus is redirected to using Flash for managing text and other vector graphics and then exporting them for a 3D project. This is done by using JSFL to extract vector data in the Flash IDE and then export it in order to use it in a 3D project. In my personal experience, I've found that until Adobe decides to release the vector data that conforms sprites, this is the most practical way to work with such data in order to project it onto the 3rd dimension.

The above demo (click on first image) was achieved by downloading a free eps (Illustrator) file from the web, copy pasting it in Flash, running a JSFL script in Flash in order to inject the vector data in an accessible way into an assets swf and then reaching such data from the 3D project with a couple of lines of code:

_vectorObj = VectorSwf.load("assets/vectorScene.swf", {scaling:1, zOffset:100});
_scene.addChild(_vectorObj);

As you can see, the compiled .swf is treated by VectorSwf as Collada treats .dae files, so these features should make it really easy to work with vector assets in 3D and provide a series of practical means to obtain crisp 3D graphics. I promise to include a tutorial for the above demo in my next post so you can start playing with it and providing me some feedback in order to continue the development of these features.

On the mean time, if you feel like exploring the demo, here is what you need to get it running:

DEMO: http://www.lidev.com.ar/demos/textfieldsmerge/vectorswf/v4/
SOURCE: http://www.lidev.com.ar/demos/textfieldsmerge/vectorswf/v4/test_vectorSwfLoader.zip (Link it to the latest Away3D source).
JSFLAWAY: http://www.lidev.com.ar/demos/textfieldsmerge/vectorswf/v4/jsflaway.zip (Run VectorDataInjector.jsfl in order to inject the vectorData array into a clip).

Reflective Plane

I've had a chance these days to revive one of my old topics: reflections. A while back I ran some experiments based on zupko's (PV) raycasting method, but ran into some trouble when attempting to properly render the stuff on the plane's material. This time the approach has been a bit different: A secondary virtual camera is set up as a reflection of the main camera, and its view is then projected -deperspectived- into the plane's material. The advantage of this method is that the engine will take care of all the rendering trouble for us, and furthermore, a lot of the plane's behavior can be controlled considering its nature; it is nothing more than a secondary view.

I've made sure the class (ReflectivePlane.as) has a lot of parameters to tweak the look and feel of the reflection images such as alpha, blur, distortion -as seen in the above demo- but also many other values such as reflection quality, coloration, etc. The plane can have any size, position and orientation, so the class should be pretty handy for multiple tasks. View source is enabled, so right click on the demo to see how to use this, its really simple!

Its worth mentioning that this class is simply intended to provide a basic feature and should be subject to changes, specially optimizations, but more in depth developments in reflective materials in Away3D should be taking place in the future. I certainly hope we can soon play with non-planar reflective materials, that is, materials that reflect their surroundings no matter how complex the geometry of the object they are applied to is. I'd love that... But anyway, enjoy this little class on the mean time!

Oh, and you can tweak more of the plane's parameters in this other demo.

Textfields and Lights : First Steps

These are the first results after experimenting for a few days with shape primitives and more advanced materials in the Away3D textfields branch. Click the image above to see the demo.

The demo consists of a font exported with the FontExporter component, used in a TextField3D, which is then extruded, a ShadingColorMaterial is applied as its extrusion material and a GradientColorMaterial is used with a little bit of trickery as its main material to enhance the lighting effect. The ShadingColorMaterial reacts to a PointLight3D object, which is a non-directional light.

Feel free to experiment. As soon as a bit more development is done with this, I'll upload some demos to demonstrate a few examples on how to use this.

Getting this far wasn't that easy, and it wouldn't have been possible without the help of Rob and Fabrice from the Away3D team. Thanks guys!!

A lot more to do, but it's looking good already ;D

Font Exporter [UPDATED]

UPDATE: Version 1.1 of the FontExporter is available in the download link below. This is the version I am using now with FlashCS3 and is working correctly.

I've been developing a second component for vectors in Away3D these days. This time, its a FontExporter panel for Flash that creates a font class containing all the vector data for that a given typography. It's very similar to Five3D's exporter, but for Away3D. It really simplifies the task of using 3d vector fonts with the engine.

The latest Away3D trunk was just merged yesterday into the textfields branch, which is currently changing to adapt to this component, plus receiving overall improvements for vector element handling. At the moment, the runtime ttf parser used in the engine is unplugged, so that's why I decided to post this FontExporter component even though its not finished... its the only way to work with fonts at the time in Away3D, but it works smoothly, and its really easy to use. The TextField3D primitive behaves a little different now.

To use it:

Install the component: http://www.lidev.com.ar/demos/fontexporter/FontExporter.mxp.zip

Restart Flash and look for the panel in Window -> Other Panels.

Select a font and click on the generate button. Then paste the content that was generated into the clipboard in your font class. Then:

var font:MyFont = new MyFont(); //Generated by the exporter...

var txt3d:TextField3D = new TextField3D("blah blah blah", font);

_scene.addChild(txt3d);

Contact me if you need help! As soon as I finish all this, I will make a tutorial to clarify things...

Enjoy!

Sprite3DExporter v1.1

A new release of the Sprite3D generator component. The exporter is now made more robust and easier

to use. Download it here.

New Features.

- Recursive vector data analysis. Export much more complex vector graphics, as those expected to

be produced in Adobe Illustrator.

- Recursive break apart. No need to worry about what kind of elements are in your clip; groups, movie clips, graphics, etc... it doesn't matter =)

- No changes to your clip. The exporter generates a copy of your clip to make its analysis, so you can be 100% certain that your clip will not be altered.

- Slight changes to the panel's UI with instructions included in a help panel.

Sprite3DExporter Component [UPDATED]

[UPDATE] This refers to an old version of the component.

I'm working on a handy component for Flash + Away3D. Its a little panel that basically converts any vector art designed in the Flash IDE to an actionscript class that can be used in Away3D as a full 3d vector object. Just draw your graphics, click the button in the panel and paste the code in your Away project. Simple, but powerful!

Make sure to have a go at testing it if you're interested in this topic, its extremely simple to use. Creating extruded logos is specially a simple process of a few steps. I would appreciate any suggestions, enhancements, bug reports, etc, from the community. These features are still experimental and subject to grow towards a lot of possible directions from here.

Enjoy!

Instructions [UPDATED]:

1 - Click on the header image to download the component.

2- With flash closed, unzip the file and double click the mxp installer. Follow the Suite's Extension Manager to complete the installation.

3 - In Flash go to Window, Other Panels, Sprite3DGenerator. Follow the instructions from there by clicking the help button.

NOTE - Set your Away3D project normally, but make sure to use the textfields branch: http://away3d.googlecode.com/svn/branches/textfields/src/away3d/

Almost Done [UPDATED]

Update: The work is finished... See the official article in Away3D.com - http://away3d.com/3d-vector-text

The development on Away3D for vector features is going very well. As you can see in this demo (click the image to see it), its going to include exciting features such as extruded vector text. (More info in my previous post and official release should be coming soon).

Old demo: http://www.lidev.com.ar/demos/extruded_text/

Away3D VectorText

The last few days I've been working together with the Away3D team on a feature that will allow the engine to render vector shapes in 3D space in a completely different way. Instead of subdividing an object into faces or triangles and then apply perspective deformations to them using bitmap fill methods, this method uses vector instructions such as lineTo or curveTo and applies 3D transformations to them. The result is vector shape primitives whose resolution is independent on size.

This is particularly useful for 3D text. By extracting glyf vector data from a TrueTypeFont (.ttf) file, the engine can show fonts very sharply at all time (click on the image to see it working). The usage is very simple. As a preview I would say that it's going to be something like this:

var text:TextField3D = new TextField3D("Hello Vectors!", "assets/arial.ttf");

scene.addChild(text);

This will be a very enjoyable feature for Away3D!! Expect to see it in an upcoming revision =)