Fireflies - How Would I Make this in Kineme?

epochapex's picture

Hi there,

I am pretty new to QC and Kineme. It's overwhleming to find a starting point. So I figured I'd try to recreate something I made in Flash/PV3D.

How would I make something like this in QC?

(It's basically a set of point rotating with a firefly attached to each. The 3d coords are converted to 2d coords, where the fireflies are attached to the converted coords. A function randomizes the targets and picks one to enlarge/shrink, then repeats.)

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

epochapex's picture
Re: Fireflies - How Would I Make this in Kineme?

Here's the collada file and texture.

(Modelled and textured this myself in Maya.)

PreviewAttachmentSize
firefly.zip587 KB

cybero's picture
Re: Fireflies - How Would I Make this in Kineme?

Your .dae model needs its vertices and normals recalculated before QC will render that mesh.

Then you have the matter of achieving the precise reconstruction of the textured model - second major hurdle.

Then the lighting.

Finally the means of scripting a random position routine for each of the fireflies.

Done [pretty much].

See attached re-computed example and try attaching your firefly .dae to the mesh renderer instead, it unfortunately won't work, even though it shows up in Mesh Lab [free and open source] and can therefore be recomputed.

Nice firefly .swf BTW.

PreviewAttachmentSize
firefly-recomputed.zip76.26 KB

epochapex's picture
Re: Fireflies - How Would I Make this in Kineme?

Cybero - thanks for taking a look at my app. I appreciate the compliment also.

It seems challenging to get 3D models to load correctly into Kineme. This particular one was exported when I still had a collada exporter in Maya, but since I have tried FBX exports from Maya 2010 and it only loads on component of the model.

Where can I find a guide to optimizing models for Kineme? It seems one has to know about some esoteric details before a model will load. I.e What does normal and vertex recalculation entail?

Reconstructing the textured model? So the 0/1 UV space is not correct when exported? Maybe that is something that would be fixable from Maya. I think I still have the file and will try exporting it in a different format.

Random position routine - I think this is the easy part, but don't really know how to do it in QC - only vague ideas at this point.

cybero's picture
Re: Fireflies - How Would I Make this in Kineme?

Get Mesh Lab. It will make a whole lot very obvious and allows for fairly extensive remodelling, recalculating and so forth. It is open source, can be a little buggy, but it does allow for these values to be properly recalculated.

I don't think that 3D loading is too much of a challenge.

Kineme3D source compositions gives an animation example - Kinight v Goblin, uses .md2, you have also been advised of the .fbx animation route.

The stumbling block is that made by virtue of the fact that the model that looks aok in most ways in Maya when exported as .dae doesn't either show, or doesn't show correctly in QC.

I think we can place the blame for that at QC's feet more or less, but it can be worked around. Please note that when dragged and dropped .dae will automatically be represented on the Editor stage as Mesh Importers, you can just hard wire the file path for the .dae's into the Kineme3D Loader patch. Does a more faithful job of loading .DAE's with less need for recalculation much at all :-)

3D object files being solidly transportable between applications and environments is a tricky business. Applications make a really good job usually of doing most with the least they have to deal with. Consequently qhat will exhibit well in someone else's 3D appplication might well not output a file that is truly transportable to another application or development environment. It is all a matter of both apps / frameworks having sufficient grounds of mutuality.

Without that one finds that one has a lovely looking object in application A that is invisible in application b that requires say, both vertices and normals, for example.

Then, when one has vertices and normals , has one got faces, etc. It's amazing what application's leave behind or leave unincluded. Double check your export settings and check your exported files out in Mesh Lab.

Hope that helps.

franz's picture
Re: Fireflies - How Would I Make this in Kineme?

If your model is divided into components, you have 2 choices:

  • make a renderer for each component (via an iterator) fast and easy

  • collapse all components into one mesh in Maya. if each component has a separate texture, as KnM 3d does not allow multitexturing, use Maya to flatten all texcoords into one UV channel. Eventually, texture unwrap the polygons

clean, also easy

http://www.creativecrash.com/tutorials/uv-101-1 or http://www.ramyhanna.com/texturing/polyTutorial/texturingTutorial01.html

and unwrapped texture will look like that: (attached jpeg)

PreviewAttachmentSize
sw bakedAO small.jpg
sw bakedAO small.jpg119.98 KB

epochapex's picture
Re: Fireflies - How Would I Make this in Kineme?

Awesome. Thanks for the help Cybero and Franz. I really appreciate it.

The model was orininally collapsed into one mesh/UV space and so it was ready to go. I exported it as FBX and then loaded using the Knight/Gobline template.

It worked like a charm. I have attached the sample file.

My next question is: What is the best way to load say 2 or 3 flies and have them move according to random movement?

I had two ideas:

  1. Generate 3 points in space according to say vertices of a pyramid, then anchor the flies to those points and have the pyramid rotate. See: http://www.epochapex.com/smuc/Flash/Fireflies%2002/spaceShip_01.swf

  2. Generate a random origina point nad have the fireflies shoot in three directions from that point. See the following link: http://www.epochapex.com/smuc/Flash/Fireflies%2003/pitter_pattern_01.swf

Or if you have any other idea on how to generate random movement, that would be greatly appreciated.

Thanks :)

