VRoidで作ったモデルをiPhoneXSでフェイストラッキングさせる(Unity ARKit)

VRoid面白いですね〜
わたしは根性がないので頭だけいじったモデルをいくつか作りました!!

hub.vroid.com

踊らせるのは諦めたんですが、ちょっとでも動かしたいじゃない〜
と思ってフェイストラッキングさせてみようと思いました。
いまだにUnityとは仲良しじゃないから、歩み寄りたいですよね。

 

こちらを参考にさせていただきました!!

qiita.com

 

必要なもの
  • Mac
  • Xcode
  • Apple developer
  • Unity
  • UniVRM
  • ARKit2
  • VRoid Studioでつくってエクスポートしたモデル

 

MacXcodeApple developerアカウント

iPhone用のアプリ作ろうとしてるので、超必須です。
実機につないでインストールするためには基本的にはdeveloperアカウント(99ドル/年)が必要なんですが、なくても実機には入れられるようです。

dev.classmethod.jp

ただ、いまのXcodeってAutomatic Signingがすごく便利になったので、この辺も便利になったのかなぁ。ちょっと不明です。わかんなかったら年99ドル払お!

Unity、UniVRM

UnityとUniVRMは以前設定したのと同様でしたので省略です。

 

ARKit2

ARKit2はアセットストアで見つけきれなかったんですよね …
なので、Bitbucketからリポジトリまるごともってきました。
わたしはSourceTreeを愛用しています。

Unity-Technologies / Unity-ARKit-Plugin / Downloads — Bitbucket

f:id:lejay4405:20190105182548p:plain

f:id:lejay4405:20190105182604p:plain


ここからダウンロードするなら、多分2.0マージしてあるからdefaultブランチでもいいんじゃないかな〜

VRoidで作ったVRMのモデル

hub.vroid.com

 

