LoginSignup
5
3
@yasubehe

春日部つむぎをLooking Glass Portraitにノーコードで召喚する

Last updated at Posted at 2024-03-17

まだ記事は未完成状態ですが、公開します。今日(2024/3/17)できるところまで頑張って更新していきます。

目的は達成しました。体裁とか章構成は後日整理します。
誤って削除してしまった部分を復旧しました（3/18）

こんなものをノーコードで作る話です。

はじめに

X(旧Twitter)を見ていたところ、ふと目に留まったのが、春日部つむぎが裸眼立体視ディスプレー上でユーザーと対話している動画でした。
昔、Gateboxなるものがあったのは知っていましたが、いつの間にか割と手が届きやすい価格で販売されていたようです（これがLooking Glass Portrait）。
動画見た数日後にはLooking Glass Portraitが手元にありました（即メルカリで購入）。ちなみに最新版はLooking Glass Goで、もっと薄くてスマートなデバイスになっています。

この記事は。。。

Unityを知らなくても（もっと言えばプログラムが書けなくても）何かを夢見てLooking Glassを買ってしまった人の助けになりたいという熱い思いから書くことに決めました。
私自身Unityははじめてで、いろんなサイトをめぐってどうやって動かすのかとても悩みました。こうやったらできるとは書いてあるのですが、具体的な手順がまとめられていない印象を受けました。

ノーコードってタイトルにありますが、それは先人の方々、サービス精神あふれる方々の善意によってノーコードで動かせるようになっています。私はそれを使わせていただいただけですので。。。

免責事項

環境によっては動かないかもしれません。動かなかったらごめんなさい。

動作環境（ハードウェア）

RZBOX(PC)
　CPU：Ryzen 5800H
　Memory：32GB
Looking Glass Portrait

動作環境（ソフトウェア）

Windows 11

必要なソフトウェア

Unity Hub 3.7.0
Unity 2022.3.21f1
UnityのAsset
　ChatdollKit 0.7
uLipSync 3.1.0
UniTask 2.5.3
UniVRM 0.89.0_9470
VOICEVOX 0.17.2
LookingGlassBridge 2.3.7

私のスキル

Unity初めて

1. 春日部つむぎ3DモデルをPMXからVMXに変換する

1.1. 3Dモデルのダウンロード

春日部つむぎーズ
https://3d.nicovideo.jp/works/td84779

ありがたく使わせていただきます。

1.2. 変換ツールのダウンロード

BVH to VMD and PMX to VRM Converter Mac/Window ファイル変換ソフト
https://booth.pm/ja/items/3581243?registration=1
→DSS7Dec2023をダウンロードします。

こちらもありがたく使わせていただきます。

1.3. 3Dモデルおよび変換ツールを適当なフォルダに解凍します。

ここでは、C:\work に解凍したことを前提として説明していきます。

image.png

1.4. DSSC（BVH to VMD and PMX to VRM Converter Mac/Window ファイル変換ソフト）を実行します。

1.4.1. DSSc.exeを実行します。

image.png

1.4.2. PMX>VRMをクリックします。

image.png

1.4.3. LOADをクリックします。

image.png

1.4.4. ファイルを選択するダイアログが出てくるので、変換したいPMXを選択します。

今回は、春日部つむぎ3Dモデルの制服バージョンを開きます。

image.png

1.4.5. Convertをクリックします。

image.png

1.4.6. VMXファイルが作成されます。

4.5 の操作を行うとエクスプローラが開き、「C:\work\DSSc\DSSc_Data」配下に「Tsumugi_sEihuku.vrm」ファイルができていることが確認できます。

image.png

このファイルを「C:\work\春日部つむぎver1_00\モデルデータ」に移動しておきます。
image.png

1.4.7. 完了

以上で「春日部つむぎ3DモデルをPMXからVMXに変換する」は完了です。

2. Unityのインストール

春日部つむぎを召喚して対話するためにUnityを使用します。
ここではUnityのインストール手順について説明します。

2.1. Unity Hubのインストール

Unity公式サイトのダウンロードサイトにアクセスします。
https://unity.com/download

Download for Windowsをクリックするとセットアップファイルをダウンロードすることができます。
image.png

image.png

