投稿記事

考察の記事 (9)

AYA-cis 2024/04/08 15:33

脱Animaze(FaceRig)Vtuberを作りたい

Vtuberって普通、moc3ファイルをどっかから買ってきてAnimaze(FaceRig)にぶち込んでなると思うんですけど。たしかにAnimazeは精度良く顔を読み込んでくれるんですけど、Animazeでは制御パラメータを弄ったりとかは出来ないんですよね。例えばケモミミとか作ってピコピコするようなモーションをLive2Dで作ったとするじゃないですか?そのパラメータを動かす機能が付いてないわけですよ。

つまり一般的にVになりたい人は、プログラムとかナニソレ分からんなのでAnimazeで妥協してるわけですな。
私もVを手作りしてたわけですが、このAnimazeに大変不服でして。

「「「おっぱいを作り込んだのに、おっぱいが全然揺れないんですよ!?」」」

なんでおっぱいが揺れないのかと言えば、Animazeは顔の動きの取り込みはしてるけど、体の動きは捉えないので、体が動かないわけなんです。なので、Live2Dでおっぱいを作り込んでもAnimazeじゃ全然揺れない!

というわけでUnityです。
Unityで作るメリット:おっぱいがぷるんぷるん!!商用Vに近い動き。
Unityで作るデメリット:Unityがむずかちい。あと余裕で6万円ぐらい吹っ飛ぶ。

なんで6万も吹っ飛ぶのかと言うと顔の動きを取り込むUnityの有料アセットで1.5万ぐらい飛びます。あとはモーションキャプチャー(mocopi)で4万ぐらい吹っ飛びます。

とはいえ、世の中の大半のVはAnimaze製で顔さえ動けば十分みたいな作りということなんで。商用に近い動きができるUnity製のVを作れば物凄い差別化が出来るわけで。ダイナミックな動きのVが作れますよ!ってアピールすれば依頼とかも来やすいんじゃないかなー???
と考えれば実質無料ですね。いぇい、いぇい。


さてさてお金の話をした辺りで8割ぐらい脱落したと思いますが。

まずはUnityにLive2D Cubism SDK
for Unityというアセットを入れます。
https://www.live2d.com/sdk/download/unity/
これはUnity上でLive2Dを動かすためのやつですね。
「SDKをインポート」に従いインポート。
https://docs.live2d.com/cubism-sdk-tutorials/getting-started/
このページに書いてある「モデルをインポート」の部分でご自分のLive2Dの書き出しファイルをインポートするわけですね。

インポート時点だと、たぶん大きくズレて配置されるので、カメラの調整。TransformのPositionのXYで横と縦の位置を、CameraのSizeで大きさをテキトーに弄って合わせます。CameraのBackGroundをクリックし、色を緑か赤か青に変えます。いわゆるクロマキー合成用で後で透かす色なので、キャラクターに使ってない色を選ぶ必要があります。
SceneとかGameとかあるタブのGameの中のFreeAspectをクリックし1920×1080を選んでおきます。(これ忘れるとOBSでエラーが出る)

次に必須ではないですがUnityCaptureを入れておきましょう。
詳しい解説はココ↓。
https://takaaki-hobby-blog.com/unity/output_obs_from_unity/
これがあるとUnityのカメラで写ったものを配信アプリであるOBSなどで映像として拾うことができるようになります。
ココでダウンロードして、
https://github.com/schellingb/UnityCapture
UnityCaptureSample/Assetsの中のUnityCaptureをプロジェクトへインポートします。
MainCameraのInspectorでAdd Componentを押しUnityCaptureを選びアタッチ。

OpenCVのアセットを購入しインポート。
https://assetstore.unity.com/packages/tools/integration/opencv-for-unity-21088?aid=1101l8AFE&utm_source=aff

Dlib FaceLandmark Detectorのアセットを購入しインポート。
https://assetstore.unity.com/packages/tools/integration/dlib-facelandmark-detector-64314?aid=1101l8AFE&utm_source=aff
インポート後、セットアップツールでMoveStreamingAssetsFolderを押すこと。(消しちゃってたらToolsから再度開けば出来る)

