iFlash3D Librarian Tool Released

Just a quick note. I just released a new Stage3D Tool, called iFlash3D Librarian. It’s a GUI based application that implements a fully working 3D Content Pipeline, for creating 3D Worlds in Flash.

With this tool you are going to be able to easily import and use 3D Models from within your Stage3D applications.

You can learn all about it here, in this new video I just released:

VIDEO: iFlash3D Librarian Tool – Click Here To Watch

Populating Your Flash 3D Worlds

I just released a new training video in my series about Building Worlds with Stage3D. This one is about actually populating your 3D world.

In my previous post, I introduced my first training video in the series, that dealt with the 3D Content Pipeline.

The second video, The Flash 3D Library Workshop, was about how Flash is really missing a 3D Library. And that’s why I introduced a new tool that I made available for download, here, that implements the functionality of a basic Flash Library but geared for 3D Models to be used in Stage3D.

My hope is that with this tool, you can complement your Flash coding workflow, and leverage this 3D tool, that is similar to the 2D library that you are used to have in Flash.

And What About 3D Models?

The next thing you need is to be able to load real models. And stuff them into the 3D library.

That’s an essential step. Otherwise while optimized, nice and dandy, your 3D content pipeline workflow is not going to be that useful, except for just showing procedurally generated geometries, like squares and cubes.

So that’s what I cover in my new video that I just released. I’ll show how to start from the 3D Library Tool that I just made available and I build a sample application on top of it, to actually get to use real 3D models, instead of procedural ones that are built from code.

This new sample application comes complete with source code, so that you can take a look at how I leverage the 3D Library to actually build a sample Stage3D application that uses true 3D models.

Click here to watch this new training video, and to download the whole new sample code enchilada.

Training Video #3: Populating Your Flash 3D World

A 3D Library Tool for Flash

One of the wonderful things in Flash is the Library.

You get this place, where you can drop all your asset stuff and keep it there. And then, once you need it, you just spawn it in your Stage, which is your Scene.

How cool is that?

And then you have that nice Timeline. And you can drop stuff from the Library into the Timeline, at specific Keyframes.

Now, I know that most developers (including me) prefer to work directly with code, and not with the timeline. But still, I think that this, when it got introduced, was a unique and revolutionary coding paradigm.

This is one of the key elements that, I think, originally made Flash as successful as it is. Because you get to actually, interactively, craft the evolution and the interaction of a Scene.

And What About Stage3D?

The new Stage3D API is amazing. Because you get to finally create 3D worlds for the Internet, in Flash.

Considering the huge penetration of Flash, Stage3D is a revolution. It instantly makes your 3D worlds available to (almost) the entire population of the internet.

No more need for installing specific runtimes, or downloading and installing your app. The user just types in your URL, and they get to experience your 3D creation.

But…it’s not all fine and dandy…

The amazing creation tools that Adobe gave us for 2D are totally absent for 3D.

Starting from the Flash Library…where do you actually get to place your 3D creations, your 3D models, in Stage3D?

A 3D Library For Flash

This is the reason why after realizing this, I decided to release this simple tool for the Community.

It’s a 3D Library Component that you can use to setup your 3D application with an actual 3D Library.

I go through it in my new video that I just released.

Click here to download the 3D Library component and to watch my new video.

The 3D Library Workshop

Note that this is actually the second training video in my Building Worlds with Flash3D series.

Building Worlds With Stage3D

In the next few days I am going to release a new series of training videos on Stage3D.

These are not the typical deep technical tutorials that I’ve made so far. This time I am going to talk about building 3D worlds.

Yes, because it’s one thing to get down to the gist of coding, and shaders and all that. That’s the most hard core part.

But then, once you’ve coded your code…you need something to show.

And that’s when 3D models come in.

An annoying part of Stage3D is that there’s no support whatsoever for importing 3D models. And with 3D you need 3D models badly, or your apps will look extremely uninteresting.

Planes and cubes get boring pretty quickly after all.

Loading 3D Models

It seems that my previous post about the 3D Dome of Florence generated some interest. So I realized that you want to know more about dealing with 3D models. And you are right! Because without models, a 3D world is going to look extremely bare.

