Smooth Camera Follow

[Wingnut]

Hi again, gang.  Not to derail your ray-casting talk, josh... but I wanted to tell about some tests that I have been doing.

 

First, I wrote (and stole) a VIC-20-grade flight sim toy, and I have been using it to test some various camera following methods.  http://www.babylonjs.com/playground/#RVDXB

 

(You might have to click on the canvas for the WASD QE airplane controls to begin working)

 

A button for Josh's MouseFollowCamera is there, but due to CORS, I can't include his code, so that button doesn't work.

 

But here's an online version that DOES include Josh's slightly-modified version of AlexB's FollowCamera... http://urbanproductions.com/wingy/babylon/path_animation/pathanim11.html and the zipped version.

 

The online version(s) don't use the 'hide editor' and 'show editor' buttons, of course.

 

Neither version of the FollowCamera's are acting correctly.  Josh's slightly-modded version is really well-toasted, and Alex's FollowCamera isn't doing "stay behind" properly (rotations)... but it is doing decent translation tracking. 

 

There are some other buttons included... such as parented freeCamera and parented ArcRotateCamera (none of which do any easing).

 

All that aside, lets look at the way Mister Wingnut does his airplane translating and rotating...

craft.translate(BABYLON.Axis.Z, elapsed + airSpeed, BABYLON.Space.LOCAL);craft.rotate(BABYLON.Axis.X, xRot/10, BABYLON.Space.LOCAL);craft.rotate(BABYLON.Axis.Y, yRot/10, BABYLON.Space.LOCAL);craft.rotate(BABYLON.Axis.Z, zRot/10, BABYLON.Space.LOCAL);

There, I believe, is the problem.  Wingnut doesn't do/understand matrix transformations.  I think the airplane should be translating and rotating in WORLD space (as opposed to LOCAL space), and this probably causes both of the FollowCameras to work incorrectly.  (maybe)

 

When I change those three rotation lines to WORLD, the controls of the airplane don't act correctly any longer.  After any WORLD rotations, UP/DOWN keys now become BANKING keys, and all other keypresses generally go to hell.

 

I think WORLD rotating could work... with another transform (maybe a matrix multiplication), but my attempts at figuring it out... have failed.  I could use help/information.

 

So, possibly... step 1 is to fix the flight simulator so it does WORLD space translating and rotating, and then we MIGHT see the FollowCameras act more correctly.  So, I hereby claim that this Fisher-Price flight simulator... belongs to everyone.  Grab the zip, take it home, make it better.  Make new versions of the playground version of it... adjust, experiment, and help Wingnut get a clue to better matrix operations, okay?  THANKS!

 

Oh yeah, and if you make cool follow cameras while you're fixing Wingnut's incompetence, tell us about those, too.  I am particularly VERY interested in ANY experiments with a "generic follower"... or followManager.    

 

Deltakosh, you're certainly welcome to join-in on this and comment heavily... ahem. (please)  (if you're not swamped) 

[Wingnut]

Oh, by the way... I KNOW you guys are anxious to put ParticleSystem emitters on the airplane's wingtips... but lets try to stay focused on 'following' for right now.  Ya'll can put-on air shows later. 

[joshcamas]

Now I don't know much about world/local stuff...

 

But...

 

Correct me if I'm wrong, but world origin is at 0,0,0...

 

and if you rotate a object by world, then that means it'll rotate by the origin 0,0,0... yes?

 

idk, hehe

[Wingnut]

Just change the last 3 (or 4) occurrences of LOCAL in the playground scene... to WORLD, and hit the run button. You'll see exactly what happens. 

 

Try changing the last 3 (the rotations) first.  Then click RUN.  Looks like it is working fine.   Now press the A or D keys to turn 90 degrees right or left.   After that, try the S and W keys to raise/lower nose pitch.  S and W now rolls the airplane instead of pitching the nose up/down.

 

Then use A/D to turn the airplane 180 degrees from original direction.  Now the S and W (and Q and E) keys are reversed.  The "control directions" are not rotating WITH the plane.  They have not been "transformed" by the new (current) airplane rotations (orientation).

 

My uninformed hypothesis is that the xRot, yRot, and zRot values need to be transformed by the airplane's worldspace matrix (possibly a multiplication action)... before they are applied to the airplane.  But, hmm. 

 

I had similar problems with my other flying machine but that one uses quaternions because its a physics-thrusted thing.  I am not sure how to apply the solution Deltakosh provided for THAT flyer... to THIS airplane.  But I have a feeling its similar.  I have a missing transform.

 

For the "other flying machine"... deltakosh showed me this thing...

 

var mymatrix = new BABYLON.Matrix();
craft.rotationQuaternion.toRotationMatrix(mymatrix);
var forcevec = BABYLON.Vector3.TransformNormal(new BABYLON.Vector3(1, 0, 0), mymatrix);

 

But that was used to establish a 'force vector' for the +X translation thruster (an applyImpulse activity).  Still, I think the secret to this lies in that .TransformNormal function.  I think if I use that correctly, with the correct matrices as arguments... this damned airplane will fly better. 

 

Its all good fun, but it seems that transformations are still one of the more difficult areas (esp for dummies like me) of webGL scene-making.  Someday, I'll write the perfect tutorial to teach this crap.  (yeah, right, Wingy) 

 

And thank goodness the 'projectionMatrix' of the camera isn't involved in this, yet.  I'm sure it will get involved as I study these fancy follow cameras that you guys keep inventing. 

[AlexB]

Wingnut, I'm not sure what this code does:

 

