2019年11月19日

Unity+VeryAnimationでVRoidモデルを撮影する方法

■はじめに

VRoid Studioでキャラクターモデルを作成し、撮影機能で画像を作成出来るのですが、背景画像の用意に困ったり、ポーズをもっと細かく調整したい場合があります。

そこでUnityを利用して撮影してみようと思います。なお、Unity自体は無料なのですが、ここで紹介するポージングに使用する「Very Animation」というアセットは46ドルと有料になります。


■プロジェクトの作成

「Unity Hub」を起動し、右上の「新規作成ボタン」の右にある「▼ボタン」をクリックして「2019.2.12f1」をクリックします。

2019-11-19 (3).png

テンプレートが「3D」になっていることを確認し、「プロジェクト名」に適当な名前を設定します。ここでは「VRMShot」とします。最後に右下の「作成」ボタンをクリックします。

Unityが起動し、以下のようなウィンドウが表示されたと思います。

2019-11-19 (4).png


■背景モデルの読み込み

Asset Storeタブをクリックします。もしそのタブが開かれていない場合は、最上部のウィンドウメニューからWindow→Asset Storeをクリックします。「アセットの検索」に「NYC Block #6」と入力して検索します。

2019-11-19 (16).png

「NYC Block #6」をクリックし移った画面で「ダウンロード」ボタンをクリックします。ダウンロードが完了したらそのボタンが「インポート」ボタンに変わっているので、それをクリックします。

2019-11-19 (17).png

「Import Unity Package」ウィンドウが表示されますので、右下の「Import」ボタンをクリックします。

しばらく待つと、ProjectタブのAssetsフォルダの下に「OutPost」フォルダが作成されているかと思います。

それからSceneタブをクリックして元の画面に戻し、先ほどのOutPostフォルダの中のResources→Scenesフォルダをたどっていくと「NYC_block_6.unity」ファイルがありますので、それをダブルクリックします。

2019-11-19 (18).png

Hierarchyタブの「NYC_Block_6」の左側の三角をクリックして開き、その中にある「First Person Controller」をダブルクリックすると、ビルの一部が見えると思います。なおこれ自体は不要なので「First Person Controller」の上で右クリックしてDeleteをクリックして削除します。

2019-11-19 (31)_2.png

もう1つ「Environment」の中の「L_sun」をクリックし、Inspectorタブに表示される「Camera」コンポーネントのチェックマークを外します。

ひとまずここでセーブをしておきましょう。最上部のウィンドウメニューからFile→Saveをクリックして下さい。


■UniVRMのインストール


上記のサイトから最新版のUniVRMをダウンロードします。2019/11/19時点ではv0.53.0が最新版です。少し下にある「UniVRM-0.53.0_6b07.unitypackage」をクリックしてダウンロードします。

ダウンロードが終わったら、先ほどのUnityが起動している状態でダウンロードファイルをダブルクリックします。
「Import Unity Package」の子ウィンドウが表示されますので、右下の「Import」ボタンをクリックします。

しばらく待つと、ProjectタブのAssetsフォルダの下に「VRM」フォルダが作成されているかと思います。インストールはこれで成功です。


■VRMファイルの読み込み

VRoidStudioなどで作成したVRMファイルをUnityに読み込ませます。

ProjectタブのAssetsフォルダの中で右クリックし、Create→Folderをクリックします。
フォルダ名はここではひとまず「Chara」とします。

「Chara」フォルダをダブルクリックして中に入ります。もちろんこの段階では中身は空っぽです。そこに、VRMファイルをドラッグ&ドロップします。ここでは「Mocuko.vrm」ファイルをドラッグ&ドロップします。

少し待つと「Chara」フォルダの中に「Mocuko.prefab」ファイルといくつかのフォルダやファイルが作成されたかと思います。


■VRMモデルの配置

2019-11-19 (23)_2.png