ここからはココを参照。iOS用の作成のページだが、PC用として読み替えていただければ。
https://welchizm.medium.com/スマホで使えるvtuberアプリを作ろう-live2d編-917eb5208ffe

Assets内の分かりやすい所で右クリックしてCreateしてC# Scriptして「DlibWebCamFaceDetector.cs」を作成。コードは以下のページからコピペ。
https://gist.github.com/welchi/42a61adc4f18ae0c3f8ae8c41bb67b83#file-dlibwebcamfacedetector-cs
Live2DのVモデルにAdd ComponentでDlibWebCamFaceDetectorを選択。

同じくAssets内の分かりやすい所で右クリックしてCreateしてC# Scriptして「FrontalFaceParam.cs」を作成。コードは以下のページからコピペ。
https://gist.github.com/welchi/a2c7abb4a8e61f8ac4559677040061eb#file-frontalfaceparam-cs
Live2DのVモデルにAdd ComponentでFrontalFaceParamを選択。

HierarchyビューでLive2DのVモデルに右クリック>「UI」>「RawImage」。Colorを押しA(透明度)を0にする。(カメラが動作してるかチェックするときは255にするとよい)

Add ComponentしたDlibWebCamFaceDetectorのSurfaceでRawImageを選択。
同様にFrontalFaceParamでFaceDetectorでLive2DのVモデルを選択。HeadAngleParameterをクリックし、カメラで撮った顔の動きを反映するパラメーターを選択。

この時点で再生を押すとVにカメラ(ivCam)の動きが反映される。(…のだがコードに致命傷があって、物理演算が反映されない。次の記事で修正版のコードを提案する)

ここからはmocopiを使うのでここのページを参照。
https://www.sony.net/Products/mocopi-dev/jp/documents/ReceiverPlugin/Unity/CreateSampleApp.html
余談だが、mocopiを使って3Dアバターを動かす記事はそこそこあるのに、Live2Dの2Dアバターを動かす記事は確認した限り無かったので多分ここが初出です。やったぜ。

mocopiを動かすためのSDKをダウンロードしましょう。
https://www.sony.net/Products/mocopi-dev/jp/downloads/DownloadInfo.html
アセットをインポート。
MocopiReceiver/Samples/ReceiverSample/ModelsからMocopiAvatarをHierarchyへ入れます。この時点だとVに3D人形が重なって大変邪魔ですが後でどかします。とはいえ、ちゃんとmocopiの動きを受信出来ているかチェックするのに便利。
同様にMocopiReceiver/Resources/PrefabからMocopiSimpleReceiverをHierarchyへ入れます。
MocopiAvatarにAdd ComponentでMocopiAvatarをアタッチ。
MocopiSimpleReceiverにAdd ComponentでMocopiSimpleReceiverをアタッチしAvaterSettingで+を押しMocopiAvatar>MocopiAvatar、port>12351を押す。

mocopiでモーションキャプチャーして送信すると、Unity側で再生した際に3Dのアバターが動くはずなのでチェック。動いてたらMocopiAvatarのTransformのpositionをテキトーな値にして画面外に出す。

Assets内の分かりやすい所で右クリックしてCreateしてC# Scriptして「AvatarToLive2D.cs」を作成。コードは有料記事からコピペ。
Live2DのVモデルにAdd ComponentでAvatarToLive2Dをアタッチ。反映するパラメータを選択。
まあ単純に3DのAvatarのパラメータ拾ってLive2Dの方に反映させてるだけなんだけどね。
再生すると、カメラの動きとmocopiでの動きがVに反映される。

次回はLive2DをUnityで作る際のつまづきポイントである、手書きのコードでパラメータを動かすと、物理演算が上手く反映されない問題について解説します。

【 お金で叩いて絵を出させる 】プラン以上限定 支援額:500円

コード

プランに加入すると、この限定特典に加え、今月の限定特典も閲覧できます 有料プラン退会後、
閲覧できなくなる特典が
あります

バックナンバー購入で閲覧したい方はこちら
バックナンバーとは?

月額:500円

この記事が良かったらチップを贈って支援しましょう!

チップを贈るにはユーザー登録が必要です。チップについてはこちら

AYA-cis 2024/04/08 14:58