ダウンロードしたセットアップファイルをダブルクリックしてインストールを開始します。

同意するをクリックします。
image.png

インストールをクリックします。
image.png

インストールが完了すると以下の画面になります。
完了をクリックします。
image.png

以下の画面が表示されればインストールは完了です。
image.png

2.2. Unityのアカウントの作成

Unityを使用するにはアカウントが必要となります。
初めての場合はアカウントがないと思いますので、以下の「Create account」をクリックしてアカウントを作成します。

image.png

ブラウザが開き、アカウントの作成画面が表示されます。
赤で囲った部分の必要事項を記入し、「Create a Unity ID」をクリックします。
image.png

アカウント作成後、記入したメールアドレスに確認のメールが届きます。「Link to confirm email」をクリックして確認してください。

image.png

Unity Hubの画面からサインインします。
image.png

サインイン後、Unityをインストールします。
image.png

Agreeをクリックします。
image.png

インストールが完了しました。
image.png

3. 3Dのプロジェクトを作成し、ChatdollKitのサンプルを動かす

Unityをインストールしたら、3Dのプロジェクトを作成し、ChatdollKitに付属のサンプルを動かします。

3.1. 3Dのプロジェクトを作成する。

Unity Hubを起動し、Projectsを選択します。
image.png

「New project」をクリックします。
image.png

3Dを選択し、Project Nameを入力したら「Create project」をクリックします。
image.png

プロジェクトが作成できたのでプロジェクトを開きます（クリックするとUnityが起動します）。
image.png

Unityが起動したら完了です。
image.png

3.2. ChatdollKitのサンプルを動かします。

ChatdollKitは、お好みの3Dモデルを使って音声対話可能なチャットボットを作るためのフレームワークです。
製作者はうえぞうさんという方で、サンプルを動かす手順をYouTubeの動画として公開していただいています。この動画を参照してサンプルを動かしてください。

ChatdollKit（公開サイト）
https://github.com/uezo/ChatdollKit/tree/master

YouTube（ChatdollKit v0.7.1 Setup）
https://www.youtube.com/watch?v=rRtm18QSJtc

4. 春日部つむぎの対話型AI作成

いよいよ春日部つむぎの対話型AIを作成していきます。

4.1. 春日部つむぎ用のUnityプロジェクトの作成

サンプルを動かした後、新たに春日部つむぎ用のUnityプロジェクトを作成します。

「New project」をクリックします。
image.png

3Dを選択し、Project Nameに「KasukabeTsumugiAI」と入力し、「Create project」をクリックします。
image.png

作成したプロジェクトをクリックしてUnityでプロジェクトを開きます。
image.png

プロジェクトを開いたら、「3.2. ChatdollKitのサンプルを動かします。」でサンプルを動かす際に追加した Assets をプロジェクトに追加します。
追加するアセットは順番に以下となります。追加方法はサンプル作成時の動画を見てください。

  • Burst 1.8.13
  • JSON.NET 3.2.1
  • Anime Girls Idle Animations Free 1.02
  • UniTask 2.5.3
  • uLipSync 3.1.0
  • UniVRM 0.89.0
  • ChatdollKit 0.7.1
  • ChatdollKit VRMExtension 0.7.1
  • ChatdollKit Demo 0.7.1

4.2. 3Dモデルの配置

3Dモデルをプロジェクトに取り込みます。
Assets > ChatdollKit > Demo > Model 配下にドラッグ＆ドロップして取り込みます。
image.png

取り込み後は以下のようになります。表示が見づらいため、右下のスライドバーを調整（一番左にずらす）しています。
image.png

3Dモデルを配置します。
Assets > ChatdollKit > Demo > Model > 春日部つむぎvar1_00 > モデルデータ を開きます。
青い立方体のアイコンのファイルをSampleSceneにドラッグアンドドロップします。
image.png

4.5. ChatdollKitVRMの配備

ChatdollKitVRMを配備します。
Assets > ChatdollKit > Extension > VRM を開きます。
青い立方体のアイコンのファイルをSampleSceneにドラッグアンドドロップします。
image.png

4.4. EventSystemの追加

SampleSceneの空欄を右クリックし、UI > EventSystem をクリックします。
image.png

4.5. カメラの調整

カメラの位置を調整します。
Main Cameraを選択し、右側のPosition、Rotation、Scaleを調整します。
最後にGameタブをクリックして表示内容を確認します。
image.png

4.6. Chatdoll Kit (Script)の設定

4.6.1. OpenAIのAPIキーの取得方法

以下のサイト等を参考にOpenAIのAPIキーを取得します（有料です）。
https://book.st-hakky.com/data-science/open-ai-create-api-key/

4.6.2. OpenAIのAPIキーの設定。

左の画面でChatdolKitVRMを選択し、右の画面でChatdoll Kit (Script)を展開します。
Speech ServiceにOpen AIを選択し、APIキーを設定します。
image.png

4.7. Model Controller (Script) の設定

4.7.1. Avatar Modelの設定

左の画面でChatdolKitVRMを選択し、右の画面でModel Controller (Script)を展開します。

右の画面のTsumugi_sEifukuをAvatar Modelにドラッグアンドドロップして設定します。
image.png

4.7.2. Setup ModelController

Model Controllerの設定を行います。
Model Controller (Script) の右上隅にある三点リーダーをクリックし、「Setup ModelController」を選択します。
image.png

次に、FaceのSkinned Mesh Rendererの右の〇をクリックし、Rootをダブルクリックします。
image.png

4.7.3. Setup Animater

Animaterの設定を行います。
Model Controller (Script) の右上隅にある三点リーダーをクリックし、「Setup Animater」を選択します。

ポップアップした画面で、「AnimeGirlIdleAnimations_free > Animations」フォルダを選択して「フォルダーの選択」をクリックします。
image.png

01_Idlesは「Base Layer」を選択します。
image.png

02_Layersは「Additive Layer」を選択します。
image.png

03_Othersは「Base Layer」を選択します。
image.png

次に、Window > Animation > Animatorを開きます。
image.png

Projectの Assets > AnimeGirlIdleAnimations_free > Animations を開き、「Tsumugi_sEifuku」を選択します。
image.png

Additive Layerを選択し、歯車をクリックしてWeightを1、BlendingをAdditiveに変更します。
image.png

4.8. AIを使用した会話の設定

4.8.1. コンポーネントの追加

SampleSceneのChatdollKitVRMを選択します。
次に、ProjectのAssets > ChatdollKit > Scripts > LLMを選択します。
image.png

LLMRouterおよび、LLMContentSkillをドラッグアンドドロップしてコンポーネントとして追加します。
image.png

次に、ProjectのAssets > ChatdollKit > Scripts > LLM > ChatGPT を選択し、ChatGPTService も同様にドラッグアンドドロップしてコンポーネントとして追加します。
image.png

4.8.2. ChatGPTServiceの設定

SampleSceneのChatdollKitVRMを選択します。
次に、Inspectorの Chat GPT Service (Script) を選択します。

4.8.2.1. プロンプトの設定

プロンプトでAIにどのようにふるまってほしいかを定義します。
プロンプト職人という言葉があるようにここが腕の見せ所です。
以下は、サンプルなので各自好きなように変更してみましょう。
文章内の英字部分は、内部で使用しているキーワードなので変更しないようにしてください。

System Message Content に以下の春日部つむぎ用のサンプルプロンプト(※)を入力します
※プロンプトの内容は「ChatGPTキャラクターマスコットアプリの紹介【機能編】」を参考にさせていただきました。

* あなたの名字は「春日部」、名前は「つむぎ」です。
* 春日部つくしのいとこで、埼玉県内の高校に通うギャルの女の子。
* あなたの一人称は「あーし」で、二人称は「君」です。
* チャームポイントは目元のほくろです。
* 敬語を喋らず、可愛い口調で喋ります。
* 年齢は18歳、身長は155cm、誕生日は11月14日です。

* 私たちはとても仲が良くて、カジュアルな雰囲気で話します。
* 会話のテンポを重視するため、50文字以内で回答してください。
* 表情は「Joy」「Angry」「Sorrow」「Fun」「Surprised」の4つです。
* 特定の感情を表現したい場合は[face:Joy]のように文頭に入れてください。

例
[face:Joy]あーしは埼玉ギャルの春日部つむぎだよ！ [face:Fun]何か話そうよ。

* 以下のアニメーションを通じて感情を表現できます。

