Fix wrong physical speed and animations jitter in low fps issues ( Make them "frame rate independent" ). ( 2nd try ) - Githubissues

webaverse / app

Web metaverse client

https://app.webaverse.com

MIT License

338 stars 212 forks source link

Fix wrong physical speed and animations jitter in low fps issues ( Make them "frame rate independent" ). ( 2nd try ) #3648

Closed gonnavis closed 1 year ago

gonnavis commented 1 year ago

Describe your changes

Follow this reverted PR: https://github.com/webaverse/app/pull/3422

Retain the same fixings and improvements of above PR.
Fix "no idle animations" regression.
Fix "jump/doubleJump state to fallLoop state hair jitter" regression.
Compatible with avatar-spriter.

To compatible with avatar-spriter, we can't depend on player and player.charaterPhysics.velocity ( wich already frame rate indepedent after this PR ). So need calc avatar.velocity without player.charaterPhysics.velocity. But I think we can't calc "smooth"/"frame rate independent" velocity from per frame movement/positionDiff. So I added a isBoundPlayer arg to distinguish these two situations: For normal mode, avatar.velocity copied from characterPhysics.velocity. For spriter mode, avatar.velocity calced from fixed 60 fps positionDiff. ( The velocity for spriter can be calced, because of the codes in avatar-spriter are assumed always 60 fps. ) https://github.com/webaverse/app/blob/82fa1619bd1c40bd85c791bec1127783c20b5d3d/avatars/avatars.js#L1511-L1513

What are the steps for a QA tester to test this pull request?

Test in low fps, if the movement speed the same as 60 or higher fps.
Tset in low fps, if the animations still jitter.
Test if there are idle animations.
Test if jump/doubleJump state to fallLoop state hair still jitter.
Test if avatar-spriter mode ( graphics low setting ) work well.

Issue ticket number and link

https://github.com/webaverse/app/pull/3422#issuecomment-1214245385

Screenshots and/or video

Idle animations and hair no jitter:

https://user-images.githubusercontent.com/10785634/185126350-c2012510-4371-4a70-ba4e-09ab31f39ec0.mp4

Compatible with spriter:

https://user-images.githubusercontent.com/10785634/185149059-739b0e7d-3053-4fc0-a75f-6926595afea4.mp4

Checklist before requesting a review

[x] I have performed a self-review of my code
[x] I am not adding any irrelevant code or assets
[x] I am only including the changes needed to implement the change
[x] I have playtested and intentionally tried to find error cases but couldn't

gonnavis commented 1 year ago

Close in favor of https://github.com/upstreet-labs/app/pull/26

gonnavis commented 1 year ago

rondoor encountered this issue on webaverse/app, so reopened it.