Loading models is not as simple as loading a JPG into Flash. There are many 3D formats available. And most of them don’t work well when used directly within Flash.

It’s a vast topic. So that’s why I decided to shoot a few training videos about this and help you get up to speed.

The first video is all about how a solid workflow for importing 3D models into Flash should be structured.

I took a deep look at how developers do things in AAA game productions, and tried to port that to the world of Flash.

I think that Stage3D is now going into a direction where it will let you build state of the art AAA games. And so it’s a good idea to get inspiration from the workflows that have been tried and tested in AAA game productions.

The 3D Content Pipeline Video Training

So that’s why I’ve setup the 3D Content Pipeline training.

It consists of a set of videos that I’ll be releasing in the next coming days. And it’s completely free.

The first video is available now. And you can find it here.

Click here to access this new video training on Stage3D.

I won’t be able to keep this video up for very long, because I am going to package it as part of a paid product that I will release in the future. So, if you’re interested, make sure you watch it soon.

Watch my new Flash 3D training video HERE.

A Stage3D trip to Florence, Italy

Stage3D…Molehill…is almost out after months of beta. This time I want to publish some Stage3D demo that is a bit more complex than a simple square.

Now let me give you some background. Our office is in Florence, Italy. We are lucky, and from our office window we have an amazing view of the famous Duomo of Florence, Santa Maria del Fiore. It’s so close that it feels like we can almost touch it. Take a look at the photo above for a view from our office window.

Now that Molehill is coming out, it’s time for Flash to show! 3D is finally coming to the web, in Flash, in the form of Stage3D. And I wanted to be part of it, by displaying something that is symbolic of my town.

Ok, where’s the meat?

Let’s see the result of this demo I’ve been working on.

The model is not mine of course. It was made by Google SketchUp superstar Arrigo Silva (Enrico Dalbosco), who re-created this wonder of a church in Google SketchUp here. Arrigo kindly allowed me to use his amazing 3D model for this demo.

And here is the Stage3D virtual tour of Santa Maria del Fiore.

(Click to launch. Note, requires Flash Player 11. Firefox users on Mac, please update to latest version of browser.)

How was that created?

Poly wise, the model, although amazing, is not that complex. It’s about 27000 triangles. However it’s finely detailed as it consists of 374 textured sub-meshes. Frame rate for me is about 60 fps

I’m displaying it with a very simple 3D model viewer that we’ve developed that uses a lighting Shader, with a single point light. A similar viewer could be easily made with a Stage3D engine, like Away3D.

But the interesting part is that I created the model file starting from the Collada file of Arrigo’s model from Google SketchUp here, using a tool that we’ve been developing internally, that can import a 3D model file, and export a Flash ready file to be used in a Stage3D application. This tool can create a 3D Library file containing one or more 3D models that are optimized, compressed, and in a format that is ready to be used with Stage3D.

The cool thing is that, with this tool, it took me a total of 4.5 minutes to create this demo. I just downloaded Arrigo’s model from Google SketchUp 3D Warehouse, imported into the tool, and exported for Stage3D. That’s it!

Want to know more?

Me and my team developed this tool for internal use but we may release it at some point if there’s enough interest. Just let me know if this kind of thing interests you. You can leave a comment below, or use the contact form here.

Introducing Flash 3D Eagle

Last month I held a webinar on Molehill, that I called the Molehill Incubator Webinar. In this webinar I covered in a very practical way how to get started with Molehill coding.

I did it because I think that Molehill is a great opportunity for every Flash developer. The market for Flash 3D is going to explode in the second half 2011, as soon as Adobe officially releases Flash Player 11. Namely games and 3D applications, to be run both in Flash, on browsers, and in mobile systems, like the iPhone, the iPad and Android devices, are going to be the bread and butter of this new wave of Flash applications.

So, after the Molehill Incubator Webinar took place, I received several requests from iFlash3D readers, who asked if it was possible to get access to the webinar material.

Unfortunately, while I got the recording, the quality of the audio, even though it was OK for a live webinar, was not good enough for what I would consider to be an acceptable standard for a pre-recorded course. So I decided that before publishing the material I would re-record it, break it down in small easily consumable chunks, and actually make a real video training course on Flash 3D out of it.

