LookAt (Cocos Creator)

업데이트： 2023/03/14

개요

LookAt은 임의의 파라미터를 특정 좌표를 따르도록 값을 조작하는 기능입니다.
추종시키는 좌표를 유저 측에서 커스터마이즈 하면, Cubism의 모델을 특정 GameObject 등에 추종시키는 것이 가능합니다.
LookAt 사용 방법은 여기를 참조하십시오.

Cubism SDK for Cocos Creator의 LookAt은 세 가지 요소로 구성됩니다.

1. 추종시킬 파라미터 지정용 컴포넌트
2. 각 파라미터에 값을 적용하는 컴포넌트
3. 2에서 적용하는 값 조작

1. 추종시킬 파라미터 지정용 컴포넌트

LookAt에서 추종시킬 파라미터를 지정하려면 CubismLookParameter를 사용합니다.

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의 3개입니다.

/** 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에 연결된 모든 CubismLookParameter의 참조를 취득합니다.
실행 중에 시선 추종용 파라미터를 추가/삭제했을 때에는 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() 타이밍에 CubismLookParameter로 마킹된 파라미터에 대해 CubismLookController.Target에 설정한 오브젝트가 반환하는 좌표를 적용합니다.

// 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에는 ICubismLookTarget을 구현한 예로 CubismLookTargetBehaviour가 포함되어 있습니다.
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
}