Adds a OneEuro Filter to Head Tracking

HeadTrackingSmoothing.ts

import {
  OneEuroFilterQuat,
  OneEuroFilterVec3,
} from "./SpectaclesInteractionKit/Utils/OneEuroFilter";

const FILTER_CONFIG = {
  frequency: 60,
  minCutoff: 2,
  beta: 0.015,
  dcutoff: 1,
};

@component
export class HeadTrackingSmoothing extends BaseScriptComponent {
  @input
  head: Head;

  private transform: Transform;
  private headTransform: Transform;

  private translateFilter: OneEuroFilterVec3;
  private rotationFilter: OneEuroFilterQuat;

  private isFaceTracking: boolean = false;

  onAwake() {
    this.transform = this.sceneObject.getTransform();
    this.headTransform = this.head.getTransform();

    this.translateFilter = new OneEuroFilterVec3(FILTER_CONFIG);
    this.rotationFilter = new OneEuroFilterQuat(FILTER_CONFIG);

    this.createEvent("UpdateEvent").bind(() => {
      if (!this.isFaceTracking) {
        return;
      }
      this.transform.setWorldPosition(
        this.translateFilter.filter(
          this.headTransform.getWorldPosition(),
          getTime()
        )
      );
      this.transform.setWorldRotation(
        this.rotationFilter.filter(
          this.headTransform.getWorldRotation(),
          getTime()
        )
      );
    });

    this.createEvent("FaceFoundEvent").bind(() => {
      this.translateFilter.reset();
      this.rotationFilter.reset();
      this.isFaceTracking = true;
    });
    this.createEvent("FaceLostEvent").bind(() => {
      this.isFaceTracking = false;
    });
  }
}

Head Binding Component Configuration:

Head Mesh Configuration: