オリジナルLive2Dをイチから作って色々活用してみた

　この記事は、NTTテクノクロス Advent Calendar 2023 の16日目になります。

　はじめまして！ NTTテクノクロス入社2年目の w-ryu と申します。

　普段はネットワークを制御するシステムに関わる検討に携わっており、サステナビリティ活動として取り組んでいる学生向けのプログラミング教育支援にも参加しています。

　まだまだ未熟な自分ですが、社内外に技術知識等を展開することで技術者としての知識・経験を積み重ねていくために、今回初めてアドベントカレンダーへの参加を決めました！

　Qiitaへの投稿も初なので、まずは自分が個人的に興味を持って活用してみたLive2Dに関する記事を書いています。

１ はじめに

　「Live2Dって何？」という方もいらっしゃると思うので、簡単に説明すると、2D画像で表現されているイラストを立体的に動かすことが出来る技術です。イラストを各パーツに分割し、それぞれ調整していくことで滑らかな動きを実現できます。

　近年では、アニメ、ゲーム、アプリ、広告等で活用されているシーンを目にする機会も多いかと思います。また、NTTグループもメタバース事業に参入しており、今後の市場の拡大も予測されているので、新たなサービスへの展開が楽しみなテクノロジーです。

　さて、私がLive2Dを触ろうと思ったきっかけですが、趣味がゲームなこともあり、ゲーム実況配信で目にする機会が多く、自分もオリジナルモデルを持っていれば様々な場面で活用できて面白いのではないかと思ったからです。

　本記事では、概要レベルでのLive2D作成方法から、タイトルのオンライン会議活用を含め、いくつかの活用事例を紹介したいと思います。

２ Live2D作成

※今回のメインは活用方法であるため、あくまでも概要レベルでの記載になりますことをご了承頂けますと幸いです。

　この章では、たった数日でLive2D初心者の私がどのようにしてオリジナルのモデルを作成できたのかを述べていきます。ただ、一つのモデルを作り上げる過程を１から１０まで説明してしまうと膨大な量になってしまうので、大まかなポイントを押さえて、「こんな風に作られているのか～」と興味を持っていただけたら嬉しいです。

２-１ モデルとなるイラストのパーツ構成

　冒頭でお話させていただいたように、Live2Dには動かしたいイラストが必要不可欠になります。しかし、私自身イラストが得意ではないので、オリジナルで作成するために身内のイラストレーターに依頼してモデルとなるイラストを用意しました。

　イラストが描けないとダメなのかと、ここでハードルが上がってしまっていると思いますが、レイヤー構成さえ理解すればどんなイラストでもLive2Dに仕上げることは可能なので、そこをポイントに見ていただければと思います。個人で楽しむ分には既存のキャラクターを模写してみてもいいですし、ネット上にサンプルデータも無料配布されていたりするので触ってみるハードルは低いかなと思います。

　本題に戻ります。今回Live2Dとして作成するモデルの全体像はこちらです。

　画面右側のレイヤーカテゴリを見ていただくと、モデルがいくつかのパーツ構成のファイルで用意されていることが分かると思います。現在表示されているのは一番大きな単位での分割です。これらには、前髪、目、体...とそれぞれのファイルにさらに細分化されたレイヤが格納されています。

　詳細部分は視覚的に見たほうが分かりやすいため、下記画像で今回のモデルのパーツ構成図を示します。（重要なレイヤーのみをピックアップしているため全てではありません。）

　細分化の基準として、Live2Dで滑らかに動かしたいと思うレイヤーほど詳細に分割していく必要があります。 私のモデルの場合は、上半身をメインで動かすことを目的としていたため、体は傾く程度の構成にとどめて、顔の部分が滑らかに動くようなレイヤー構成を依頼しています。
　ここで重要なのは、データの保存形式をpsdファイルにしておくことです。

２-２ 「Live2D Cubism Editor」を利用したモデリング

　モデルのイラストの準備が整ったところで、この章ではLive2Dとして動かすためのモデリングを行います。

２-２-１ 環境構築

　今回はモデリングのためのツールとして、「Live2D Cubism Editor」を利用しています。リンクから「トライアル版（無料）」をクリックし、お使いのPCのOSに基づいて「初めてダウンロードする」を選択しダウンロードします。私はwindows版を利用しましたが、mac版でもほとんど操作は変わらないそうなので問題なく進められると思います。
　ダウンロード完了後にフリー版でEditorを起動し、対象のpsdファイルを読み込んで、下記の画面が表示されれば準備完了です。

２-２-２ パーツのメッシュ分割・テクスチャアトラス作成