var craft = scene.getMeshByName("craftparent");var cam = scene.getCameraByID("Camera");craft.translate(BABYLON.Axis.Z, elapsed + airSpeed, BABYLON.Space.LOCAL);craft.rotate(BABYLON.Axis.X, xRot/10, BABYLON.Space.LOCAL);craft.rotate(BABYLON.Axis.Y, yRot/10, BABYLON.Space.LOCAL);craft.rotate(BABYLON.Axis.Z, zRot/10, BABYLON.Space.LOCAL);

But have you traced out craft.rotation.y?

 

The follow camera uses that number to calculate how it should position itself. Perhaps using this method that number isn't changing? When I run your demo it always seems to ignore the turns of the plane. Am I seeing the bug correctly?

[Wingnut]

Yeah, Alex, that's what I am seeing, too (and thx for commenting).  Yep, the method of rotating (that I use) is strange.  I stole it from somewhere, and therefore have no idea what it does.    I think it might do rotations directly on the quaternion of the mesh.

 

But that is correct, Alex.  That's why I think step #1 is to find a better way to animate the airplane.  Still studying, and listening to what others say/learn.   Later, we will want to test the FollowCamera on mesh rotations done with the physics engine (applyImpulse) because when dealing with physics objects, quaternions are everything (at least that's true for Cannon.js).

 

I wish I had more answers for you, Alex... but I have lots more to learn and, generally speaking, I'm not very smart.    But I have a feeling that you are right... craft.rotation.y is probably not changing.

[Wingnut]

Here's a better flight sim... http://www.babylonjs-playground.com/#2FIXEM#1 (a more standard rotating method)  FollowCamera is acting much better now. 

 

I also published a new non-playground version, and its zip file... for anyone playing-along at home.  Again, you might have to click on the canvas before the airplane controls work.  Party on!

 

PS: If the zip version is failing, make sure it is using the NEW method for deltatime...

 

var elapsed = engine.getDeltaTime();

[AlexB]

Yes, that's the way it should look!

[Wingnut]

Cool!  The flight sim still has a problem... where S and W keys don't act correctly when there is some Q / E banking applied.  But I'll probably whine for help with that... over in The Wingnut Chronicles.  Here, let's stay with 'following'.

 

Alex... um... if we were following a walking player, and that player suddenly fell off a cliff, the FollowCamera would not "ease"-down to that position, right?  It would "jump" down to that new altitude, I suspect.  This is a place where the FollowCamera could have another option, involving easing on Y axis.  More about that in a moment.

 

Now lets look at the other axis... Z.  The FollowCamera COULD have an option to ease on that axis, too.  A spacecraft in zero-G could very quickly roll on the Z-Axis, and the FollowCamera could roll along with it, with easing, too.  In the flight sim, this would be Q or E very quickly to 90 degrees, and the FollowCamera would roll as well, with easing.

 

Its not that I want the FollowCamera changed... but... it might be fun to see if someone (maybe you, Alex) could add some features. Let's pretend that the FollowCamera had a property called .activeAxes ["x", "y", "z"] and then its .heightOffset property might become just .offset (a vector3).  And .radius would not be needed anymore, either.  If you wanted the FollowCamera to follow off to the left 10 units, above 5 units, and behind 20 units, you would set .offset to Vector3(-10, 5, -20).  I THINK this method would also eliminate .rotationOffset as well.

 

I don't know if ANY of this crap would work.  Just thoughts.  I'm really just fishing for someone smart... to code-up genericFollower class for us (based upon FollowCamera).  I'm too lazy to do it myself.    A really powerful genericFollower... has to (also) do following of mesh that have been rotated with applyImpulse... and that means... umm...  ouch. 

 

GenericFollower would need to do following... based upon mesh.rotationQuaternion ... which doesn't exist until certain things happen to a mesh.  Then it magically appears. 

 

Wingnut, rattling-on.  Pathetic, eh?

[AlexB]

It absolutely eases on all 3 axes. So if you want to follow a falling character, it will fall with it, with easing. Note that it simply attempts to maintain a position behind or in front of an object, and that when this position changes it eases to that position. If it appears abrupt, simply raise or lower the speed variables to the catching up is more noticeable.

[Wingnut]

Cool.  I understand.  I mistakenly thought that the FollowCamera was doing rotational easing... but its doing positional easing while maintaining its target.  (I'm so easily confused)    Thx Alex!

[jsdream]

Hi guys!

As I can see camera target is being set to mesh's absolute position (https://github.com/BabylonJS/Babylon.js/blob/master/src/Cameras/babylon.followCamera.ts#L46):

var targetPosition = cameraTarget.getAbsolutePosition();

Is it possible to somehow set an offset to camera target?
So for example when we're following a character, by default the camera will be pointing to middle of the character mesh, but what if I want to point the camera to characters head or even above it, how could I achieve that?

Hope my question is clear enough.

[JohnK]

Just a suggestion but IMHO you are better off asking a new question rather than adding one to the end of an old topic.

 

17 hours ago, jsdream said:

Is it possible to somehow set an offset to camera target?

How about

var offset = new BABYLON.Vector3(0, 2, 0); //or whatever numbers you need
var targetPosition = cameraTarget.getAbsolutePosition().add(offset);

 

[jsdream]

Hi JohnK! Thank you for your response.

4 hours ago, JohnK said:

How about

var offset = new BABYLON.Vector3(0, 2, 0); //or whatever numbers you need
var targetPosition = cameraTarget.getAbsolutePosition().add(offset);

I've just tried that and it gives the same effect as using heightOffset property of the FollowCamera - moves the camera upwards but it still pointing to the same point.

I'm new to game development, that's why can't get my head around to figure out with all necessary vector calculations to achieve the desired result...

P.S. Following your suggestion I've created separate topic for the question: 

 

Edited April 22, 2017 by jsdream
Added new info