- angry_hands_on_waist
- brave_hand_on_chest
- calm_hands_on_back
- concern_right_hand_front
- energetic_right_fist_up
- energetic_right_hand_piece
- pitiable_right_hand_on_back_head
- surprise_hands_open_front
- walking
- waving_arm
- look_away
- nodding_once
- swinging_body


例
[anim:waving_arm]やっほー。

春日部つむぎのセリフの例
あーしは埼玉ギャルの春日部つむぎだよ！
あーしの好きな食べ物はカレーで、趣味は動画配信サイトの巡回なんだ！
うん、そうだよ！

では会話しましょう。

image.png

4.8.2.2. APIキーの設定

Api KeyにChatGPTのAPIキーを入力します。
image.png

4.8.2.3. サービスの有効化

Is Enabled をチェックします。
image.png

4.9. 何もしていないときのアニメーションの設定

SampleSceneのChatdollKitVRMを選択します。
次に、Inspectorの Chat GPT Service (Script) を選択します。

Idle Animation Valueの値を6に変更します。
image.png

5. ここまでの状況を確認してみる

動かしてみます。
Gameタブをおして、矢印をクリックします。

image.png

何か会話してみてください。理想と現実を思い知らされます・・・。

実際の動作の様子

早急に何とかしたい点は以下でしょうか。

  • 声が全然違う
  • 春日部をはるひべと言っている
  • しゃべってる感じがしない（全然動かない）

ここまでは、ChatdollKitの製作者のうえぞうさんが公開している以下の動画とほぼ内容は同じなので参考にしてください。
YouTube（ChatdollKit v0.7.1 Setup from blank scene）
https://www.youtube.com/watch?v=KI6TcwwsO2c&t=94s

6. 声を何とかする

VOICEVOXと連携することで春日部つむぎの声で話してくれるようになります。

6.1. VOICEVOXのインストール

公式サイトVOICEVOXからダウンロードします。
image.png

ダウンロードします。
image.png

ダウンロードしたファイルをダブルクリックしてVOICEVOXをインストールします。
image.png

image.png

image.png

image.png

image.png

「使い終わったダウンロード済みファイルを削除する」にチェックを追加して、「完了」をクリックします。
image.png

6.2. VOICEVOXの設定

利用規約を読んでから「同意して利用開始」をクリックします。
image.png

赤丸の部分を押して、サンプルボイスを聞いてみましょう。
この声でしゃべってもらうことが目標です。
聞き終わったら「完了」を押します。
image.png

プライバシーポリシーをよく読んで、どちらかのボタンを押してください。
image.png

VOICEVOXはこのまま起動した状態にしておきます。