その「Mocuko.prefab」をHierarchyタブの下の空いている辺りにドラッグ&ドロップします。

すると、「NYC_Block_6」の中に「Mocuko」が追加されているのが確認できると思います。ただ、ビル群からだいぶ離れた箇所に配置されているので、良い感じの場所に移動します。頭と足元の2カ所に矢印が表示されていると思いますが、足元の方をドラッグして移動させます。

ひとまずここでセーブをしておきましょう。最上部のウィンドウメニューからFile→Saveをクリックして下さい。


■カメラの配置

次にカメラを設置します。Hierarchyタブのすぐ下にある「Create」ボタンをクリックし、「Camera」をクリックします。

これも移動と回転をおこなって良い感じの場所に移動します。

2019-11-19 (25)_2.png

また、Hierarchyで「Camera」を選択した状態でInspectorタブの中に表示される「Camera」コンポーネントの「Field of View」の数字も小さく調整しています。

ここでGameタブをクリックします。もし表示されていなければウィンドウメニューのWindow→General→Gameをクリックすると表示されます。

2019-11-19 (26)_2.png

それから「Free Aspect」と書かれているボタンをクリックし、一番下の「+」ボタンをクリックし、「Label」に「1920x1080」と書き、「Width&Height」をそれぞれ「1920」「1080」と半角数字で入力し「OK」ボタンを押します。これを最終的なレンダリング解像度とします。なお、より大きな数値を設定しても構いません。


■撮影する

ウィンドウメニューのWindow→Package Managerをクリックします。Packagesウィンドウが表示されるので、画面上部中央にある「Advanced」ボタンをクリックし、「Show preview packages」をクリックします。その右側にあるテキストボックスに「Recorder」と入力します。

2019-11-19 (28).png

「Unity AOV Recorder」と「Unity Recorder」の2つが表示されると思いますが、後者をクリックし、右下の「Install」ボタンをクリックします。インストールが終わったらそのボタンが「Remove」という名前に変わっていると思いますので、右上の「×」ボタンをクリックしてPackagesウィンドウを閉じます。

2019-11-19 (30).png

ウィンドウメニューのWindow→General→Recorder→Recorder Windowをクリックします。Recorderタブが表示されるので、そのタブを画面下のProjectタブがある場所にドッキングさせます。

「+ Add New Recorders」ボタンをクリックし、「Image Sequence」をクリックします。「Format」を「PNG」に変更し、「Output Resolution」を「FHD - 1080p」に変更します。「Record Mode」を「Single Frame」に変更します。

この状態で画面上の再生ボタンをクリックして実行し、Recorderタブの「START RECORDING」ボタンをクリックします。

image_0000.png

すると、プロジェクトフォルダの下に「Recordings」フォルダが作成され、その中に「image_0000.png」という画像ファイルが作成されたと思います。

なお、再度「START RECORDING」ボタンをクリックすると画像ファイルが上書きされてしまいますので、次に撮影する場合は「Frame」の右側の「0」と書いているところを「1」に変更します。その後は数値を1つずつ増やしていくといいでしょう。
ひとまず再生ボタンをクリックして元の画面に戻します。


■Very Animationの準備

2019-11-19 (32).png

Asset Storeタブを開き「Very Animation」を検索します。2019/11/19現在では46ドルですが、たまにセールなどがおこなわれていたりします。これを購入し「インポート」ボタンをクリックします。

2019-11-19 (33).png

ウィンドウのレイアウトが標準のままだと少し使いづらいので、ウィンドウメニューのWindow→Layouts→4 Splitに変更します。

この状態から左上と左下のSceneタブを右クリックし「Close Tab」をクリックして削除します。ウィンドウメニューのWindow→General→GameをクリックしGameタブを表示し、左上のSceneの横にドッキングし、元のSceneタブを削除します。
Window→Very Animation→Mainをクリックし、Inspecterタブの右側にドッキングさせます。Window→Animation→Animationをクリックし、Projectタブの右側にドッキングさせます。