　モデリング前の必須作業として、各パーツのメッシュ分割をします。
　psdファイルを読み込んだだけの状態では、パーツを立体的に細かく調整していくことが出来ないため、ゲームのポリゴンのような三角形の集合体に変換します。作業自体は簡単で、ソフトに備わっている自動生成機能を利用することが出来ます。下図は顔のパーツのメッシュ分割結果です。この作業を全パーツに行っていきます。

　メッシュ分割をすると、生成された各点の位置を動かすことが出来るので、モデルが立体的に動かせるようになります。

　また、Live2Dとして動かす際、各パーツを読み込むために必要なテクスチャアトラスの設定もこの段階で行います。こちらもソフトで自動レイアウトが出来るので、幅と高さを2048px（フリー版の最大値）に設定して出力した結果が下図になります。

　この画像から各パーツを取り出し、Live2Dモデルを生成することが出来ます。

２-２-３ 表情のモデリング

　ここから、各パーツを動かすための作業を行っていきます。
　まず、「目のまばたき」から説明していきます。どのように動いていくのかを分かりやすく紹介するために、要所でリンクの動画を埋め込んでいるので、そちらを参考にしてください。

２-２-３-１ 目のまばたき

【手順】

• 左目のファイルから選択した各パーツを「左目 開閉」パラメータに登録する。
• 「左目 開閉」パラメータ上で、0.0の時は目を閉じる、1.0の時は目を開くように設定する。

【完成イメージ動画】

　これを右目も同様に行うことで、「目のまばたき」の動きを表現することが出来ます。

　基本的な作業の流れは「左目 開閉」のパーツ以外も同様ですが、パーツの自然な動きを再現するために自分でパラメータを動かしながら、違和感がないように仕上げていく必要があります。
　
　表情のモデリングには、必要な項目として「目のまばたき」の他に下記があります。

• 目玉の動き
• 口の開閉・変形
• 眉の動き

　これらを「目のまばたき」で実施した手順のように設定していきます。「眉の動き」は先ほどの手順とほとんど変わらないため割愛させていただきますが、他の２項目は設定する上でそれぞれ意識するポイントがあるため、完成イメージとともに紹介しておきます。

２-２-３-２ 目玉の動き

【ポイント】
　目玉をX軸とY軸でそれぞれ、左右、上下の動きに合わせてパラメータの数値を設定します。両方設定した段階で、X軸とY軸を結合することで、上下左右に目玉の位置が対応して動くようになります。

【完成イメージ動画】

２-２-３-３ 口の開閉・変形

【ポイント】
　口の開閉と変形のパラメータを結合し、完成イメージ動画の12通りの動きを設定していきます。ここでは、口パクと同時に顎や頬が追従することも意識して動かしていくことがポイントになってきます。パラメータの点も多く、微調整が必要になってくるのでモデリングの中でも根気のいる作業です。

【完成イメージ動画】

　これで表情のモデリングは完了です。

２-２-４ 頭と身体のモデリング

　この章では、頭や身体を傾けたり、様々な方向に動くように設定していきます。

２-２-４-１ Z方向パラメータ・曲面の設定

　まず、X・Y方向に加えて、Z方向のパラメータを作成することで傾きを表現していきます。顔のパーツで回転デフォーマを作成することによって、顔の中心からZ軸を基点に回転するようになります。その後、顔以外の頭に必要になってくる髪やアクセサリーのパーツもまとめて回転するようにします。

　この際、髪の毛などは顔の回転に追従するように設定したほうが動きが滑らかになるため、ワープデフォーマを作成し、曲面 を表現してきます。「口の開閉・変形」の作業で形を微調整していったように、髪の毛も傾いたときどんな形になるかをイメージしながら動かしていきます。

　これで、正面から見たときの顔の傾きが表現できます。加えて、首と身体も同様に追従させていくことで下記リンクの完成イメージのような仕上がりになります。

【完成イメージ動画】

２-２-４-２ X・Y方向角度：曲面の設定

　ここでは、左右を向いた時の角度の設定を行います。基本的にはこれまでのパラメータ操作と大きな違いはなく、ある角度を向いたときにあるべき位置に各パーツを並べていき、都度その角度に適する輪郭だったり、顔のパーツの大きさや形を変更して調整していきます。
　また、Y方向も同様に上下を向いた時の角度の設定を行います。

２-２-４-３ 斜め向き角度の設定

　X・Y方向の角度をそれぞれ設定出来たら、X・Y曲面の4隅を自動修正し、斜めのパラメータを設定可能にします。これにより、左下、右下、左上、右上を向いた時の角度 を調整していくことが出来ます。斜めが追加されたことで、顔をどの位置に動かしても滑らかな表現が実現します。