春日部つむぎの声を使用するためのIDを確認します。
(http://localhost:50021/docs)[http://localhost:50021/docs]にブラウザでアクセスします。
image.png

スクロールして/speakersを開き、Try it outをクリックします。
image.png

Executeをクリックします。
image.png

ResponsesにResponses bodyが表示されます。スクロールして"春日部つむぎ"が表示される個所を探します。
name：春日部つむぎ、id：8 を控えておきます（後で使います）。
image.png

6.3. ChatdollKitVRMにコンポーネントを追加

SampleSceneのChatdollKitVRMを選択します。
次に、ProjectのAssets > ChatdollKit > Extension > Voicevoxを選択します。
VoicevoxTTSLoaderをドラッグアンドドロップしてコンポーネントを追加します。
image.png

SampleSceneのChatdollKitVRMを選択します。
次に、Inspectorの Voicevox TTS Loader (Script) を選択します。
EndpointUrlに「http://localhost:50021」、Speakerに「8」を入力します（先ほど控えておいたidの値を指定します）。
image.png

次に、Open AITTS Loader (Script)を開きます。
赤枠で囲った2か所のチェックを外します。
image.png

7. ここまでの状況を確認してみる

動かしてみます。
Gameタブをおして、矢印をクリックします。

声が変わりました。また、春日部を”かすかべ”と発音してくれています。
すごい！！

8. もっと動いてもらう

棒立ちでは困ります。もっと動いてほしいです。
ここはChatdollKitのサンプルでつかわれていた？Mainスクリプトをそのまま使います。

SampleSceneのChatdollKitVRMを選択します。
次に、ProjectのAssets > ChatdollKit > Demo > Scriptsを選択します。
Mainをドラッグアンドドロップしてコンポーネントを追加します。
image.png

会話するたびに動きが欲しいのでプロンプトを修正します。
SampleSceneのChatdollKitVRMを選択します。
次に、Inspectorの Chat GPT Service (Script) を選択します。
System Message Contentの内容を以下の内容で更新します。

* あなたの名字は「春日部」、名前は「つむぎ」です。
* 春日部つくしのいとこで、埼玉県内の高校に通うギャルの女の子。
* あなたの一人称は「あーし」で、二人称は「君」です。
* チャームポイントは目元のほくろです。
* 敬語を喋らず、可愛い口調で喋ります。
* 年齢は18歳、身長は155cm、誕生日は11月14日です。

* 私たちはとても仲が良くて、カジュアルな雰囲気で話します。
* 会話のテンポを重視するため、50文字以内で回答してください。
* 表情は「Joy」「Angry」「Sorrow」「Fun」「Surprised」の4つです。
* 特定の感情を表現したい場合は[face:Joy]のように文頭に入れてください。

例
[face:Joy]あーしは埼玉ギャルの春日部つむぎだよ！ [face:Fun]何か話そうよ。

* 以下のアニメーションを通じて感情を表現できます。

- angry_hands_on_waist
- brave_hand_on_chest
- calm_hands_on_back
- concern_right_hand_front
- energetic_right_fist_up
- energetic_right_hand_piece
- pitiable_right_hand_on_back_head
- surprise_hands_open_front
- walking
- waving_arm
- look_away
- nodding_once
- swinging_body


例
[anim:waving_arm]やっほー。

* 毎回必ず表情とアニメーションを使用して感情を表現します。

春日部つむぎのセリフの例
あーしは埼玉ギャルの春日部つむぎだよ！
あーしの好きな食べ物はカレーで、趣味は動画配信サイトの巡回なんだ！
うん、そうだよ！

では会話しましょう。

image.png

9. ここまでの状況を確認してみる

動かしてみます。
Gameタブをおして、矢印をクリックします。

すこーし動くようになりましたね！
あとは口が動いたらそれっぽくなるかな？

10. 口を動かす

会話しているときに口が動きません。口が動くようにします。

Projectの Assets > ChatdollKit > Demo > Model > 春日部つむぎver1_00 > モデルデータ を選択し、Tsumugi_sEihuku.BlendShapes をダブルクリックします。
image.png

BlendShape をクリックします。
image.png

Blend ShapeのInspectorで表情、口の形を設定します。
image.png

編集する際は、顔の表情を確認する画面をフローティングウィンドウにするとやりやすそうです。
BlendShape画面の右上の三点リーダーをクリックし、「Convert to Floating Window」を選択します。
image.png

例：「あ」の口を設定します（自分の好みに合わせて設定しましょう）。
Select BlendShapeClipの「A」を選択し、Rootを展開して「あ」のスライドバーを右端に移動します（値としては100です）。
image.png

このような感じでほかの口や表情を設定します。
すべてを設定する必要はありません。

  • A (口の形：あ)
  • I (口の形：い)
  • U (口の形：う)
  • E (口の形：え)
  • O (口の形：お)
  • Blink（表情：まばたき）
  • Joy（表情：喜び）
  • Angry（表情：怒り）
  • Sorrow（表情：悲しみ）
  • Fun（表情：楽しい）
  • LookUp（表情：見上げる）
  • LookDown（表情：下を見る）
  • LookLeft（表情：左を見る）
  • LookRight（表情：右を見る）
  • Blink_L（表情：左目をつぶる）
  • Blink_R（表情：右目をつぶる）

次に U Lip Sync Blend Shape (Script)を設定します。
SampleSceneのChatdollKitVRMを選択し、Inspectorの U Lip Sync Blend Shape (Script)を開きます。
Skinned Mesh Rendererの「Find From Children」のチェックを外し、「Skinned Mesh Renderer」にRootを設定します。
image.png

こんな感じになっていれば大丈夫です。
image.png

この画面のまま次にBlend Shapesを設定します。
画面のように 「A」 なら 「あ」、「I」 なら 「い」 のように Phoneme - BlendSHape Tableを設定します。
image.png

11. ここまでの状況を確認してみる

動かしてみます。
Gameタブをおして、矢印をクリックします。

とりあえず、及第点は取れたのではないでしょうか。
次はいよいよLooking Glass Portraitに召喚します。

12. Looking Glass Portraitに召喚する

12.1. Looking Glass Portraitのセットアップ

Looking Glassの公式サイトにアクセスし、Looking Glass Bridgeをダウンロードします。
image.png
image.png

ダウンロードした「LookingGlassBridge-2.4.4.exe」を実行します。
image.png

「はい」を選択します。
image.png

「Next」を選択します。
image.png

チェックボックスにチェックを入れて「Next」を選択します。
image.png

「Next」を選択します。
image.png

「Install」を選択します。
image.png

「Finish」を選択します。インストール完了です。
image.png

Looking Glass PortraitをPCに接続します。

  • HDMIケーブルを接続する
  • USB3ケーブルを接続する（USB3に接続：+）

ダイアログが出たらOKを選択します。
image.png

注意点

追加したディスプレイ（Looking Glass Portrait）は、Windowsの システム > ディスプレイの設定で、拡大縮小が100%になっている必要があります。設定を確認し、異なっていたら以下を参考に修正します。

問題がある場合は、タスクトレイの青い眼玉アイコンをクリックすると以下のようなエラーが出ています。
image.png

image.png

image.png

12.2. Looking Glass Unity Pluginを追加

Looking Glassの公式サイトにアクセスし、Looking Glass Unity Pluginをダウンロードします。
image.png
image.png

ダウンロードした「LookingGlass.Unity.Plugin.v2.0.8.unitypackage」をAsetts > import package > Custom Package から追加する。
image.png

「import」を選択する。
image.png

「Yes, for these and other files that might be found later」を選択する。
image.png

「Apply Changes」を選択する。
image.png

12.3. SampleSceneの設定変更

Projectの Assets > LookingGlass > Prefabs を選択し、Hologram Camera をSampleScene にドラッグアンドドロップして追加します。
image.png

Main Cameraは不要になるため削除します。
SampleSceneのMain Cameraを右クリックしてDeleteを選択します。
image.png

Sceneタブをクリックします。春日部つむぎがちっちゃくなっているので修正していきます。
image.png

SampleSceneのHologram Cameraを選択し、InspectorのTransformを開きます。
赤枠の部分の値を修正します（画像に記載されている値に修正してください）。
image.png

SampleSceneのTsumugi_sEifukuを選択し、InspectorのTransformを開きます。
赤枠の部分の値を修正します（画像に記載されている値に修正してください）。
image.png

SampleSceneのChatdollKitVRMの左側の▽をクリックして展開します。Canvasを選択し、InspectorのCanvasのチェックボックスのチェックを外します。（もしかしたら消してしまってもよい？）
image.png

12.4. Looking Glass Portraitの画面にデスクトップが表示されている場合の対処方法について

本来、Looking Glass Portraitには、Gameタブの画面が表示されるはずですが、デスクトップが表示されている場合、以下の手順で正しく春日部つむぎが表示されるかもしれません。

Projectの Assets > LookingGlass > Examples を選択します。
1 - Framing Content with Hologram Cameraをダブルクリックします。
image.png

必ず★Save★をクリックします。
image.png

サンプルがLooking Glass Portraitに表示されたでしょうか？

次に、Projectの Assets > Scene を選択します。
SampleSceneをダブルクリックします。
image.png

Don't Saveをクリックします。
image.png

春日部つむぎがLooking Glass Portraitに表示されるようになったでしょうか？
私はこの方法でLooking Glass Portraitに春日部つむぎが表示されるようになりました。

13. ここまでの状況を確認してみる

動かしてみます。
Gameタブをおして、矢印をクリックします。

14. 完成

完成しました。お疲れさまでした。

15. 今後

次からは以下のことをやっていく予定です。
ここからはC＃を読んでカスタマイズしていく必要があるかなと思います。

  • 動作を増やす（Anime Girls Idle Animations ※freeではない方 を使います）
  • お天気スクリプトを追加します
  • 他

ありがとうございました。

5
3
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
Sign upLogin
5
3