2019-11-19 (34).png

最終的にこのようになったかと思いますが、マルチディスプレイ環境など好みで調整してもらっても問題ありません。ただし、Scene,VeryAnimation,Animationタブは同時に表示されるようにしておく必要があります。

Window→Layouts→Save Layoutsをクリックし、「Very Animation」と入力して保存しておきます。


■アニメーションの準備

ProjectタブのAssetsフォルダの中に「Anim」という名前のフォルダを作成し、その中で右クリックしCreate→Animator Controllerをクリックします。

2019-11-19 (35)_2.png

次にHierarchyタブのキャラクターをクリックし、Inspectorタブの「Animator」コンポーネントの「Controller」のところに作成した「New Animator Controller」をドラッグ&ドロップして設定します。

2019-11-19 (37).png

Hierarchyタブでキャラクターが選択されている状態のままVery AnimationタブとAnimationタブをクリックします。
Animationタブの右側の「Create」ボタンをクリックします。先ほど作成した「Anim」フォルダを選択し保存します。


■モーション編集

VeryAnimationタブの「Edit Animation」ボタンをクリックします。

2019-11-19 (42)_2.png

Gameタブでそれまで表示されていたキャラクターがどこかに行ってしまったかと思いますので、VA Editorウィンドウの「Prefab」ボタンをクリックします。これでいわゆるTポーズに戻ったと思います。

次にHierarchyタブに切り替え、キャラクターをダブルクリックすると、Sceneタブの中央にキャラクターが表示されたと思います。VA Controlタブをクリックして元に戻します。

2019-11-19 (45).png

ここからポージングをおこなうのですが、VA Controlタブの例えば首の丸マークをクリックして選択状態にすると、Sceneタブで首を中心に円が3つ表示されるので、そのどれかをドラッグすると回転します。

VA Controlタブの人型以外の箇所をクリックすると選択が解除されます。

2019-11-19 (46).png

両手足のIKと書かれているところのチェックマークをオンにすると、その箇所のみ回転ではなく移動で調整することが出来ます。位置を調整したあとチェックマークを外すことで、各関節の回転調整をおこなえます。

2019-11-19 (47).png

両足のIKのチェックマークをオンにした状態で、足元の楕円を選択状態にして上向き矢印を下に移動させると腰を落としたり出来ます。

2019-11-19 (48).png

また、手のポーズなどは、VA Editorウィンドウの「Muscle Group」内の「Finger Open Colose」の「Left Finger」などや、「Finger In Out」から調整出来ます。

2019-11-19 (49).png

表情は、その下の「Blend Shape」の「Face」の中になります。名前が長くて分かりづらいですが「BRW」が「眉毛」、「EYE」が「目」、「MTH」が「口」を意味しています。

すべて調整を終えたら、VA EditorでIKチェックマークを全て外し、何も選択されていない状態にします。

2019-11-19 (51).png

それからAnimationタブをクリックし、60フレーム目(1:00)の一番上の菱形をクリックして縦列が全選択された状態になったことを確認しDeleteキーを押して削除します。

VA Editorウィンドウの右上の「X」ボタンをクリックして終了します。

2019-11-19 (52)_2.png

ProjectタブのAssets/Anim/New Animationをクリックし、InspectorタブのRoot Transform RotationのBased Upon (at Start)をOriginalに変更し、Root Transform Position (XZ)のBased UponもOriginalに変更します。

2019-11-19 (54).png

この状態で実行してGameタブ内でポージングされていれば成功です。


■ポージング状態で撮影する

Window→Layouts→Defaultをクリックして元のウィンドウレイアウトに戻します。

HierarchyタブのキャラクターをダブルクリックすればSceneタブ内の中央にキャラクターが表示されると思います。

2019-11-19 (55).png

もう一度Recorderタブを表示してから実行して撮影してみます。