手順

  1. UnityでARKitのプロジェクトをそのまま開く
    (新規プロジェクトにARKitをインストールする手順がわからなかった!)

  2. UniVRMをインストールする
    プロジェクトを開いたまま「UniVRM-****.unitypackage」をダブルクリック
    (これ毎回やってるんですけどなんかいい方法ないんですかね)

  3. VRMのモデルをプロジェクトに追加
    VRoidで作ったモデルを「***.vrm」に出力したものをAssetsの下にドラッグ

    f:id:lejay4405:20190106204129p:plain

    しばし待つ

    f:id:lejay4405:20190106204620p:plain

    なんかいっぱいできるので、Assetsの下に「Model」とかいうフォルダをつくって入れてあげてもいいかもしれないですね!わたしはめんどくさいのでやっていません。

  4. ARKitの設定をする
    ここの2つにチェックを入れる

    f:id:lejay4405:20190106222837p:plain

  5. スクリプトを書く
    サンプル「UnityARFaceAnchorManager」をエディタ(わたしはUnityのVisualStudioをインストールしていないので外部エディタです)にコピペして書き足し、Assetsの下に「FaceTracking.cs」という名前で保存。
    using UnityEngine;
    using UnityEngine.XR.iOS;
    using VRM;
    
    public class FaceTracking : MonoBehaviour {
    
        //インスペクタの設定項目
        [Header("VRMモデルを設定")] //項目タイトル
        public Transform Head; //動かしたい頭部分
        public VRMBlendShapeProxy proxy; //モデル本体
    
        private UnityARSessionNativeInterface m_session;
    
        // Use this for initialization
        void Start () {
            //ネイティブのsessionインタフェースを取得
            m_session = UnityARSessionNativeInterface.GetARSessionNativeInterface();
    
            //必要なのかわからない
            // Application.targetFrameRate = 60; 
            
            ARKitFaceTrackingConfiguration config = new ARKitFaceTrackingConfiguration();
            config.alignment = UnityARAlignment.UnityARAlignmentGravity;
            // UnityARAlignmentenum
            // WorldAlignment - ARKitが実際のデバイスの動きに基づいてシーン座標系を構築する方法に関するオプション
            // UnityARAlignmentGravity - 座標系のy軸は重力に平行で、その原点はデバイスの初期位置 ←これ
            // UnityARAlignmentGravityAndHeading - 座標系のy軸は重力と平行で、x軸とz軸は方位をコンパスに向け、原点はデバイスの初期位置
            // UnityARAlignmentCamera - シーン座標系は、カメラの向きに合わせてロック
            config.enableLightEstimation = true;
    
            //サポートしてるときだけ動きます
            if (config.IsSupported)
            {
                //ARセッション設定
                //・ARKitWorldTrackingSessionConfiguration (6DOF) 
                //・ARKitSessionConfiguration (3DOF)
                //configには上の二つどちらかを設定ってあるんだけど、ARKitFaceTrackingConfigurationでもいいんじゃろうか
                m_session.RunWithConfig(config);
    
                //顔の検出
                UnityARSessionNativeInterface.ARFaceAnchorAddedEvent += FaceAdd;
                UnityARSessionNativeInterface.ARFaceAnchorUpdatedEvent += FaceUpdate;
                UnityARSessionNativeInterface.ARFaceAnchorRemovedEvent += FaceRemoved;
            }
            else {
                // 利用できない場合の処理
            }
        }
    
        //コールバック 顔検出
        void FaceAdd(ARFaceAnchor anchorData) {
            //頭と顔を更新
            UpdateHead(anchorData);
            UpdateFace(anchorData);
        }
    
        //コールバック 顔検出中
        void FaceUpdate(ARFaceAnchor anchorData) {
            //頭と顔を更新
            UpdateHead(anchorData);
            UpdateFace(anchorData);
        }
    
        //コールバック 顔検出外れ
        void FaceRemoved(ARFaceAnchor anchorData) {
            //なにもしない
        }
    
        //頭の位置を更新
        void UpdateHead(ARFaceAnchor anchorData) {
            //ARKitが右手軸なのをUnityの左手軸に変更と水平坑はミラーにするように変更
            float angle = 0.0f;
            Vector3 axis = Vector3.zero;
            var rot = UnityARMatrixOps.GetRotation(anchorData.transform);
            rot.ToAngleAxis(out angle, out axis);
            axis.x = -axis.x;
            axis.z = -axis.z;
            Head.localRotation = Quaternion.AngleAxis(angle, axis);
        }
    
        //表情更新
        void UpdateFace(ARFaceAnchor anchorData) {
            var blendShapes = anchorData.blendShapes;
            if (blendShapes == null || blendShapes.Count == 0)
            {
                return;
            }
    
            //口の開き(閉0.0←→1.0開)
            proxy.SetValue(BlendShapePreset.O, blendShapes[ARBlendShapeLocation.JawOpen]);
            //目の開き(閉0.0←→1.0開)
            proxy.SetValue(BlendShapePreset.Blink_L, blendShapes[ARBlendShapeLocation.EyeBlinkLeft]);
            proxy.SetValue(BlendShapePreset.Blink_R, blendShapes[ARBlendShapeLocation.EyeBlinkRight]);
        }
    }
  6. シーンを作る
    これもサンプルををコピペして使います。

    f:id:lejay4405:20190106224203p:plain

    「FaceAnchorScene 1」っていうのが出来るので、「FaceTracking」にリネーム

    f:id:lejay4405:20190106224406p:plain

    こいつをダブルクリックして開く

    f:id:lejay4405:20190106224817p:plain

    「Hierarchy」にある
    ・ARFaceAnchorManager
    はコピペ元なのでいらないです。削除。

    「Create」から「Create Empty」を選択すると「GameObject」ができるので

    f:id:lejay4405:20190106225200p:plain

    名前を「FaceTrackingManager」にします。

    f:id:lejay4405:20190106225446p:plain


    さっき作ったFaceTracking.csがAssetsの下にあるので探し出して…

    f:id:lejay4405:20190106225822p:plain

  7. モデルをシーンに追加

    f:id:lejay4405:20190106230012p:plain

    ワーイ

    f:id:lejay4405:20190106230158p:plain

    インスペクタで頭と本体を設定する。
    頭はどこだ…!!!!

    f:id:lejay4405:20190106230423p:plain

    ここです

    f:id:lejay4405:20190106230533p:plain

    頭ほんとどこにあるのかめっちゃ探しました。


  8. カメラを調整
    なんかカメラが後ろ向きだったので〜、ひっくり返しました。

    f:id:lejay4405:20190114180102p:plain

    f:id:lejay4405:20190114180221p:plain

     

  9. iOSビルド
    メニューの「File」-「Build Settings...」を選ぶとこういう画面が出てくるので、PlatFormからiOSを選んで「Switch Platform」

    f:id:lejay4405:20190114180837p:plain

    しばし待つ(けっこう時間かかる。つよつよMacなら一瞬かも。)

    「Player Settings...」でXcode側の設定もできる。いちいち書き出してからSigningの設定するのめんどくさいのでやっておくといいですよ!!
    チームIDはAppleアカウントで確認できます。

    iOS Dev登録してなくても実機確認できるようなのですが、わたしはDev登録しているため省略です。よろしくです。

    あとはIDをてきとうに設定したり、アプリ名を設定したり、必要ならアイコンやスプラッシュを登録したりしたらいいと思います。省略

    f:id:lejay4405:20190114183340p:plain

    そしたら、「Add Open Scenes」を押して、作ったシーンを選択

    f:id:lejay4405:20190114184752p:plain

    そして「Build」を押してお茶を入れます。
    できあがった「Unity-iPhone.xcodeproj」をxcodeで開いて、実機に入れて

    f:id:lejay4405:20190114193308p:plain


    アプリ起動すると

    f:id:lejay4405:20190114193344p:plain

    はいできたー!

    このままだと背後に妖怪が映り込んでしまうので(スクショからは抹消しました)、困ってしまいました。
    「壁みたいなのがあればいいのでは」「ハリボテを置こう」「天才」

    f:id:lejay4405:20190114193648p:plain

    「Hierarchy」-「3D Object」-「Plane」で平べったい板のようなものをつくって...

    f:id:lejay4405:20190114194016p:plain

    よいしょよいしょと位置をずらして...
    再ビルド

    f:id:lejay4405:20190114194900j:plain


    わーいうまくいきましたよ!
    つくったすぐは髪が揺れてたんですが、ブログを書くために手順をやりなおしたら髪が揺れなくなっちゃった!Vroid Studioでのエクスポート間違えたかな〜!!

    ちょっとUnityと仲良くなれた感じありますね!

    では!

