Go to Qiita Advent Calendar 2024 Top
LoginSignup
355
256

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.

@iwaken71(Kenta Iwasaki)

【朝起きてからバズるまで】 世界一(?)スマートにVTuberになるシステムをマッハ開発した

Last updated at Posted at 2018-05-06

こんにちは、イワケンという者です。Unityでコンテンツ作るのが好きで、最近はARとVTuberが好きです。今の目標は3年間でARコンテンツ制作を100本走らせることで現在4本目頑張ってます。

VTuberは実際にやってるわけではないのですが、VTuberになるシステムを作るのは好きで、日々新しい方法を考えてます。

さて、5月4日にこのような投稿をしたところ、2500RT超えとバズってしまいました。この記事ではこのシステムの作るまでの過程を書きたいと思います。

仕組み解説もちょっとだけしますが、この記事を見れば全部わかるという説明になっておらず、何を調べればできるのか、といった程度の説明になっているのでご了承ください。

5月3日 夢かと思ったら現実だった JINS MEMEとの出会い

前日布団もかけず寝落ちして、朝寝ぼけながらFacebookを眺めていたらこのような投稿を見ました。

(本人から掲載許可をとっております)

JINS MEME?!?! ジンズメメ?!こんなものがあったのか！？

ほんと夢かと思いました。これで世界初のVTuberシステムつくれるやん！と。
何が良かったかというと、VTuberのシステム作る上でヘッドトラッキングがスマートにできると思った点ですね。今だとヘッドマウントディスプレイ (HMD) が主流ですが、スマートではない。重い、外を歩けない。一般人からはかっこよくないという難点がありました。(僕は好きですけどね！ Oculus Go買います)

image.png

他にもカメラでトラッキングする手法があるのですが、先に実装されている方がいて後追いで作ってもなーと

あと、自分自身も12月にWebCameraでVTuberになる記事も書いてました。

iPhoneXがなくてもアニ文字したいんだ！ 【Unity×OpenCV×Dlib】

つまりこういうのは思いつきやすいのです(実装大変だけど)。それに対し、JINS MEMEでVTuberシステムを作れるというのは盲点でした。僕が調べた時点で誰も作ってなかった。つまり世界初です。であれば早く作らなければ！

5月3日 13時 JINSへ直行 購入の意思決定まで

この時点で8割方購入を検討したのですが、もうちょっと情報を集めようと思いました。調べた結果次のことがわかりました。

  • 取れるデータは視線方向、まばたき、頭の傾き。加速度など
  • iOSとAndroid開発に対応
  • Unity用のPluginが存在する(ここで購入決定)。
  • UnityのEditorにはデータを直接送れない
  • 値段は4万円

JINS MEMEの開発者用WEBページ
https://jins-meme.com/ja/developers/

調べたらUnity用のPluginがあることがわかり、なんとかなると思いました　(システムフレンドの前本さんありがとうございます！)
UnityのEditorまで直接データを受け取れないのですが、WebSocketでiOSから送るなど、頑張ればできそうです。VTuberやるならUnityのEditorで実装したいですよね。

値段については「買わない理由が値段なら買いなさい」という格言に従い、自己投資だと思って買いました。

僕「ジンスメメ　ってこの店舗にありますか?」

店員さん「ジンズミームですね。ございますよ。」

というやりとりをした時は恥ずかしかったです。みなさんも気をつけてください。

5月3日 15時 Unityで開発スタート

全部丁寧に解説すると大変なので、使った技術と参考にした記事について紹介します。

開発環境

  • MacOS High Sierra 10.13.4 Macbook Pro
  • Unity2017.4.2
  • Xcode9.3

システムの全体像

JINS MEMEで得たトラッキングデータをiOSアプリに送り、アプリではそのデータを元にUnityちゃんの顔を動かしています。

そのiOSアプリをUnityというソフトを作って開発しました。

JINS MEME関連の作業手順

  1. JINSアカウント登録 (アプリ開発に必要/無料)
  2. アプリ作成のボタンからアプリID,Secretを取得&メモ(あとで使います)
  3. SDKのダウンロード
  4. Unity用PluginのSetup

4.について、githubからダウンロードするだけでなく、READMEを読みながらSetupする必要があるので気をつけてください。

使用Asset

  • Unitychan (3Dアバター: だいたいのHumanoid型なら可、表情のモーフが入っているかチェック)
  • Final IK (いい感じにアバターの体動かす道具: Animatorの無料のIKやHeadLookControllerでも代替可能だと思います)
  • Lipsync (声に合わせて口を動かしてくれます)