image_0002.png


■まとめ

ひとまず最低限はこれで完了ですが、ライティング等の設定を調整していくことで、よりイメージに近い絵を作れるかと思います。

なお、上記のキャラクター「妹尾もきゅ子」は僕が作成したモデルですが、着ている服は、Vtuberの星井まゆきさんが作成した、


にて公開されているものを利用させて頂きました。


posted by 妹尾雄大 at 23:29| Comment(0) | Unity | このブログの読者になる | 更新情報をチェックする

2019年09月22日

VTuberファンアート動画の作り方入門



星井まゆきさんのゲームOP風ファンアート動画を作ったのですが、その作り方を簡単に解説したいと思います。

以前、星井まゆきさんがSHOWROOM配信中に「自分のファンアートを作ってくれたら嬉しい」といった内容のことを話されていたのですが、僕の絵画能力は幼稚園児の頃から成長していなくて絵が描けないですし(笑)、何が作れるかなぁと考えた結果が動画作成でした。

絵心にあまり自信がない方でも、トライ&エラーを繰り返すことで同様のものが作れるのではないかと思います。


■3Dキャラクターモデル

まずは3Dキャラクターモデルを作らないと始まらないのですが、今は便利なツールがあって、


という無料のアプリなのですが、最初から用意されている3Dモデルをカスタマイズしていく形で目的とするキャラクターを作っていくことが出来ます。

VRoidMaking.png

まあそれでもなかなか思い通りに作っていくのは難しいのですが、少し調整しては別名保存してスクリーンショットを撮っておき、前回からイメージがズレているなと思ったら1つ前のプロジェクトファイルに戻してやり直すのを繰り返していけば、ゴールに近づいていくかと思います。

なお、服装などはテクスチャを差し替える方法になりますので、既存モデルから大きく異なるものは作ることが出来ません。

2019-09-16.png

ちなみに今回は、星井まゆきさん本人がBOOTHにて公開されている


この衣装テクスチャを利用しています。

そして、完成したら後述するUnityで読み込ませるために、VRMというファイルフォーマットでエクスポートします。


■Unity


元々はゲーム開発のためのゲームエンジンなのですが、今では映像制作や建築設計、VRアプリ開発などにも用いられているツールです。今回はこれを映像制作のメインツールとして使用します。


■UniVRM

Unity上にVRMファイルを3Dモデルとして読み込むためのアセットで、上記サイトで無料公開されており、インポート方法などの解説が載っています。


■UTS2.0

VRMのモデルをそのまま表示しても構わないのですが、アニメ調に調整するのに便利なので、

のアセットを利用しています。


■モーション作成

モーションのほとんどは手付けで作成したのですが、Unityアセットストアで販売されている


を利用しました。

VeryMotion.png

Unity上でモーション作成・編集がおこなえ、また開発者が日本の方なので、詳しい日本語マニュアルも付いています。


■モーションキャプチャ

snapshot1.png

「自販機」と「ダンス」のシーンのモーションだけは手付けではリアルな感じが出せないので、自作のモーションキャプチャシステムを使用しました。

vive.png

ハードウェアとしては、
  • HTC Vive Pro(初代でも問題ないです)
  • Viveコントローラ×2(上記に同梱)
  • Vive Tracker×3
を使用し、Trackerは腰と両足に使用しています。

モーションキャプチャシステムの作り方を解説し始めると膨大になりますので、ここでは省略させて頂きます。

なお、キャプチャしたモーションは、

この無料で公開されているアセットで保存してUnity上で利用できる形式に変換し、前述のVery Animationでカットしたり、手のポーズや表情アニメーションを追加したりしています。


■背景や小物の3Dモデル

には、背景や小物に使える3Dモデルが有料無料で公開されています。今回は、

などを使用しています。


■シーン作成

1つ1つのシーンごとは、Unityの

という機能を使って作成しています。

timeline.png

