Animating Camera Parameters with Key Frames

[ancientholiday]

I would like to animate my camera from current position to another pre-determined position.

 

Mattx264 posted the following function in 2014

 

According to Mattx264 function, how does the script know where the end position is located?

 

Does toAlpha, toBeta, toRadius recieve a number?  If not, how does the code know where the end value of these parameters are?

 

Can anyone demonstrate this code in the playground?  I dont understand how the end position of the radius, alpha, and beta are located in the script.  There is no variables declared about them.

 

Thanks,

ah

 

 

 

 

BEST ANSWER mattx264, 23 April 2014 - 04:20 AM

 

Thank you @Deltakosh.

I wrote this function, may be it will help somebody.

 

 

var ArcAnimation = function (toAlpha, toBeta, toRadius,position) {

           

            var animCamAlpha = new BABYLON.Animation("animCam", "alpha", 30,

                                      BABYLON.Animation.ANIMATIONTYPE_FLOAT,

                                      BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

 

            var keysAlpha = [];

            keysAlpha.push({

                frame: 0,

                value: camera.alpha

            });

            keysAlpha.push({

                frame: 100,

                value: toAlpha

            });

            var animCamBeta = new BABYLON.Animation("animCam", "beta", 30,

                                     BABYLON.Animation.ANIMATIONTYPE_FLOAT,

                                     BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

 

            var keysBeta = [];

            keysBeta.push({

                frame: 0,

                value: camera.beta

            });

            keysBeta.push({

                frame: 100,

                value: toBeta

            });

            var animCamRadius = new BABYLON.Animation("animCam", "radius", 30,

                                    BABYLON.Animation.ANIMATIONTYPE_FLOAT,

                                    BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

 

            var keysRadius = [];

            keysRadius.push({

                frame: 0,

                value: camera.radius

            });

            keysRadius.push({

                frame: 100,

                value: toRadius

            });

            animCamAlpha.setKeys(keysAlpha);

            animCamBeta.setKeys(keysBeta);

            animCamRadius.setKeys(keysRadius);

            camera.animations.push(animCamAlpha);

            camera.animations.push(animCamBeta);

            camera.animations.push(animCamRadius);

            scene.beginAnimation(camera, 0, 100, false, 1, function () {

             

            });

 

        }

GO TO THE FULL POST 

 

[Temechon]

Hello, 

 

This function is valid only for a camera which type is ArcRotateCamera. If you want to animate a FreeCamera (or another one), it won't work.

Why ? Because alpha, beta and radius are properties linked to the type ArcRotateCamera.

 

In its function, Matt takes 4 parameters: the end value of alpha, the end value of beta, the end value of radius and position (which is not used actually).

This block : 

var keysAlpha = [];keysAlpha.push({  frame: 0,  value: camera.alpha});keysAlpha.push({  frame: 100,  value: toAlpha});

is what determines the end value for the property 'alpha'. You can see this block is repeated for properties beta and radius.

By creating an animation, the system will start at the value given at frame 0, and end at the value given at frame 100. In the meanwhile, it will interpolate each value in this range. Everything is done automatically!

 

The first thing you need to check is the type of camera you are being using: is it a freeCamera, an ArcRotate, another one?

Then, find the property you wand to update: is it the camera position, the camera target, the camera rotation, another one ?

Finally, create an animation (it is very well described in the playground or in the documentation), and party on! (as Wingnut use to say )

 

Good luck !

[ancientholiday]

Hello, 

 

This function is valid only for a camera which type is ArcRotateCamera. If you want to animate a FreeCamera (or another one), it won't work.

Why ? Because alpha, beta and radius are properties linked to the type ArcRotateCamera.

 

In its function, Matt takes 4 parameters: the end value of alpha, the end value of beta, the end value of radius and position (which is not used actually).

This block : 

var keysAlpha = [];keysAlpha.push({  frame: 0,  value: camera.alpha});keysAlpha.push({  frame: 100,  value: toAlpha});

is what determines the end value for the property 'alpha'. You can see this block is repeated for properties beta and radiusa

By creating an animation, the system will start at the value given at frame 0, and end at the value given at frame 100. In the meanwndhile, it will interpolate each value in this range. Everything is done automatically!

 

The first thing you need to check is the type of camera you are being using: is it a freeCamera, an ArcRotate, another one?

Then, find the property you wand to update: is it the camera position, the camera target, the camera rotation, another one ?

Finally, create an animation (it is very well described in the playground or in the documentation), and party on! (as Wingnut use to say )

 

Good luck !

Hello,  I understand that this is for an ArcRotate Camera.  however, what is the numeric value of toAlpha? How is that being determined?  by a mouseclick or something else?  is toAlpha a keyword in Babylonsystem?  the key frame will start at camera.beta, which is the current value of the the camera's beta in the script,  and it ends at "toBeta."  What is the numeric value of toBeta if it is not pre-defined in a variable?

[Temechon]

They are defined in the function prototype you just wrote in your post:

var ArcAnimation = function (toAlpha, toBeta, toRadius,position)

This function can be called like this: ArcAnimation(Math.PI/2, Math.PI, 100)

In this case, toAlpha will take the value of Math.PI/2, toBeta will have Math.PI, and toRadius will be 100.

[Wingnut]

Hi guys.  Ancientholiday... just in case you want "real" numbers...  generally...  arcRotate cams are created... aimed 0 .alpha radians by default.  This places them looking -x.  If you turn orbit the cam.alpha -Math.PI/2 (approx. -1.57 radians or -90 degrees), it is now aimed +z.  Use a +Math.PI/2 .alpha orbit, and the cam would be aiming -z.

 

Let's go back to 0 radians alpha again (camera aiming -x default).  If you orbited the alpha either -Math.PI or +Math.PI... it would orbit -/+ 180 degrees or about 3.14 radians.  The camera would face +x, opposite of the default direction.  So, animating from 0 to Math.PI*2 ... would take you 360 degrees (6.28 radians) in a complete orbit around the target point.

 

Loosely speaking... 45 degree angles = Math.PI/4 = .707 radians.

 

I say all this just in case you were looking for genuine numeric values to play-with.  Be well, good luck.

[Wingnut]

Ok, AncientHoliday... let's take a look at this...

http://playground.babylonjs.com/#CYXXO

Lines 24-77... there is the ArcAnimation function.  It is a "tool".  A reusable tool.  So, no camera numbers/values are hard-set in that function.  YOU must send it 4 variables or values yourself (line 79)... and then the tool will animate all the variables FOR you, using interpolation for 'tweening' (determining the values for all the frames that happen between 0 and 100.)

Let's look some more.  Line 6...

var camera = new BABYLON.ArcRotateCamera("Camera", 0, 1.5, 50, BABYLON.Vector3.Zero(), scene);

In this camera creation line, .alpha is set to 0, .beta is set to 1.5, and .radius is set to 50.  The BABYLON.Vector3.Zero() is the TARGET for the camera, NOT the camera.position. 

Position is not important, yet. ArcRotateCams and many other scene items... are created at position 0,0,0, sometimes called 'origin'.  

But remember that I said (in the last post) that ArcRotateCams begin... aiming -x, by default?  Well, our radius is set at 50, which means the camera is backed-away from the target... a distance of 50 units.  Thus, I know that the camera is positioned 50 units +x away-from its beginning position 0, 0, 0 (aiming -x). 

So, by deduction, I know that the camera is currently positioned at (50, 0, 0)... and still aiming -x.  The camera backed away from 0, 0, 0...  50 units +x (backwards).

Ok, it's time to CALL our ArcAnimation  tool function.  When you CALL the function... THAT is when you put-in the REAL numbers.  Let's look carefully at line 79.

ArcAnimation(Math.PI * 2, 1.5, 50, camera.position);

Math.PI * 2,     1.5,            50,          camera.position

 (toAlpha)     (toBeta)   (toRadius)        (position)        (position is not named toPosition because camera position is not animated in this func, but easily COULD be.)

toAlpha:  Math.PI * 2 = 6.28 radians (approx).  Since the camera's .alpha is currently set to 0 (in line 6), the .alpha will animate from 0 radians, to 6.28 radians  -  a complete 360 degree circle around the target.  It does just that.

toBeta:  We want to animate from the current .beta... to the toBeta... 1.5 radians.  But line 6 has set the current .beta to 1.5 when the camera was created.  So the beta animation will go from 1.5 radians...  to 1.5 radians.  In other words, it won't animate at all.  In line 79, if you change the 1.5 to be 0.8, then the camera would raise... as it did its 100-frame, 360-degree .alpha animation.  Two camera parameters animating at once.  Wow!  360 degrees alpha, and about 10 degrees of camera tilt/height change.

toRadius:  Same situation as toBeta.  The camera was created with a radius of 50 in line 6.  In line 79, you order the .radius to animate to 50 (across 100 frames).  The camera will not change radius at all... no animation for .radius.  But if you changed the 50 in line 79... to be.... oh... 30... then the camera would decrease its .radius from 50 to 30 in 100 frames.  THREE camera parameters animating at once.  Smokin'!

Should we try a 3-parameter/value animation in a playground... just to see it?  I think so.  Here we go, spinning alpha in the opposite direction this time, and no use of Math.PI crap.  All radians.  We could use all degrees, too, but you'd need to use BABYLON's handy degreesToRadians convertor.  It's better to learn/use radians and derivations of PI.  Ok, here comes our super animation:

http://playground.babylonjs.com/#CYXXO#1

Nice, huh?  Let's look at our cam creation line and compare to our tool-caller line  (line 6 and line 79)...

line 6:    var camera = new BABYLON.ArcRotateCamera("Camera",  0,      1.5,     50,    ...);

line 79:                                                         ArcAnimation(               -6.28,    0.8,     30,    ...);

Yep, we told our ArcAnimation tool to animate .alpha from 0 to -6.28 radians, and we told it to animate .beta from 1.5 to 0.8 radians, and we told it to animate .radius from 50 units to 30 units of distance. 

I'll stop talking now, and you can take a moment to study this stuff.  I bet you understand it all, now, but let us know if there is still confusion.  I've been where you are... and it is easy to make this more complicated than it really is.  Hopefully, with these examples, and some more tests and experiments, you'll soon be a pro arcRotateCam animator.  Share your joys and discoveries with us, if you please.  Thanks!  Good luck, party on!

[ancientholiday]

Yes, wingnut,

 

that is exactly what I meant.  How to pass the numbers to the function.  It is moreso a basic programming question.  Anytime you call the function and pass the values to it, then you will have the program run the function.

that is what you did in line 79.

Thanks very much for the example.  

AH