ベストコスメ2018

ベストって言っても一個じゃないんですよね。

大体今年買った化粧品のリストアップです。

みんな語りたいだけだから。知ってる。わたしも。

 

一応カラー診断ではブルーベース(夏)です。

 

洗顔 

item.rakuten.co.jp

www.houseofrose.co.jp

  • 泡立てなくていい
  • ピーリング並にツルツル
  • 雪見だいふくのにおい

泡立てるのだるくない?わたしはだるいです。

粉を混ぜるのはそんなにだるくないし、ほんとにらくちんなのでおすすめです。

本体は3本目が終わりそうです。

来年も使い続けるでしょう。

なんとなく店舗に入った時にお姉さんに紹介されて知りました。お姉さんサンキュー

 

ハイライト+チーク

www.threecosmetics.com

ずっと粉ハイライトだったのですが、流行のものを試してみたくて01を購入しました。

地元にはカウンターがないので通販でギャンブル購入です。

粉より断然ツヤりました。おすすめ。

正直左側いらんなと思っていましたが、青みピンクチークの季節じゃないな…と初秋に思い始め、なんとなくつけてみたら結構イケる気がしたので軽やかに乗り換えました。

チークもハイライトも手でつけるのがめんどうなので、スポンジでくるくる取ってぽんぽんつけています。らくちん

https://jp.iherb.com/pr/ecotools-perfecting-blender-duo-2-sponges/72104

これの小さい方の尻を乾いたまんまで使っています。本体もきれいなまま使えるし、おすすめ。

 

アイシャドウ

isetan.mistore.jp

みんな大好きトムフォードのココアミラージュです。

これもカウンターがないのでギャンブル通販です。

ただマットのままで使うことはほとんどなくて、下にラメ系を仕込んでいました。

マットシャドウの意味とは…うごご

www.dior.com

isetan.mistore.jp

どっちも有名なやーつ。

多色ラメ大好きマンです。

スフィンクスFGOでオジマンディアスが来た記念に買いました。テンティリス!!!

 

ファンデーション

onlineshop.rmkrmk.com

102使っています。

ずっとエスティローダーのダブルウェア使うマンだったのですが、乾燥が気になる年頃ですので、クッションファンデなど試しましたがいまいちしっくりこない。

リキッドとこちらを両方試してみたんですが、こっちの方がツヤが出たんですよね。リキッドの方がつやつやしそうだったのに不思議です。

乾燥肌の人にはめっちゃオススメします。ほんとに乾燥しない。

