PlayCanvas フェイス・エフェクトイベント

フェイス・エフェクトのイベントは、this.app.on(event, handler, this)としてリッスンすることができます。

xr:faceloading: フェイスARの追加リソースの読み込みが開始したときに発火します。

xr:faceloading : {maxDetections, pointsPerDetection, indices, uvs}

xr:facescanning: すべてのフェイスARリソースが読み込まれ、スキャンが開始したときに発火します。

xr:facescanning: {maxDetections, pointsPerDetection, indices, uvs}

xr:facefound: 顔が最初に見つかったときに発火します。

xr:facefound : {id, transform, attachmentPoints, vertices, normals, uvsInCameraFrame}

xr:faceupdated: その後、顔が検知されたときに発火します。

xr:faceupdated : {id, transform, attachmentPoints, vertices, normals, uvsInCameraFrame}

xr:facelost: 顔が追跡されなくなった時に発火します。

xr:facelost : {id}

xr:mouthopened: トラッキングされている顔の口が開いたときに発火します。

xr:mouthopened : {id}

xr:mouthclosed: トラッキングされている顔の口が閉じたときに発生します。

xr:mouthclosed : {id}

xr:lefteyeopened: トラッキングされている顔の左目が開いたときに発火します。

xr:lefteyeopened : {id}

xr: lefteyeclosed: トラッキングされている顔の左目が閉じたときに発火します。

xr:lefteyeclosed : {id}

xr:righteyeopened: トラッキングされている顔の右目が開いたときに発火します。

xr:righteyeopened : {id}

xr:righteyeclosed: トラッキングされている顔の右目が閉じたときに発火します。

xr:righteyeclosed : {id}

xr:lefteyebrowraised:トラッキングされている顔の左眉が、最初に顔が見つかったときの初期位置から上がると発火します。

xr:lefteyebrowraised : {id}

xr:lefteyebrowlowered:トラッキングされている顔の左眉が、最初に顔が見つかったときの初期位置まで下がると発火します。

xr:lefteyebrowlowered : {id}

xr:righteyebrowraised:トラッキングされている顔の右眉が、最初に顔が見つかったときの初期位置から上がると発火します。

xr:righteyebrowraised : {id}

xr:righteyebrowlowered:トラッキングされている顔の右眉が、最初に顔が見つかったときの初期位置まで下がると発火します。

xr:righteyebrowlowered : {id}

xr:lefteyewinked: トラッキングされている顔の左目が750ms以内に閉開する一方で、右目は開いたままである場合に発火します。

xr:lefteyewinked : {id}

xr:righteyewinked: トラッキングされている顔の右目が750ms以内に閉開する一方で、左目は開いたままである場合に発火します。

xr:righteyewinked : {id}

xr:blinked: トラッキングされている顔の目が瞬きしたときに発火します。

xr:blinked : {id}

xr:interpupillarydistance: トラッキングされている顔の瞳孔間距離を、ミリメートル単位で最初に検出したときに発生する。

xr:interpupillarydistance : {id, interpupillaryDistance}

例

  let mesh = null

  // 追加のフェイスARリソースの読み込みが開始したときに発火します。
  this.app.on('xr:faceloading', ({maxDetections, pointsPerDetection, indices, uvs}) => {
    const node = new pc.GraphNode();
    const material = this.material.resource;
    mesh = pc.createMesh(
      this.app.graphicsDevice,
      new Array(pointsPerDetection * 3).fill(0.0),  // フィラー頂点位置を設定します。
      {
        uvs: uvs.map((uv) => [uv.u, uv.v]).flat(),
        indices: indices.map((i) => [i.a, i.b, i.c]).flat()
      }
    );

    const meshInstance = new pc.MeshInstance(node, mesh, material);
    const model = new pc.Model();
    model.graph = node;
    model.meshInstances.push(meshInstance);
    this.entity.model.model = model;
  }, {})

  // その後顔が見つかったときに発火します。
  this.app.on('xr:faceupdated', ({id, transform, attachmentPoints, vertices, normals}) => {
    const {position, rotation, scale, scaledDepth, scaledHeight, scaledWidth} = transform

    this.entity.setPosition(position.x, position.y, position.z);
    this.entity.setLocalScale(scale, scale, scale)
    this.entity.setRotation(rotation.x, rotation.y, rotation.z, rotation.w)

    // ローカル空間にメッシュの頂点を設定します。
    mesh.setPositions(vertices.map((vertexPos) => [vertexPos.x, vertexPos.y, vertexPos.z]).flat())
    // 頂点の法線を設定します。
    mesh.setNormals(normals.map((normal) => [normal.x, normal.y, normal.z]).flat())
    mesh.update()
  }, {})

例​

例