2017-12-01

Unity ARKit PluginのFace Trackingを使ってみる

AR ARKit Unity

Oculus Rift Advent Calendar 2017の1日目の記事です！

ARKitでiPhoneXのFace Trackingを利用することができます。
Face Tracking with ARKit

Live2D Euclidと組み合わせると、こんなことが可能になります。

iPhoneX使ってLive2Dを動かしてみた。これ楽しすぎ！ pic.twitter.com/RzWLiUKtQl
— のしぷ (@noshipu) 2017年11月9日

また、UnityのARKit Pluginから呼び出せるようになっていたので簡易的な解説をします。

実行環境

Unity 2017.1.2p1
Unity ARKit Plugin v1.0.12
https://assetstore.unity.com/packages/essentials/tutorial-projects/unity-arkit-plugin-92515

設定

iOSにプラットフォーム切り替え
Unity ARKit Pluginをインポート
設定ファイルを下記に変更

Assets/UnityARKitPlugin/Resources/UnityARKitPlugin/ARKitSettings.asset
f:id:noshipu:20171130063756p:plain

シーンのセットアップ

Camera

ClearFlagをDepthOnlyに設定

UnityARVideo

YUV形式のカメラのテクスチャを取得、描画
ClearMaterialにYUVMaterialを設定する

UnityARCameraNearFar

Unityで設定しているClipping PlanesのNear/FarをNative側に伝える役割

ARCameraTracker

TrackedCameraにトラッキングさせたいカメラを指定

UnityARFaceMeshManager

MeshFilterに顔のMeshを反映させたいMeshを指定
また、このゲームオブジェクト自体が顔の位置をトラッキングする

これで下記のようなマスクマン的なことはできるようになります。

Unity ARKit Pluginを試してる。泥パックだ… pic.twitter.com/9wwCiVqoOF
— のしぷ (@noshipu) 2017年11月6日

その他のクラスについて

UnityARFaceAnchorManager

任意のオブジェクトをトラッキングさせる。顔の位置、回転がわかればいいならこちらでOK

BlendshapePrinter

Blendshape(表情のパラメータ)の値をOnGUIで出力するデバッグ用スクリプト
これを使用するとフレームレートが落ちるので注意

UnityARKitLightManager

Meshにリアル空間の環境光を反映できるスクリプト
サンプルシーンのFaceDirectionalLightEstimateで確認可能

顔検出のScriptを簡易解説

顔を検出する

1. usingする

using UnityEngine.XR.iOS;

2. FaceTracking開始、検出イベント登録

configの設定を行い、サポートしていればSessionを開始

その後、顔の検出時のイベントを登録
・顔の検出をされるとFaceAddedが呼ばれる
・検出した顔の情報が更新されるとFaceUpdatedが呼ばれる
・顔の検出がはずれるとFaceRemovedが呼ばれる

void Start()
{
	UnityARSessionNativeInterface session = UnityARSessionNativeInterface.GetARSessionNativeInterface();

	Application.targetFrameRate = 60;
	ARKitFaceTrackingConfiguration config = new ARKitFaceTrackingConfiguration();
	config.alignment = UnityARAlignment.UnityARAlignmentGravity;
	config.enableLightEstimation = true;

	if (!config.IsSupported)
	{
		// 利用できない場合の処理はここで行う
		return;
	}

	session.RunWithConfig(config);

	// 顔の検出イベント登録
	UnityARSessionNativeInterface.ARFaceAnchorAddedEvent += FaceAdded;
	UnityARSessionNativeInterface.ARFaceAnchorUpdatedEvent += FaceUpdated;
	UnityARSessionNativeInterface.ARFaceAnchorRemovedEvent += FaceRemoved;
}

※ ちなみに検出可能な顔は１つで、体感ですが手前にある顔が優先されている感じです。

3. コールバック側で処理する

void FaceAdded (ARFaceAnchor anchorData)
{
	// 検出された時の処理
}

void FaceUpdated (ARFaceAnchor anchorData)
{
	// 検出中の処理
}

void FaceRemoved (ARFaceAnchor anchorData)
{
	// 検出から外れた時の処理
}

