Creating scene interactivity DEMO

|

Sorry for the delay, there were some major changes in my life and i didn’t have time to blog. The “bad” news is that i am no longer working for the company i worked for in last 3 years. We had some opinion differences about the company future, where i wanted to focus on application/framework/core development but it just wasn’t in the cards, however i am still staying as external collaborator. The “good” news is that i will have a lot more time for experimenting with flash. This was after all the major reason to leave the nine to five job, and focus on pushing the boundaries. If anyone has any interesting ideas, or wants a collaboration on some project drop me a line. :)

But back to the topic even though i really didn’t have time to work on Agile3D i am posting a demo on scene interactivity i created in january. Its simple, to interact with the textures just hold SHIFT.

View Demo: DEMO

First texture is a simple painter with a few tool options to experiment with, second texture is very simple video player just becouse this is probably the most used application within 3D in flash. The final texture loads external SWF, in this scenario its our old Flash 9 3D engine demo. The external swf uses stage position of the mouse for the rotation offsets, if someone really wanted to implement external swf as interactive texture its not a good idea to use stage property but rather use some kind of canvas. It doesn’t matter here, since the demo is just for fun :) Enjoy and keep tuned for the next demo, since this was never intended to be the final one.

Are there any examples of scene interactivity that you want to see?

Creating scene interactivity Part2

|

So where we finished last time? Oh I know now we know the coordinates of mouse click and pointer to a FaceShape instance. Why FaceShape, its simple if we only had Shape instances there would be no pointer back to a triangle data which rendered into that particular Shape. Thats why i made a simple class FaceShape which extends Shape class and contains pointer to a RenderFace instance. I’ll rather not go back into other solutions mentioned in previous part but suffice to say that if you use sprite method you will probably create something like FaceSprite or if you go the math method you will access the RenderFace structures directly anyway. But lets concentrate only on FaceShape solution. If you have any general questions about how to implement this with other method used up to this point just ask ;)

Now we have projection space coordinates which is simple mouse coordinates on the screen and projected vertices of the RenderFace, with both of these its a simple math using triangle equation to get the coeficients for position of the mouse coordinates within that triangle. Using these coeficients in the same equation using projected UV coordinates we can get exact UV coordinates where user clicked within the texture. There can be additional math involved if you use stuff like multitexturing or UVs outside 0/1 range or additional texture dependent mapping stuff you implemented, but basically thats it. Tadaa, simple enough now that we have the UV coordinates of the user mouse interactivity we want to propagate it to the interactive texture.

Here we are at the crossroad again, we have 2 options to go.

1. standard method used since Flash8, uses hidden InteractiveObject instance that overlapping the scene where user interacts.

2. using more sophisticated event model of AS3 to propagate events without direct user interaction

I am sure you all are aware of the 1st method, anyone that used some kind of texture interactivity in old Flash8 engines probably encountered it in one way or another. The principle is quite easy we have an InteractiveObject(it was MovieClip in Flash8) instance on the scene at all times interactivity is in progress but its not visible. Moving mouse over the interactive texture just provides information about positioning of the “invisible” InteractiveObject, and since its on the stage it will catch the mouse events directly all we need to do is position it correctly so the mouse over the object is always at the correct point. And we are pretty much done everything else will work automatically.

Downside to this method is that we need to have the InteractiveObject in the scene. It can’t be invisible as in visible=false since such objects don’t catch mouse events so we need to just fade it away using alpha=0 but as you already know there is a glitch, for example non-embedded texts can’t have alpha values. Other issue is if you are catching mouse move events which move in the opposing direction as the offset goes your movement will be jagged. I am not making myself clear here probably but its hard to explain, this problem is due to the double movement going on, first you need to position the IO instance into correct place so you move it but at the same time it catches the mouse move event. This is not major problem since this is visible only in few applications, like a texture painter for example.

Now onto the 2nd solution, one can say this is more complicated one but at the core its basically the same thing. In this scenario we don’t have the IO instance on the stage we just have it in memory but we don’t add it to the display tree (hence it wasn’t possible before AS3). Instead of offseting the IO instance within stage as in previous scenario we will propagate the event directly to the IO instance. So what goes on, we capture a mouse event, change its coordinates to the correct coordinates based on the UV coordinates we clicked, and then propagate it to the InteractiveObject instance. This can be a chain of methods, just for illustration in Agile3D since FaceShape refers to RenderFace instance which refers to material instance which refers to its texture instances where texture refers to its InteractiveObject element.

But there are downsides again, for example this will not work with native functionality within flash such as dynamic text selection. Basically any stuff that can’t be invoked only with mouse events but needs to actually happen will not work.

So there is not a ONE correct solution, it all depends what are you trying to achieve. Agile3D currently supports both methods, which let me tell you is a mess right now due to all the testing and tracing i did, you can picture it.

I hope i was making sense, sometimes its hard to explain something without going into unnecessary detail or math. That way it would be 20 pages long probably. If by any chance something isn’t explained enough or its confusing just ask as always ;)

Next i will post an Agile3D demo example of scene/texture interactivity.

Agile3D available soon?

|

