This site is now just an archive over the rise and fall of Flash. The domain flashmagazine.com is available for sale
Login | Register
Away3D Basics 5 - Primitives (Part 3)

Away3D Basics 5 - Primitives (Part 3)

This is the third and final tutorial on the Away3D primitives. This last batch features the more exotic ones, the ones you'll probably not use that often. The GridPlane and LineSegment are great debugging tools, whereas the Cone, Torus and SeaTurtle are more on the "nice to have" list.

Some of the primitives in this tutorial are present in many 3D engines or modeling packages. They have a very limited range of use though so this tutorial won't contain as rich examples as the two former tutorials have had. There is however source code for most of the primitives that show how to use them.

Prerequisites

This tutorial builds on our other Away3D Tutorials. If you are new to Flash 3D, you may want to read these first. For each example, there's a complete source file. Just click the link to the accompanying Actionscript file to see how something was achieved. If you are uncertain about how to use the sample Class files provided, check out this tutorial.

Some of the examples in this tutorial use textures. We'll look closer at Textures and materials in a separate tutorial, but if you want to make the source files work with Flash CS3/CS3, read this tutorial first.

The Cone

Cones have limited use. Ice cream cones, traffic cones and party hats are some possible uses. The Cone has a radius, segmentsH and segmentsW. They also have a height and the possibility to be openEnded, so you can see the inside of it.

This content requires Flash Player 9 (or a more recent version). You need to upgrade your Flash Player

movie: ExCone.as

In this example we show some combinations of the possibilities. Click the link to the source file to see how to set the various properties.

The Cylinder

Cylinders and cone's are sort of related in that they offer most of the same properties as you can see from this example:

This content requires Flash Player 9 (or a more recent version). You need to upgrade your Flash Player

movie: ExCylinder.as

Cylinders are maybe more useful than Cone's but they're also quite "expensive" in terms of geometry. Remember the realtime pipe rendering in the classic WinXP screensaver that draws random pipes on screen? This looks really easy to do, but for a realtime 3D engine it's actually quite hard. As you've seen in the former examples, anything that is to appear round will require a high amount of triangles and the cylinders are no exception. If you think about this and look back at computer and console games, it's only in the last few years that models in these games have started to use a lot of rounded surfaces.

The GeodesicSphere

A Geodesic sphere is most commonly referred to as a Geodesic Dome. It's been used in building construction (see Spaceship Earth at Epcot) and has some unique properties when compared to a traditional Sphere primitive. In Away3D the Geodesic Sphere starts off with a basic shape that looks like 2 pyramids combined. This shape is then refined by triangulating each of the triangles in the basic shape to approximate a sphere.

The higher amount of triangulation, the more round the sphere will appear. In the image below, the fracture setting is noted next to each sphere so you can see how this affects the roundness of the sphere.

image

movie: ExGeodesicsphereRefine.as

As you see from the image, this is a quite different way to build the sphere than with a normal sphere primitive. The triangles are almost the same size across the object and this makes a GeodesicSphere more round than a sphere, given the same number of triangles. Mouse over the example below to see how the two compare.

This content requires Flash Player 9 (or a more recent version). You need to upgrade your Flash Player

movie: ExGeodesicSphere.as

It is also possible to create a Geodesic sphere based on other primitives as this code shows.

The RoundedCube

As far as I know, this primitive is unique to Away3D. At it's simplest, it looks almost like a sphere. To make it look good it requires quite a few triangles though, but the result looks impressive.

image

Click the image to go to Fabrice Closier's blog and play with this primitive. Fabrice is one of the core coders on the Away3D team.

This primitive was added recently per a user request. If you're in need of a primitive that's not included with Away3D, try to post a request at the Away3D forums. If they find it useful, one of the team members may create it as in this case. If you have the skills to create the missing primitive yourself, you are of course welcome to contribute your own code to the Away3D engine as well.

The SeaTurtle

This was the first output of the as3 exporter, a class that can generate a compact AS3 class based on any loaded model. This class has since been updated a lot and it's very powerful. If you want a compact 3D project, you should consider testing how the AS3 exporter can improve both file size and load times. While not really a primitive, the Sea Turtle was a fun addition and a bit of a mascot in the early days of Away3D. Since it's kind of complex and has a lot of faces, it is also useful for testing lighting. The texture for the turtle is located in the "/techdemos/images/" folder that you can download from the Away3D subversion repository. You'll see it in use in the next primitive - the GridPlane.

The GridPlane

This primitive can be a great aid when setting up a scene. It's nothing but a grid of squares, but there is a reason that these are part of most 3D programs. Have a look at the model below.