　ここまでの作業で表現されたモデルが、下記の完成イメージ動画になります。

【完成イメージ動画】

　前述にも述べたように、私のモデルは顔回り＋上半身がある程度動くことを目標にしていたので顔に集中して作業できましたが、当然パーツが増えたり動かしたい箇所が増えるとその分この工程は大変になるので、初心者の方はパーツを増やしすぎないで上半身メインで動かすことをオススメします。

　これで頭と身体のモデリングは完了です。

２-２-５ 揺れのモデリング

　モデリングの最後の作業として、物理演算を組み込んでいきます。モデルを動かしたときに髪の毛やアクセサリーが揺れて動く表現を追加することで、より自然で滑らかに動くようになります。

【手順】

• これまでの作業と同様に、髪またはアクセサリーのパーツに対しワープデフォーマを作成し、曲面を表現、揺れというパラメータを設定します。
• 髪の毛が前・横・後に動いたときに想定される動きをイメージしながら調整します。
• モデリングのウインドウから物理演算を選択し、揺れのパラメータに振り子を設定して、揺れを表現します。

【完成イメージ動画】

　前章まででは表現しきれていなかった揺れの動きが追加されていることが分かると思います。

２-２-６ データの書き出し

　最後に、作成したモデルを外部のアプリで動かすためにデータの書き出しを行います。書き出しバージョンは「SDK 4.0 / Cubism4.0対応」で、設定してきた物理演算ファイル、ユーザデータファイル、表示補助ファイルを書き出します。これにより、Live2Dとして必要なファイルが格納されたフォルダが作成されます。

　これでオリジナルのLive2Dを作成するためのすべての工程が終了になります。

　私の場合、参考動画を見ながら１～２日かけてモデリングを行いました。工程の多さを感じると思いますが、実際の作業時間自体は思ったより短いです。パラメータを設定していく作業がやってみるとかなり楽しいので集中して作業できたことも大きかったと思います。最終的な完成イメージ動画は下記リンクです。（ソフト上でランダム再生しています。）

【完成イメージ動画】

２-３ フェイストラッキングソフトへの導入

　では実際にウェブカメラから自分の顔の表情・動きに合わせてLive2Dモデルを動かしていきます。導入自体はとても簡単で、任意のトラッキングソフトを起動し、作成したモデルのファイルをインポートするだけで反映することが出来ます。

　ただトラッキングソフトにも種類があり、それぞれ特徴があるため、今回は私が試してみた2つのソフトを、個人的に感じたメリット・デメリットを比較して紹介したいと思います。

①「nizima LIVE」

　こちらは日本のLive2D社の公式トラッキングソフトであり、UIもシンプルで使いやすく、初心者にオススメとなっています。

【メリット】

• UIがシンプルで見やすく、操作しやすい。
• モデルを読み込んだ初期状態で、作成時のイメージ通りのトラッキングを行っている。
• 無料版制約として、右上にnizima LIVEのロゴが表示されるがOBS上でキャプチャ範囲を調節し、非表示できる。
• iOS版「nizima LIVE TRACKER」により、スマホの画面でモデルを連動させることが出来る。

【デメリット】

• 無料版制約として、カメラの連続使用が45分のみ。
• 無料版は商用利用が不可。
• 有料版プランが月額550円とコスパが悪い。

　
【イメージ動画】

②「Vtube Studio」

　こちらはSteamで配信されているトラッキングソフトであり、海外の企業が開発しています。個人でも無料で商用利用が可能で、コストパフォーマンスも高いです。

【メリット】

• 無料版でも制限なくカメラを連続で使用することが出来る。
• 有料版が1520円で買い切りと圧倒的にコスパが良い。
• 同じfpsでもnizima LIVEと比較して、滑らかにモデルが動いていると感じた。

【デメリット】

• 無料版では常に左下にVtubeStudioのキャラクターが表示される。（OBSでキャプチャ範囲を指定しても追従してきてしまう。）
• モデルを読み込んだ初期状態では、作成時にイメージしたトラッキングの動きをしてくれないので、微調整が必要。
• steamで起動するので、OBS含め複数のソフトと同時に起動せざるを得ない。

【イメージ動画】

　比較の通り、初めてLive2Dを触ってみたい方向けにはnizima LIVEをオススメします。カメラの連続制限も45分と極端に短いわけではないので、個人的には気にならなかったです。制限が来ても、nizima LIVEを再起動すればすぐにトラッキングをし直すことが出来ました。
　ただ無料版では商用利用が出来ないですし、コスパも悪いので、安価で長時間の配信を途切れることなく実施したい場合は、Vtube Studio一択だと思います。

