Juttering appearance when moving and animating

[ozRocker]

I have a player that moves according to messages from the server.  These messages are sent every 50 milliseconds.  I could make it more frequent but I don't want to clog the bandwidth.  This means the player jumps forward every 50 milliseconds instead of the frame rate of the rendering engine.  Obviously this would give the player a slight jerky movement like this:

http://www.babylonjs-playground.com/#25M97N#14

I've tried to smooth that out by using Lerp.  Its less jerky but it looks like theres motion blur on the legs.

http://www.babylonjs-playground.com/#25M97N#15

I thought it could be the Lerp causing the problem, so I got rid of the 50 ms interval and the lerp and made the player move as fast as the frame rate

http://www.babylonjs-playground.com/#25M97N#16

You can still see the blur on the legs.  I'm just wondering if there's anything to do about the blur or if this is just a standard side-effect of translating while animating?

 

[Wingnut]

Hi Oz!  Um... http://www.babylonjs-playground.com/#25M97N#21

It is obviously caused by lines 46 and 48, as I see no "fuzzies" on the legs in the above demo version.

Yep, with this fellow, you'll need to rotate the planet (or slide the ground) under him... as he walks.   

Errr... something like that.  The 0.06 plan is not paying the bills.  He feels he's being "jerked around".    hmm.

[adam]

I slowed him down by using a speed var:

http://www.babylonjs-playground.com/#25M97N#23

Then I place my mouse on the ground on his feet to make sure that it stayed at that spot as he walked.  You might also want to place a grid on the ground which will help make sure his foot stays in the same spot when it is on the ground.

You can see that I increased your .06 number a bit.  You might want to play around with it some more.

I think that helped a little.

http://www.babylonjs-playground.com/#25M97N#22

 

[adam]

Maybe you should only move the body when a frame has changed.

[Wingnut]

http://www.babylonjs-playground.com/#25M97N#26

Now we're rollin'!!! 

[adam]

Check this one out:

http://www.babylonjs-playground.com/#25M97N#27

He only moves when the frame changes.  You can see that something is wrong with those legs.

[adam]

http://www.babylonjs-playground.com/#25M97N#29

http://www.babylonjs-playground.com/#25M97N#28

http://www.babylonjs-playground.com/#25M97N#30

[ozRocker]

The skeleton looks alright.  No jerkiness there.  My animation is 30 fps and render loop is 60 fps for me.  Would that have something to do with it?

[adam]

I don't think so.

If it was, I would expect there to be an issue with the arms too.

Actually, I think the different framerates was a part of the problem, but you will be fine if you only move the character forward when the frame changes.

[adam]

You can really see the jerkiness here:

http://www.babylonjs-playground.com/#25M97N#30

http://www.babylonjs-playground.com/#25M97N#31

[adam]

I moved the move call to beforeRender:

http://www.babylonjs-playground.com/#25M97N#32

http://www.babylonjs-playground.com/#25M97N#33

[ozRocker]

19 hours ago, adam said:

I moved the move call to beforeRender:

http://www.babylonjs-playground.com/#25M97N#33

This one looks smooth.  I'm trying to implement that method with my code but its not working too well.  The way it works in my system is the avatar gets given a destination to move to.  Basically there's a "from position", which is the place he's currently at, and a "to position" which is his destination.  I'm trying to put your code into that kind of system but it just goes crazy.  I'm not sure how to get the avatar to stop when he reaches the destination.

Here's my attempt:

http://www.babylonjs-playground.com/#25M97N#39

 

[adam]

http://www.babylonjs-playground.com/#25M97N#42

Edit:  it looks like you changed the rotation of the model.  Here is the fix for that.

http://www.babylonjs-playground.com/#25M97N#46

[dbawel]

@ozRocker - So that anyone reading this might understand what the issue is, if you set a specific render interval in ms (such as 50ms) the frame chosen to render will not be consistant with the fps of the babylon.js renderer. Not something I've tried with animation in the past - however, I often run into this using time intervals in videoTextures.

DB

[ozRocker]

On 21/05/2016 at 0:20 AM, adam said:

http://www.babylonjs-playground.com/#25M97N#42

In this playground you have the number 3.7.  Is that the speed the player is meant to be moving?  Because I don't know how fast the player is meant to walk/run in relation to elapsedTime.  All I know is that the player must reach the destination by the end of the 50 millisecond interval.

[adam]

3.7 in the units per second that the model walks at when the speed var is 1.

http://www.babylonjs-playground.com/#25M97N#47

I got that number by slowing the speed var down to .1 and then adjusting the number until the feet stay in place when they are on the ground.

[ozRocker]

@adam I noticed your algorithm uses relative movement which means the avatar doesn't stop at the exact destination point.  This adds up and causes the player to eventually drift from where they're meant to be.  To rectify that I need to correct the players position and set it to the exact destination after its completed its walk.  Normally that isn't a big deal, but in this case the corrections are happening every 50 milliseconds causes another jerky side-effect.  This is what it looks like:

http://www.babylonjs-playground.com/#25M97N#48

You can see in the console logs where the avatar's final position differs from its destination which is where I apply the correction.

[adam]

In my example I'm simply checking the distance to the destination and stop when it's close.  I'm not sure what you mean by drifting off.

I wasn't demonstrating how to end up at the exact destination.  I was demonstrating how to move toward your destination.

[ozRocker]

On 23/05/2016 at 11:05 AM, adam said:

In my example I'm simply checking the distance to the destination and stop when it's close.  I'm not sure what you mean by drifting off.

I wasn't demonstrating how to end up at the exact destination.  I was demonstrating how to move toward your destination.

Sorry, I didn't say that right.  The avatar does head the right direction but might end up a bit short or forward of the destination so I need to correct it and match it with the server.  Your code is working perfectly though.  I'm still working with it to find the best way to incorporate it in my code.  Of course if I make corrections to a position every 50ms there will be a juttering effect, but I think I can find a different approach with correction.