(Working with this is going to be super fun!)

PreviewAttachmentSize
firefly.zip104.66 KB

franz's picture
Re: Fireflies - How Would I Make this in Kineme?

": What is the best way to load say 2 or 3 flies and have them move according to random movement? "

connect a random patch to X Z and Z translation of the object renderer ?

if the built in Random patch is not enough for you and want more control, more options, you can try FSK'Simplex patch or _1024_PerlinNoise patch

If you want to have the firefly's rotation oriented along movment, you'll have to rotate according to the directional vector.

cybero's picture
Re: Fireflies - How Would I Make this in Kineme?

x,y,z are only in the range -1 to 1.

However, you won't want to allow a full range -360 . 360 for your rotational values, at least not if you want to precisely reproduce the compositional effect you first posted about.

The other options you've posted about, pyramid and random originating points , can also be achieved.

You'll also have a little work, easily achieved , to create the blurry glow.

franz's picture
Re: Fireflies - How Would I Make this in Kineme?

"x,y are only in the range -1 to 1."

angle=atan2(y,x) .... (trigonometry classes always made me feel sleepy...)

or http://sacredsoftware.net/tutorials/Vectors/Vectors.xhtml and replace ship by firefly

I'm in a friendly mood ... :

PreviewAttachmentSize
_1024_move_it.qtz24.38 KB

cybero's picture
Re: Fireflies - How Would I Make this in Kineme?

I wasn't referring to x,y,z rotations BTW,:-), just the x,y,z positions.

Good tutorial links.

atan2 (y,x) is a neat way to re-use the random -1,1 range values.

epochapex's picture
Re: Fireflies - How Would I Make this in Kineme?

Thanks for the replies. I see that it's not that difficult in theory to achieve this. However, I suspect some details might be a bit hard to uncover and I may have some more questions.

Here's the function in Actionscript that transforms 2D coords to 3D coords:

      //function to convert 3D location to 2D for fireflies
      private function tracklocate():void{
         for (var k:int=0; k<8; k++)
         {
            var p:Point = _holder.local3DToGlobal(new Vector3D(_shapes[k].x, _shapes[k].y, _shapes[k].z));
            _trackers[k].x = p.x - 275;
            _trackers[k].y = p.y - 225;
         }
 
      }