主にカメラの移動回転などのカメラワークのために使用しています。


■レンダリング

Unity公式で公開されている

このアセットを使用して、シーンごとに連番PNGとして出力します。mp4などで直接動画ファイルを出力することも可能なのですが、後述する動画編集ソフトで再圧縮がかかると画質が落ちますので、劣化しないPNGで出力します。

それを、


で、読み込んで無圧縮AVIファイルに変換します。


■BGM

BGMは以下のサイトで公開されている

を、使用させて頂きました。


■ボクセルモデル

2019-09-22 (2).png

2019-09-22 (3).png

一部のシーンで登場するボクセルキャラクターモデルは、


こちらの無料ソフトで作成し、OBJフォーマットでエクスポートします。

出力するとobj,mtl,png形式の3つのファイルが作成されますので、それをまとめてUnityに読み込みます。


■タイトルロゴ

snapshot.png

ロゴは、


を、使用して作成しました。

文字は1文字ずつ拡大変形させて多少ずらして並べると、それっぽくなります。


■動画編集ソフト

シーンごとに出力した動画は、

このソフトで編集していきます。無料版もあるのですがfilmoraのロゴ透かしが入るため、有料版を購入します。なお、購入の際に1千円割引されるクーポンコードを公開されているブログなどがありますので、「filmora クーポン」などでググるといいでしょう。


■動画編集

filmora上でBGMやAVIファイルを読み込み、並べていきます。

2019-09-22 (1).png

各シーンのつながりには「トランジション」を設定していき、シーンごとの色味やフィルタは「エフェクト」から設定していきます。

filmoraは「70年代」とか「VHSのゆがみ」といったエモいエフェクトが多くて最高です(笑)。

最後はこのアプリからMPEG4ファイルで出力して完成です。


■さいごに

この完成した動画は、さっそく星井まゆきさん本人に見て頂けたのですが、喜んで頂けたようで幸いです。こちらこそいつも楽しそうにお喋りする配信を見られて幸せです。ありがとうございます。

ラベル:星井まゆき
posted by 妹尾雄大 at 13:29| Comment(0) | Unity | このブログの読者になる | 更新情報をチェックする

2018年12月22日

Unityでウィンドウが非アクティブでもジョイパッドの入力を取得する方法

Unityの標準機能ではウィンドウが非アクティブ状態だとジョイパッドの入力が取得できませんが、XInput経由で取得するとウィンドウのアクティブ状態からの影響は受けません。

VisualStudio2017/C++のソースコードと、Unity2018.2.7f1(64bit)用のサンプルプロジェクトを以下に入れていますので、ご自由にお使いください。ライセンスは以下のNYSLとします。


なお、サンプルコードでは取得した値をそのまま表示していますが、トリガーとスティックの値はコントローラによってニュートラル状態でも中央値からブレたりズレていたり、最大値にまでならないものがありますので、閾値で適当に判断してください。

詳細は、


こちらを確認してください。


■ライセンス


A. 本ソフトウェアは Everyone'sWare です。このソフトを手にした一人一人が、
ご自分の作ったものを扱うのと同じように、自由に利用することが出来ます。
A-1. フリーウェアです。作者からは使用料等を要求しません。
A-2. 有料無料や媒体の如何を問わず、自由に転載・再配布できます。
A-3. いかなる種類の 改変・他プログラムでの利用 を行っても構いません。
A-4. 変更したものや部分的に使用したものは、あなたのものになります。
公開する場合は、あなたの名前の下で行って下さい。
B. このソフトを利用することによって生じた損害等について、作者は
責任を負わないものとします。各自の責任においてご利用下さい。
C. 著作者人格権は 妹尾雄大 に帰属します。著作権は放棄します。
D. 以上の3項は、ソース・実行バイナリの双方に適用されます。
posted by 妹尾雄大 at 17:45| Comment(0) | Unity | このブログの読者になる | 更新情報をチェックする