塗り方は顔に点置きして平筆で広げた後に、上で使ってるスポンジの大きい方を乾いたまま使ってなじませています。

崩れ方(あんまり崩れないけど、鼻かんだりとか)も自然だし、すごく気に入っています。おすすめ。

 

アイブロウ

isetan.mistore.jp

最近入手したんですが、めちゃめちゃめちゃめちゃよかったのでみんな買った方がいいです。めちゃ高いけど、ちょんちょんするだけでめっっっっっっっっっちゃつく。

めちゃコスパいいから。ほんとほんと。つけすぎ注意。

あと落ちない。ほんとうに落ちない。アイブロウコートとかいらんかったんや!!

ぶっちゃけアイブロウとかプチプラでいいじゃん?とか思ってたんですけど、多分その5倍くらいの値段するけど、正直10倍くらいよかったです。おすすめ。

プレゼントにちょうどいいと思います。ゲランとか、それだけでアガるので。

 

クレンジング(アイメイク)

www.isehan.co.jp

マスカラリムーバーはずっと母が愛用しているメイベリンのやつを使っていたのですが、コットンで拭くのめんどくさいしと思って買ってみたらまあよく落ちました。

全然目にしみないし、そのままクレンジングに進めるし、ものぐさなわたしにピッタリ。摩擦もないので痛くない!めちゃんこオススメです。

わたしは「ふつうのクレンジングでマスカラを落とそうと思うな」と常々思っており、

クレンジングのレビューなどで「マスカラが落ちなかったので★−2です」とかを目にするとアホか!バカチンが!と思っているので、みんなマスカラはちゃんとリムーバーで落としましょうね。

 

 

はてなブログは埋め込みリンクがあって便利ですね!

Twitterでベスコス紹介してる人画像編集とかめちゃ大変そう。どうやっているんだろう?

 

それではここまで。

来年もいい化粧品に出会いたいですね。

 

【Mac】VRoidでモデル作って踊らせる(3) - 踊らせるのは諦めた

 

catherine555.hatenablog.com

 

 

catherine555.hatenablog.com

 

 

Macでやるのめんどくさすぎない??????????

 

 

 

結論:

 

踊らせたいならWindows

踊らせたいならWindows 

 

【Mac】VRoidでモデル作って踊らせる(2) - モーションを用意する

 

catherine555.hatenablog.com

 

必要なもの

 

Unityをインストールする

f:id:lejay4405:20181225160655p:plain

いくつかチェックついてたんですけど、一番上以外は外しました。
なんか問題あったらインストールし直せばいいでしょう。

 

UniVRMをインストールする

Unityを起動して、プロジェクトを作りましょう。

f:id:lejay4405:20181225163907p:plain

プロジェクトを作る
  1. UniVRM-0.xx.unitypackageをUnityのプロジェクトにインポートしてください。

Unityのプロジェクトにインポートのやりかたがわからないよ!

VRMファイルを作ってみたい - dwango on GitHub

Assets/VRMにインストールします。

f:id:lejay4405:20181225165058p:plain

どこ?

ないよ。どこ????インストールってどこになにをどうするの。
とりあえずVRMっていうフォルダをAssetsの下に作ってそこにドラッグしてみました。

f:id:lejay4405:20181225170208p:plain

うまくいったのかもしれない

f:id:lejay4405:20181225170414p:plain

不安

Importしました

f:id:lejay4405:20181225170633p:plain

これで読み込めるようになったと思うので、朕を読み込んでみます。

 

VRMを読み込む

VRMファイルを眺めてみたい - dwango on GitHub

VRMファイルを、UnityのAssetsにドラッグ&ドロップするだけで、VRMファイルがインポートされモデルデータのPrefabが生成されます

本当かなぁ… 

f:id:lejay4405:20181225173700p:plain

ちんがいっぱい増えて不安すぎるよ

VRMから生成されたPrefabをあらためてシーンに配置します

シーンに配置とは????

kurihara-n.hatenablog.com

作られたPrefabは、Hierarchyにドラッグする、またはSceneビューにドラッグすることでシーンに配置できます。

Hierarchyにドラッグしてみました。

f:id:lejay4405:20181225181123p:plain

やったね。これがシーンに配置です。覚えよう。

モーションデータを変換

 

ダウンロードしてきた「MMD4Mecanim.unitypackage」

をダブルクリックしたらインストールされました。UniVRMのときにビビりすぎました。

 

お借りしてきたMMD用のモーションはmokaさんのECHO

