→ Click here or the image above for the reflection demo
→ View the source code
→ Download the source code

I alluded to a desire to implement reflections in Away3D in my prior post on reflections in AS3. Well here it is. It wasn’t quite as easy of a translation as I thought it would be, but with lots of digging through the Away3D dev list, as well as spotting a good example at geepers.co.uk, I managed to get a basic demo up and running.

While there’s a good bit of code that goes into this demo, the secret sauce is right here:

  // must render before making the following calls
  _view.render();
 
  // find 2d bounding box of sphere
  _drawn = (_view.session.getContainer(_view) as DisplayObjectContainer).getChildAt(0);
  _bounds = _drawn.getRect(this);

What this code does is give us the DisplayObject that contains our 3D object within the given view. We are also able to determine the bounds of the DisplayObject and its 2 dimensional position within the view. With this information we are able to effectively create a snapshot of the visible 3d object. From there we need to create BitmapData that is the inverse of the DisplayObject. To do that we apply the appropriate matrix (invert the y scale) to the DisplayObject when it is drawn to BitmapData. After that we assign the BitmapData to the display Bitmap and then position it according to the bounds of the DisplayObject.

  // redraw reflection
  _bmd = new BitmapData(_drawn.width, _drawn.height, true, 0x00ffffff);
  _matrix.createBox(_xscale, -_yscale, 0, _drawn.width/2, _drawn.height * _yscale / 2);
  _bmd.draw(_drawn, _matrix);
  _bitmapReflect.bitmapData = _bmd;
  _bitmapReflect.x = _bounds.x;
  _bitmapReflect.y = stage.stageHeight / 2 + _distance;

Finally we create an alpha gradient mask that will be applied to the Bitmap in order to give it that cool, fading reflection look.

  // redraw gradient mask for reflection
  _matrix.createGradientBox(_bitmapReflect.width, _bitmapReflect.height * _yscale / 2, Math.PI / 2, 0, 0);
  _bitmapReflectGradient.graphics.clear();
  _bitmapReflectGradient.graphics.beginGradientFill("linear", [0xffffff, 0xffffff], [0.9, 0], [0, 255], _matrix);
  _bitmapReflectGradient.graphics.drawRect(0, 0, _bitmapReflect.width, _bitmapReflect.height);
  _bitmapReflectGradient.graphics.endFill();
  _bitmapReflectGradient.x = _bitmapReflect.x;
  _bitmapReflectGradient.y = _bitmapReflect.y;

And there you go, reflections in Away3D. There are a number of limitations to this method, though:

• It can only draw reflections of objects currently visible in the view.  In fact, there should be a check on the
  (_view.session.getContainer(_view) as DisplayObjectContainer).getChildAt(0)
  call to make sure that the view contains any children.
• The reflection is drawn of the entire view, not just the object in question.  That’s why this works best with only one object in the view.  You can use multiple views to get reflections for multiple objects.
• This example only does reflections of the view as its manipulated along the X & Y planes.  Moving the object along the Z plane will not effect the reflection properly.  I’m sure a method utilizing planes could do better.

If those limitations don’t bother you, then go to town. If they do, be patient. I’m working on another idea for reflection in Away3D that will be a lot more flexible, though more complex and processor intensive.

Remember how my previous blog post on shadows (of course you do) showed how you can easily enhance the 3D feel of your site? Of course you do. Now you can add reflections to that repetoire. It’s all about subtle changes to give your work a more polished look and feel. Have fun and let me know if you create reflections this way, or if you have an implementation of your own.

I’m starting to cook up a few game ideas with some friends of mine and I wanted to get a sense of what Away3D could really do.  To start, I made this very basic example of Away3D loading a fairly high poly 3DS file with minimal animation.  More specifically, it’s a rotating, 2880 poly, torus knot with a wire frame material.  While Away3D isn’t really made to handle models with this many polys, it gives me an idea of how it will handle a total polycount of about 3000.

Featured Away3D code: Max3DS.load() and WireColorMaterial

Click the image above to access the example.  You can right click on the example and click “view source” to,  you guessed it, view the source.

SimpleShadow vs. shadow image (click for demo)

Click the above picture for a demo.  Right click on the demo to view source. Be sure to pay close attention to the apply() and positionPlane() methods of SimpleShadow.

You want to quickly add perspective and depth to a scene?  Look no further than shadows.  Shadows can make a minimalistic scene look fantastic.  Take a look at the website of Peter Kapelyan, one of the Away3D’s developers, and you’ll see what I mean.  Luckily, in Away3D they are easily available in more than one form.  Note, though, that shadows in Away3D are not actually created by light sources as this would be extermely expensive in terms of performance.

The above demo shows Away3D’s built-in SimpleShadow class (left) vs. a shadow created simply by adding a plane with a shadow BitmapMaterial (right).  Both are pretty easy to do, and both have their pros and cons:

“Shadow conforms to object shape” means that no matter what type of 3D object you are applying the SimpleShadow to, the shadow will accurately represent its overall shape.  With the BitmapMaterial method the shadow image must be created specifically for a particular 3D object to maintain an accurate representation.  So for a cube you need to create a square shadow image, for a sphere you need to create a circle shadow, and so on.

By “needs to be added” I mean that there’s no reason this functionality could not be added to the BitmapMaterial method. The reason its not there now is the reason that SimpleShadow won’t perform as well as the BitmapMaterial method. All those extra calculations and shadow redrawing are what will slow down a scene that has one too many SimpleShadows.

Peter Kapelyan's site, flashten.com, using SimpleShadow

Away3D MultiMario example using BitmapMaterial method

The clear winner might appear to be SimpleShadow, but if functionality always won over performance we wouldn’t have a need for Away3DLite.  In general, if you have a scene with only a few shadows and you would like those shadows to appear realistic relative to the object casting them, use SimpleShadow.  If performance is the main concern, like in a scene with many objects casting a shadow, the BitmapMaterial method would likely suit you best.

These are the 2 methods I’ve seen for creating shadows in Away3D, but there may be others.  If you find any, let me know.  Otherwise, enjoy!

UPDATE: I conversed with SimpleShadow’s creator, Fabrice Closier, and he was confused as to why I said SimpleShadow’s performance was slower.  I should clarify that SimpleShadow is slower only when the shadow needs to be redrawn frequently with the apply() method.  In a still scene or when the shadows in the scene do not often need to be redrawn, the performance should be very similar to that of the BitmapMaterial method.

Originally this project was the main page for savagelook.com, but I decided it to shuffle to “projects” on my blog.  While it is was a very cool showcase of the things I had learned so far using Away3D, Flint particles, FLARToolkit, FLARManager, TweenMax & TimelineMax, its not really practical for a main interface… yet.  Here’s the things I learned in this initial undertaking that I plan to apply to all future projects involving Away3D(Lite), particularly when the average user is the target audience:

• Performance ALWAYS has to be on your mind.  There’s nothing more annoying to users than low frame rates.  Many of my next points relate directly to this.
• Control the size of the view.  While a resizeable view that fills the browser seem great, you can take a nasty performance hit on high resolutions.  For example, this project runs like a champ with a standard 800×600 or 1024×768 resolution.  When I jump it up to  1680×1050, though, things start to get a little choppy.
• 3D particles are a whore on resources.  Fake 3D effects with 2D whenever possible.  You can literally get 100x (or more) particles in 2D and maintain the same frame rate as 3D.
• Use simultaneous tweens judiciously.  There were noticeable slow downs in my intro animations when more than one tween was operating at a time.
• Learn your z-sorting and plan it from the beginning.  I can’t tell you how much time I wasted restructuring my scene and code because I didn’t take the time to learn Frustum clipping, ownCanvas, pushback, pushfront, and screenZoffset before starting.
• Users expect 2D dialogs and text. Use them whenever feasible to convey information to the user.
• Make sure you clean up your unused objects.  ”scene.removeChild(obj)” and “obj = null” should become your best friend.
• Reuse objects and materials whenever possible.  Its a lot easier and less expensive to toggle the visibility of a relatively simple object rather than destroy and recreate it every time.
• Only render when you need to.  When I use 2D layout for the “Bio” section, I stop rendering the covered 3D scene to help performance.
• Use texture baking or similar techniques to fake lighting.  Real-time lighting, while cool, chews up a lot of resources.  If it isn’t critical, fake it.
• When all else fails, hit the Away3D Dev list. It may not have the fastest responses, but there’s no better place to get help and guidance.

I’m sure there’s lots more I picked up in the process, but that’s a pretty good assessment.  Hopefully this helps anyone getting started on their own Away3D projects.

I don’t have any specific plans to make version 2.0 of the savagelook.com 3D interface, but I’ve got a few ideas rolling around in my head.  The key factors will be simplicity, speed, more pseudo-3D effects using 2D, and use of Away3DLite.  I’m hoping to really represent Away3D next time.

At the request of one of my readers (a list that is probably about 12 people long), here is a demo and source code for the carousel gallery included in the 3d version of savagelook.com shown in my last blog post.  It’s a customizable ring of planes that can display any type of away3d material, in this case BitmapMaterials.  You simply need to pass in an array of materials during initialization and the CarouselGallery handles the rest.

This example uses a simple rotation in the render loop, but my 3d savagelook.com example uses mouse interaction to make it cycle.  You could even add left and right arrows if you wanted to have it move one image in those respective directions.  You could achieve this by simply rotating along the Y axis by a number of degress equal to 360 divided by the number of planes in the carousel.

I hope anyone else who wanders tot his site finds it useful or inspirational for their own work.  Oh, and the time to completion for the first code request I received was about a day and half.  So if you have any ideas or requests for me, feel free to send them along in a comment or email and I’ll get to them as soon as possible.  People’s feedback is what keeps me active and on my toes with this stuff.