And while I was at it, I deemed it nice to record even more material!

In addition to the main Molehill Incubator Webinar material, I created a new Molehill API master module, that goes in deeper through a general overview of the whole Molehill API.


Let me introduce you to Flash 3D Eagle. A brand new video training course on Flash 3D, that I am releasing today.

I’m pretty confident that Flash 3D Eagle, although introductory, is going to be of great help to all Flash Developers who would like to jump into the amazing world of Flash 3D development, but are scared by the high barrier of entry.

One aspect that I liked from the webinar was the interaction with the people. That is why I decided to set up this new course as an interactive portal membership site. It will feature a comments section for each video chunk, and I’ll be interacting with members, answering questions on the content.

Now, in order to be able to keep a good level of interaction with members in the portal, I will need to limit access to 100 people. At least at the start. So, I am opening the registration for Flash 3D Eagle today, and I will be closing it when I reach 100 registered users. I will be closing registration no later than Friday July 29th, no matter what.

Register Now

So, if you are interested in jumping into Flash 3D, make sure to grab your seat, and register for Flash 3D Eagle right now.

Click HERE to get instant access to Flash 3D Eagle.


The Molehill Incubator Celebration Webinar

World Class Athlete Program - WCAP - Best Of - United States Army - FMWRCphoto © 2007 U.S. Army | more info (via: Wylio)


iFlash3D is really a labour of love for me. I love Molehill, I love Flash 3D, and it’s great to share content with all the people, and to help them dive into the amazing world of 3D development.

I recently started to receive requests from the community, asking me if I could hold an online workshop to teach about Molehill and Flash 3D. I never really wanted to teach a full out class. Not that I wouldn’t like to, but it was just too time consuming for me to do, and too much of a responsibility.

However, after getting the Nth of these requests, I thought that I might eventually do something special myself in order to celebrate the Molehill Incubator release by Adobe, and go the extra mile.

Therefore I decided that I would hold a live online webinar, just for those people who want to do the big jump, and break into Flash 3D coding with both feet.

This webinar is going to be an introduction to Molehill coding. I’m going to be covering some Molehill basics, and will be giving away sample source code that you can take away and directly use in your programs. At the end of the webinar I’ll be holding an interactive Q&A session.

The webinar is going to be recorded, and you’ll be able to download the videos, in case you are not able to attend.

I am going to offer this webinar for cheap. A nominal fee, just to make sure that people who join are serious.

Webinar Registration Now Open

Seats are going to be extremely limited due to the interactive nature of the webinar.

A lot of people are reading this, and I received many requests for this training program. I won’t be able to get more than 50 people in, and I fully expect the course to sell out in a matter of hours.

Click Here to Register Now!

If seats don’t sell out earlier, the registration page will close next Monday (June 13th) no matter what.

The Flash 3D Game Blueprint

Blueprintphoto © 2009 Will Scullin | more info (via: Wylio)

Ok, this is going to be short…

I just wanted to share this simple pdf report I made.

Many times, when creating a 3D application in Flash that’s a bit more complex than a simple model viewer, as the code grows, things can end up really badly. I’ve gone through it a few times… I know how code stuff can turn into a real disaster.

You get this thing that starts as a simple prototype. Then you turn it into a game, and start building on it…

Soon enough you get to some unmanageable blob of code, where you have a hard time modifying, adding features, and so on.

Been there?

My experience is that a great way to solve this problem, is to just use a super simple architecture right from the start.

There are many ways to do this, but there’s a blueprint I like to use for this.

You can download it here (note: requires registration to the iFlash3D newsletter).

It saved my projects many times…I’m sure it might save yours too…

Flash 3D – Molehill Cameras

Spiral Trainphoto © 2009 Masakazu “Matto” Matsumoto | more info (via: Wylio)
You can’t make a movie if you don’t have a camera….

…and you can’t render a 3d scene, if you don’t have a 3d camera.

You saw how to render…you saw how to do perspective.

But imagine how boring is your 3d scene going to be if you can’t roam through it?

Think of yourself as a (3d) news reporter…you go through this 3d world holding your camera….you’re actually a character in the world!!!