基本的には、ARFaceAnchorで渡ってくるパラメータを使って、FaceMeshを作成したり、顔の位置やBlendshapeの値を取得することが可能です。

ARFaceAnchorを使ったサンプルコード

顔の位置、回転を取得する

void FaceUpdated (ARFaceAnchor anchorData)
{
	gameObject.transform.localPosition = UnityARMatrixOps.GetPosition (anchorData.transform);
	gameObject.transform.localRotation = UnityARMatrixOps.GetRotation (anchorData.transform);
}

顔のMeshを作成、更新する

void FaceAdded (ARFaceAnchor anchorData)
{
	faceMesh = new Mesh ();
	faceMesh.vertices = anchorData.faceGeometry.vertices;
	faceMesh.uv = anchorData.faceGeometry.textureCoordinates;
	faceMesh.triangles = anchorData.faceGeometry.triangleIndices;

	faceMesh.RecalculateBounds();
	faceMesh.RecalculateNormals();
	meshFilter.mesh = faceMesh;
}

void FaceUpdated (ARFaceAnchor anchorData)
{
	faceMesh.vertices = anchorData.faceGeometry.vertices;
	faceMesh.uv = anchorData.faceGeometry.textureCoordinates;
	faceMesh.triangles = anchorData.faceGeometry.triangleIndices;
	faceMesh.RecalculateBounds();
	faceMesh.RecalculateNormals();
}

Blendshapeを取得する

取得可能な値の一覧は下記から画像付きで解説してくれています。
ARFaceAnchor.BlendShapeLocation - ARFaceAnchor | Apple Developer Documentation

ARBlendShapeLocationにパラメータKeyが格納されています。

パラメータを取得してモデルに反映させるコードはこんな感じになります。

void FaceUpdated (ARFaceAnchor anchorData)
{
	blendShapes = anchorData.blendShapes;

	// 口の開閉値を取得
	jawOpen = blendShapes[ARBlendShapeLocation.JawOpen];

	// 左目の開閉値を取得
	eyeBlink_L = blendShapes[ARBlendShapeLocation.EyeBlinkLeft];

	// Blendshapeの値をモデルに反映するなど
	m_MeshRenderer.SetBlendShapeWeight(0, jawOpen * 100f);
}

iPhoneX限定という制約はありますが、かなりコードがシンプルなので、お手軽にフェイシャルモーションを作ることができるのではないでしょうか。

明日の記事はnryotaさんになります！
qiita.com

2017-11-28

円卓状にオブジェクトを配置する

Unity

Unityで任意の場所から円卓のように、任意の数のオブジェクトを配置したくなったときに使う処理をメモ

f:id:noshipu:20171128065040p:plain

スクリプト

/// <summary>
/// 円卓状にPrefabを生成する
/// </summary>
/// <param name="prefab">生成するPrefab</param>
/// <param name="count">生成数</param>
/// <param name="center">中心点のオブジェクト</param>
/// <param name="distance">距離</param>
/// <param name="isLookAtCenter">中心点の方向に向けるか</param>
private void SpawnObjectsOnRoundTable(GameObject prefab, int count, GameObject center, float distance, bool isLookAtCenter = true)
{
    for (int i = 0; i < count; i++)
    {
        var position = center.transform.position + (Quaternion.Euler(0f, 360f / count * i, 0f) * center.transform.forward * distance);
        var obj = Instantiate(prefab, position, Quaternion.identity);

        if (isLookAtCenter)
        {
            obj.transform.LookAt(center.transform);
        }
    }
}

2017-10-08

VIVEトラッカーとスマートフォンを連携して遊ぶ

VR Vive Unity

スマートフォンを窓として使って、VR世界をのぞき込んだり、MR的な現実世界に合成できたり、VR空間のユーザーと遊べるデモプロジェクトをVIVESoftwareがソースごとあげています。
下記のGithubに上がっているUnityプロジェクトを使用し、VIVEトラッカーとスマートフォンをWifiで連携させることが可能です(リポジトリにはデモの1,2が含まれております)。

こんな感じでVIVEトラッカーをスマホにつけます。
f:id:noshipu:20171008035937j:plain

