[as3][3d] little 3d texturing demo

[EvilKris]

Hey the King of FlashKit is at it again!
Nice demo, the first one reminds me of GoldenEye on the N64.
I'm a little curious why you wrote a custom 3d format instead of reading in 3ds files, if I remember correctly (probably not) you already had a home-made engine for parsing 3ds files into Flash didn't you?
It's a tired old question but do you have any plans for implementing biped support? Would love to see some keyframe animations on little Link there.

[renderhjs]

thx guys

Totally cool demo! Hadn't seen that little green guy in a few years, glad to see he's working on some new projects

well not officially- I just grabed him from somewhere.

@EvilKris: regarding the custom file format: because it has 1/2 the filesize of *.3ds its even way smaller as any other default export format.
On this page I did a comparison with a default teapod (1024 triangles + UV map):
*.3d = 18.2 KB = my format,
*.obj = 66.7 KB = alias wavefront format
*.3ds = 31.5 KB = 3d studio export format
And yes I wrote once a ASE parser (3dsmax ASCI exchange format, used for example in the Unreal engine). But the problem with parsing (converting String into arrays with numbers) is that the filesize is to big and the parsing time takes to long even with AS3.

right now I´ve written a maxscript wich looks like this in 3dsmax:

I just need to select the mesh I want to export and hit the "write file" button,- it happens instantly and I can switch back to flash and reload the mesh. It´s such a time saver for all the testing so propably another reason for me.

As for biped,- no instead I want to use a similar model as we have in flash wich is keyframes tweened into each other. So my idea is to write another maxscript that checks wich vertices moved between the current keyframe and the last one and store their relative movements (like vectors) into that keyframe.

Back in flash I then have an array of states (frames, e.g stand, crouch, lean,...) in wich I can switch or tween via vertex tweening. I hope that this will also resolve into smal file sizes.

Bone stuff is highly complex math stuff wich I dare to touch right now- I rather want progress for now.

[renderhjs]

update
finally got my camera projection working, wich lets me allow using rendered backgrounds and elements and blend them with realtime stuff- similar like in Games from the past e.g Final Fantasy 7, Resident Evil, Zelda (indoor), Alone in the dark ect.


- rewritten camera model- behaves now like the 3dsmax camera. A smal tool copies the camera transformations from max to flash.
- slower for now,- because it holds lots of temporary loop code

screenshots from within 3dsmax:


demo
the demo comes with 2 objects this time- a table and a tower of crates

[ihoss.com]

I sat down today and decided to rewrite my (lousy) engine to use bitmapdata instead of drawing api. But I ran into a problem. How did you copy a triangle from the UV image into the surface bitmapdata?

[renderhjs]

But I ran into a problem. How did you copy a triangle from the UV image into the surface bitmapdata?

using bitmapData and beginBitmapFill(); it looks somewhat like this:

mc.graphics.beginBitmapFill( bitmapTextureSlice, newMatrix,...);
mc.graphics.moveTo(a.x,a.y);
mc.graphics.lineTo(b.x,b.y);
mc.graphics.lineTo(c.x,c.y);
mc.graphics.endFill();

It works just like you would do before like drawing solid colored triangles but instead with Bitmap Data and a given transformation matrix.

The key is to calculate the Matrix to transform the bitmapFill (you can skew, rotate, scale, translate,...) so that it fits in the end perfectly within the to be drawn triangle. I managed to calulate just the matrix in 1 go and not so complicated anymore like I did in the past. can I PM you a snippet of a texture slice demo I wrote at first.

[Al Capwn]

So are you programming this in flash, or using another program, then porting it?

[renderhjs]

as3,- just some xtra tools to get the Data into Flash with maxscript. So one could say the engine and game in Flash- the editor in 3dsmax

[ihoss.com]

Oh, I thought you drew everything to one bitmapdata object that you attached to an mc? I thought that would be faster.

One more question: How do you get rid of the white lines along the edges of the object? No matter what I do, they are there!

[JerryScript]

When you integrate, can you import the lightsource data from your background image to use for shading your 3d objects? It's not much extra data compared to the increase in quality you might get.

[renderhjs]

When you integrate, can you import the lightsource data from your background image to use for shading your 3d objects? It's not much extra data compared to the increase in quality you might get.

not directly - I mean I did not write any shading in flash or per pixel lightning. What I can do however is to bake the lights into the texture (in 3dsmax)- wich looks like the rendered thing but still can be lowpoly and realtime. It´s the same I did with link in the demo before, or here in the past.
The con is that it doesn´t work so well with rotating objects as their baked shadow then wouldn´t work on the other angles you can see the object (in terms of matching the background ones). But if you set the light for the object somewhat general like on top of it it´s not such a big deal.

here is a link for how it works in 3dsmax

[Al Capwn]

Guys, I'm not sure how you are doing this, but if you are using a square lense and then finding the intersect points from the lense to the eye, there is a much more efficient way of doing it. I made an engine recently that uses a round lense on a polar coordinate system. All that you have to actually do is measure the difference in angle from where the eye is facing and the points, and while some of you may think that this makes it distorted, it actually is probably better because is visualizes more like the human eye.

adventuresofjoel.com/3d%20demo.swf
Controls are Arrows to move.
A and D to rotate the camera.

The FPS meter goes up to 250, but I've been told that it is correct. If you want more info on it, here is the thread for it:
https://www.mochiads.com/forum-pub/c...#Comment_14767

[renderhjs]

Oh, I thought you drew everything to one bitmapdata object that you attached to an mc? I thought that would be faster.
One more question: How do you get rid of the white lines along the edges of the object? No matter what I do, they are there!

A.) copyPixels doesn´t come with a Matrix parameter wich means that if you copy pixels from one bitmap to the compositing bitmap you can´t apply transformations besides transform X/Y. But for texture mapping you need to be able to skew, rotate and reposition them.
As far as I know the only places Flash accepts Matrix objects are:
- sprite Attribute (mySprite.transform.Matrix = new Matrix()
- beginBitmapFill(bitmapData,Matrix,...)
and some others (2 or 3 left) but noone of them except beginBitmapFill is fast enough with multiple faces.
Fabrice from the Away3d team had an interesting approach
http://www.closier.nl/blog/index.php?paged=6
using just bitmapData and render everything into 1 bitmapData. To reach this however he had to draw the pixels himself (scanline wise) and do some tricky stuff to get a Mask also in BitmapData.
In the end so he wrote back then it wasn´t fast enough. Today however I found another entry in the Away3d blog claiming that they now can render into BitmapData object as well to use it even in a post processing pipeline:
http://away3d.com/away3d-bitmap-rend...essing-effects

B.) I had those nasty seams in my first approach with AS3 (more than a year old though). It was mainly because the way I sliced and transformed the triangles from the texture to the screen rendering was not clean at all (lots of hacks because I didn´t knew any better). I explained some of it even here at FK.
I now just a bounding box of the triangle out of the texture map and calculate a Matrix() object that transforms that inner triangle in a way that it results when used with beginBitmapFill() fits perfectly in the target triangle of the rendering. Anyway I noticed somehow that if I used repeat in the bitmapData of the to be drawn bitmapFill it resulted into seams- setting it to false worked perfectly even without the antiAliasing in Flash.


@Al Capwn: 250 fps is impossible because the flash player can only reach 120 fps at maximum + you check every second how many frames in flash have been updated since the last Second not every 500 ms- wich can be calculated as well but gets only inaccurate.
Congrats on the perspective thingy- seems you got to get it working perfectly (I remember the first demo). The reason however why I copy the 3dsmax camera behaviour is because I want to mix booth applications and create a flash game that can use content created from within 3dsmax (like 3d meshes, rendered background, rendered sprites,...)


inspired by JerryScript´s post I experimented with render layers
so within 3dsmax I rendered the following 2 layers:

a color (difuse) pass and a lighting pass with shadows. The color pass holds only textures and colors without any shading (note the crate is from flash- was not rendered!). The lighting pass on the other hand only holds light and shadow information including light color. The light pass is a simple image without any special channels.

if I combine however booth like this:

I get a composite of the 2 and if I put the realtime 3d Flash object between them it gets casted by the lights and shadows as well.
You can setup individual render layers in 3dsmax in the render settings:

just make sure that with the difuse pass no lighting is inlcuded (is checked by default, see bottom @screenshot).

this approach has some little bugs right now though because even smal cracks and floor convex areas cast shadows beeing overlayed of the character as well. I need to find a way to split those 2 putting the correct lighting elements only on top of it- to other ones in the difuse background pass. It´s a little bit complicated but I´ll fix that one somehow.


so here is the update and new demo (new perspective- same room)

demo
- 3 different objects to play with (2 of them with additional a checker texture to see the lighting better)
- inlcuded controls- use the arrow keys to rotate and move backwards or forwards (no collision checking though)
- light switch "lighting pass"- blends in/ out the lighting pass (so you can compare)

[renderhjs]

just to clarify some of what I brought into this thread
Q: how do I get the camera position into Flash?
A: either copy paste all the attributes of the camera (positionX, positionY, positionz, rotationX, rotationY, rotationZ, Field of View, ScreenWidth, ScreenHeight) or use maxscript and generate Actionscript code, XML files or anything Flash can handle. Like this maxscript I wrote:

rollout getCameraInfo "grab Camera info" width:192 height:275
(
	button btn1 "grab cam info" pos:[3,4] width:77 height:20
	edittext info "" pos:[-1,28] width:185 height:105
	edittext output "" pos:[-1,150] width:185 height:65
	label lbl1 "Actionscript:" pos:[4,135] width:121 height:14
	on btn1 pressed do
	(
		camObj = selection[1]
		if superClassOf camObj == camera then (
			camPyr = Pyramid widthsegs:1 depthSegs:1 heightsegs:1 width:100 depth:100 height:100
			camPyr.transform = camObj.transform
			camPyr.wirecolor = color 0 255 0
			
			x = camPyr.pos[1];
			y = camPyr.pos[2];
			z = camPyr.pos[3];
			fov = camObj.fov;
			w = renderWidth as Integer;
			h = renderHeight as Integer;
			rx = floor( camPyr.rotation.x_rotation *10000)/10000;
			ry = floor( camPyr.rotation.y_rotation *10000)/10000;
			rz = floor( camPyr.rotation.z_rotation *10000)/10000;
	
			delete camPyr;
			
			info.text="cam: "+w as String+" x "+h as String+"\t FOV: "+fov as String+" °";
			info.text+="\nx\t"+x as String+"\ny:\t"+y as String+"\nz:\t"+z as String;
			info.text+="\nrx\t"+rx as String+"\nry:\t"+ry as String+"\nrz:\t"+rz as String;

			clipb="var cam:Camera = new Camera("+x as string+","+y as string+","+z as string+","+fov as string+","+w as string+","+h as string+");";
			clipb+="\ncam.x="+x as string+";cam.y="+y as string+";cam.z="+z as string+";";
			clipb+="\ncam.rx="+rx as string+";cam.ry="+ry as string+";cam.rz="+rz as string+";\n";
			output.text=clipb;
		)
		
	)
)
try (-- close existing rolloutFloater
	closeRolloutFloater camFloater; 
) catch ()
camFloater = newRolloutFloater "set hjs 4" 226 320
addrollout getCameraInfo camFloater;

I made a tutorial on how to run maxscripts here. Once evaluated it looks like this:

select your camera and hit the "grab cam info" button- it will display you then the camera properties you need


Q: what is texture baking and what is the difference between texture baking and rendering?
A: texture baking is also rendering but instead of a perspective correct image you get the textures of the object with rendered results. You could say that it is like a 2D renderer because there is no perspective in the baked texture. It´s used alot in the so called nextGeneration development to conceal the lack of real power and instead display something that looks like a movie (Gears of War is a good example of this [wich is done as well in 3dsmax regarding the render to texture stuff].
So all in all it is very powerfull to imply something high quality render alike with way less reatime performance wich I think flash fits also into.
Here is a comparison of the zelda character I used before in a demo:

The first part shows how a rendering from max looked like (from the viewport). After that I selected the Zelda character and baked a complete Map (wich means that the difuse = color pass, shadows, reflections,ect. all went into the rending process). As you can see it has the same lighting and shadows as the rendering on the very left.
After that I took the mesh and the rendered texture (baked texture) and loaded booth in my 3d engine inside flash. On the last part you have link again but wihout the texture baking process- he just has his dafault textures without much shading at all.


hope that answered some of what people asked here before

[renderhjs]

just a little variation

demo
- rather difficult angle
- mix between lighting layer and difuse layer - so you dont get less anoying shadows on top of the character

some other ideas to easy get lighting and shadow informations on objects are rendering a floor lighting texture and pick in flash the color on wich the character stands (within the top view). With that color then color tint the object slightly. Con: the object or character will be shaded with 1 tone overall.

[ihoss.com]

Render, I tried bitmapData.draw, but it was not nearly fast enough, so I tried with beginBitmapFill, and it was a lot faster.

I also rewrote the code so that each face is not stored in a separate bitmapData, but is mapped straight from the uvMap every frame, and that got rid of the lines (for now, it's not complete yet).

The last demo was a bit slow with the character. The rest moved nicely.

[JerryScript]

Nice lighting technique. I had been thinking of just including lighting vectors (normals and magnitude), and then creating interior dropShadows on the faces based on the face normal and the lighting vector. Looks like you found a great shortcut that avoids all that! (at least for this type of static environment)

[bomesar]

Jesus Christ, render this is amazing!

[realMakc]

while this is great idea, smth is wrong. especially seen in 1st demo7. character almost looks transparent. maybe applying blur to lighting layer could help?

[renderhjs]

like I said- for now it´s more an Idea- I need to find a way or workaround to fix excatly that

[Domox]

great work, and thanks for the rendering notes. I am trying to build a 2d rendering engine thats pretty versatile, and they will help greatly...