[AS2/3][Flash8+] 3d engine kit
I make no secret about disliking most of the major well known 3d engines in Flash and that is mainly because they rather encourage to adopt their complicated framework instead of learning from the mechanics behind the scenes, about actually rendering 3d in flash. Its what pissed me off at first when I wanted to learn from them.
Frameworks like that are imo. a reason (out of many) why there is such a big gap between amateur and professional flash delelopers and another reason why so many flash users think that everything that looks 3d on the web is done using papervision. I do aknowledge the path many of the popular engines have been weaving but the hype is also something that makes me sad because of the gab and also because of the growing ignorance towards developing things yourself or in general 3d or AS3.
So perhaps with this post I can take away some of the magic wall that exists and motivate others to give it a try as well.
[about]
The core of this post is a free simplified engine with around 80 lines of code that supports:
- seamless texture mapping
- backface culling
- depth sorting
[SWF width=600 height=400]http://www.renderhjs.net/bbs/flashkit/3d_engine_kit/engine_kit.swf[/SWF]
http://www.renderhjs.net/bbs/flashki...screenshot.gif
engine_kit.swf demo
fla download:
engine_kit.fla
I tried simplifying the code so half of the code could certainly be optimized alot but the main goal was to make 3d in flash as accessable as possible. You can copy paste it modify and improve it for your own needs. The camera model doesnt provide perspective but I think that this one is easier to understand at first.
The other part of this post is to introduce to the tools and knowledge that is required to build and run a 3d engine. I tried to give this post some structure so that you can skip parts you already know or don't need.
[Index]
1.) Flash 3d resources
2.) 3d modeling software and links
3.) exporting your models
4.) inspecting a example object and its texture
5.) the source code
6.) explaining parts of the code
1.) Flash 3d resources
There are some good resources on the net regarding general 3d engines in flash but you often end with a wireframe engine or something that can only be feeded with commands instead of 3d files out of 3d applications. Some imo. good resources for 3d and flash:
http://www.kirupa.com/developer/acti...pt/3dindex.htm
http://www.video-animation.com/flash3d_001.shtml
http://www.flashandmath.com/advanced/index.html
but for the most part they dont go further rather than displaying sprites or wireframes - so you often end up with something that does not look that fancy.
2.) 3d modeling software and links
The other part of 3d games/ engines is about creating the content so the 3d models and the textures. You usually need a 3d application for that to define the triangles of the 3d model and to define also where the texture is placed on the 3d model - called UV mapping. But first a list of common 3d applications with who you model and uv-map your models (I wrote some tags in the brackets that are related to the software)
- blender (big buck bunny, elephant dream, opensource, dutch guys behind it :D )
- truespace (microsoft purchase, amiga background, never succeded on the market)
- milkshape (shareware, vertex by vertex construction, if not the biggest support for 3d formats)
- silo (highly specialized modeler, retopolgy features, brush tools)
- 3dsmax or gmax (very old series from back of the DOS days, one of the no.1 used tools in the game industry)
- maya (the classic in animation, used in most holywood and computer animations (pixar,..))
- lightwave (cheap but yet professional complete package, Diablo 1 & 2 sprites rendered with lightwave)
- XSI (aka softimage, used in lots of anime productions using camera mapping & compositing, unique animations technologies)
- modo (founded by former lightwave engineers , used by id software for their upcomming idTech5 titles)
If you are not into 3d applications you might ask which one is expensive and what's the best one for x,y,z. First off booth Blender and truespace are booth free (the first one even opensource) and pretty much capeable of what the others offer- well in most of what you propably need.
Out of the 2 beeing blender and truespace I would however rather recomend starting with blender as it has more resources on the net and is growing impressivly each few months. I would also say that blender is the more professional appearing package out of those 2.
But what about the others?
Maya has a good reputation at animation but it sucks at polygon modeling - the oppisite is 3dsmax it sucks at big scene manegements (e.g proxies) and does not have all the comfort maya offers in animation. But on the other hand max is way beyond maya when it comes to polygon modeling and has more strength regarding non linear workflow mainly because of the modifier concept.
Lightwave is supposed to be great in modeling as well so does XSI (a really great package so I've heard) but XSI for example has a niche booth in europe and the US and is more used in Japan. And lightwave is more known for special effecst or industries with less budget - though no doubt its a great a solid package.
Modo and silo are rather newcomers and specialized booth at the beginning at modeling trying to bring topNotch solutions for modeling. Modo now even has painting and rendering abilities with impressive quality and a fresh wind of technology. Silo is my personal favourite when it comes to modeling - its fast, smal and so easy to adopt (and yet cheap) after a while it really feels natural modeling in it- it has however some flaws yet like scale issues when importing other models and scene manegenemt. Also with Silo you cant render directly and material setups are very basic.
So in summary:
free & good start:
- blender
- truespace
good at modeling:
- 3dsmax
- silo
- xsi
- modo
good at animation
- maya
- xsi
good at rendering
- 3dsmax (mentalRay)
- maya (mentalRay)
- XSI (mentalRay)
- blender
- lightwave
3.) exporting your models
I wont go into detail regarding how to create your 3d models here- there are plenty of online tutorials for that or to come here perhaps. Just search for low poly modeling and uv-mapping or uv unwrapping which should cover the 3d part. After that you basicly create your texture in Phtoshop/ gimp or any other bitmap editor your like.
But the one thing I will offer a help with is a maxscript that exports your 3dmodel with texture placement information as actionscript arrays. A maxscript is a script just like actionscript that can be run in realtime in 3dsmax. The advantage of this is that you can even modify the script yourself to your own needs and pershaps learn from that. For a general guide regarding how to use maxscript and links regarding the free gMax (games max, and a free but outdated version od 3dsmax) have a look at:
http://board.flashkit.com/board/showthread.php?t=757034
In blender and Maya you can use phyton to export meshes and other informations but sadly I am not yet into that so search on the net for that if you dont have 3dsmax or the free gMax. I found a few links that generate actionscript for the major engines from blender - maybe there are some usefull resources
http://www.rozengain.com/blog/2008/0...n3d-and-sandy/
http://www.rustpunk.co.za/blog/index.php
Other ways could be to convert existing 3d formats that are accessable in flash. Rather easier ones would be propably:
- OBJ (Alias Wavefront Object, a ASCI format)
- ASE (3dsmax ASCI export format, used alot in Unreal Engine 1 & 2)
- DAE (collada a xml sctructured format, the official PS3 format, used in most cases for Papervision projects)
all of them can be openend in any simple texteditor- and analyzed like that. Just create a simple quad plane (2 triangles) with a UV map and export it. Try to understand which value is stored how and where and parse it in Actionscript. The con on this approach is that the parsing time can be really slow esspecially with larger objects.
From personal experience a optimized binary file is the quickest way to load and parse external files that is if you use AS3 where you can load and handle binary files- but that's another chapter. I had once a thread about it as well:
http://board.flashkit.com/board/showthread.php?t=759766
the script I created for this tutorial in 3dsmax (should work in gMax as well):
http://www.renderhjs.net/bbs/flashki..._maxscript.gif
(again use this guide if you dont know how to get it running)
flashkit_export_mesh.ms - script download
either copy paste this script or run it directly, after that select any object and hit the button. After that select the Actionscript copy it and paste it into your Code panel in flash.
of course maxscript has a slightly different syntax but for someone who knows actionscript it should be not to difficult exploring and modifying the script. In case you need some info on the methods, a online 3dsmax 9 script reference is available under:
http://www.kxcad.net/autodesk/Autode...t_Reference_9/
4.) examination model
here is a example model that I created for this tutorial
http://www.renderhjs.net/bbs/flashki...taxi_inmax.gif
important is the tris or triangles count you should keep in mind when modeling something for flash to be shown in realtime. The more you have the slower it could run or the more you will have to come up with additional tricks to make it run faster. So what data does it all require to store and thereby render such a 3d model?
from my ASE thread:
http://www.renderhjs.net/bbs/flashki...ata_basics.jpg
if we summarize it we have thus:
- a texture, in case of flash can be any jpeg, png, gif or other bitmapData compatible bitmap
- a vertex Array holding the x,y and z positions of the vertex points of the model
- a face array: each element holds 3 index values of the vertex array. In other words e.g face 0 consists of vertex nr 0,1,4 which are the corners of the face
- a texture vertex array. Just like the vertex array but on a 2d dimension this one holds how the faces of the model are mapped on the texture
- a texture face array. Together with the texture Vertex array we know which triangle of the 3d model shares which triangle of the UV data
http://www.renderhjs.net/bbs/flashki...l_taxi_uvw.gif
this is a screenshot from 3dsmax's UVW editor it shows the UV map of the taxi model. Under tools you can render out a templete which then can be used in photoshop as guide for the texture creation.
just to make things complete this is how things looked in photoshop:
http://www.renderhjs.net/bbs/flashki...xi_texture.gif
on a general node: the vertex array and face array are basicly a group they define the general shape of the model. The texture vertex array and the texture face array are another group they define the UV-map. The only connection they have are through the face array and texture face array order.
This means that the first item of the face array is also the first item of the texture face array. This way you know later on which texture slice to use on which texture face in the viewport.
this is btw. how I defined things later on in actionscript (simple plane example):
PHP Code:
var vtx:Array = new Array();//the vertex positions {x,y,z}'s
vtx = [{x:-31,y:-31,z:0},{x:31,y:-31,z:0},{x:-31,y:31,z:0},{x:31,y:31,z:0}];
var fcs:Array = new Array();//the triangle faces and their vertex id's
fcs = [[0,1,3],[3,2,0]];
var tVtx:Array = new Array();//the texture vertex positions {x,y}'s
tVtx = [{x:0.12288,y:0.897702},{x:0.878457,y:0.967255},{x:0.198297,y:0.0784317},{x:0.953874,y:0.147985}];
var tFcs:Array = new Array();//the texture faces and their texture vertex id's
tFcs = [[0,1,3],[3,2,0]];
var bitmap:BitmapData = BitmapData.loadBitmap("texture");
it might be confusing at first but if you have expierence with modeling or 3d models in general it makes sense why you need those 4 arrays. Give it a try and you might get more familar with the whole thing.