Animate a camera on a network rails based on two points.

[matthewharwood]

I want to animate a camera between two points. Think of it like a camera on rails. A bit more tricky is that the rails are interconnected. e.g.  Point: A moves to B  moves to C moves to A moves to D etc. Therefore, any combination could work.

In my local example, I have an event that will trigger this switch. For this example lets just use a click or interval to iterate.

PROBLEM/QUESTION:
How can I reset/append the keyframes of an animation? Typically my logic will either not run or replay the same animation.

http://www.babylonjs-playground.com/#U4FO3#6

 

I hope, this animation, I made will help communicate the interaction. Note that this is the camera moving, not the meshes.  At some point, the meshes may slightly move relative to the camera; however, that's for next iteration.

 

 

 

[GameMonetize]

Hello I would rather suggest creating a new one and blending from the previous one:

http://doc.babylonjs.com/tutorials/Animations#animation-blending

[matthewharwood]

Thanks for the quick answer. I'll give this another shot after work.  From the blending tuts and your explanation, If I understand correctly, Do I need to just create a new animation and blend ? If so couldn't I just move the animation into the click event?  http://www.babylonjs-playground.com/#2BLI9T#84  

Or I need to stopAnimation(prevCamera), create a new camera, add animation to that camera, push keys frame to new camera, and scene.beginDirectAnimation. 

[GameMonetize]

You should just need to create a new anim and blend.

[matthewharwood]

@Deltakosh For the life of me, I cannot figure this out. http://www.babylonjs-playground.com/#2BLI9T#107.  I'm missing something fundamental.  I've created a function that will return keys based on the current position of the camera and a static final destination of the camera. on Click Event the fpsbtn, I create a new animation, set blend, create new keys, set key, reset animations, stop previous animations, and begin new animation. This code is based on the blending playground demo. Unfortunately this code creates a blink of the mesh sphere; moreover, it doesn't seem to transition the camera at all.  >_< Could I please get more help?

[Pryme8]

 

[GameMonetize]

Not sure to follow: the playground you linked is animating the sphere and not the camera.

is it expected? 

[Pryme8]

it is not just on the first one... and a sphere is a camera for movement principles, take a look at the later playgrounds the camera is moving on a path.

[matthewharwood]

@Deltakosh I've updated the playground link slightly here http://www.babylonjs-playground.com/#2BLI9T#109   @Pryme8 , I'll read the camera boom prototype tonight.  It looks like I can learn a lot from that.  At a glance the camera boom prototypes may not solve my problems because there will be a potential infinite* amount of paths because on click animations could be cancelled mid keyframe and sent to a new destination point.  I feel like my playground example has the logic but misses syntax on how to blend these animations with their destination points.

[Pryme8]

Then you just clear the path and add a new one

[matthewharwood]

@Pryme8 With your Camera Boom demos, I tried to clear the path with just setting to empty array and adding new paths.  Onclick, the animation wont cancel or run the second set of paths. Any ideas on what I'm doing wrong? Demo: http://www.babylonjs-playground.com/#AGOCE#14. @Deltakosh Is there anyway to this Camera Boom-esq interaction with only Animation w/bending? 

[GameMonetize]

Sorry I'm a bit under the water so far. I could probably find sometimes between two meeting but I need a simpler repro with just a box and two animations highlighting the problem? (Which is that you cannot use blending despite my initial link, correct?)

[Pryme8]

As soon as I have time to help I will, my bad Ive been stacked.

[matthewharwood]

I drew out what I'm trying to accomplish.  I hope it helps a bit more.

[matthewharwood]

http://www.babylonjs-playground.com/#2BLI9T#112 @Deltakosh  Here's a sample of two spheres that need to be blended when you click on the FPS counter. The first animations works; however, the blend doesnt.  I think my logic makes sense but syntax is inncorrect.

[Pryme8]

Yeah editing my script produced for the boom prototype will do that, and you could do that a lot easier with the animation system.  Or even just some dampened lerping without a time delta just a raw lerp.

[matthewharwood]

@Pryme8 Given my playground example how could I do the animation blending so that on click it actually does the blend? 