You don’t just want to observe the world from a fixed point of view. You want to roam around it, and see what the world looks like from where you are..

You might want to watch the world through your own character eyes (i.e. have a 1st person camera) or you could have the camera somehow follow your character and keep it in view all the time (i.e. have a 3rd person camera).

The Math of 3D Cameras

In order to be able to code this, you’re going to have to view what the 3d world looks like from the camera point of view, not just form the world coordinate system point of view, or from some other fixed point of view.

In a 3d scene you’re going to have a set of 3d models. All these models are described as a set of vertices and triangles, in their own coordinate system. This space is called model (or local) space.

Once you place these objects into a 3d scene, you transform these models vertices using a “world transform” matrix. Each object has its own world matrix that defines where the object is in the world, and how it is oriented.

This new reference system is called “world space” (or global space). A simple way to manage it by associating a world transform matrix to each object.

Then you want to reference the world not to the world origin, but to the reference system of the camera.

You take a “camera object” that is positioned at some coordinate (xc, yc, zc), and oriented along some direction. You get to a matrix, that is the “world transform” for the camera.

Then in order to transform the objects as they are seen from the camera point of view, you should calculate the inverse of this camera world matrix.

viewTransform = cameraWorldTransform.clone()

Then, in order to get your scene as seen through the camera, as you render each object you just append the viewTransform, to the worldTransform.

The perspective projection transform that I had discussed in my previous article on the perspective divide, goes right after the view transform.

So, the whole set of transforms goes like this:

  • model space -> world space
  • world space -> view space
  • view space -> projection space

How do you do that in Molehill?

First, let me setup some code that translates and rotates the camera around through the keyboard arrows.

protected function keyDownEventHandler(e:KeyboardEvent):void
switch (e.keyCode)
case 37:
cameraRotationAcceleration = -ROTATION_ACCELERATION;
case 38:
cameraLinearAcceleration = LINEAR_ACCELERATION;
case 39:
cameraRotationAcceleration = ROTATION_ACCELERATION;
case 40:
cameraLinearAcceleration = -LINEAR_ACCELERATION;
protected function keyUpEventHandler(e:KeyboardEvent):void
switch (e.keyCode)
case 37:
case 39:
cameraRotationAcceleration = 0;
case 38:
case 40:
cameraLinearAcceleration = 0;
protected function updateViewMatrix():void
cameraLinearVelocity.z = calculateUpdatedVelocity(cameraLinearVelocity.z, cameraLinearAcceleration, MAX_FORWARD_VELOCITY);
cameraRotationVelocity = calculateUpdatedVelocity(cameraRotationVelocity, cameraRotationAcceleration, MAX_ROTATION_VELOCITY);

cameraWorldTransform.appendRotation(cameraRotationVelocity, Vector3D.Y_AXIS, cameraWorldTransform.position);
cameraWorldTransform.position = cameraWorldTransform.transformVector(cameraLinearVelocity);


The updateViewMatrix function is where the magic happens. I calculate the new cameraWorldTransform matrix, starting from the old one, and applying rotation first, and translation last. Then, I calculate the viewTransform as the inverse of cameraWorldTransform.

The calculateUpdatedVelocity function simply adds a bit of easing:

protected function calculateUpdatedVelocity(curVelocity:Number, curAcceleration:Number, maxVelocity:Number):Number
var newVelocity:Number;

if (curAcceleration != 0)
newVelocity = curVelocity + curAcceleration;
if (newVelocity > maxVelocity)
newVelocity = maxVelocity;
else if (newVelocity < -maxVelocity)
newVelocity = – maxVelocity;
newVelocity = curVelocity / DAMPING;
return newVelocity;

At every frame, right before rendering, I call the updateViewMatrix function.

Then, include the viewTransform matrix into the set of transforms used that get passed to the Vertex Shader:


var m:Matrix3D = new Matrix3D();
m.appendRotation(getTimer()/30, Vector3D.Y_AXIS);
m.appendRotation(getTimer()/10, Vector3D.X_AXIS);
m.appendTranslation(0, 0, 2);

context3D.setProgramConstantsFromMatrix(Context3DProgramType.VERTEX, 0, m, true);

