メインコンテンツへスキップ

XR8.Babylonjs.faceCameraBehavior()

XR8.Babylonjs.faceCameraBehavior(config, faceConfig)

概要​

次のようにBabylonカメラに取り付けられるビヘイビアを取得する: camera.addBehavior(XR8.Babylonjs.faceCameraBehavior())

パラメータ​

パラメータ説明
config [Optional]XR8.run() に渡す設定パラメータ
faceConfig [Optional]XR8.FaceControllerに渡す顔の設定パラメータ。

config [Optional] は、以下のプロパティを持つオブジェクトです。

プロパティタイプデフォルト説明
webgl2 [Optional]Booleanfalsetrue の場合、利用可能であればWebGL2を使用し、そうでなければWebGL1にフォールバックします。 false の場合、常にWebGL1を使用します。
ownRunLoop [Optional]Booleantruetrue の場合、XR は独自の run ループを使用する必要があります。 false の場合、独自の実行ループを用意し、 runPreRender と runPostRender を自分で呼び出す必要があります。(高度なユーザーのみ)
cameraConfig: {direction} [Optional]Object{direction: XR8.XrConfig.camera().BACK}使用したいカメラ。 サポートされているdirection の値は、 XR8.XrConfig.camera().BACK または XR8.XrConfig.camera().FRONTです。
glContextConfig [Optional]WebGLContextAttributesnullWebGL canvas contextを構成する属性です。
allowedDevices [Optional]XR8.XrConfig.device()XR8.XrConfig.device().MOBILEパイプラインで実行するデバイスの種類を指定します。 現在のデバイスがそのクラスにない場合は、カメラを開く前に実行が失敗します。 allowedDevicesが XR8.XrConfig.device().ANYの場合は、常にカメラを開きます。 ワールド・トラッキングは、 XR8.XrConfig.device().MOBILEでのみ使用できることに注意してください。

faceConfig [Optional] は、以下のプロパティを持つオブジェクトです。

パラメータ説明
nearClip [Optional]ニアクリップ平面のカメラからの距離。 デフォルトではBabylon camera.minZ を使用します。
farClip [Optional]ファークリップ平面のカメラからの距離。 デフォルトではBabylon camera.maxZを使用します。
meshGeometry [Optional]ヘッドジオメトリのどの部分が表示されるかを含むリスト。 オプション: [XR8.FaceController.MeshGeometry.FACE, XR8.FaceController.MeshGeometry.EYES, XR8.FaceController.MeshGeometry.MOUTH, XR8.FaceController.MeshGeometry.IRIS] デフォルトは[XR8.FaceController.MeshGeometry.FACE]です。
maxDetections [Optional]検出する顔の最大数を指定します。 選択できるのは、1、2、3のいずれかです。 デフォルトは1です。
uvType [Optional]フェーススキャン、フェースローディングのイベントでどのuvを返すかを指定します。 オプションは以下の通りです： [XR8.FaceController.UvType.STANDARD, XR8.FaceController.UvType.PROJECTED]. デフォルトは [XR8.FaceController.UvType.STANDARD]です。
leftHandedAxes [Optional]true の場合、左手座標系を使用します。
imageTargets [Optional]true の場合、出力で左右を反転させる。

戻り値​

フェイス・エフェクトエンジンをBabylonカメラに接続し、カメラフィードとトラッキングを開始するBabylon JSのビヘイビアです。

例​

const startScene = (canvas) => {
  const engine = new BABYLON.Engine(canvas, true /* antialias */)
  const scene = new BABYLON.Scene(engine)
  scene.useRightHandedSystem = false

  const camera = new BABYLON.FreeCamera('camera', new BABYLON.Vector3(0, 0, 0), scene)
  camera.rotation = new BABYLON.Vector3(0, scene.useRightHandedSystem ? Math.PI : 0, 0)
  camera.minZ = 0.0001
  camera.maxZ = 10000

  // シーンにライトを追加
  const directionalLight =
  new BABYLON.DirectionalLight("DirectionalLight", new BABYLON.Vector3(-5, -10, 7), scene)
  directionalLight.intensity = 0.5

  //メッシュの処理
  const faceMesh = new BABYLON.Mesh("face", scene);
  const material = new BABYLON.StandardMaterial("boxMaterial", scene)
  material.diffuseColor = new BABYLON.Color3(173 / 255.0, 80 / 255.0, 255 / 255.0)
  faceMesh.material = material

  let facePoints = []

  const runConfig = {
    cameraConfig: {XR8.XrConfig.camera().FRONT},
    allowedDevices: XR8.XrConfig.device().ANY,
    verbose: true,
  }

  camera.addBehavior(XR8.Babylonjs.faceCameraBehavior(runConfig)) // カメラをXRに接続し、カメラフィードを表示します。

  engine.runRenderLoop(() => {
    scene.render()
  })
}