16
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

サクッとARkitでミニチュアキズナアイを現実世界に召喚させる

Last updated at Posted at 2018-05-11

はい、どうもー!!

Unite Tokyo 2018にも登場した、最近話題のバーチャルユーチューバー、キズナアイを現実世界に召喚させたい!!!
って思いで、メモがてら記事を書きました

実装環境

MacOS 10.13.4
IOS 11.4 (beta)
Xcode 9.4 (beta)
blender 2.79

手順

キズナアイのモデルをswiftで読み込めるように変換してから、実装します

環境構築

(xcode,blender)のダウンロードは省略します


まずは、キズナアイのモデルをダウンロードしましょう!
https://kizunaai.com/download-page/
解凍してどっかに置いてください!


ウェブサイトやファイルを見て気づいた方もいるかもしれませんが、キズナアイのモデルの形式はPMXです
ってことで、ブレンダーでPMXを開けるようにする必要があります

https://github.com/sugiany/blender_mmd_tools
こちらからBlenderのMMDのアドオンをダウンロードしましょう(zipダウンロードで構いません)
どっかに保存しておいてください

次にBlenderにアドオンをぶち込みます
のblenderを右クリックしてパッケージの内容を表示してください
スクリーンショット 2018-05-11 21.29.58.png
そこから、Contents -> Resources -> 2.79(著者の環境では) -> scripts -> addonsに移動します
今さっきダウンロードしたMMDアドオンをフォルダ(解凍した中のmmd_tools)ごと入れます
スクリーンショット 2018-05-11 22.44.13.png

完了したらBlenderを起動しましょう!
Blenderは日本語設定で解説します(やり方は各自ggりでお願いします)

左上から
ファイル -> ユーザ設定を開きます。
その中のアドオンタブを開いて、mmdで検索し、チェックを入れて有効化します

スクリーンショット 2018-05-11 22.48.35.png
作業が終わったらこのウィンドウは閉じて構いません

実装

まず初期画面ではいらないオブジェクトがあります。全部消しましょう(右クリックでそれぞれ選択して、Xキーを押す)

全部消えたら、左側にmmd_toolsというタブがあると思うので選択します!(下図①)
そして、import modelから、今さっきダウンロードしたモデルを読み込みます(下図②)
スクリーンショット 2018-05-11 22.54.15.png

Downloads/KizunaAI_ver1.01/KizunaAI_ver1.01/kizunaai/kizunaai.pmxを読み込みます(読み込みボタンは赤枠)
スクリーンショット 2018-05-11 22.58.14.png

テクスチャを適用した姿で見るために左下の白いまるポチからマテリアルを選択します。
色が乗りました。世界一可愛いキズナアイちゃんです!!!
(目がなくても大丈夫です)
スクリーンショット 2018-05-11 23.00.30.png

とりあえずここでBlenderは放置してXcodeのプロジェクトを作りましょう

Augmented Reality App を選択したください
project nameとかは適当にしましょう
スクリーンショット 2018-05-11 23.04.32.png

Blenderに戻って、ファイル -> エクスポート -> Colladaを選択します
XcodeプロジェクトファイルのAssets.xcassets下にCOLLADAのエクスポートをします
なおエクスポートする時の設定は絶対に以下のようにしてください
ファイル名は任意のもので構いません。
スクリーンショット 2018-05-11 23.13.56.png

Xcodeに戻って、

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

ViewController.swift
let scene = SCNScene(named: "art.scnassets/kizunaai.dae")!

みたいに書き出したファイル名にします
これで実行するとキズナアイちゃんがリアリワールドに現れます!!!(部屋を晒したくないので画像ありません!すいません!)

ミニチュアに

完成し、実行したら
あれ???キズナアイちゃんでかくね????
となると思います。(上を向いちゃだめですよ!!)
そうです、サイズがおかしいですし宙に浮いてます
ViewController.swiftを編集しましょう。

今さっき編集したここらへん
スクリーンショット 2018-05-11 23.22.45.png
を以下のように編集します。

ViewController.swift
let scene = SCNScene(named: "art.scnassets/kizunaai.dae")!
scene.rootNode.name = "ai"
scene.rootNode.scale = SCNVector3(0.05, 0.05, 0.05)
sceneView.scene.rootNode.addChildNode(scene.rootNode)
//sceneView.scene = scene <----コメントアウトしてください

そしてViewController.swift内に以下のコードを追記します。

ViewController.swift
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        
        let results = sceneView.hitTest(
            sceneView.center,
            types: .estimatedHorizontalPlane
        )
        
        if let result = results.first {
            self.sceneView.scene.rootNode.childNode(withName: "ai", recursively: false)?.position = SCNVector3(
                result.worldTransform.columns.3.x,
                result.worldTransform.columns.3.y,
                result.worldTransform.columns.3.z
            )
        }
    }

これで、実行!!!!!して!!!!!!!!召喚したい場所をタップすると!!!
かわえええええええええええ
IMG_5043.PNG
IMG_5042.PNG
IMG_5041.PNG

終わりに

ってことで、見事に自己満足を達成させました
次はモーションを付けたいです!!!
またねーー!

ViewController.swift
import UIKit
import SceneKit
import ARKit

class ViewController: UIViewController, ARSCNViewDelegate {
    @IBOutlet var sceneView: ARSCNView!

    override func viewDidLoad() {
        super.viewDidLoad()
        sceneView.delegate = self
        sceneView.showsStatistics = true
        let scene = SCNScene(named: "art.scnassets/kizunaai.dae")!
        scene.rootNode.name = "ai"
        scene.rootNode.scale = SCNVector3(0.05, 0.05, 0.05)
        sceneView.scene.rootNode.addChildNode(scene.rootNode)
    }
    
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        let configuration = ARWorldTrackingConfiguration()
        sceneView.session.run(configuration)
    }
    
    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        sceneView.session.pause()
    }

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        let results = sceneView.hitTest(
            sceneView.center,
            types: .estimatedHorizontalPlane
        )
        if let result = results.first {
            self.sceneView.scene.rootNode.childNode(withName: "ai", recursively: false)?.position = SCNVector3(
                result.worldTransform.columns.3.x,
                result.worldTransform.columns.3.y,
                result.worldTransform.columns.3.z
            )
        }
    }
}
16
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?