[AS2/3][Flash8+] 3d engine kit

Those shadows are pretty incredible!
Also I like that ffilmation example, it looks pretty good the way they did the lighting, and I especially like the way it generates 2 shadows for the 2 lights. It really gives a nice feel to it!

But I have one question. For your ideas up there, does the shadow need to be texture mapped onto the ground? I can see that slowing things down quite a bit...

I had a question about your animated texture...Is all you're doing shifting the uv points every frame? I will probably try to implement this into my engine, with simple tools like x and y increment, and row/column height, so that it automates most of the process (You no doubt have already thought of this).

(My thoughts on both of your ideas, I think that the second one would not only look better, but also work faster...

P.

testing... (in progress)
http://renderhjs.net/bbs/flashkit/3d..._version_3.swf

Quote:

---

Originally Posted by Pazil

But I have one question. For your ideas up there, does the shadow need to be texture mapped onto the ground? I can see that slowing things down quite a bit...

---

not for flashkits needs,- he can simply attach (addChild) those shadows below his 3d objects.
My 2 ideas were anyway only for top down view stuff- side views and alike would not work so nice with this.

Quote:

---

Originally Posted by Pazil

I had a question about your animated texture...Is all you're doing shifting the uv points every frame? I will probably try to implement this into my engine, with simple tools like x and y increment, and row/column height, so that it automates most of the process (You no doubt have already thought of this).

---

I have a custom class that has a spriteSheet bitmapData and a output BitmapData. The output bmpData is of course smaler as it represents 1 cell. As soon as I switch frames it copy pastes pixels from the spriteSheet bitmapData into the bitmapData.
CopyPixels is very fast in AS3 so it does not hurt a bit. I assume that there are several way for this- altering the UV data would be another one - and propably just as fast.

oooo, very nice.

Now I can only assume that you must have exams on render... such exquisite procrastination...

That seems very promising!

Just a think I noticed in that cowboy example...the shadow should be flipped before projecting (I think you're doing that in you're current engine?), since the shadow is facing the wrong way it should be.

I (as usual) have a random question about AS3...how much faster is it working with a byteArray than a conventional one? Could you easily work with a byteArray that's over 360,000 items long, and go through every element atleast 2-10 times? Or would a Shader be better, though I haven't found a lot of info on how the Shader class works...

Otherwise, for the shadows, I think the cowboy example's shadows are perfectly fine...

Quote:

---

Originally Posted by renderhjs

the function getUVmatrix(uv:Array, pt:Array, tex:BitmapData)
is the function that gives you the transformation Matrix you need in order to skew, rotate and translate the texture the way it should from UV-map to translated screen triangles.

PHP Code:

---

function getUVmatrix(uv:Array, pt:Array, tex:BitmapData) {
    var a:Matrix = new Matrix();//
    var b:Matrix = new Matrix();
    a.tx = uv[0].x* tex.width;
    a.ty = uv[0].y* tex.height;
    a.a = ( uv[1].x - uv[0].x ) ;
    a.b = ( uv[1].y - uv[0].y ) ;
    a.c = ( uv[2].x - uv[0].x ) ;
    a.d = ( uv[2].y - uv[0].y ) ;
    b.tx = pt[0].x;
    b.ty = pt[0].y;
    b.a = ( pt[1].x - pt[0].x ) / tex.width;
    b.b = ( pt[1].y - pt[0].y ) / tex.width;
    b.c = ( pt[2].x - pt[0].x ) / tex.height;
    b.d = ( pt[2].y - pt[0].y ) / tex.height;
    a.invert();
    a.concat(b);
    return a;
} 


---

---

Great thanks for your tutorial. Would you so kind to explian more detailed the matrix operations above? I have isomnia :( trying to understand how its work.

I'm not too sure about exactly how it works, and there's still a few bugs with it.

In fact, I don't even think that Render knows exactly how it works ;)

Quote:

---

Originally Posted by Pazil

In fact, I don't even think that Render knows exactly how it works ;)

---

Blasphemer! Blasphemer!

@shaman4d: I can prepare some illustrations that might help understanding what is going on there better.
As Pazil pointed out its not yet perfect because it fails at non square textures but I understand roughly so far what I did.

but before I start on that I wanted to post a smal update of the same engine in as3 and a little bit simplified + optimized mainly for myself because I will be at a different computer the next days for replies. It should run 4x,6x or even 10x times faster as AS2 and older. The engine now is roughly 58 lines of code

(timeline CS3+ AS3 code)

PHP Code:

---

var mainSprite:Sprite = new Sprite();addChild(mainSprite);
mainSprite.x = stage.width/2;mainSprite.y = stage.height/2;
var bitmap:BitmapData = new Texture(0,0);//BitmapData texture from the library

var cam:Object = {x:stage.stageWidth/2,y:stage.stageHeight/2,w:160,h:120,d:200};//the camera
var spr:Graphics = mainSprite.graphics;
var a:Matrix = new Matrix();
var b:Matrix = new Matrix();

function get2d(pt:Object) {//3d coordinates to 2d screen coordinates conversion 
    var x:int=pt.x+((cam.x - pt.x)*pt.z/cam.d);//
    var y:int=pt.y+((-cam.y - pt.y)*pt.z/cam.d);//
    return {x:x,y:- y,dis:pt.z};
}
function render():void {
    var i,j:int = 0;
    var pt,vt:Object;
    var tri:Array;//triangle array
    
    var faces:Array = [];//order of the faces to be rendered 
    for (i=0; i<fcs.length; i++) {//loop through all existing faces
        tri = [];//triangle vertex array
        var avg:Object = {x:0,y:0,z:0};//average centroid
        for (j=0; j<3; j++) {
            vt = vtx[ fcs[i][j] ];
            tri.push(get2d(vt));
            avg.x+=vt.x;avg.y+=vt.y;avg.z+=vt.z;
        }
        if (  (tri[1].x-tri[0].x) * (tri[2].y-tri[0].y) < (tri[2].x-tri[0].x) * (tri[1].y-tri[0].y) ) {//Backface culling 
            var uvTri:Array = [tVtx[ tFcs[i][0] ],tVtx[ tFcs[i][1] ],tVtx[ tFcs[i][2] ] ];
            faces.push({tri:tri, uv:uvTri, d: get2d(avg).dis });
        }
    }
    faces.sortOn("d", Array.NUMERIC);//sort faces
    spr.clear();
    for (i=0; i<faces.length; i++) {//loop through the faces to be rendered
        tri = faces[i].tri;
        var mtx:Matrix = getUVmatrix( faces[i].uv , tri ,bitmap);
        spr.beginBitmapFill(bitmap,mtx);
        spr.moveTo(tri[0].x,tri[0].y);
        spr.lineTo(tri[1].x,tri[1].y);
        spr.lineTo(tri[2].x,tri[2].y);
        spr.endFill();
    }
}
function getUVmatrix(uv:Array, pt:Array, tex:BitmapData):Matrix {
    var w:int=tex.width;var h:int=tex.height;
    
    a.tx = uv[0].x* w;a.ty = uv[0].y* h;
    a.a = ( uv[1].x - uv[0].x ) ;
    a.b = ( uv[1].y - uv[0].y ) ;
    a.c = ( uv[2].x - uv[0].x ) ;
    a.d = ( uv[2].y - uv[0].y ) ;

    b.tx = pt[0].x;b.ty = pt[0].y;
    b.a = ( pt[1].x - pt[0].x ) / w;
    b.b = ( pt[1].y - pt[0].y ) / w;
    b.c = ( pt[2].x - pt[0].x ) / h;
    b.d = ( pt[2].y - pt[0].y ) / h;

    a.invert();
    a.concat(b);
    return a;
} 


---

and a enterFrame event controling the engine:

PHP Code:

---

stage.quality="LOW";
function update(e:Event):void{
    cam.x = (stage.mouseX- stage.stageWidth/2);
    cam.y = (stage.mouseY - stage.stageHeight/2);
    render();
}
stage.addEventListener(Event.ENTER_FRAME, update);//onEnterFrame even 


---

Quote:

---

Originally Posted by renderhjs

It should run 4x,6x or even 10x times faster as AS2 and older.

---

Is AS2 available as well? :)

You should have placed an entry in that 25 lines contest that Bit-101 setup - you seem to be good in writing powerful stuff in such little code.

@renderhjs thanx for your answer! Im waiting for your explanations! :)

