【VRMLiveViewer】GLTF モデルに影が付くように修正して、アプリで利用する 
2021/12/23 Thu [edit]
最近は VRM Live Viewer で直接使える背景3Dモデルも増えてきてとても嬉しいね。しかもスケール等倍で、光源の影響も受けられるようになってるものが多く、非常に使いやすい。
なので、今後はレガシーな方法となってしまうかも知れないが、逆に以前から使っていた GLTF でも同じように影や光源色を反映したいと思うこともあるだろう。
今回はその方法を Unity を使ってやってみよう。おおまかには「シェーダを Unlit → Standard に変える」という内容なので、知っている人にはなんてことないものだ。
例としては、以前デモでやった「ONE OFF MIND」の背景と同じものを用いてやってみる。ライトの設定も BOOTH で配布してるので、それも使って最終的にはデモと全く同じ背景を作ってみよう。
ここでは Unity 自体触ったことない人でもできるように、と考えているので、簡単過ぎる人は、興味がある項目だけで十分だろう。
|
モーション:yurie 様 [ニコ動]
振付:しょま 様 [ニコ動]
楽曲:VAN DE SHOP 様 (配布wav) [ニコ動]
カメラ:StarFire-DKY 様 [Youtube]
■UniVRM のインポート
■GLTF モデルを UniVRM でインポートする
■GLBモデル(エクスポート後のモデル)を原点配置にしておく
■GLBモデルとしてエクスポートし、アプリで使ってみる
(※) Unity 2020.3.21f1 / Windows11(x64) / UniVRM 0.89 で確認
■Unity のインストール
ここでは Unity を使って、シェーダを変える方法なので、まずは Unity をインストールしよう。
といっても、やり方は公式にも掲載されているので、手順はそちらを参照して欲しい。簡単には UnityHub をインストールし、UnityHub 内で、それぞれの Unity バージョンをインストールするだけだ。かなりの時間がかかるので、先んじてやっておいた方が良いだろう。
・初めてUnityをインストールする手順について (公式マニュアル)
・unity インストール 手順 (ググる)
ちなみに、VRM Live Viewer で使われている Unity バージョンを調べるには「ヘルプ([?]ボタン)>クレジット」で見ることができる。同じバージョンか、それ以上の方が良い。
■UniVRM のインポート
1. Unity(Hub) をインストールしたら、UnityHub を起動して「新規作成」から、新しいプロジェクトを作ろう。名前は何でも良い。テンプレートは「3D」で良いだろう。

2. 空のプロジェクトが開いたら、次に UniVRM をインポートしよう。PackageManager からインポートする方法もあるが、ここでは簡単に .unitypackage をダウンロードして、インポートしても良い。「Assets」に「UniVRM-0.x.x_xxxx.unitypakage」(0.x.x にはバージョンが入る)があるので、ダウンロードしよう。
・UniVRM
これも VRM Live Viewer に合わせるなら、「ヘルプ([?]ボタン)>クレジット」で見ると良い。

3. 古いバージョンでは「UniVRM_Samples-0.x.x_xxx.unitypackage」も必要だったが、最近(2021/12 時点)では、前述した「UniVRM-0.x.x_xxxx.unitypakage」だけをインポートすれば良い。unitypakage のインポートにはエクスプローラから、ドラッグ&ドロップで Unity のプロジェクトビュー(Projectタブ)インポートするのが簡単だ。

4. インポートしたら「Recommended project settings for UniGLTF/UniVRM」のダイアログが出る場合がある。これはプロジェクトの推奨設定で、例えば「ガンマカラースペース→リニアカラースペースに変更」してくれるものだ。「Accept All」すれば、UniVRM を使うのに最適な設定にしてくれる。

■GLTF モデルを UniVRM でインポートする
ここでは「ONE OFF MIND」で使った「Runcie Court」モデルを例に、UniVRM で Unity にインポートしてみよう。
・Runcie Court / Author: Blayne Jackson [CC-BY]
1. Sketchfab(初回はアカウント登録が必要[※無料])では「Download 3D Model」から「Autoconverted format(glTF)」の「DOWNLOAD」ボタンからダウンロードできる。このモデルは CC-BY で著作者とライセンス表示だけしておけば、比較的自由に使えるモデルだ。改変利用しても問題ない。ライセンスは各モデルの「License」に表示/リンクがあるので、確認しておこう。