できることはこんな感じで、VIVEのVRユーザーとスマホユーザーが一緒の空間で遊べたりできちゃいます。

今回はそのビルドを使って遊んでみます。

準備

ハードウェアで用意するもの

HTC VIVEと動作するPC
VIVEトラッカー 1台以上
Android6.0以上が搭載したスマートフォン端末をVIVEトラッカーの数だけ
スマートフォンとPCが同じWifi環境に接続できること

ダウンロード

以下のリポジトリからBuildsをダウンロードする。(v1.2.7zをダウンロードしました)
https://github.com/ViveSoftware/ViveTrackerExperiencePrototype/releases

PCのIPアドレスを知る

コマンドプロンプトを開き、ipconfigを実行
IPv4アドレスを取得しておく。

Androidにビルドをいれる

各プロジェクトに含まれるAPKをインストールしておく
Builds\1-ModelViewer\ModelViewerDemo.apk
Builds\2-SimpleShooter\SimpleShooterDemo.apk
Builds\3-PaintVR\PaintVRMobile.apk

デモを試してみる

ネットワークの認証が各プロジェクトごとにでますが全て承認してください。
スマホのアプリ起動時にPCのIPを入力してください。

1. ModelViewer

モデルを見れるデモ
モバイル側は現実世界の上にモデルが表示される仕様となっている

2. SimpleShooter

VIVEユーザーとモバイルユーザーで時間制限の撃ちあいをすることができる
VIVEユーザーはモバイルユーザーをVR空間でヴァーチャルなオブジェクトを狙う
モバイルユーザーは現実世界のVIVEユーザーを狙う
真ん中の障害物はお互いに見えている状態

3. PaintVR

オブジェクトにスプレーで色を塗ることができるアプリ
VIVEコントローラーがスプレー缶になり色を塗れる
一眼VRでViveコントローラーも使えそう

youtu.be

色々使いどころがありそうなデモプロジェクトでした。
VIVEトラッカーが必要なのでアミューズメントVRや、ビジネス関係VRとか、趣味プロジェクトとかで活躍しそうです。

2017-09-22

Unity 2017.2で統合されるVuforiaを試してみる

AR Vuforia Unity Android

2017.2からSDKをインポートせずにVuforiaが使えるようになるみたいです。
まだベータ版ですがVuforiaを試してみます。

今回試すのはVuforiaの公式GettingStaredのやつです。
注意事項としてまだベータ版なので、リリース非推奨かつ、将来の商用プロジェクトとして開発することも推奨していないとのことです。
こちらの記事の記載も大きく変わっていく可能性があるのでご注意ください。
https://library.vuforia.com/content/vuforia-library/en/articles/Training/getting-started-with-vuforia-in-unity-2017-2-beta.html

前提条件

Unity 2017.2.0b11
ビルドターゲットはAndroidで(iOS, UWPも選択可能とのこと)

導入していきます

Unityプロジェクト作成

以下のリンクからインストール

Unity2017.2.0b11のインストール時にVuforia Augmented Reality SupportをOnにします
f:id:noshipu:20170921212033p:plain

そのままUnityプロジェクトを作成します

Vuuforiaを有効にする

Build SettingsからPlatformをAndroidに切り替えます。
Build Settings / Player Settings /XR Settings に移動してVuforia ARをOnにします。
f:id:noshipu:20170921231202p:plain

VuforiaなObjectを配置していく

1. GameObject->Vuforia->ARCameraを追加
※インポートが促された場合、許可する
このタイミングでMainCameraも削除しておいていいでしょう。

2. ARCameraのComponentのOpen Vuforia configurationを選択

3. Datasetsを有効化しておく

4. GameObject->Vuforia->ImageでImageTargetのオブジェクトがSceneに追加される

5. ImageTargetの子供にCubeを置いてみます
f:id:noshipu:20170921232445p:plain

これで準備完了です。

試してみる

Webカメラが使えればEditorから動かすことができます

Androidビルドでも動く

まだ任意のマーカーを登録できなかったので、2017.2のベータがとれるタイミングで使えるようになったらまた触ってみたいと思います

unity-landing.vuforia.com