LookAt (Cocos Creator)

最終更新： 2023年3月14日

概述

LookAt是操作任意参数追随特定座标的值的功能。
通过自定义用户侧要追随的座标，可以使Cubism模型追随特定的GameObject等。
关于如何使用LookAt，请参考此处。

Cubism SDK for Cocos Creator中的LookAt包含三种类型的元素。

1. 用于指定要追随的参数的组件
2. 将值应用于各参数的组件
3. 操作2中应用的值

1. 指定要追随的参数的组件

使用CubismLookParameter指定通过LookAt追随的参数。

CubismLookParameter通过附加到置入[Prefab根]/Parameters/下的GameObject来使用。
这会将与附加的GameObject具有相同ID的参数被视为眼动追踪的参数。

CubismLookParameter有两个设置项目，Axis和Factor。

/** Look axis. */
@property({ type: Enum(CubismLookAxis), serializable: true, visible: true })
public axis: CubismLookAxis = CubismLookAxis.X;

/** Factor. */
@property({ type: CCFloat, serializable: true, visible: true })
public factor: number = 0;

• Axis

设置要使用的输入座标的轴值。
可以设置三个项目：X、Y、Z。

/** Look axis. */
enum CubismLookAxis {
  /** X axis. */
  X,
  /** Y axis. */
  Y,
  /** Z axis. */
  Z,
}
export default CubismLookAxis;

• Factor

针对应用值设置校正值。
输入的座标在应用时会加工为−1.0f到1.0f范围内的值。
Factor中设置的值为正片叠底倍率，确保输入的值与各参数的最小值与最大值匹配。

public tickAndEvaluate(targetOffset: math.Vec3): number {
  const result =
    this.axis == CubismLookAxis.X
      ? targetOffset.x
      : this.axis == CubismLookAxis.Z
      ? targetOffset.z
      : targetOffset.y;
  return result * this.factor;
}

CubismLookParameter也被CubismLookController用作获取参考的标记。

2. 将值应用于各参数的组件

使用CubismLookController将视线跟踪应用于各参数。
使用CubismLookController时，将其附加到Cubism的Prefab的根目录。

当CubismLookController原始化时，获取附加到Prefab的所有CubismLookParameters的参考。
在执行过程中追加/删除跟踪视线的参数时，会调用CubismLookController.Refresh()再次获取参考。

/** Refreshes the controller. Call this method after adding and/or removing {@link CubismLookParameter}s. */
public refresh(): void {
  const model = CoreComponentExtensionMethods.findCubismModel(this);
  if (model == null) {
    return;
  }
  if (model.parameters == null) {
    return;
  }

  // Catch sources and destinations.

  this.sources = ComponentExtensionMethods.getComponentsMany(
    model.parameters,
    CubismLookParameter
  );
  this.destinations = new Array<CubismParameter>(this.sources.length);

  for (let i = 0; i < this.sources.length; i++) {
    this.destinations[i] = this.sources[i].getComponent(CubismParameter);
  }

  // Get cubism update controller.
  this.hasUpdateController = this.getComponent(CubismUpdateController) != null;
}

...

/** Called by Cocos Creator. Makes sure cache is initialized. */
protected start(): void {
  // Default center if necessary.
  if (this.center == null) {
    this.center = this.node;
  }

  // Initialize cache.
  this.refresh();
}

CubismLookController在每一帧的LateUpdate()时，将CubismLookController.Target中设置的物体返回的座标应用到CubismLookParameter标记的参数上。

// Update position.
let position = this.lastPosition;

const inverseTransformPoint = this.node.inverseTransformPoint(
  new math.Vec3(),
  target.getPosition()
);
this.goalPosition = math.Vec3.subtract(
  new math.Vec3(),
  inverseTransformPoint,
  this.center.position
);
if (position != this.goalPosition) {
  const temp = MathExtensions.Vec3.smoothDamp(
    position,
    this.goalPosition,
    this.velocityBuffer,
    this.damping
  );
  position = temp[0];
  this.velocityBuffer = temp[1];
}

// Update sources and destinations.
for (let i = 0; i < this.destinations.length; i++) {
  CubismParameterExtensionMethods.blendToValue(
    this.destinations[i],
    this.blendMode,
    this.sources[i].tickAndEvaluate(position)
  );
}

// Store position.
this.lastPosition = position;

3. 操纵2中应用的值

如“2. 将值应用于各参数的组件”中所述，CubismLookController应用于眼动追踪参数的座标由CubismLookController.Target中设置的物体返回。

这是实装了ICubismLookTarget接口，用户端可以通过实装该接口以使模型跟随任意座标。

/** Target to look at. */
interface ICubismLookTarget {
  readonly [ICubismLookTarget.SYMBOL]: typeof ICubismLookTarget.SYMBOL;

  /**
   * Gets the position of the target.
   *
   * @returns The position of the target in world space.
   */
  getPosition(): math.Vec3;

  /**
   * Gets whether the target is active.
   *
   * @returns true if the target is active; false otherwise.
   */
  isActive(): boolean;
}
export default ICubismLookTarget;

• GetPosition()

返回要跟随的座标。
这里返回的座标被视为世界座标。

• IsActive()

返回是否启用跟踪。
仅在返回true时跟踪。

作为在SDK中实装CubismLookTargetBehaviour的示例，附带ICubismLookTarget。
CubismLookTargetBehaviour是返回所附加的GameObject座标的样本。

/** Straight-forward {@link ICubismLookTarget} {@link Component}. */
@ccclass('CubismLookTargetBehaviour')
export default class CubismLookTargetBehaviour extends Component implements ICubismLookTarget {
  readonly [ICubismLookTarget.SYMBOL]: typeof ICubismLookTarget.SYMBOL = ICubismLookTarget.SYMBOL;

  //#region Implementation of ICubismLookTarget

  /**
   * Gets the position of the target.
   * @returns The position of the target in world space.
   */
  public getPosition(): Readonly<math.Vec3> {
    return this.node.worldPosition;
  }

  /**
   * Gets whether the target is active.
   * @returns true if the target is active; false otherwise.
   */
  public isActive(): boolean {
    return this.enabledInHierarchy;
  }

  //#endregion
}