[Resolved] Math - Turning slowly toward a point

[getzel]

Hello ! 

Do you know a solution to rotate slowly toward a vector ?

Can we do it without using quaternion ? 

 

Thanks

 

[RaananW]

What's wrong with quaternions?

 

[Wingnut]

Hi Getzel. 

     Yeah, that is done with BJS Animation system, which can animate floats, vectors, colors, Quaternions, and um... maybe other value-Types, too.  The animation system does that by pre-calculating "interpolations" (steps) between current value (start-at)... and target value (end-at).  It also takes-into-consideration keyframe points along the way, as wanted.

There are also 10 different "easing functions" that can be applied to those before-animation-start-interpolations. 

You will see the term LERP used in animation talk, often.  It is an abbreviation for "linear interpolation"... which is a straight-line interpolation between starting point and target point.  A LERP has no "easing" activated.  The animation starts at a certain speed and step-distance, and ends at that same speed and step distance.  Linear.  Easing functions such as "Bezier Curves" can be used to ease-up to speed, and ease-to-a-stop... things like that.  Those are not LERP, because they are non-linear. 

Another term you will hear... is "tweening"... an abbreviation for "in-betweening".  These are referring to the target frames/points that happen along-the-way from start point to end point.  It is related to easing.

These easing functions DO NOT operate between each tween-point in an animation.  They operate between the main start point and main end point.  To make this brief... if you use easing functions in an animation, it is best to use just 2 keyframes.... the start point and the end point.  Setting extra keyframes along-the-way... can mess-up the smoothness of an easing function.  (I think.)

The BJS Animation is very nice... but not very "helpy".  There are some playgrounds and helper docs nearby... that help learn our Animation system.

Notice that I keep reminding... that BJS Animation system uses PRE-calculated keyframes/interpolation.  Think of it as an array of step-values.  This is created BEFORE the animation starts.  This may be important to you, later.

You didn't say WHAT was going to rotate toward a point, though.  Mesh?  Light?  Camera?

But, lots of people use "gizmos" or "handles" (often, an invisible plane or box)...  mesh that lights and cameras can be parented-to.  So, perhaps we should only talk about slowly turning a mesh... to "face" another mesh.position.

You didn't mention if keypresses would be involved.

How 'bout we let all that "soak in" for a while.  This is math used for animation, but... not "live" math.  Math is used to pre-calc the interpolations used in the Animation system.

Perhaps... you want some real-time cosine and Bezier easing (live math).  THAT is possible, too... but I'm not very good at it. 

hehe.  Hi @RaananW, good to see you!  We hate quats cuz of their long name that sounds like a human body organ or bone.    I think I heard them say it on Scrubs TV show, once.  "Vestibular Cerebral Quaternion" 

[RaananW]

hey @Wingnut!

but they are the solutions to all of our problems! Both slowly animating a rotation, and world hunger. 

[getzel]

Thank you for your replies @Wingnut and @RaananW 

 

I know the quaternion.slerp function even if I didn't try in BJS but I used it in Unity 3d because there are a lot of tutorials :

http://answers.unity3d.com/questions/254130/how-do-i-rotate-an-object-towards-a-vector3-point.html

 

But I'd like to keep euler angles because they are more understandable to me and I'm curious if it's possible.

If it's not possible, I will use quaternions, no problem.  

 

There is this function in BJS, the same as lookAt but it gives euler angles :

    var diffX = box2.position.x - box1.position.x;
    var diffZ = box2.position.z - box1.position.z;    
    var diffAngle = Math.atan2(diffX,diffZ);

    box1.rotation.y = diffAngle;

But I'd like to turn slowly like that : box1.rotation.y += (or -= ) 0.01;

In fact I want to know which way to turn.

It will help me for example for an AI (an enemy bot) who will turn toward the player.

[RaananW]

Would be very helpful if you could create a playground or a demo describing exactly what you need.

If you have two quaternions, you can create an animation (BABYLON anymation) that moves from one to the other. this is why I think it is easier to use quaternions.

But it might not fit your use-case at all. So, would be great to know what the use case actually is  

[getzel]

Yea

http://www.babylonjs-playground.com/#8W5A2#2

It's a simple AI.

 

The enemy sees you if you're in front of him (dot product), if you're close (distance), and if there 's not a wall between (ray).

If he sees you he looks at you, and move forward if you're not too close (because it's a shooting guard).

If he doesn't see you, he moves forward blindly, he doesn't look at you.

If the two meshes boxColl1 and boxColl2 (which must be invisible in a game) hit something he will turn to avoid obstacle.

 

But after he passes the obstacle (wall), I want him to go to the good direction.

So I made a timer (poor choice) and look at the player.

But if he looks directly, its colliders can touch the wall so there will be an ugly move.

And it's more realistic if he can turn slowly to the good direction.

So the problem is at line 172, I want to use a more precise function than alertf().

I made some tests on rotation but didn't succeed yet so I wonder if somebody knows if there is a solution.

 

I did an other AI test without these colliders but a predictive function to see where is free space with wall's boundingBox informations but it's not ready yet.

 

[Nabroski]

http://playground.babylonjs.com/#Z3UOX#10

[Pryme8]

just do a dampered lerp...  ((Rotation + Target)* 0.5)*dampAmount;

[getzel]

@Nabroski

Thank you very much, your code is wonderful.

