FreeCamera to move in a uneven Path automatically

[Vijay Kumar]

Hi All,

I want to move(Like animation without pressing keys) Freecamera in a uneven path (vector3 array).

For ex:   

I think the same question has been asked in our forum by other people. and i searched in some of the threads and in BABYLONJS Animation tutorial also, but it was like Start point and end point.using animation we can move from one point to another point.

i have implemented TweenLite for moving camera, it is working but the the movement is smooth .

but i want to move camera automatically in a series of provided vectors(vectors array) like animation.

[vsh91]

I'm not sure if this is what you're looking for but I'll throw in my 2 cents after 10 minutes of research.

I think what you're looking for is bezier curves, https://doc.babylonjs.com/tutorials/How_to_use_Curve3

//Quadratic Bezier curve, source: https://en.wikipedia.org/wiki/B%C3%A9zier_curve#Quadratic_curves

Examples Included; http://web.iitd.ac.in/~hegde/cad/lecture/L13_Beziercurve.pdf

I don't know if there is a function that allows you to animate the camera but you can program this in yourself.

I would imagine using a var animateCamera = true/false variable that controls the

if(animateCamera){ //2D example

  Bx(t) = x;

  By(t) = y

  lookAt = Bx(t+1)-Bx(t), By(t+1)-By(t)

  if(camera.position = (x,y,z){

    animateCamera = false;

  }

}

You can string the curves together to get a continues motion from one quadratic to the next.

Anyways, I hope this helps!

[Nabroski]

Their also an Followcamera in babylonjs:

found via : http://doc.babylonjs.com/playground

http://www.babylonjs-playground.com/#12WBC#77

if you need a better user input at some point, you have to switch cameras and inputs

http://doc.babylonjs.com/tutorials/Cameras

Best

[Vijay Kumar]

I want the camera to move in path with provide vectors.

for example: var path=[new BABYLON.Vector3(0, 0, 0),new BABYLON.Vector3(0, 5, 0),new BABYLON.Vector3(0, 0, 5),new BABYLON.Vector3(0, 5, 5),new BABYLON.Vector3(0, 5, 10)]

Like above i will give some vector3 array so the camera has to move in that path only.

just like animation where will provide start and end point, here will provide some array.

[JohnK]

Not quite what you want as this takes a plane and makes it follow a curve so that it is always at right angles to the curve. However you could perhaps make the plane invisible and have the follow camera follow the plane or perhaps you could parent a free camera to the plane. Hope it helps.

http://www.babylonjs-playground.com/#92EYG#8

This was when I had just started using BJS and before I knew about its animation methods or scene.afterRender or scene.beforeRender. Anyway have a play and adapt and improve as needed.

[Wingnut]

Hi guys.  Free-flowing camera flight-paths are HARD, eh?  Here is a cool doc that talks about paths/curves, and takes a look at tween.js add-on lib.

Physics engines are not "out-of-the-question", either.  Think about 12 "thruster ports" or "points of applyImpulse"... on a box (a box that you could later parent a camera-to).  Two thruster-points on each face, and 6 faces.  By applying "force" to these points (sometimes 2/3 forces at the same time - for rotations or off-axis positioning), you could "fly" the box (in 0g scene gravity) as if it were a hovering helicopter.

Essentially, you run a "wind script" that is sync'd with engine.getDeltaTime().  A breeze scheduler.    You control the mass of the camera (how sensitive it is to breezes)... and then YOU tell the wind to blow when, how hard, which direction, and what contact points to hit on the box.  No path is needed, but very accurate breezes must be generated by your time-sync'd wind-script... and you might need to fire "braking thrusters" at certain times, too.

I've never tried such a thing, but I've imagined it.  The BabylonJS/CannonJS Multi-Hose Programmable Breeze Generator... version 0.1beta.    We could have a HIT!  (Or just another wingnut idea... from Wingnut) 

[Wingnut]

Not a single LIKE for my idea to blow-around a sailingCamera with a multi-hose physics-based Breeze Machine? 

Pfft.  How embarrassing.    Where's @Vousk-prod.'s or @jerome's rescue smiles/laughs when I need them?  heh

[Vousk-prod.]

I'd really like to send thousands supports, likes and smiles on your (and others) topics, my dear ol'Winggy ! But I, unfortunatly, have no time anymore to browse any post of this beloved forum those days, I'm so busy at work I can barely see my girl or my friends... pheww...

[Wingnut]

@Vousk-prod. Well, cut it out!    (the grinding workload)  Thanks for the nice thoughts.  We miss you around here.  But... that's not as important as you keeping your sanity.  Take a stance, as needed, ya know.  I hope you survive... I kind of like you.  I think your personality would take a hit... if you died of worked-to-death.

Ok, let's look at this here thread.  Is it a dead thread?  Here's a cool 2-animations-at-once scene.  http://www.babylonjs-playground.com/#14EGUT#48

For decent camera-tours (like from exhibit to exhibit in a virtual museum or gallery), you need to ease-away from previous target, and then ease-into the next target.  I THINK our pre-made ease-in-out function... work on every keyframe of an animation.

Keep in mind that there must be TWO animations running at the same time, just like the PG demo above.  One for positioning, and one for rotation.  The camera will be doing both during these camera flies.

It's not as simple as path following.  Path following (if the nodes of the path are distanced consistently from each other)... will give you a single-speed fly.  Boring, and not wanted.  Ideally, we want to bring the camera into the exhibit fairly fast, yet still ease it to a stop... aimed at the exhibit. 

Then, you want to give the user some time to look.  SInce you will be "just sitting there", you COULD give the camera a hand-held camera "feel" by gently positioning and rotating the camera a TINY bit.

Then, it's time to leave, and off you go again with ease-in-out.  But here's a question.  CAN YOU turn on/off easing PER frame-by-frame.  Bet not.

Think about that. You might need to end the "arrival" animations (which have ease-in/out)... upon arrival.  Then remove them, add two new animations... the "hand-held/floating camera" animations (which don't use ease-in/out).  At the end of look-time, install 2 new animations that get you to the next exhibit, then rinse, repeat. 

Let's look at a fly sequence:

Undocking - this is the transition from gentle-floating look-at-exhibit animation (docked)... to heading-out on the road.
Departure:  Often the rotation will take a fairly swift move toward looking-at the new target, while the positioner is still easing-up to full throttle.
   Travel: Set none or one mid-point keyframe... and let the interpolators and ease-in-out do their magic.  Long fly?  Give user a HURRY button?
Arrival: Rotation stays locked-on-target, position eases-up into station-keeping. 
Docked:  This is the 10 second floating-cam look... while user "takes-in the view".

------------

To do this with path following, the nodes (points) of the path... need to change distances from each other.  On tight turns, the path nodes need to be packed close-together.  On long straight runs, nodes can be miles apart.  This is how you affect the camera speed as it travels the path.  In the little time I spent playing with paths in our parametric shapes division, it seems that you CAN adjust the distance between path points (nodes)... easily, because you get full control of where the next point happens in the path.  But this is positioning ONLY.  You still need to somehow AIM the camera.

Imagine a fat tube... that extends straight for some distance, and then needs to make a SMOOTH 90 degree turn.  To make that turn smooth (without mesh-skin flat-spots), you need LOTS of path points at the point of turning.  Remember the bendable drinking straws?  The reason they bent so easily and smoothly-curved... was because of the accordian-like section of the straw which == many path points.

Or, I could be completely wrong.    And Vijay didn't mention needing to make stops along the way... in his fly.  SO, I'm probably doing unnecessary yammering, as usual.

I still like my sail-cam (heli-cam) idea.  I can "blow" a camera around with applyImpulse... smoother than I can make one travel a hard-coded path.  I like the liquidity (fluidity?) of blowing a camera around.  I might have to try it, just for the pain.  heh.  Good to see you again, VP.  Stop-in as often as you can, eh?

[Wingnut]

Hi again.  I decided to provide another playground.  http://www.babylonjs-playground.com/#HH1U5#53

It is a nice "starter" for testing simultaneous positional and rotational animations, WITH easing functions.  The "Big 11" easing functions are pre-built, too, making it super-easy to test them, and watch how they act.  There is easing on both rot and pos (see lines 70/71).

Pretend you've parented the camera to the cone, and you can imagine how flying a cam with Babylon.Animation class... could be done.  *shrug*

What's that?  You say you want to see it parented?  hmm.

Remember the tea cups ride at the carnival?  Did you barf?  If so, don't load this playground.  heh

[GameMonetize]

Almost threw up