2. ダウンロードしたら、zip を解凍し、Unity のプロジェクト内に適当にフォルダ作って、フォルダごとドラッグ&ドロップしよう(Project ビューで右クリック>Create>Folder)。
※UniVRM0.66 以前なら、Unity のメニューから「UniGLTF>Import(gltf,glb)」から、解凍したフォルダにある「~.gltf」(scene.gltf)を選択すれば、プロジェクト内のインポート先を聞かれるので、適当なフォルダにインポートすると良い(※なぜか最新のバージョンではエラーとなる)。

3. インポートしたらプレファブ(scene)が生成されるので、それをヒエラルキー(Hierarchy)にドロップして配置しよう。展開してマテリアルを見てみるとわかるが(ヒエラルキーで一番上の mesh_out_node_texture_material_0 をクリック>インスペクタ(Inspector)で MeshRenderer の Material(▼で表示) で texture_material をクリック>Projectビューで texture_material をクリック)、このモデルは「UniGLTF/UniUnlit」に設定されている。Unlit と付くものは、テクスチャをそのまま表示するシェーダで、影や光源色が付かないものと考えて良い。
4. インポートしたままだと編集できないので、前述の texture_material を Projectビューで選択したら、[Ctrl+D](Duplicate)で複製しよう。複製された texture_material を選択したら、インスペクタの「Shader」が有効化されているので「UniGLTF/UniUnlit」から「Standard」に変更する。ちなみに UniVRM がサポートしているシェーダは以下を参照して欲しいが、最近では UniUnlit (影が付かない) と Standard (影が付く) の2択と考えて良いだろう。
・Material (UniVRM マニュアル)
5. Standard にシェーダを変更したら、ここではインスペクタで「Metalic: 0.5. Smoothness: 0」にしておこう。この値は素材を表現する上で任意で良い。詳しくは Unityマニュアルの「マテリアルチャート」などを参考にすると良い。私の場合、床などの場合にはデフォルトのまま「Metalic: 0. Smoothness: 0.5」、建物などの場合は「Metalic: 0.5. Smoothness: 0」にしてることが多い。光沢の感じを変えたいときは、0.1 ずつ変更して、適当にやってみると良い(実際にアプリで見てみないとわからないので、マテリアルを複製して何パターンか作るのも良い。※Unity のデフォルトでは光源色が太陽光(#FFF4D6)となっているので、真っ白(#FFFFFF)にした方がアプリに近くなる)。
・VRMLiveViewerの床(GLB) 作成サンプル
6. 今回の Runcie Court ではマテリアルが1つなので、ヒエラルキーで MeshRenderer があるものを全選択 (Shift 押しながら、一番上と一番下を順に選択)したら、先ほど Standard シェーダに変えた texture_material を、インスペクタの MeshRenderer の Matarials にセットしよう。ドラッグ&ドロップでできる。
ここまでできたら、Sceneビューでも影が出ている(光源の影響を受けている)のがわかる。
このまま、モデルのルートを選択して、GLB エクスポートすれば、VRM Live Viewer でも影付きで使えるが、せっかくなのでもう一歩、配置が楽になるように工夫しておこう。
■GLBモデル(エクスポート後のモデル)を原点配置にしておく
3Dビューで見てる分にはわかりにくいが、今回の Runcie Court モデルは Scene ビューで上空から見ると(方向のギズモのYを押し、真ん中の■を押す)と斜め方向になってるのがわかる。
また、Cube(立方体:ヒエラルキーで右クリック>3DObject>Cube で生成)を原点の真上に置いてみると、モデル自体がかなり上にあることがわかる。
アプリでは「3Dオブジェクトの配置 (3D Object Transform)」でも調整できるが、ここでは配置データ(.json)を利用して、予め原点に移動しておくことにより、アプリで簡単に使うことができるようになる(このモデルは等倍で良いが、大きすぎたり、小さすぎたりするモデルはスケール(Scale)も調整しておくと良い)。
1. 以下のページに runcie_court_scene.json のリンクがあるので「右クリック>名前を付けて保存」して、.jsonファイルをメモ帳などで開いてみよう。面倒ならリンクをクリックすれば、ただのテキストファイルなので、ブラウザでも見れる(※ブラウザの設定にもよる)。
・Runcie Court の配置データ (runcie_court_scene.json)
2. 中身を見てみると、「position":{"x":-0.7599999904632568,"y":-4.980000019073486,"z":0.0」「rotation":{"x":0.0,"y":165.64999389648438,"z":0.0」となっているが、これは Unity での Transform の設定そのままである。なので、モデルのルート(scene)を選択し、インスペクタの Transform の Position に「X: -0.7599999904632568, Y: -4.980000019073486, (Z: 0)」、Rotation に「(X: 0), Y: 165.64999389648438, (Z: 0)」をコピペしよう(小数点以下はまるめられたるするが、気にしなくて良い)。先ほど置いた Cube が地面に置かれてる感じになり、角度も垂直方向になっているのがわかる。


3. GLB としてエクスポートするには原点配置(Position: (0,0,0), Rotation: (0,0,0), Scale (1,1,1))にする必要があるので、ここで空の GameObject を作ろう(ヒエラルキーで右クリック>Create Empty)。Position が移動してたら (0,0,0) に修正し、名前も適当に付けておこう(ここでは「runcie_court」としている※そのまま .glb ファイル名となる)。作ったら GameObject(runcie_court) にモデルのルート(scene)をドラッグ&ドロップして、子要素にしてしまえば、原点配置の完了だ。
※アニメーションが含まれている場合、仕様としてルートにアタッチする必要があります。詳しくは公式マニュアルか過去記事を参照して下さい。
・アニメーション (UniVRM マニュアル)
・GLBで背景モデルを自作する - アニメーションをする (過去記事)
■GLBモデルとしてエクスポートし、アプリで使ってみる
すべてが完了したら、ヒエラルキーで先ほど作った新しいルート(原点配置したもの:runcie_court)を選択し、メニューから GLB としてエクスポートしてみよう。UniVRM のバージョンによって、微妙に表記は異なるが、おおよそメニューは「UniGLTF>Export UniGLTF-x.x.x」となっている。


エクスポートした glb をアプリにドロップすればロードできる。せっかくなので「ライト設定集」で光源色を変えてみよう。ダウンロードした zip を解凍したら「20211127_ONE_OFF_MIND」フォルダに「light_ONE_OFF_MIND_runcie_court_dawn.json」(夕)、「light_ONE_OFF_MIND_runcie_court_night.json」(夜) が入っている。これをアプリにドロップすれば、すぐに適用される。空(そら)も「朝/夕焼け」や「夜空」「ファンタジー夜」等にすれば効果的だ。
・VRMLiveViewer用 ライト設定集
スカイドームのスケールを小さく編集している(1000mを超えたものはクリッピングされるため)

♪[A]ddiction : モーション:hino様 / 振付:足太ぺんた様
まぁ、たぶん Blender などでも同じようなことはできるとは思うが、UniVRM は Unity 製なので(Unity 製は頭に Uni- を付けることが多い)、値がそのまま使えたり、余計な変換が入らないメリットがある(Blender だとスケールとか、カラースペースとか、シェーダとか、色々合わせる必要がある)。
これくらいの編集なら簡単だし、1度やれば理解もできるだろう。せっかく無料でできるので、これを使わない手はない(笑)(私は適宜どちらも使うが、やってることはとても簡単なことばかりである=ほんのちょっとの手間で見違えるほどの映像になる)。
(関連記事)
【VRMLiveViewer】背景をカスタマイズする (チュートリアル)
【VRMLiveViewer】GLBで背景モデルを自作する
【VRMLiveViewer】背景GLTFの設定リスト(使用例)
【VRMLiveViewer】GLBで床を作る(FloorMake_Sample の解説)
【VRMLiveViewer】GLBで壁を作る(WallMake_Sample の解説)
【VRMLiveViewer】魔法陣の床を作る
【VRMLiveViewer】VRoid の衣装を発光させる
【VRMLiveViewer】PVキットを使ってハイクオリティなPV/MV体験をする (チュートリアル)
【VRMLiveViewer】VRM(VRoid)をライブステージで踊らせるアプリを作ってみた
- 関連記事
トラックバック
トラックバックURL
→http://fantom1x.blog130.fc2.com/tb.php/408-a01b4b26
この記事にトラックバックする(FC2ブログユーザー)
| h o m e |