最近バーチャル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日

最後に

3Dモデルを配布してくださっているねこます氏に深く感謝いたします。

未経験から独学で3Dの勉強をして、バーチャルYoutuberでバズるというシンデレラストーリーに、とても刺激を受けました。モチベーション維持のためにきちんと目標設定をしているところも偉い。

以下、ねこます氏の記事のインタビュー記事です。ご参考までに

なぜオッサンはかわいいに憧れるのか「バーチャルのじゃロリ狐娘YouTuberおじさん」独占インタビュー（前編）
http://panora.tokyo/46609/