www.nicovideo.jp

めちゃかっこいい

 

このなかの「luca.vmd」を使わせてもらいます。センターかっこいい。

 

qiita.com

 

 

まじ意味わかんないとおもってたんですが、どうもvmdだけではうまくいかないらしいです。

vmdモーションデータとmmdモデルをひもづけてアニメーションデータにして

それをUnityの中に入れたモデルに適用させるということらしいです。多分。

 

先人のいうことはきっと正しい。試してみます。

Tda式ミクさんにがんばってもらいます。ガンバッテ!

3d.nicovideo.jp

 

Assetsにダウンロードしてきたフォルダをドラッグ

f:id:lejay4405:20181225212305p:plain

日本語がなんかおかしくなってるけど無視

(やっぱりなんかこわくなってきたのでちょっとリネームしました、すみません)

f:id:lejay4405:20181225231935p:plain

 

そして変換だー

 

f:id:lejay4405:20181225232005p:plain

できないんだけど 

qiita.com

 

しょうがない、Homebrewのアップデートするか、と思ったけど前失敗したことがあったような気がしてググりました。

qiita.com

 

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

 けっこう長くかかった。20分くらい。

それでもMMD4Mecanimのエラーは直らなかったので、上記のブログの通りにします。

pmx2fbx_275がどこにあるかを探して(Unityプロジェクトの中にある)

otool -L /Users/{君のMacのユーザ名だ}/Documents/unity/tin/Assets/MMD4Mecanim/Editor/PMX2FBX/pmx2fbx_275

このコマンドためしたら

/opt/local/lib/libiconv.2.dylib (compatibility version 8.0.0, current version 8.1.0)

場所が違う。

libiconv.2.dylibがあるのはここだ!

/usr/local/opt/libiconv/lib/libiconv.2.dylib

参照先を変えよう

install_name_tool -change /opt/local/lib/libiconv.2.dylib /usr/local/opt/libiconv/lib/libiconv.2.dylib /Users/{君のMacのユーザ名だ}/Documents/unity/tin/Assets/MMD4Mecanim/Editor/PMX2FBX/pmx2fbx_275

/usr/local/opt/libiconv/lib/libiconv.2.dylib (compatibility version 8.0.0, current version 8.1.0)

変わった〜

Unityを再起動してProcess押したらできました。やれやれだぜ

Finderでこのファイルが出来ているか確認してね。

f:id:lejay4405:20181225232917p:plain

 

モーションを設定

つくったPrefabのRig(キャラクターを動かすための設定)をHumanoidに変更する

f:id:lejay4405:20181225224348p:plain

 

アニメーションを作ろう

f:id:lejay4405:20181225224821p:plain

なんかスゴイ時間かかる。不安しかない

f:id:lejay4405:20181225225039p:plain

できた

なんかもうよくわからなくなってきたから先人のおっしゃっているとおりに進めるぞ。

 

f:id:lejay4405:20181225225425p:plain

謎の画面を出す

 

f:id:lejay4405:20181225231026p:plain

 

オレンジのやつを選ぶとモーションを設定できる

f:id:lejay4405:20181225233346p:plain

ファイル名が違う???実際はさっき作ったやつだから信じて

f:id:lejay4405:20181225233509p:plain

ほらね

モデルにアニメーションを当てるぞ

f:id:lejay4405:20181225234308p:plain

名前は適宜変えるんだ

 

そして再生ボタンを押してみると

f:id:lejay4405:20181225234622p:plain

いきなり緑色になる

踊ってくれている!

しかし、なんか、何かがおかしい

 

 

とりあえずここまで

 

 次→

 

catherine555.hatenablog.com

 

【Mac】VRoidでモデル作って踊らせる(1) - Vroidでモデル作る

VRoid(v0.5.0)で男子モデルが作れるようになったので作りましょう。

studio.vroid.com

インストールして

f:id:lejay4405:20181225152218p:plain

男女が選べるようになった

いろいろやって

f:id:lejay4405:20181225152224p:plain

髪を生やしたり

はいできた

f:id:lejay4405:20181225153641p:plain

とりあえず顔だけがんばろう

できあがったモデルをエクスポートすると「**.vrm」というファイルが

作られるので確認。

f:id:lejay4405:20181225151732p:plain

モデルのデータ

やったね

 

hub.vroid.com

 

次→

 

catherine555.hatenablog.com