This is the function that does all the work: local3DToGlobal(new Vector3D(_shapes[k].x, _shapes[k].y, _shapes[k].z)

I will also have a look at the link Franz posted, maybe it's similar to what I wrote above, but I suspect AS3 has inline math in the local3DToGlobal object.

How would I go about creating a glow like for those flies? V002 blur?

epochapex's picture
Re: Fireflies - How Would I Make this in Kineme?

Also, just saw the attachment. Thanks Franz! I will give it a try when I get a chance.

BTW, both of you have some amazing work to showcase. I've seen it on vimeo and blog. I'm very impressed and hope to be doing some similarly cool things within the year.

epochapex's picture
Re: Fireflies - How Would I Make this in Kineme?

Franz - thanks for posting the .qtz file. I know you are busy. I opened it last night to take a look and see what's going on now.

It's 2D vector math, using the random patch with the atan2 function you mentioned.

To be honest, I am lacking in some math skills. I should maybe brush up a bit on my understanding of trigonometry, but have in the past used these function without understanding them.

There's no easy way to transfer local 3D space to global 2D space without using some advanced math right? So it seems that I won't be able to reproduce the exact type of movement as I has in Flash, but this random walk seems to work well enough.

Now I just need to do some research to make a glow effect.

dust's picture
Re: Fireflies - How Would I Make this in Kineme?

converting 2d xy position to XYZ rotation requires some advanced vector quaternion math but converting lets say xyz pos to xy pos is as easy as dropping the z.

i'm not sure why you want to take something that is in 3d and convert it to 2d xy then use scale fake z depth, why not just keep it in 3d ?

i understand if your needing to use a mouse or something to move something around but there seems no need to convert 3d to 2d to fake a 3d animation that can just be done in 3d.

i havent used flash in a long time action script 2 days. so this makes practical since when working in an application that is inherently 2d like flash or flash was to fake your 3d but qc is a 3d app so it just doesn't make any since to me.

thats pretty nifty if flash will load 3d files now ?

epochapex's picture
Re: Fireflies - How Would I Make this in Kineme?

Dust - Thanks for posting. Yes I saw the Quaternion math for rotation. Seems really complex.

Yes, good point I see what you are saying. However, the idea is to anchor a 3D model to a vertex of say a cube and have the cube rotate, when the 3D coord gets converted to 2D coord it creates a nice round arc of movement that loops seamlessly.

It's just a strategy for generating movement. I suppose it could be done using some mathematical equation. Maybe just suing the random patches mentioned is better.

Flash can load Collada files using an open source library called Papervision3D. The Collada plugin for Maya2010 doesn't work, so I am trying other solutions like Kineme.

epochapex's picture
Re: Fireflies - How Would I Make this in Kineme?

Hi,

I've had some time to insert my model into the Qtz file that creates random x/y movement.

From here, I am not too sure what to do next.

I guess I can try having the rotation be more realistic using the scary math provided earlier. Or I could add a glow, but I'd really like to figure out how to make the fly stop moving at the scree bounds and also how to make it move in round arcs.

PreviewAttachmentSize
firefly_moving.zip676.05 KB

cybero's picture
Re: Fireflies - How Would I Make this in Kineme?

Well, I may well be proven wrong on this, but the two empty macros [Iterator & Lighting], seem to be doing absolutely nothing. I think I'd get rid of those for a start off.

epochapex's picture
Re: Fireflies - How Would I Make this in Kineme?

No, you're right. Haha. OK.

Karate kid has much to learn from Mr. Miyagi. :D

jersmi's picture
Re: Fireflies - How Would I Make this in Kineme?

For me, moving this around the screen would be easier to think about if I put the 3D Object Renderer inside nested 3D Transform patches. To test for the edges, you could use the Conditional patch.

jersmi's picture
Re: Fireflies - How Would I Make this in Kineme?

By good fortune your 3D bug dropped right into a comp I have for making things fly around. This uses nested 3D Transformation patches like I mentioned above -- quite a different method than the one you are currently chasing. Check it out.

PreviewAttachmentSize
firefly Test2.qtz27.4 KB

jersmi's picture
Re: Fireflies - How Would I Make this in Kineme?

But I also really like the atan2 function for rotating the z axis in franz's demo comp. I trapped franz's ascii fish inside the viewer to show a way to use a conditional to create bounds. :)

PreviewAttachmentSize
_1024_trapped.qtz33.54 KB

epochapex's picture
Re: Fireflies - How Would I Make this in Kineme?

Hi Jersmi,

Thank you so much for posting these. :)

I've opened them both and can see that there's is much going on. I'll have to dissect and reverse engineer these to really understand what's going on.

K forgive my ignorance for asking: I will have to hook up the 3D model to where the 3D transform patch is sitting?

(QC is really different from how I am used to learning CG. It's so serendipidous and there's no definitive guide. I'm really glad I've posted this and am getting some good guidance. In the end I will have to put some effort into educating myself though.)