【既刊公開】Twitterでバズる方法本






購入はここから!
https://www.dlsite.com/home/work/=/product_id/RJ01086555.html

【 お金で叩いて絵を出させる 】プラン以上限定 支援額:500円

既刊まるまる1冊

プランに加入すると、この限定特典に加え、今月の限定特典も閲覧できます 有料プラン退会後、
閲覧できなくなる特典が
あります

バックナンバー購入で閲覧したい方はこちら
バックナンバーとは?

月額:500円

この記事が良かったらチップを贈って支援しましょう!

チップを贈るにはユーザー登録が必要です。チップについてはこちら

AYA-cis 2024/04/08 14:50

キャプションはどうしたらバズるのか?

キャプションをバズりに貢献させるには2つの方法がある。
「その作品の良い部分を共有する」と「その作品のシチュエーションを補強または拡張する」の2つが存在する。

「その作品の良い部分を共有する」
例:ホラーで背筋がゾクゾクするよね?
この使い方の背景には現代的な芸術の楽しみ方が共有なことがある。つまり、面白い作品を読んでその感想を誰かと共有することに重きが置かれているのだ。疑問を呈する形にすることで、相手の反応を引き出し、共有させたいという欲求を引き起こそう。
余談気味ではあるが、感情や体感を揺さぶることで、相手の反応はより強烈に現れる。ゾクゾクなどオノマトペなども一つの例だろう。

「その作品のシチュエーションを補強または拡張する」
例:何でもないように見える女の子の絵に、何年も前に失踪した幼馴染がそのままの姿で呼んでる、というキャプションを付ける
この使い方の背景には、イラストの重要度としてシチュエーションや設定などのコンセプトが高くに来ることがある。つまり、綺麗さなどよりも、バレンタインで告白してるシチュエーション、などどいったコンセプトに重きを置いたほうがバズるのだ。
①拡張
絵では分からない情報を追加する。例のパターンなら可愛い絵が途端にホラーに早変わりする。他には好感度が高い、などと目には見えていない要素を追加するのも良いだろう。
②補強
単純にシチュエーションを改めて文字でも説明する。拡張に比べると難易度は低いがこれだけでも十分効果がある。

このような使い方があるので実践してみてはいかがだろうか?

この記事が良かったらチップを贈って支援しましょう!

チップを贈るにはユーザー登録が必要です。チップについてはこちら

AYA-cis 2024/04/08 14:49

Twitterのヘッダーの研究成果

Twitter(X)のヘッダー画像。悩みますよね。
結論から言えば画像みたいにハイライトに誘導するのが最善手です。

Twitterのフォローする理由を三択でアンケートを取ったことがあります。
1.合理的フォロー
いいイラストが流れてきたのでまた同じようなのを見れるかも?と思って。
2.条件反射的フォロー
何度もイラストを見た、名前を何度も見た、という刷り込みからのフォロー。
3.衝動的フォロー
説明出来る理由なんてないよ。

この中でどれが一番多かったと思います?

答えは3なんですねぇ。
つまり1枚の小さな画像で、どういう絵師なのか属性を理解させてフォローさせるのは難しい、ということです。みんな、そんな頭を働かせてフォローしてないよ。
つまりカンタンに行き着く答えとしては、一番他人の衝動を引き起こした、つまりはバズった画像でも載せておけば良いということになります。
でも小さな画像でそんなに効果ありますかねぇ?ということで、頭を働かせてみると、Twitterにはハイライトという、好きな画像だけを並べておける機能があります。ほとんど誰も使ってないと思うけど…。
そこで、見ると傑作が見れるよ!というモチベーションを与え、大きな矢印による視線誘導でハイライトボタンを押させるわけですね。
で、あとは傑作群を配置しておけばいいわけですわよ。小さな画像に色々詰め込むよりも、傑作をいっぱい見せたほうがフォローしてくれやすいのは当然でしょう?

というわけで、Twitterのヘッダー画像はハイライトへの誘導にしましょう。
おわり

この記事が良かったらチップを贈って支援しましょう!

チップを贈るにはユーザー登録が必要です。チップについてはこちら

1 2 »

月別アーカイブ

記事を検索