Since last post i got a couple of emails and people asking me if and when will be the Agile3D engine public. The answer is simple: “as soon as possible.” As you can know making a 3D engine and it doesn’t really matter in what language is not a simple task, some languages make some of the parts easier, other languages make other parts easier but nevertheless its still a tedious task. Especially if its only the little me that works on it, i did around 95% work on Agile3D so far from scratch reusing very little of our previous Flash9 engine, the other 5% belongs to FiRE and Cifko and i hope this number will grow ;) Anyway it explains the latest delays in updates, but back onto the topic.

Agile3D works as you can see, but the problem is that so far there is a lot of redundant code thats just me trying various optimalizations, also there is NO way to create models runtime, it supports just our own ixf format which was used in all demos so far. Most of the API is transparent, its me debugging stuff again, methods that should be private aren’t, inheritance is a mess…

So what does that mean, it means i need to polish the code, create some usefull methods for creating basic 3D shapes, probably add ASE import, make some tutorials a little documentation here, little documentation there…

It took months of closed development for other Flash 3D engines out there, so please be patient i will do my best and hopefully make a public beta SWC binaries in a month or two. I am not paid to do this, i do it during nights when i am not working, which is rarely since i work even 16 to 20 hours a day sometimes if there is a rush project. So bear with me, i will also try to release the IXF format specification and Maya plugin binaries.

Thanks, and nope i didn’t forget about “Creating scene interactivity Part2″ its on its way this week. ;)

Creating scene interactivity Part1

|

Hi there again, after almost 2 months i deliver as promised a post about scene/textrure mouse interactivity. Sorry for the delay folks i didn’t really have enough time back in US then it was christmas time and then i got to resolve some personal stuff. But don’t worry this doesn’t mean i didn’t work on Agile3D, it just means that i didn’t write about it. But back to the scene interactivity stuff.

Lets get to one of the most problematic parts of scene interactivity and thats how to identify face/object under mouse. If you read my previous post on this topic you already have a basic idea what the options will be, but lets summarize possible render options for face.

1. Render each face as a separate sprite instance.

2. Render all faces into one display object.

3. Render each face as a separate shape instance

Handling interactivity of option 1. is easy and the most straightforward since each sprite which means each face in this instance will generate their mouse events directly and once you have references from the sprite instance to the face instance you are pretty much done. However as always the most straightforward solution is always the worst one, downside to this is that its really slow all those InteractiveObject instances firing events clog the FPS a lot. Other downside is that it consumes the most memory of the three, since sprites are DisplayObjectContainters as well which is unnecessary for us anyway. So unless you really want to simplify your engine and sacrifice the performance i wouldn’t recommend doing it this way.

Lets look at option 2. Chronologically it was the first option i tried since it required almost zero changes to my ViewPort class, obviously becouse without interactivity I already was rendering all faces into one shape. But what now, there is no native way we will get the face under cursor so this is where some math comes into play. First thing trying to raycast from mouse to the scene, but this is unecessary complex operation since we can just work with already projected faces and do all the calculations in 2D. Here its a matter of detecting point inside a triangle which lets face it is not as quick as we would like so another optimalizations are needed this is the point where you can unleash you potential. Here are some of the things that i tried. I used bounding circles not the escribed circle since that would need additional calculation but the fastest one which is from random point with the radius of the longer triangle line this way possible intersection was just a simple distance check. Next i even used quadtree for space lookup optimalizations before actual distance checks… I am not going to the math details here its not the point of this article, but suffice to say this method proved to be real improvement over option 1. But this is not where i stopped ;)

Option 3. and let me say it this is the one that is currently implemented in the updated version of Agile3D. Here were are creating multiple Shape instances which means that the whole scene is not rendered into a single shape but each face has its own FaceShape instance. There is no slowdown of the option 1. since we are not using Sprite instances, the memory usage is not of the roof as well. But you ask whats the point since we don’t have the mouse event possibilities of the Sprite class. The point is that this option opens another possible solutions that are not available in option 2. and were rather pointless in option 1. (since the slowdown). First thing that comes to mind is the good oldfashioned hitTestPoint method. Its a native way of finding whether a display object collides with a specified point, yay ideal. This proved to be way faster than option 1. and it rivalled with the optimized option 2. but depends on the optimalizations. Still, this is not the solution that Agile3D uses after all.

The final one do indeed comes from option 3. but doesn’t use hitTestPoint. What i use is one method that honestly i never did use before because i never needed it at all, but here its the perfect one. Its DisplayObjectContainer’s getObjectsUnderPoint method, the pure genius of one call to get all you need, no repetitive testing, nothing just a native function call.

This is by far the fastest method i could came up with, i am not going to say its the best one since i am not the all knowing being but i can atleast doubt that there is a faster way. If anyone out there has a potentially fastest way just drop me a word about it i am all ear. ;)

Thats all folks, if there are any questions just ask, after all half of the fun is to get the knowledge and the other half is to share it. Next post will be about what comes next, how we get the correct scene/texture coordinates and how we propagate the event to the interactive texture if there is some.

Thanks, and drop me a line.

Back online and ready to rumble.

|

Just a fast note that i am back online and working on Agile3D, i got my hands on a new notebook and settled down in LA. So you can expect some updates soon, i am guessing this weekend but who knows. I am currently still working on the scene/object/texture interactivity which is without a doubt one of the must have features as far as i see it.

Btw if anyone is reading this at all, even though i doubt that, just drop me a line whats the most wanted feature in Flash 3D engine? Is there something that is missing in the current engines that would be nice to have implemented? Nothing is impossible lets push the boundaries together ;)