ARKitで、のじゃロリおじさんに現実世界に出てきてもらった

最近バーチャルYoutuber界で話題の「バーチャルのじゃロリ狐娘Youtuberおじさん」(以下、のじゃロリおじさん)こと、ねこます氏が3Dモデル(Mikokoモデル)を配布してくださっていたので、ARKitを使って現実世界に出てきていただきました。現実世界は世知辛くないですきっと。

使ったもの

• Unity 5.6.2f1 (fbxファイルの抽出に必要)
• Blender 2.79 (fbxファイル -> daeファイルの変換に必要)
• Xcode 9.2

補足) UnityでARKit Pluginを使うという選択肢もありましたが設定が色々面倒だったので、
純正のARKitを使うことにしました。ですが、今回はfbxファイル抽出のためUnityを少しだけ使います。
ちなみにMMDからだとBlenderでpmxファイルをインポートするアドオンがあるようです。(そっちを使った方が楽だった...orz)

モデルの準備

まず初めに3Dモデルをダウンロードします。
3Dモデルは下記ページにて入手できます。

ねこます氏の固定ツイートにもリンクがあります。(2018/01/29現在)
https://twitter.com/kemomimi_oukoku/status/956621222493614080

Unity(fbx) というリンクをクリックするとbowlrollのページに飛ぶので、
Downloadをクリックしてダウンロードします。

MikokoModel.zip というファイルが取得できるのでそれを展開します。
展開されたディレクトリには
- MikokoModel.unitypackage
- readme.txt
が入っています。

fbx ファイルの抽出

ここからfbxファイルを抽出するのですが、ここでUnityが必要になります。
ファイル抽出のためだけにUnityを使うって重いですよね。。
(他のやり方がわからなかったのでこの方法にしました泣)

お持ちでない方は下記のページからインストーラーをダウンロードできます。
無料版(Personal)で問題ないです。
https://store.unity.com/ja/

インストールができたらUnityを起動し、適当に3Dのプロジェクトを作成します。

プロジェクトが作成されるとUnityの画面が開くので、この状態で MikokoModel.unitypackage をダブルクリックして開きます。

すると以下のようなウインドウが開くので、importをクリックします。

するとプロジェクトウィンドウのAssetsの中にMikokoディレクトリが表示されます。
ちなみにこの時点でヒエラルキーウィンドウにドラッグアンドドロップすれば、のじゃロリおじさんが拝めます。かわいい！

その中で右クリックをし、「Finderで開く」を選択するとFinderが開くので、その中の
fbxファイル(Mikoko.fbx)とテクスチャファイル(MikokoTex.bmp)を別のディレクトリにコピペで退避させておきます。

Blenderでdae (COLLADA)ファイルに変換

ARKit(SceneKit)でモデルを読み込む形式としては、dae (COLLADA)という拡張子のものが良いようです。

(参考: SceneKitで扱える3Dモデルのフォーマット／アニメーションつき3DモデルをSceneKitで使う https://qiita.com/shu223/items/0161f82d000d5cdf009c)

fbxからdaeに変換するためにBlenderを使います。
Blenderは下記ページからダウンロードができます。
https://www.blender.org/download/

Blenderを開いたら、最初に表示されているCubeはxボタンを押して削除しておきましょう。
次に、ファイル > インポート > FBX (.fbx)をクリックし、先ほど退避させておいたfbxを選択します。

上記のように取り込まれます。テクスチャが貼られていないように見えますが、レンダービューではちゃんと色がついているのでご安心を。

このままじゃ味気ないのでポーズをつけてみます。（ここでは省きますがポーズモードでボーンを動かしているだけです）
あとは、光源をを設定してあげないとARKitでの表示時に3Dモデルが暗くなってしまうので、ランプを追加してあげます。

これをこうしてこうじゃ。(おなじみのポーズ)

ポーズの設定が完了したら
ファイル > エクスポート > Collada (デフォルト) (.dae)でエクスポートしましょう。(mikoko.daeファイルとMikokoTex.bmp.005.bmpというテクスチャファイルが生成されます)

ですが、デフォルトの設定のままだとBlender自体が落ちてしまいました。

どうやらテクスチャ周りのエラーのようで、以下のように設定変更したらエクスポートできました。
(Blender初学者なので、あまり理解できていないですが。。)

オブジェクトモードでaボタンを押し、すべてのオブジェクトを選択している状態で、

エクスポートデータオプション
- モディファイアにチェック
- レンダーを選択
- 選択物のみにチェック

テクスチャオプション
- 選択中のUVマップのみにチェック
- マテリアルを選択
- コピーにチェック

ARKitで表示

いよいよARKitでのじゃロリおじさんを表示します。

Xcodeで新規プロジェクトを作成します。

画像のようにAugmented Reality Appを選択しましょう。プロジェクト名を入力しプロジェクトを作成します。

デフォルトではジェット機が表示されます。
ジェット機の3Dモデル(ship.scn)が art.scnassets に格納されているので、ここに先ほどエクスポートしたmikoko.daeとMikokoTex.bmp.005.bmpをドラッグアンドドロップでインポートしましょう。

ここでmikoko.daeを開いてみると、ちゃんとポーズが付いています。
よく見ると、のじゃロリおじさんが地面に這いつくばっています。(世知辛い)
これはBlenderとSceneKitの座標軸にズレがあるためですが、ARKitとの連携時に起き上がってくれます。

次にARKitで表示しているモデルを変更します。
ViewController.swiftの

        let scene = SCNScene(named: "art.scnassets/ship.scn")!

と書かれている箇所を

        let scene = SCNScene(named: "art.scnassets/mikoko.dae")!

と書き換えてください。SceneKitではdaeもSCNSceneとして読み込めるようです。

ビルドを実行します。
iPhoneでアプリを起動してみると、のじゃロリおじさんが現実世界に出てきてくれました！
ただ、

デカい。
しかも浮いてる。
(下から覗き込んじゃダメですよ。絶対。)

これは、3Dモデルの配置場所を設定していないため、初期状態は意味不明な場所に配置されてしまうからです。

ViewController.swiftを以下のように修正して実行すると
画面をタップした際に3DモデルがARKitが検出した平面上に移動します。
(平面検出後にタップしてください)

    override func viewDidLoad() {

        ...

        let scene = SCNScene(named: "art.scnassets/mikoko.dae")!

        // nodeにnameを設定
        scene.rootNode.name = "mikoko"

        // sceneView.scene = scene
        // addChildNodeじゃないと位置調整が効かない？
        sceneView.scene.rootNode.addChildNode(scene.rootNode)
    }

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {

        // 画面中央の点から平面上の位置を算出
        let results = sceneView.hitTest(
            sceneView.center,
            types: .estimatedHorizontalPlane
        )

        if let result = results.first {
            // nodeを取得して位置を変更
            self.sceneView.scene.rootNode.childNode(withName: "mikoko", recursively: false)?.position = SCNVector3(
                result.worldTransform.columns.3.x,
                result.worldTransform.columns.3.y,
                result.worldTransform.columns.3.z
            )
        }
    }

上記のように修正した結果、以下のように無事のじゃロリおじさんが表示されました。

qiita書きました。
ARKitで、のじゃロリおじさんに現実世界に出てきてもらったhttps://t.co/z59HVayMdC#バーチャルのじゃロリ狐娘Youtuberおじさん#arkit pic.twitter.com/iZsoj60Dp7

— オタク先輩 a.k.a ふしっきー (@fusikky) 2018年2月7日