http://www.babylonjs-playground.com/#2BLI9T#112.  Sans the messyness of the names of objects and props, I feel like my logic is sound.  I read the blending docs and gave it my best but I just don't get it.

[Pryme8]

A recursive loop that trys to normalize the cameras position to a set point and rotation target. 

 

Also camera.lookAt() will prolly help you or what ever it is.

[Pryme8]

So off the top of my head on my phone

camera.position = camera.position.add((camera.position.clone().add(targetvec)).scale(0.5)).scale(dampenamount))

camera.lookat(targetvec).

thats like over kill on stringing but yeah that's the idea, put that in a beforeregister function that skips if the cameras position is the same as the current target.

 

not really ideal but very simple and will give you an idea of how to do a better one.

 

its kinda similar to finding a forward vector and just moving a mesh along it.

[Pryme8]

http://www.babylonjs-playground.com/#Q9GPE#2

I just discovered that mesh.lookAt() or camera.lookAt() are crashing the playground so no rotation on this one cause im too tired... and want to go to bed...

BUT on your local the lookAt should work just fine... this is really rough and cut geter done in like 10 mins but you can tailor it for it to have inertia calculations  to make the camera accelerate and decelerate to target ect, then do the like wise to rotation in radians then just multiply the radians by pi.

***PINGING @Deltakosh why is lookAt broken? I used it on a project on 2.4 not less then 24 hours ago and tried on this playground for him to first do it to the camera which was crashing the playground, and then to a blank mesh that the camera was parented to and same result.

[matthewharwood]

@Pryme8 I'll give this a closer look cuz this doesnt make much sense yet.

[Pryme8]

If you have two points A,B that are seprated by space :
A----------------------------------------------B
take half that space

---------------------- scale it down to what ever range you want
---------------------- * 0.02 =  '-'; (something low its going be dependent on your IO speed)
set Point A's to its position minus that new step and repeat till within a range then snap to the position.

that would be what i call a raw lerp, no delta calculation (I mean there effectively is because of the IO but yeah... but no but yeah this is a lazy mans lerp)

Your just finding your mid point cutting it down and then applying it finding a mid point cutting it down applying it...
This will work from your model you presented because you dont need curving or waypoints, so a boom system like i first showed you would be over kill.

BUUUUT if you were to use it, you could do a myriad of things if you had a little more understanding of the script, maybe ill make a more legit version and post it here sometime this week if I can get my other priorities done, otherwise we may never have a new CYOS and ill piss off a bunch of clients as well... so yeah umm give me a little bit of time, till them boot up a simple canvas element figure out how to set up a stable subtread IO proccess and start messing with vectors in a 2d environment run some tests get better at liner algebra (not talking smack just real advice i do simple experiments all the time).
 

[Pryme8]

http://www.neatflax.com/

@jerome has a great example of how to do a rollercoaster and that might help you as well, I think he uses the animation system.

[matthewharwood]

@Pryme8 Bleh... through my poor research seems like BABYLON.Vector3.Lerp() is a static method of the Animation class; might we use that than the complicated math?

Quote

For advanced keyframe animation, you can also define the functions used to interpolate (transition) between keys. By default these functions are the following:

BABYLON.Animation.prototype.vector3InterpolateFunction = function (startValue, endValue, gradient) {
  return BABYLON.Vector3.Lerp(startValue, endValue, gradient);
};

But the more I look into it, it just seems like granularity is unnecessary? It appears that the basic interpolation + blending is good and free( @Deltakosh could maybe shed light on this?)  I checked out the rollercoaster example and the problem again is that the track path is created at runtime prior to the animations start.  The paths need are generated off of current camera position (dynamic)  and an end camera position (static).

/** Pseudo Code **/

// On click of (B) go from BABYLON.Vector3(0,0,0) to BABYLON.Vector3(0,0,-10);  ( A-> B)

// Animation completes//

// On click of (C) go from BABYLON.Vector3(0,0,-10); to BABYLON.Vector3(0,10,0); (B -> C)

// Animation cancels; animation is incomplete; Animation changes trajectory from new Event.

// On click of (A) go from current.camera.position to BABYLON.Vector3(0,0,0) (currentPos -> A)