jersmi's picture
Re: Fireflies - How Would I Make this in Kineme?

Quote:
K forgive my ignorance for asking: I will have to hook up the 3D model to where the 3D transform patch is sitting?

If I understand your question, your 3D model is still in the firefly_Test2 comp that i posted (I used your model). The 3D Object Loader/Renderer is inside the root level 3D Transform patch, then inside the nested 3D Tranform labeled "orient object". If you can't see it, fix the path to the 3D Object Loader. You might be able to drop the comp inside the folder with your .fbx -- the path is currently "firefly/firefly.fbx".

epochapex's picture
Re: Fireflies - How Would I Make this in Kineme?

Hi Jersmi,

I expanded the 3DTransform patch but not its children, so that's why I missed it and also I put it in a different folder, so the path didn't match.

Thanks for clarifying.

I might have some more questions when I have time to tinker.

Much appreciated. :)

epochapex's picture
Re: Fireflies - How Would I Make this in Kineme?

Hi Jersmi,

I've looked at the patch in more detail. Very cool! I like how the fly loops around in realistic circle, while bobbing up and down.

Just to see if I am understanding this correctly:

  1. The 3D object has transformations applied to it in a macro patch, which rotates the model to match the arc, so that it's looking forward according to it's forward vector.

  2. There's another macro patch that rotates the whole configuration in a circle, while adding some smoothed randomized movement as well.

Questions:

  1. What are the input splitters doing? Such as reverse and tilt?

  2. What are the x operands doing?

I'll try to add a glow by myself, so that at least I can contibute something too. :)

Thanks.

jersmi's picture
Re: Fireflies - How Would I Make this in Kineme?

Reverse, for ex., requires that a few parameters have different values for forward/reverse on the 3D Transforms. Specifically the reverse switches between index 0 and 1 on the relevant multiplexers; multiplexers output the right values for the job. In general, this comp revolves around understanding the 3D Transform patch.

epochapex's picture
Re: Fireflies - How Would I Make this in Kineme?

Jersmi,

I have reverse engineered the composition by rebuilding it patch by patch. It worked and now I understand a bit more about what's going on.

Questions: 1. How did you get Patch Time inputs on the Interpolation/LFO patches? 2. Where did the /lfo Random Smooth patches come from? Did you code those?

I also tried adding some glow but have no idea how to do it. I tried using the gaussian blur inside a Render in Image patch but that didn't work.

I made a rocket in Maya and made it fly around - attached.

How would I add a stream of particles behind the rocket or a glowing swarm of particles around the fly?

PreviewAttachmentSize
smucet.zip250.07 KB

jersmi's picture
Re: Fireflies - How Would I Make this in Kineme?

epochapex wrote:
1. How did you get Patch Time inputs on the Interpolation/LFO patches?
For QC time-based patches, right click to access timebase.

epochapex wrote:
2. Where did the /lfo Random Smooth patches come from? Did you code those?
The LFO Random Smooth patch is a virtual macro I made. It simply uses a LFO set to Random with the option to use a Smooth patch, with LFO period same as smooth time for continuous smoothing.
epochapex wrote:
I also tried adding some glow but have no idea how to do it. I tried using the gaussian blur inside a Render in Image patch but that didn't work.
Try putting the whole patch inside a Render in Image (don't forget the Clear patch), then fx, then rendering (e.g., Billboard).
epochapex wrote:
How would I add a stream of particles behind the rocket or a glowing swarm of particles around the fly?
Try adding a Particle System at the same level as the 3D model, then try to line up the particles with the model -- not sure if this would work without trying first, but that's how I would start.

epochapex's picture
Re: Fireflies - How Would I Make this in Kineme?

Hi Jersmi,

Thanks so much once again for clarifying.

I have a couple more questions:

  1. What's a virtual macro patch? Is that like adding a 'clip' to your library?

  2. When adding a 3D Model into a Render in Image patch, how would I get rid of the background - i.e. have an alpha channel? The clear patch doesn't seem to cut it, unless I am misunderstanding.

Thanks. :)