App: avatar aiming IK

[avaer]

Overview

We need avatars to aim guns/phones/etc properly when you right click to aim.

Right now there is not much of an aiming implementation (it just rotates the avatar). However there are two existing solutions with might be used.

We need a solution that meets these requirements, as well as looks good. The gun pose should be dynamic, like fortnite or a cool anime.

Requirements

First, we will bind weapons to the wrist (like gun), and we will raycast from the gun to shoot, so the wrist must be very accurate, pointing in the direction of the camera (where the user is pointing). It cannot be glitchy.

Secondly, it should look natural at all angles in the range -PI/2 <-> PI/2, around the hips direction. Why hips direction? Because the hips move independently and can be PI/2 max out of sync with the shooting animation. This is already implemented in the codebase/proposed IK solution.

Therefore, third, this solution to this needs to play nice with the lower body animations, since we aren't replacing the entire animation system right now.

Finally, whatever solution we use should be performant (e.g. not adding more allocations in the frame loop, adding GC pressure, etc.).

Possible solutions

Two approaches were already tested:

1. interpolate pitch/yaw animations: Pitch/yaw AnimationMixer hack #1612 -- doesn't blend right, needs more math. also the animations are not great yet, but could be improved by the art team
2. use our inverse kinematics solution: Gun aim IK #1616 -- doesn't look great and isn't perfectly accurate but it feels and plays ok, if we can make it look better

However, there are better solutions with more work -- like for example custom procedural IK for this special case, or a different keyframe mix.

Code points

• avatars system: https://github.com/webaverse/app/blob/master/avatars/avatars.js
• avatar parameters are controlled by rig.js: https://github.com/webaverse/app/blob/master/rig.js
• avatar update loop tick:

  app/avatars/avatars.js

  Line 1997 in cf93527

  update(now, timeDiff) {

• IK enable/disable functions:

  app/avatars/avatars.js

  Line 1985 in cf93527

  setTopEnabled(enabled) {

• animations application function (sets quaternions):

  app/avatars/avatars.js

  Line 2003 in cf93527

  const _applyAnimation = () => {

• animations set to load (animations.cbor):

  app/avatars/avatars.js

  Line 146 in cf93527

  const res = await fetch('../animations/animations.cbor');

• animations.cbor is baked using node ./animations-baker.mjs public/animations/*.fbx public/animations/animations.cbor

Nice to have/future work

• Add firing kickback support on trigger
• Transplant the finger bones from another animation to give a hold effect

Related issues

#1607

[avaer]

Note that using an AnimationMixer blend with the pitch/yaw fbx files looks very tame and bad by default, so I'm going to try to use the IK instead, which looked good before.

Wooblyverse.-.Google.Chrome.2021-10-21.13-03-47.mp4

[avaer]

Incorrect blend implementation of the pitch/yaw for reference: #1612

[avaer]

Testing the IK solution: #1616

[avaer]

Heads up that I merged a functional version of this via #1616

It doesn't look great yet and needs kickback, IK accuracy fixes, and better effects, but it's a starting point.

[avaer]

I added pistol kickback with #1624