@bomesar: look at first post,- it should be AS1 which is for most people here equal to AS2. The speed improvements however are literally within the AS3 language- so switching sometime will give you alot more speed.

Finally...I'm finished basic classes for a 3d engine in as2, but with no importers. I'm just fixing up a few basic rotation functions for an entire object or shape. Also, it doesn't include lighting (which I think if you're writing in as2, it's not that important).
An importer might be a later project, or I might just write up a simple model editor for flash...

Anywho, I'm really sorry for all the delays/empty promises, but right now I'm just preparing a simple example for people.

(I simply solved the "material" issue by allowing people to pass either a colour number or a bitmapData for the material parameter for each shape.)

(Also, the reason for the big, huge, delay, is that I got carried away with writing classes last time, and it started becoming a big huge mumble jumble, so I decided to restart. This time the classes are simpler but effective, and there's only 6 of them (Render3d.as, Object3d.as, Shape3d.as, Camera3d.as, Point3d.as, and Scene3d.as).)

All in all, I'm going to have them posted by the next post! That's a promise! And an importer will come sooner or later for the .X3D format (XML).

didn't you had already a own thread for your engine? sorry again but I have the feeling that that would be rather fitting within your thread. The reason why I scrapped classes and alike to begin with in the first post and till now in this thread is because I want to give other people something that is:
- transparent
- readable
- simple
- basic
and not like the all the other engines and yours (including my personal others). Anyone that knows how to modify or extend the code I provided can come up with custom classes (like: uv, texture, shader, morphing, model loading, camera, animation, sprite3d, ...).
So I would rather keep things here stripped down to 1 set of code with no split up into classes and alike - that makes things only more complicated for the ones who want to learn and experiment - so just functions pleaes :D

Sorry...I was going to post the new classes in a separate thread anyways!

I know that as soon as classes are mentioned, then it all seems to get super complex, but I think that if you had a look at my classes, you'd see how basic they are, plus with comments, it becomes fairly understandable...

But yes, I will post to another thread soon, and no, I did not already have one...since...well, I restarted my engine as mentioned ^^^

If there are any functions I come up with...I'll give this thread a shout!

P.

Quote:

---

Originally Posted by renderhjs

@shaman4d: I can prepare some illustrations that might help understanding what is going on there better.
As Pazil pointed out its not yet perfect because it fails at non square textures but I understand roughly so far what I did.

---

here is the illustration,- i think it does a good job. It could be even fixed now (the non- square issue)
http://www.renderhjs.net/bbs/flashki...h_tutorial.gif

renderhjs — THANKS A LOT! Its so clear and simple!

There are a couple of people on every AS forum I belong to whose posts I watch for and you are one of those on this board. Glad I saw this post, I was not disappointed.

I look forward to cutting through the grease and seeing how this stuff really works.

gr8 work!!!

Thank you for this post, renderhjs.

You can change the thread name to "Gentle introduction to 3D through the prism of AS3 and Flash 8+".

I think most of people here on FK have no basic knowledge (including me) on how 3D engine works (for me it's like a miracle) and most of us to lazy to get a big, fat book to get answers. Now we have a brief, short and to the point description on basics with a working code sample.

I bookmarked this page and planning to study it carefully later.