Click here for the source code or click on the demo above then right click and select “view source.”
Also, here’s a link to the FLA for CS5 that can be used to publish the SWF that will contain your target font.  Simply open the FLA in Flash Pro, change the font of the “test” text on the stage, click “Embed” in the character panel to make sure the right font is set, and then publish your SWF.  The resulting SWF will contain your ready-to-be-embedded font.  If the following steps weren’t goos enough, let me know.  If I get a complaint or two I’ll put up a screenshot walkthrough for the whole process.

Text comes in many forms in Away3D and they all have their own advantages and disadvantages.  Here’s a quick run down of the various methods I know for generating text in Away3D, which are all displayed in the demo above.

PNG + BitmapMaterial + Plane
With this method, you take a PNG (or any other image format Away3D handles) image file containing the text you would like to display, create a BitmapMaterial from it and apply the BitmapMatierial to a Plane.

Pros: Fast rendering
Cons: Static text, quality depends on image resolution, text is flat

Textfield + MovieClip + MovieMaterial + Plane
Here we create a Textfield with our text and add it to a MovieClip.  We then create a MovieMaterial from the MovieClip and apply it to a plane as in the last example.

Pros: Fast rendering, dynamic text
Cons: Text is still flat

TextField + Sprite + BitmapMaterial + Plane
Almost identical to the last example, except this time we create BitmapMaterial from a Sprite.

Pros: Faster rendering, dynamic text
Cons: Text is still flat

TextField3D
We use the TextField3D class in conjunction with wumedia.vector.VectorText.extractFont() and a specially created SWF file that contains the embedded font we want to use in our example.

Pros: Vector quality text, dynamic text
Cons: Text is still flat, can only use embedded font

TextField3D + TextExtrusion
We expand on the last example by using the TextExtrusion class with the TextField.  This creates a 3 dimensional outline of our vector text finally giving us some depth.

Pros: Vector quality text, dynamic text, 3 dimensional
Cons: Can only use embedded font, fonts have arbitrary “winding” when drawn so determining which side of the text is the “back side” is tricky and can screw up shading materials.

3DS Model (high and low poly)
You can always forgo the ins and outs of dynamic text and do it yourself in the modeling program of your choice.  In this case I used 3DS Max 2010 to create low and high(er) poly text.

Pros: Full control over appearance of text
Cons: Text is totally static

So there’s the list of methods I’m aware of.  You got any more?  See anything glaringly stupid above?  Let me know either way.

Here’s a quick demo I did of using augmented reality in Away3D.  The quick description is that your webcam is used to identify the position and orientation of the marker (which I’m holding).  With these values identified, FLARToolkit and FLARManager are used to translate your Away3D scene and objects relative to the marker.  You are adding interaction into your Away3D apps using natural movements rather than the typical mouse and keyboard combos.

While the demo itself doesn’t give a great picture of the practical applications, they are showing up more quickly then you might imagine.  One particularly interesting example is the Layar browser, which uses global positioning rather than marker identification to make its alterations to reality.  Rather than try to explain it, check it out here:

And I’m sure plenty more applications are on the way. Want to get on board and start churning out your own augmented reality (AR) apps in Flash?  Check out FLARToolkit and FLARManager for yourself.  You may also want to take a look at the original ARToolkit, which is based in C++, or NyARToolkit, the Java/C# port on which FLARToolkit is based.

Too lazy for all that research?  Stay tuned and I’ll post up the source from the bare bones example I had in the first video of this post.

In an effort to learn more about the vast array of materials available in Away3D I put together this little demo.  It’s just an adjustable sphere that you can change the segment count of with a drop down for selecting materials to apply to it.  It’s got just one light: a DirectionalLight3D pointing straight at it.  This, of course, only affects the shaded materials as you can see in the demo.  By the way, anyone know why I’m getting no color on the ShadingColorMaterial?

Discussion on ShadingColorMaterial not working in Away3D 3.5: http://groups.google.com/group/away3d-dev/browse_thread/thread/aaf9d9c73a12473f/b49add76061e9388

Featured Away3D Code:

• away3d.materials.AnimatedBitmapMaterial
• away3d.materials.VideoMaterial
• away3d.materials.PhongColorMaterial
• away3d.materials.ShadingColorMaterial
• away3d.materials.Dot3BitmapMaterialF10
• away3d.materials.Dot3BitmapMaterial
• away3d.materials.WireframeMaterial
• away3d.materials.WireColorMaterial
• away3d.materials.ColorMaterial
• away3d.lights.DirectionalLight3D

As usual, right click to view the source of the demo.

Here’s a quick demo of individual face picking and manipulation in Away3D.  Using your mouse you can click to select any visible face of the sphere to change its color, as well as receive information about the face itself.  The face’s number, 3D coordinates, and screen coordinates will appear in the upper left hand portion of the view.

Hopefully you’ll find it useful.  As usual, you can right click and select “view source” to see the source code for the demo.

Featured Away3D code

• away3d.cameras.Camera3D.screen()
• away3d.core.draw.ScreenVertex
• away3d.core.draw.DrawTriangle
• away3d.core.base.Mesh.faces