The Cameras Application in Action

Here’s the final application for you to enjoy!

Use the arrows to roam around.

And here you can download the code:

Download Source Code

Get The AGAL Reference Card

If you enjoyed this content, be sure to grab a free copy of my AGAL Refenrence Card. You can get it just by subscribing to the iFlash3D newsletter here (or just use the subscribe box in the right sidebar).

Flash 3D, Molehill and The Perspective Divide

Atriumphoto © 2008 jlwelsh | more info (via: Wylio)


Perspective perspective…when doing 3D stuff you always hear about perspective.

What is perspective? Well…in the real world, we all see in perspective. It’s just the normal way of seeing things, when you look around.

Perspective is that thing where objects that are away appear to be smaller than those that are close to you.

Perspective is that thing where if you’re sitting in the middle of a straight road (watch out for cars), you actually see the borders of the road as two converging lines.

That’s perspective. We want perspective badly in 3D. Otherwise the world won’t look real. It won’t look 3D.

There’s an additional layer of complexity here. As what we’re doing with 3D is to actually take the 3D world, with objects that are defined in 3D with vertices, triangles, etc…, and want to view that scene using a 2D device, such as the monitor.

What happens is that we want to “project” the 3D world onto the 2D surface of the monitor.

That’s what we call “Perspective Projection”. Which simply means to project the 3D scene on the 2D screen, following the laws of perspective.

Isn’t That Hard to Code?

Not really. But first, let’s look at what we intuitively want to achieve. Imagine that your monitor is not really a monitor. Let’s say it’s a window with a glass, looking out into some real 3D scene, that sits beyond the monitor.

You’re on this side of the monitor, observing, and keeping your head solidal (fixed) to the monitor.

Let’s say you get a butterfly sitting on the inside, in the center of the monitor. You’ll see it pretty large. And in the center. Then the butterfly flies away, following a straight trajectory, perpendicular to the monitor. You’ll see it becoming smaller and smaller. And it will remain in the center of the screen as it flies.

Now let’s say that your butterfly is back on the monitor glass, but this time it’s sitting on a side of the monitor. It flies away again, perpendicularly to the glass surface. Even this time you’ll see it become smaller and smaller, but you’ll also see it converge towards the center of the monitor, as it gets farther away.

That’s perspective. Far objects get smaller, and they get towards the center of the projection as they get farther away.

Cool! Now Let’s Do That With Math

Sure. Let’s say xP and yP are the coordinates of the “projected” position of our butterfly on the screen.

And let’s say that the “world” position in 3D of the butterfly is xW, yW, zW. That’s where the butterfly is actually positioned, in the 3D scene beyond the screen.

Let’s use a 3D coordinate system for world coordinates, where the x axis points to the right, y points up, and positive z points inside the screen. The origin is where our eye sits. So, the glass of our screen will be on a plane orthogonal to the z axis, at some z that I’ll call zNear.

We want to get the projected positions xP and yP, by dividing the world positions xW, and yW, by zW.

xP = K1 * xW  / zW
yP = K2 * yW / zW

K1 and K2 are constants that are derived from geometrical factors such as the aspect ratio of your “glassed window” (your screen) and the “field of view” of your eye, which takes into account how wide-angle your eye is.

You can see how with this transform, those (xW, yW) pairs, that that end up transformed as (xP, yP) that fall on the sides of the screen, get then pushed towards the center, as distance from eye (zW) increases. While those pairs (xW, yW) that end up transformed as (xP, yP) that are closer to the center of the screen (0, 0), are much less affected by distance from eye (zW), and tend to remain around the screen center.

So, that’s what we want.

This division by z is the famous “perspective divide”.

How Do You Do That With Matrices?

On first sight doing perspective projections with matrices is tricky. This is because a matrix transform is a “linear transform”: the transformed vector components are simply linear combinations of the input vector. Linear transforms only allow to do translations, rotations, scaling, and skewing. They don’t allow operations like the perspective divide, where a component gets divided by another component.

Now, remember that we usually represent 3 dimensional coordinates with 4 dimensional vectors of the form (x, y, z, w), where w is usually 1. The solution to the matrix based perspective divide issue, is to use the 4th coordinate w in a creative way, by storing the zW coordinate, into the w coordinate of the transformed vector.