３ オンライン会議活用

　さて、ここからは作ったオリジナルのLive2Dを用いて、今すぐに活用できる事例を紹介していきたいと思います。

　まずは、顔出しが必要なオンライン会議にLive2Dで参加する方法です。リモートワークが主流の今、在宅等でのオンライン会議が基本になっていると思いますが、急な会議でカメラをオンにしなければならなかったり、お互いにカメラオフで参加しているため反応が分かりづらいなど、顔の出す出さないで起こる問題が時々出てきます。
　そんな時、Live2Dを使うことで身支度いらずで相手に反応を見せることが出来るのではないかなと思いました。当然、気にせずリアルな顔を出せばいい話ですが、状況によって難しいことは出てくるので、一つの在り方としてあってもいいのではないかなと思います。

　 今回試してみたのは、私の周りで身近なMicrosoft Teamsです。紹介してきたnizima LIVEと、steamで無料で配信されているストリーミング配信・録画が可能なソフトウェアのOBS Studioを組み合わせて導入していきます。

【必要なソフト】

• nizima LIVE
• OBS Studio
• Microsoft Teams

【手順】

• steamからOBSを起動して、「ソースを追加」からnizima LIVEを選択します。

• nizima LIVEを起動して、OBSにLive2Dが反映されていることを確認し、OBSでロゴが外れるようにキャプチャ範囲を調整、nizima LIVEとOBSの画面を見ながら、nizima LIVE上でモデルの位置を調整します。
  
  
  
  

• Teamsを起動して会議を立ち上げ、ビデオ設定のカメラからOBS Studio Cameraを選択します。
  
  
  
  

• OBSのコントロールから仮想カメラ開始を選択すると、Teams上でLive2Dが表示されます。
  
  
  
  

【イメージ動画】

４ ゲーム実況配信活用

　もう一つ活用事例として、よくあるゲーム実況配信の方法を紹介します。社内イベントやコミュニケーションのきっかけでesportsが取り入れられることが近年増えてきたこともあり、意外と使える場面があるかなと思って試してみました。
今回は配信アプリで試すことを仮定して、ゲーム画面とLive2Dが同じ画面に出力される様子を録画で紹介していきます。

【必要なソフト】

• nizima LIVE
• OBS Studio
• 任意のゲームソフト

【手順】

• steamからOBSを起動して、「ソースを追加」からnizima LIVEを選択します。

• nizima LIVEを起動して、UIから「背景設定」➡「透過背景」を選択し、背景に設定します。
  
  
  
  

• steamからOBSを起動して、「ソースを追加」からゲームキャプチャを選択し、任意の名前で新規作成します。

• 作成したゲームキャプチャの「モード」から特定のウィンドウをキャプチャを選択し、「ウィンドウ」から起動中の任意のゲームソフトを選択します。

• OBSの「ソース」から、nizima LIVEのソースがゲームキャプチャのソースよりも順番が上になるように設定します。
  
  
  
  

• OBSの「コントロール」から、配信or録画を開始します。OBSの画面で下記のように表示されていれば完了です。
  

　非公式ですが配信イメージとして、Fall Guys（Mediatonic/EpicGames）のプレイ動画を下記リンクに載せています。

【配信イメージ動画】

５ おわりに

　最後までご覧いただきありがとうございます！

　初めての投稿で、書きたいことをひたすら書いていったのでまあまあなボリュームになってしまいましたが、読んでいただいた皆様に面白さが伝われば幸いです。
　記事を書いてみた感想として、文字に起こして言語化したことで改めて理解度が深まったなと感じました。手順を忘れていたところもあったりして、、、、定着にはレクチャーはやはり必須ですね。今後もこういったアウトプットは定期的に続けていきたいと思います。

　内容について、所々端折って記載していることもあり、足りない部分に関しての質問等ございましたらコメントのほどもよろしくお願いいたします。

　今回Live2Dの活用として紹介した事例以外にも多くの使い道があり、今後もどんどん増えてくると思います。メタバースの発展に向けて、皆さんも是非モデルを作ってみたり、新たな活用方法を考えて実践してみてください。



　明日以降もNTTテクノクロス Advent Calendar 2023 は続きます。次回の投稿もお楽しみに！

６ 参考サイト

・【初心者必見】はじめてのLive2D①【基礎知識＆目・口の動き】/ ディープブリザード
・【初心者必見】はじめてのLive2D②【頭・体のXYZ設定】/ ディープブリザード
・【初心者必見】はじめてのLive2D③【物理演算・仕上げ・VTubeStudioへの導入】/ ディープブリザード