JINS SDKの取扱データ

ここに載ってるデータは取ってくることができます。

データを受け取ってSubscribeする仕組みを作る

Unirxでデータが来たら表情に反映する、という仕組みを作りたいと思います。
MyAppMEMEProxy.csというScriptを作るのですが、これはJINS MEMEのUnity用PluginのGithubに入っている、AppMEMEProxy.csを参考にしました。

JINS MEME

MyAppMEMEProxy.cs
using UnityEngine;
using System.Collections;
using UnityEngine.UI;
using UniRx;

public class MyAppMEMEProxy : MEMEProxy
{
	// 自分のAppのIDとSecretを入力
    private const string appClientId = "---Your App Id---";
    private const string appClientSecret = "---Your App Secret---";

    public static MyAppMEMEProxy Instance = null;

    public Subject<MEMERealtimeData> dataStream = new Subject<MEMERealtimeData>();
    public MEMERealtimeData Data { get; private set; }

	private void Awake()
	{
        if(Instance == null){
            Instance = this;
            DontDestroyOnLoad(this.gameObject);
        }else{
            Destroy(this.gameObject);
        }
	}
	void OnEnable()
	{
		MEMEProxy.StartSession(MyAppMEMEProxy.appClientId, MyAppMEMEProxy.appClientSecret);
	}
    void OnDisable()
    {
        MEMEProxy.EndSession();
    }
	public override void Start()
	{
		base.Start();
	}
	void Update() 
	{
        Data = MEMEProxy.GetSensorValues(); //ここでデータを受け取る
		if (!Data.isValid)
		{
			return;
		}
        dataStream.OnNext(Data);
	}
}

データをストリームに流すことができたので、あとは表情や頭の動きに反映させていきます。
例えば、

BlinkController.cs
using UnityEngine;
using UniRx;

public class BlinkController : MonoBehaviour
{
    // Use this for initialization
    void Start()
    {
        // dataが来たら
        DataRecieveManager.Instance.dataStream.Subscribe(data =>
        {
            // 瞬きの強さが60以上だったら
            if (data.blinkStrength >= 60)
            {
                // まばたきをblinkSpeedミリ秒だけする
                PlayBlink((int)data.blinkSpeed);
            }
        }).AddTo(this);
    }

    // 中略

    void PlayBlink(int time)
    {
        // timeミリ秒瞬きさせるScriptを書く
    }
}

こんな感じでUnirxで記述します。

表情とか瞬きとかどうやって実装するの?というのは以下のサイトやコードを参考にしました。

動かした箇所 参考にしたWebサイト
まばたき Unitychanのunitypackageに入ってるAutoBlink.csというScriptを参考
目玉の動き ユニティちゃんの視線を動かす
頭の動き 【Unity】Unityちゃんの注視方向をIKで変化させる,Final IK
口の動き ユニティちゃんが声に合わせて口パクしてくれるリップシンクアセットを作ってみた

夜ご飯、友達に見せてみる

もう夜ご飯食べる前には、ほぼ完成してました。

ここで友達にあう時に「このメガネが仕込んでるメガネか気づくかどうか」試しました。結果バレなかったので、このメガネのスマートさが証明されたと勝手に思いました。おしゃれグッズとしても機能しそうです。

そこでアプリのフィードバックももらい、ちょっと改良しました。
具体的には、首からしたを見えなくしました。なぜなら、顔しか動かないのに、動かない下半身が見えていると不自然だからです。

次の朝、動画撮影してお昼にTwitterに投稿

動画撮影はPCのWebカメラで撮影しました。撮り直しは3回ほど。iOSの画面が光を反射して見えづらくなるためちょっと難しかったです。

バズる

バズってしまった...
というわけで朝起きてからバズるまででした。

一つ意識したことは、マッハ開発することでした。
GOROmanさんのマッハ新書の動きを見て、マッハで作ることは人の心を動かすのではないか、という仮説のもと1日というマッハ開発をしました

その仮説を実証できるかわかりませんが、例のツイートのあとにこのようなツイートをしてそこそこ反響がありました。

今後について

現在、LeapMotionで手の動きをつけたり、WebSocketでEditorでキャラが動くようにしたり、拡張していきたいと思います。

できれば、ニコニコ超会議だったり、昨日始まったVTuberによる番組VRoadCasterにクリエイター枠で出演できるようにしたいです。

また、JINS MEMEだけでなく、新しいデバイスとUnityの組み合わせで面白いコンテンツ作れるよう頑張っていきたいと思います(Oculus Go届くの楽しみ！)

355
256
3

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
Sign upLogin
355
256

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?