The other components of the transformed vector are the pre-multiplied version of xP and yP by zW.

Therefore we want the following transform:

xW -> xP' = xP * zW = K1 * xW
yW -> yP' = yP * zW = K2 * yW
zW -> zP' = K3 * (zW - zNear)

That’s definitely possible to do with a linear matrix transform, as the transformed vectors are a linear combination of the world vector to transform.

After that’s done, the actual transformed xP and yP values get obtained by dividing the transformed x, y, z, components by w.

This gets us:

xP = K1 * xW
yP = K2 * yW
zP = K3 * (zW - zNear) / zW

which is exactly what we want.

Clip Space and Normalized Device Coordinates

Now, Molehill expects you to use a matrix in your Vertex Shader that transforms vertices to a special space where:

(x, y, z, w) = (xP', yP', zP', zW)

with xP’, yP’, zP’ and zW defined as above, and where constants K1, K2 and K3 are chosen so that xP and yP of all visible points in the 3D world are in the range (-1, 1), and zP falls in the range (0, 1). This means that an object falling at the right edge of the screen, once projected, will have xP = 1, and one at the left edge will have xP = -1.

This 4-dimensional space (xP’, yP’, zP’, zW) is called “clip space”, as it’s the one where clipping usually takes place. The (xP, yP, zP) coordinates, after the divide, with range (-1,1) (for xP and yP), and range (0, 1) (for zP) are called Normalized Device Coordinates (NDC).

Molehill, and the GPU, will take the data from the output of you Shader in clip space form, and carry on internally with the perspective divide.

A Note on Clipping

Objects that sit on the “screen glass”, at zW = zNear, get a zP equal to 0. While those that are at some distance that we define as zW = zFar, get transformed in NDC space to zP = 1.

zNear and zFar define the so called “clipping planes”. Objects falling closer than zNear will be clipped (not drawn), as well as objects falling farther away than zFar. Also, objects with xP and yP outside the range (-1, 1) will get clipped.

For simplicity I’m dealing with point objects here. An actual extended object can get partially clipped, as parts of it fall into view, while other parts fall outside it.

How to Do That in Molehill?

Luckily, there’s a simple extension of the Matrix3D class that Adobe has made that helps with this.

It’s “close to official” at this stage, and you can download it here.

The PerspectiveMatrix3D class in that package implements a few simple functions that create the perspective matrix transform that we need:

  • PerspectiveMatrix3D::perspectiveFieldOfViewLH
  • PerspectiveMatrix3D::perspectiveFieldOfViewRH

Here I’ve been using a world coordinate system where the x points to the right, y is up, and positive z enters the screen. A left handed coordinate system. Therefore I want to use the LH flavor of the matrix function.

Just create a perspective projection matrix:

var aspect:Number = 4/3;
var zNear:Number = 0.1;
var zFar:Number = 1000;
var fov:Number = 45*Math.PI/180;

var projectionTransform:PerspectiveMatrix3D = new PerspectiveMatrix3D();
projectionTransform.perspectiveFieldOfViewLH(fov, aspect, zNear, zFar);

Let me use this matrix, for a simple update to the sample code I had provided in my AGAL Tutorial post.

I’ll simply append (pre-multiply) the projection matrix to the queue of matrix transforms that we were using to position and to rotate the object. I’ll also give a different spin to the rotations, so that the perspective is visible.

var m:Matrix3D = new Matrix3D();
m.appendRotation(getTimer()/30, Vector3D.Y_AXIS);
m.appendRotation(getTimer()/10, Vector3D.X_AXIS);
m.appendTranslation(0, 0, 2);

You can see the application in action here.

And here is the source code for you to download.

Sample Source Code

Still Hungry?

I hope this helped you get into the amazing world of 3D perspective. It’s really a cornerstone of 3D rendering…something you can’t do without.

If you’re still hungry for content and tips about Molehill and 3D rendering in Flash, make sure to subscribe to my newsletter here or from the signup box on the sidebar.

You’ll get the AGAL Reference Card as a free downloadable pdf bonus!

 Page 1 of 2  1  2 »