This content requires Flash Player 9 (or a more recent version). You need to upgrade your Flash Player

movie: ExGridplane.as, image: seaturtle.jpg

By adding a trident and grids like this, you can easily see the center of the turtle and when you know the scale of the grid, you can visually analyze the model.

The Torus

The Torus is a classic 3D shape that is present in most 3D tools. It can obviously be used for doughnuts and lifesaving devices, but since it is rounded and can be set to have a high triangle count, it is also useful for testing shaders. Environment shaders that simulate reflections and light look really good when applied to a rotating Torus.

This content requires Flash Player 9 (or a more recent version). You need to upgrade your Flash Player

movie: ExTorus.as, images: doughnut.jpg mandelbrot.jpg marble.jpg

Note from the source code above that the Torus does not use the usual segmentsW and segmentsH variables. Instead, it uses segmentsR and segmentsT.

torus.segmentsR = 20;
torus.segmentsT = 10;

The LineSegment

This is a line primitive that you can use for things that require just a line to be drawn between two points as in this example. Just move the mouse above the movie to see the connected turtles tween around to random positions.

This content requires Flash Player 9 (or a more recent version). You need to upgrade your Flash Player

movie: ExLinesegment.as, image: seaturtle.jpg

No matter the position and rotation, the linesegment will stay locked onto the center of each turtle.

The Wire primitives

Several of the primitives are also available in Wireframe version. They have no surface so you can see the mesh they consist of.

 

About Jens C Brynildsen

Jens has been working with Flash since version 3 came out. Since then, he's been an active member of the Flash community. He's created more than a hundred Flash games (thus the name of his blog) but he also creates web/standalone applications, does workshops and other consulting. He loves playing with new technology and he is convinced that the moment you stop learning you die (creatively speaking). Jens is also the Editor of this website.

Get new stories first

Click to follow us on Twitter!

 

Comments


Posted by tartiflop on 12/14 at 03:54 PM

As always, very nicely written and very useful! Great work!


Posted by saro on 12/26 at 07:43 AM

great tutorial


Posted by Bertie on 11/03 at 09:28 AM

I’m trying to load The GridPlane with the seaturtle (ExGridplane.as) into flash builder as an exercise but I have the following error:
1020: Method marked override must override another method. Resource Mesh.as.

I have googled a lot but I still don’t understand what’s going wrong.

I have flash builder 4.5.1, I have installed flash player 11.0.1.152 and I have followed the steps in this article http://www.adobe.com/devnet/flashplayer/articles/creating-games-away3d.html

Does anybody know what this error is?


Posted by Jens C Brynildsen on 11/25 at 09:55 AM

@Bertie sounds to me that you’re trying to combine Richard’s Away3D 4.0 Alpha tutorial with my Away3D 3.5 tutorials? Just make sure you use the right version and this will be a breeze :)


Posted by Bertie on 11/27 at 11:05 AM

Thank you for your reply.

That’s right, I was using the wrong version of Away3D.

I have another question. Maybe it’s not the right place to post but maybe someone can help me.
I have imported some 3D models into Flash Builder with Away3D 3.5. Now I have troubles with z-fighting or depth sorting. I have tried a lot to solve this problem but it will not succeed.


Posted by Jens C Brynildsen on 11/27 at 04:37 PM

@Bertie that’s a classic issue with all pre 4.x versions. I’ve spent a lot of time doing the same myself on sites such as http://www.rampgenerator.com/. Took forever to get that working.

All I can say is that pushback and pushfront are your friends. You can also do some tricks my using multiple viewports showing different parts of the model. Moving to hardware will solve more or less all of these problems, but I don’t think we’ll have an api-stable version until over xmas some time.

Hope that helps a little?

J


Posted by Bertie on 12/24 at 11:39 AM

Hi everybody,

I have a question about the next tutorial:

First steps in Away3D : Part 6 - Normal mapping and environment mapping
See:
http://blog.tartiflop.com/2008/12/first-steps-in-away3d-part-6-normal-mapping-and-environment-mapping/

(I hope it’s no problem to post my question here)

You see three models turning around. You can turn the whole scene around with your mouse.
Imagine that you replace the models by 2D pictures. It’s easy to stop the rotation of the individual models (or 2D pictures).
Is it possible to let the models always be with the same side to the front? So if you turn the whole scene around with your mouse, the individual models (2D pictures) will always be with the same side to the front. Just as in a Tag cloud where the text is always readable.
(I hope you understand what I mean)

Submit a comment

Only registered members can comment. Click here to login or here to register