I will study that and some other things :    var angle = Math.acos(BABYLON.Vector3.Dot(v1, v2.normalize()));

http://www.wikihow.com/Find-the-Angle-Between-Two-Vectors

 

 

[Nabroski]

@getzel

Yes, its a nice playground. Its not my coding style. I found it in the playground search. 

[iiceman]

Ohw I think that's my playground.. at least it looks pretty familiar

But I also remember that I was never really happy with it, because it only worked in two dimensions..whenever I tried to add rotation around the thrid axis things got messy. So if somebody knows a better way where I can also rotate around all three axis without any gimbal lock, I would love to see a playground! (even if it involves quaternion and/or slerp or lerp or whatever magic you guys use .. as long as I can reproduce it and it is understandable how it works  )

[Wingnut]

Hi ICE!  Good to see ya!  Yep, i remember this playground ya did.  Pretty nice, but picking is not part of the topic, Omaha.

(Omaha, Nabroski - get it?  Nebraska/Nabroski)  (arr arr arr)  (it's a USA thing)

That's Nabsy's new nickname.  Omaha. 

Ok, so... what?  Umm... place or pretend there is a camera on the enemy's head... and use an isInFrustum thing... to see if YOU (the good guy) is in-sight of the enemy.

isInFrustum has shown-up 3 times in the forum... in the last week.  So, perhaps, it is... IsInFrustum Week... and we should be paying attention to that.  Perhaps... 50% of all forum questions THIS WEEK... will be solved with an isInFrustum solution of some kind.  hmm. 

IsInFrustum is a COOL solve, too.  It has maxZ and minZ planes, and a conical field-of-view area... just like real eyeballs.  Also, a direction-to-you... is somewhat simple to calculate... from the enemy "Head Cam", yes?  But I suspect that isInFrustum testing could be a bit CPU-expensive, and our enemy cam will need to do it often... in case you hide in a closet and he "loses you".

Yep, we might even consider a "enemyHead Class".  It can see you, smell you, hear you, and lick you (taste/touch).  Perhaps he can even do obstacle avoidance.  Quite the formidable adversary, huh?    "AI Guy... ohh AI Guy.  Sing a song... of AI Guy"  (c'mon, sing it with me). 

Sammy Sensor - Blackwater Operative?  heh.  Security guard from hell.

[Nabroski]

http://babylonjs-playground.com/#VNE2Z#15

[aWeirdo]

looks nice @Nabroski !

Took the liberty to add a onContextMenu = false; to better allow right clicks for all of us who prefer right-clicking  
http://babylonjs-playground.com/#VNE2Z#16

[Nabroski]

@aWeirdo 

Thank you! This is great. Finally! 

I think you get some nice effects with custom animation types, like in the playground from @iiceman
http://doc.babylonjs.com/tutorials/Animations

[Nabroski]

sorry, i'm out of time copy pasting, it looks weird but i like it
http://babylonjs-playground.com/#VNE2Z#18

[aWeirdo]

@Nabroski "Hyperdrive .. Activated!"

[Pryme8]

That is the formula I posted in real deployment  a nice version of it too!

[iiceman]

Since that topic brought back memories of my space game attempt, I decided to give that "turning slowly towards a vector" in 3D space another try using that quaternion and slerp magic you guys suggested (I still have no clue how that works or how to imagine what a quaternion actually is). So here is the result, seems to work pretty well for the use case that I had in mind, maybe somebody might need it someday: http://www.babylonjs-playground.com/#17R875#1

Short explanation: I am using a rotation gismo and set its rotation with the lookAt method. After that I animate the rotationQuaternion with the slerp until the difference between the two rotations is small enough to call it complete. As always I am pretty sure that this is not the best, most efficient and/or most elegant way, so I would love to how to do it better, if you guys have any suggestions.

(doing such playgrounds is fun indeed, I had already forgotten how much I enjoyed that back in the days when I had a bit more time!)

[Pryme8]

I love it when iiceman posts.

[Nabroski]

@iiceman yes i know what you mean, i also login here copy pasting code from few months ago.

Optimization: From position to rotation is always bit tricky. i would kind of going through your "real world" application/game and commenting out, write some random stuff back in to functions, and arrays -  and then see when things starts to break. 

I kind of always try to reduce function call overhead, i thing in the past 5years (?) their where many contributes to babylonjs. I dont even know for what reason 70% of that stuff was implemented.
Also at the very low -end of everything you deal with matrices transformations. i think 99% already where implemented somewhere  in Babylonjs. So you know, you can write your own stuff, but you already have downloaded the engine.js so why not to use it, 'til the very, very point, - you start to missing something.

I think here you get already some math, and then yes, rotation is always a bit tricky.
https://github.com/BabylonJS/Babylon.js/blob/dea49de07ac07a2bf7896aaa0e13c26e0f674c9e/src/Collisions/babylon.pickingInfo.js

Their is nothing wrong to write a name to your playground, this is a missing features of the playground. i will pulled it someday.  Sometimes i found so great stuff on the playground, with missing ability to contact the author for better explanation: 

http://www.babylonjs-playground.com/#17R875#4

Keep us updating when you got your assembler like version of code for X -traterrestrial rotation

Good Luck

[iiceman]

It's always fun to browse trough forum posts and to stumble over a playground that you creates or at least already know. Would be nice to have it the other way around, so leaving some comments in the playground like the author and the related topic seems like a great idea! I try to keep that in mind when creating the next one