fc2ブログ
ヽ|∵|ゝ(Fantom) の 開発blog? ホーム »VRoid
このページの記事一覧

【VRMLiveViewer】ツールを使って、VRoid の衣装を発光させる  


 約1年2ヶ月前に Unity で「VRoid の衣装を発光させる」方法を書いたが、120 さんが発光設定できるツールを公開してくれたので、「Unity を使わずに、発光設定できるか?」を試してみた。


VRMの光物設定するやつ (BOOTH - 120byte)

 結論を先に言うと「Unity 無しでも発光設定はできる」ことがわかった。ただ VRoid はデフォルトで発光設定が無効になっていて(テクスチャに黒塗りのマスク「Shader_NoneBlack.png」が当てられてるため、光らない)、これを入れ替えないといけないので、もう1つツールを使って、そのやり方も伝授しておこう。考え方自体は以前と同じなので、ここでは簡単な手順だけ書いておくことにする。


(※) VRM Emission Editor 20230528 / VRMLiveViewer 3.7.1 / Windows11(x64) で確認



■発光させるテクスチャをVRMから取り出す

 ここでは、発光させる VRoid は何でも良いが、以前私が Unity で発光設定したことある「CLCT for FUTURE」を例に、今回はツールだけで発光設定をやってみよう。VRoid Studio のプリセットに入っているので、適当なモデルに着させて、VRM エクスポートして欲しい。


(c) pixiv


 前述したが、VRoid の場合は、デフォルトでは黒塗りのマスク(Shader_NoneBlack.png)が当てられていて、そのままでは光らない。なので、ここでも 120 さんのツールを使わせて貰い、VRM からテクスチャを取り出そう。それを元に後述でマスクを作ることになる。「VRMテクスチャ差し替えるやつ」(VRM TextureReplacer)をダウンロードしよう。


VRMテクスチャ差し替えるやつ

 ダウンロードしたら「VRM_TextureReplacer.exe」を起動して欲しい。起動したら「CLCT for FUTURE」を着せた VRM をツールにドロップしよう。このツールはモデルに設定されてるテクスチャを入れ替えるツールで、衣装の色を変えるとき等に便利だが、単に「Export」すれば、テクスチャを取り出すことができる。

 取り出すテクスチャは任意で良いが、要するに光らせたい部分があるテクスチャを右側の一覧から選んで、「Export」を押すだけだ。ここでは「N00_000_00_EyeIris_00_EYE」(目)、「N00_007_03_Tops_01_CLOTH_01」(トップス)、「N00_001_02_Bottoms_01_CLOTH」(ボトムス)、「N00_008_01_Shoes_01_CLOTH_02」(靴) 等、色々取り出してほしいが、テストするだけなら、とりあえず一番目立つ部分だけでも良いだろう(「目」などが簡単)。

●光らせたい部分があるテクスチャを [Export] する




■衣装の一部だけを発光させるマスク(エミッションマップ)を作る

 マスク(エミッションマップ)の作り方は以前書いた方法と同じだ。「光る部分を白または輝度の高い色(シアン等)」「それ以外を黒」にすることでマスク画像となる。PhotoShop や GIMP などを用いて、光らせたい部分だけを残し、他は黒で塗って欲しい。なお、透過してる部分も光らないので、「N00_000_00_EyeIris_00_EYE」(目) 等はそのままマスクに使っても良い(もちろん、目以外を黒塗りしても良い)。画像加工自体はテーマから外れるので、それぞれの画像編集ソフトのヘルプを見て、マスク画像を作って欲しい。以下はあくまで例となる。


●光らせたい部分と、光らない部分(黒)のマスク(エミッションマップ)の例




■ツール(VRM Emission Editor)に読み込んで発光設定をする

 マスク(エミッションマップ)ができたら、発光設定をしてみよう。ここでは今回メインの「VRMの光物設定するやつ」(VRM Emission Editor) を使う。ダウンロードしたら、「VRM_EmissionEditor.exe」を起動し、発光させたいモデルをドロップしよう。


VRMの光物設定するやつ

 モデルを「VRMの光物設定するやつ」に読み込んだら、右上のドロップダウンから、モデルに当てられているテクスチャの名前が選択できるようになる。ここでは目を光らせてみるとして「N00_000_00_EyeIris_00_EYE」を選択しよう。また「エミッションマップの読み込み」から、先ほど作ったマスク(エミッションマップ)で同名のものを読み込もう。



 デフォルト状態では光ってるのが確認しずらいかも知れない。その場合は、左上にある「Light」(ライト)を下げると良い。真っ暗にして、RGBと「光の強さ」を適当に上げれば、光ってるのが確認できると思う。



 あとはやり方は同じだ。対応する部位とマスク(エミッションマップ)を次々読み込んでいって、発光設定をすれば良い。全てが完了したら右下にある「VRM書き出し」からモデルを再エクスポートしよう。





■VRMLiveViewer に読み込んで発光させる

 発光設定したモデルを VRMLiveViewer で読み込んでみよう。ここでも背景が明るいと光っているのが確認しずらいので、Floor(床) や Sky(空) を無し(None) にしよう。またメインライトも太陽のアイコンを右クリックで消せるので、とりま真っ暗にすれば、発光設定した部分だけが色が付いてるのがわかる。綺麗に発光させるには「ポストエフェクト>ブルーム」をオンにしよう。



 発光自体の強弱を調整するには「キャラクターのオプション>MToon発光の設定」で調整できる。とりあえず簡単なのは [発光の補正] でスライダーを動かしてみることだ。ライトや他のエフェクトでも輝きの強さは影響受けるので、その都度設定すると良いだろう。



 ちなみに VRMLiveViewer では [発光モード] の設定により、点滅やランダム発光など、複雑な発光もできる。上手くやれば、派手な、サイバーな演出もできると思うので、挑戦してみて欲しい。

※クレジット・素材の詳細はツイートのリプ欄参照

※クレジット・素材の詳細はツイートのリプ欄参照






(関連記事)
【VRMLiveViewer】VRoid の衣装を発光させる (Unity)
【VRMLiveViewer】VRM(VRoid)をライブステージで踊らせるアプリを作ってみた
【VRMLiveViewer】魔法陣の床を作る
【VRMLiveViewer】GLTF モデルに影が付くように修正して、アプリで利用する
【VRMLiveViewer】GLBで背景モデルを自作する
【VRMLiveViewer】GLBで床を作る(FloorMake_Sample の解説)
【VRMLiveViewer】GLBで壁を作る(WallMake_Sample の解説)
【VRMLiveViewer】背景GLTFの設定リスト(使用例)


関連記事
スポンサーサイト



category: VRMLiveViewer公式ドキュメント

thread: ソフトウェア開発

janre: コンピュータ

tag: VRMLiveViewer  VRM  VRoid 
tb: 0   cm: --

【VRMLiveViewer】VRoid の衣装を発光させる (Unity)  


 あくまで現時点の VRoidStudio v1.4.2 でのやり方となるが、衣装の基本色・かげ色以外のマテリアルの設定(シェーダーカラー)の方法が見つからなかったので、Unity と UniVRM を使って VRoid を発光させる方法をやってみよう。もし、今後のバージョンアップで発光の設定が付いた場合は置き換えて欲しい。

(2023/05/31 追記)
120さんが発光設定を調整できるツール「VRMの光物設定するやつ」を配布してくれてます。Unity を使うのが難しいと思う人はこっちの方が簡単かも。使い方は以下の記事にしてます。

ツールを使って、VRoid の衣装を発光させる (チュートリアル)
VRMの光物設定するやつ (ツール)


 ちなみにマテリアルの発光(Emission) の設定は UniVRM 0.79 以降であれば使える。VRM Live Viewer の場合は v3.0α 以降となる。アプリで使っている UniVRM のバージョンを知りたい場合は「ヘルプ>クレジット」で使ってるバージョンが出てくるので、それ以降のものなら問題無い。

 今回は Hula Flat Works さんの サイバーウェア(V1.0~) を利用させて貰い、その方法を学習しよう。

 もちろん他者の素材を利用する際には利用規約を確認し、その範囲内での利用に留めて欲しい。サイバーウェアの利用規約によると『データ改変は可ですが、改変したものを再配布・販売は禁止です。』とあるので、自分用として遊ぶだけなら問題無いだろう。もちろん再配布等はしてはいけない。

 できれば、製作者のモチベに繋がるので、支援などもしてあげよう。お店用のタグなどがあれば付けてあげたり、お店を宣伝してあげるのも良い。ご厚意とはいえ、無料で貰いっぱなしというのもあまり宜しくない(笑)。

 また至極当然だが、無料配布されているものにあれこれ要望押し付けたり・文句言ったりするのもやめよう。少し考えてみればわかるが、企業や商売でやってるならともかく、それらは業務として対価を貰ってるわけではない。個人の趣味だったり楽しみでやってたりするものも多いのだ。顔が見えない分忘れがちだが、自分が欲しいという理由で赤の他人に無料奉仕を要求し、その貴重な創作活動の時間を奪うのは最も良くない(一般人に意見を言い、その要求をタダで呑んで貰う権利などはじめから無い)。クリエーターには伸び伸びと自由に創作活動して貰うのが一番良い(もちろん、本人が意見・要望を公募してるのなら別だが)。

※素材・クレジットはリプ欄を参照


 ここでは Unity 自体触ったことない人でもできるように細かく書いているので、簡単過ぎる人は必要な部分だけで十分だと思う。実際には以前の魔法陣の作り方とやり方はあまり変わらない。考え方だけわかれば、色々応用できるだろう。

※追記:VRoid Studio での作業はかえって複雑と考え、Unity のみに変更しました。


(※) Unity 2020.3.26f1 / UniVRM 0.89 / VRoid Studio 1.4.2 / Windows11(x64) で確認



■着せ替えて VRM エクスポートする

 まずは、Hula Flat Works さんの サイバーウェア(V1.0~) をダウンロードさせて頂こう。zip を解凍すると、衣装のテクスチャや .vroid ファイル等が入っている。
※掲載当時は Ver1 でしたが、バージョンによってデザインが異なる場合があります。



 詳しい内容は添付の README.txt にも書いてあるが、とりあえず .vroid ファイルを VRoid Studio で読み込み、各衣装パーツを「新規アイテム」として保存し、キャラを着せ替えよう。この辺りがわからないなら VRoid の公式チュートリアルを見て欲しい。


 着せ替えたら、「VRMエクスポート」で .vrm として保存する。以降は Unity での作業となる。



■発光する部分だけのマスクを作る

 ここからは Unity と UniVRM (v0.79 以降) での編集となる。インストールなどは公式や過去記事にあるので参考にして欲しい。

 Unity のインストールからはじめる場合はこちらの記事を参考にして欲しい。
 また、vrm インポート/エクスポートするには UniVRM も必要なので、一緒にインポートしておこう。

Unity のインストール
UniVRM のインポート


1. まずは先ほど作った .vrm をメニューから「VRM0>Import」(※バージョンによって表記が違う場合有り)でインポートしよう。保存先を聞かれるので、適当に新しいフォルダを作って指定した方が良いだろう。インポートが完了すれば、指定フォルダにプレファブができる。




2. プレファブができたら、ヒエラルキーにドラッグドロップしよう。今回は発光を確認するためにも、ライトを暗くした方がわかりやすいと思う。「Directional Light」をクリックしたら、インスペクタで「Transform>Rotation>X」を 0 (真っ暗にしたいなら -90)、「Light>Intensity」を 0 にすると良い。




3. 衣装のマテリアルはおおよぞ「Body」にあてられてるので、ヒエラルキーで階層を開き、インスペクタで「~Body~」「~Shoes~」「~Tops~」「~Bottoms~」となってるものをクリックしてみよう。Project ビューでマテリアルが指し示されるので、クリックするとマテリアルの設定が表示される。




4. マテリアルの「Textrue」に割り当てられている画像がプレビューされているが、ここをクリックすると Project ビューでの画像が指し示される。ここでは光る部分(シアンのライン)を持ったテクスチャを編集したいので、「~Body~」「~Shoes~」「~Tops~」「~Bottoms~」をそれぞれクリックすると、「_10」「_12」「_13」「_14」(.png)であることがわかる。右クリックで「Show In Explorer」をするとエクスプローラが開くので、画像をクリックすると確認できるだろう。



5. 先程のシアンのラインを持ったテクスチャのマスク(エミッションマップ)を画像編集ソフト(PhotoShopやGIMPなど)で開こう。ここでは画像編集自体はテーマから外れるので割愛するが、マスクの作り方としては「光る部分を白または輝度の高い色(シアン等)」「それ以外を黒」にすることでマスク画像となる。ここでは例として「_13.png」の発光する部分のみをシアンに塗りつぶした画像を作ってみたが、「_13_mask.png」とでも名前をつけて保存しよう。同じように「_10」「_14」でもマスク画像を作って欲しいが、「_12」は元々光ってる部分しかない透過画像となってるので、その場合は必要無い。


●靴のテクスチャの一部を光らせる例 (シアン=輝度の高い部分のみが光る)




■Unity でマテリアルの発光を設定する

1. マスク画像が完成したら、元画像のあったフォルダでも良いので、「_10_mask.png」「_13_mask.png」「_14_mask.png」(※名前は任意)をエクスプローラから Project ビューにドロップなどしてコピー(インポート)しよう。Import Settings は Generate Mipmap は外し、Max Size などは元の画像の設定を見て、合わせれば良いと思う。



2. マスク画像のインポートが完了したら、それぞれのマテリアルに割り当てよう。例えば「_13_mask.png」なら靴なので「~Shoes~」となっていたマテリアルだ。クリックしてインスペクタに設定が表示されたら、「Emission」の横の小さな○をクリックして、「_13_mask.png」を選択するか、マスク画像をドラッグドロップで割り当てる。



3. 色は発光色となるので、任意で良いが、ここではわかりやすくするためシアンにしている。また Intensity(輝度の強さ) を 1 以上にしておくとわかりやすい(白の場合は輝きが強くなる傾向があるので、Intensity = 0.5 くらいでも良い)。ちなみにカラーピッカーを開き直した時、色の値と Intensity が変わってたりするが、これは Unity の仕様なので気にしなくて良い(Intensity が 1 以上になると、色の値が 191 以下で Instensity が再計算される)。



4. これを同じように「_10」「_14」でもやっていく。「_12」に関しては元が透過画像なので、Emission 横の○からデフォルトのマスク(Shader_NoneBlack:黒塗り)を外す(None にする)か、「_12」をそのままマクスとして割り当てても良い。

 すべて割り当てたら、シアンのラインだけ色が付いてるようになるだろう。設定はこれで完了だ。




5. 最後にヒエラルキーでプレファブ(VRM)のルートを選択して、メニューから「VRM0>Export UniVRM-0.XX.X」(X はバージョン)を実行して、.vrm として再エクスポートすれば完成となる(プレファブ名がデフォルト名となる)。




 あとはエクスポートした .vrm を VRM Live Viewer (※v3.1 以降) にドロップして、[CRS FX] ステージで確かめて欲しい。発光に必要なのは「ポストエフェクト>ブルーム」だ。これをオンにして、強さを 1 以上に上げれば、他のステージや自作ステージでも使える。パラメータの意味などはこちらを参考にして欲しい。

ポストエフェクト - ブルーム




 今回は発光の設定を Unity でやってしまったが、考え方がわかれば、たぶん Blender でも同様のことができるだろう。その辺は未検証なので、自分で試してみて欲しい。

 また、目を光らせたいときも同じ考え方でできる。ただ、白は輝きが強くなる傾向があるので、輝度を弱めにしておいた方が良いみたいだ。また輝きはライトの強さにも影響されるので、明るい背景で使うときは輝度に注意しよう。









(関連記事)
【VRMLiveViewer】ツールを使って、VRoid の衣装を発光させる
【VRMLiveViewer】VRM(VRoid)をライブステージで踊らせるアプリを作ってみた
【VRMLiveViewer】魔法陣の床を作る
【VRMLiveViewer】GLTF モデルに影が付くように修正して、アプリで利用する
【VRMLiveViewer】GLBで背景モデルを自作する
【VRMLiveViewer】GLBで床を作る(FloorMake_Sample の解説)
【VRMLiveViewer】GLBで壁を作る(WallMake_Sample の解説)
【VRMLiveViewer】背景GLTFの設定リスト(使用例)


関連記事

category: VRMLiveViewer公式ドキュメント

thread: ソフトウェア開発

janre: コンピュータ

tag: VRMLiveViewer  VRoid  VRoidStudio  Unityリファレンス 
tb: 0   cm: --

【Unity】Unity2019 の StandardShader の処理が少し変わったらしいよ  


 ちょっと試しに Unity2019 にプロジェクトをアップグレードする実験をしてみたら、何か半透明なゴーストが現れた(笑)。


 そしたら VRoid 開発のしげぽんさんから有益な情報を頂いた。


 いずれ何ら対応しなくてはならないので、備忘録として残しておこう。情報共有しておけば、同じ問題にぶつかった人にも役に立つしね。

 Unity 本体や関連ライブラリのバージョンアップで色々な問題が出るのは、もう慣れっこだが(笑)、初期の頃は情報が少ないので、良い解決法が見つからないこともあるんだよね。けれど多くの人の目に入れば、色々な解決法も提示されやすくなる。

 Unity2019 には ShaderGraph や LWRP も導入されたし、今後こういった表現系の仕様はより複雑になりそう。私はこの辺りはあまり詳しくないので、少しは勉強して置かなければな…。有用な情報があったら教えてくれると嬉しい(笑)。[→ UniVRM 0.52以降では修正されました]






(関連記事)
【Unity】Unity2018.3.2 にアップグレードすると見た目がおかしくなることがある
【Unity】Android アプリでパーミッション(権限)要求をする
【Unity】IncrementalCompiler でのエラー:Unloading broken assembly Packages/com.unity.incrementalcompiler/Editor/Plugins/Unity.PureCSharpTests.dll, this assembly can cause crashes in the runtime
【Unity】Unity2018 でビルドエラー「CommandInvokationFailure: Gradle build failed.」が出る


関連記事

category: Unity

thread: ゲーム開発

janre: コンピュータ

tag: Unityトラブルシューティング  VRM  VRoid 
tb: 0   cm: --

【Unity】Unity2018.3.2 にアップグレードすると見た目がおかしくなることがある  


 原因は不明なのだが、Unity2018.3.1 以前のプロジェクトを Unity2018.3.2 にアップグレードしたら、見た目がガタガタになった…。えっ?何これ…?


●髪など揺れものがガタガタになってる…

(※) Unity 2018.3.2f1 / Windows10(x64) で確認

 一応 Git で管理してたので、以前のバージョンに戻って調べてみたら、どうやら Quarity Settings(Edit>Project Settings...>Quarity)のデフォルトが(緑色のチェックマーク)、なぜか全て「Very Low」になっていた…。


(左) Unity2018.3.1 のデフォルト / (右) Unity2018.3.2 へのアップグレード変換失敗?



 とりあえず、デフォルトを以前の状態に戻して(手動でやるなら、下の逆三角アイコンを押して、各プラットフォームの Quarity を選択する)、ビルドしてみたら、元に戻った。


●髪がサラサラになった


 アップグレード変換失敗を失敗したのか、何らかでデータが飛んでしまったのかわからないが、設定を戻せば直るようだ。

 ちなみに、新規プロジェクトでは、以前と同じデフォルト設定だった。他のプロジェクトでアップグレードしてみたけど、同じように「Very Low」になってしまうものがあった。PC は起動時にクオリティ選べるが(ダイアログのプルダウンもデフォで「Very Low」になる)、スマホではスペックにより自動となるので、自分で選べないので困る。う~ん、これは Unity2018.3.2 特有のバグっぽいな…。





(関連記事)
【Android】【Java】パーミッションの付与(許可)のチェックと要求をする
【Unity】Androidのトーストやダイアログ、通知、音声認識、ハード音量操作など基本的な機能を使えるプラグインを作ってみた
【Unity】AssetStore版 FantomPlugin のセットアップ
【Unity】Unity2018 でビルドエラー「CommandInvokationFailure: Gradle build failed.」が出る
【Unity】【C#】モバイルビルド中の警告:Game scripts or other custom code contains OnMouse_ event handlers.~ を消す


関連記事

category: Unity

thread: ゲーム開発

janre: コンピュータ

tag: Unityトラブルシューティング  Unityバグ  VRM  VRoid 
tb: 0   cm: --

【Unity】【C#】Android で VRM(VRoid)を動的に読み込む  


 VRM Live Viewer にも利用しているが、元々は「プラグインを使って VRM を Android で読み込めるか?」という実験をしてみたら、スンナリと行けてしまったので次々とアイデアが浮かび、VRM Live Viewer をリリースするまでに至ってしまったという…(タイムスタンプを見ると、試しにライブステージ導入してから、アプリリリースまで4日しかかかってない←夢中になるといつの間にかアプリを完成させてしまうことも多い(笑))。


 まぁせっかくなので、VRMVRoid を Android でも読み込み、利用する方法を書いておこう。ちなみに VRM は VRChat やバーチャルキャストで使われるアバターフォーマットではあるが、リアルタイムで読み込むことができるので、あらかじめモデルをアプリに入れてビルドする必要もなく、読み込みもそれほど時間はかからないので、応用範囲は広いと思う。

 私は Unity4 の時代から MMD を Unity で動かしたり、一般公開されているモデルを実験で使ってたりしてたが、Unity ではいつもキャラのバリエーションが少ないな~と感じていたので、VRM で動的に読み込めるのは画期的だとさえ思う。例えば RPG でもアクションでも、好きなキャラで遊べるゲームとかも作れそうだしね(もちろん、大きさやコライダの判定などの問題もあるが、あくまで可能性として(笑))。アイデアは常に新しい発想から生まれるので、既成概念に捕らわれずに色々やってみると良いと思う。それがいつか新たな作品に繋がる。

 今回はあくまで Android で VRMVRoid を読み込む方法だけだが(どちらも "~.vrm" で扱うとして)、私が試したところ、一度 Unity 内に読み込んでしまえば、プラットフォームに関係なく扱えると思うので(見た目はシェーダなどのせいで多少変わることもあるが)、ひとつの方法として覚えておけば色々活用できるだろう。ちなみに VRM Live Viewer は Android版と Windows版を出しているが、ファイル読み込みやダイアログなどプラットフォーム固有のもの以外は全て同じだ。実際にシーン1つだけでビルドしている。つまり複数のプラットフォーム対応も簡単にできることがわかる。


(※) Unity 5.6.3p1 - 2018.2.1f1 / UniVRM 0.40 - 0.43 / VRoid Studio 0.1.1 - 0.2.8 / Windows10(x64) / Galaxy S7 Edge (Android 7.0) で確認



■UniVRM をインポートする

 Unity で VRM を読み込むには UniVRM というオープンソースが必要となる。ライセンスは「MIT License」となるので、その辺りは各自で確認して欲しい。ちなみにライセンス形態にも色々あるが、MIT License は比較的緩いライセンスだ。ついでに参考資料も載せておこう。

(参考)
GPL, LGPL, BSD などのOSSライセンスの違いと注意点まとめ
知らないと損をする6つのライセンスまとめ



 なお、新規プロジェクトで Android プラットフォームでビルドして試すなら、パッケージをインポートする前に「File>Build Settings...」であらかじめ「Switch Platform」で Android プラットフォームに切り替えておいた方が良いかも知れない。UniVRM に内包されているシェーダ(MToon 等)を再コンパイルしたりするのに結構時間がかかる(笑)。


 プロジェクトの準備ができたら、まずは UniVRM をダウンロードしよう。今回はアプリに動的に VRM を読み込むので UniVRM の本体「UniVRM-x.xx_xxx.unitypackage」(xxx はバージョンなど)の他に「UniVRM-RuntimeLoaderSample-x.xx_xx.unitypackage」のインポートも必要になる。本体「UniVRM-x.xx_xxx.unitypackage」を先にインポートしてから、ランタイムローダ「UniVRM-RuntimeLoaderSample-x.xx_xx.unitypackage」をインポートしよう。とりあえず VRM の動的読み込みに必要なものはこれだけで良い。






●API のアップデートが促されたら、「Go Ahead!」する




■VRM を動的に読み込んでみる

 UniVRM のインポートが終わったら、次にプロジェクトビューで「Assets/VRM.Samples/Scenes」で、シーン「VRMViewer」を開いてみよう。ビューワ自体は PC 用なのだが、これを改造することにより、Android 等他のプラットフォームの読み込み方法もわかると思う。



 ちなみに「VRM Live Viewer」はこのシーンを元ベースとしている(見た目もたいして変わってないのでわかると思うが(笑))。他の VRM 利用アプリを見てみると、たぶん同じようにこれを改造してるものが多い気がする。エクスポートできるアプリを作るなら、シーン「VRMRuntimeExporterSample」あたりを見てみると良いと思う。せっかくのオープンソースなのだから、遠慮なく使わせて頂こう(笑)。


 このシーンでは左上部にある「Open」ボタンを押すことにより、VRM を動的に読み込んで、シーン上にモデル(アバター)をロードすることができる。ただ、Windows 上なら 「PC, Mac & Linux Standalone」プラットフォームになってればそのまま使えるが、Android では無視される。この辺りから少し改造していこう。


1.スクリプトとしてはヒエラルキーで「Canvas」をクリックして、インスペクタで表示される「Viewer UI」にそのコードが書かれている。これを編集しよう。グレーアウトしてる「Script>ViewerUI」をダブルクリックすれば、Visual Studio で開かれる(シングルクリックなら、プロジェクトビューで移動できる)。



2.「ViewerUI.cs」を開いたら、検索で「OnOpenClicked」を探してみよう。これが前述した「Open」ボタンのイベントハンドラとなっている。ここのコードを見てみるとプリプロセッサディレクティブ(#if~文)でプラットフォームが分けられている。とりあえず Unity エディタ上でもテストできるようにディレクティブ(UNITY_EDITOR_WIN)を付け加えておこう。

void OnOpenClicked()
{
#if UNITY_STANDALONE_WIN || UNITY_EDITOR_WIN
var path = FileDialogForWindows.FileDialog("open VRM", "vrm", "glb", "bvh");
#else
var path = Application.dataPath + "/default.vrm";
#endif
・・・(略)・・・
}

 ちなみに「UNITY_EDITOR_WIN」とは「Unityエディタ上でかつ Windows である場合の条件」である。プラットフォーム依存コンパイルを上手く使えば、複数のプラットフォームを分別することも可能だ。まぁしかし、コードは見づらくなるので、機能まるごとみたいな場合は、クラスごとに用意するという手もある。今回は一部を改造して使うので、この方法でやっていこう。

プラットフォーム依存コンパイル


3.「UNITY_EDITOR_WIN」を入れたら、グレーアウトしていた文字が見えるようになったと思う。しかし「FileDialogForWindows.FileDialog」の方にエラーが出たかも知れない。まぁ、これも同じプラットフォーム依存なので、「FileDialogForWindows」部分にカーソルを合わせ、「F12」を押せば、クラスがまるごとグレーアウトしてるのがわかる。手順2と同じように「UNITY_EDITOR_WIN」を #if~文に追加しよう。

#if UNITY_STANDALONE_WIN || UNITY_EDITOR_WIN
using System;
・・・(略)・・・
#endif

namespace VRM
{
public static class FileDialogForWindows
{
#if UNITY_STANDALONE_WIN || UNITY_EDITOR_WIN
#region GetOpenFileName
[StructLayout(LayoutKind.Sequential, CharSet = CharSet.Auto)]
public class OpenFileName
{
・・・(略)・・・
}
・・・(略)・・・
#endif
}
}


 これでコンパイルが通るようになったと思う。一旦、Unityエディタに戻ってプレイしてみよう。「Open」ボタンを押して適当な「~.vrm」を読み込んで見ると良い。VRMニコニ立体で多く配布されているので、いくつかダウンロードしておくと良いだろう。「ニコニ立体ちゃん」ことアリシア・ソリッドはとても軽いのでテストするにはもってこいだ。自分で作った VRoid でも可能だが、髪の毛などメッシュが多いものほど、生成に時間がかかるようだ(なので「VRM Live Viewer」では非同期読み込みの方を利用している。非同期読み込みを使うには「.NET4.x」にする必要があるので、ここでは割愛)。

ニコニ立体ちゃん (VRM)





■VRM の動的に読み込みを Android に対応させる

 VRM を動的に読み込みに成功したなら、後は Android に対応させるだけだ。ファイル選択などはプラットフォームに依存するので、先に出てきた「FileDialogForWindows」のようなものが必要になるが、Unity の標準機能には無いので、ここではプラグインを使うことにする(自分で作ったものがあれば、それでも良い)。



 ここで紹介するプラグインは元々私がブログで公開していたものだが、様々なアプリで利用して貰えてるようなのでアセットストアにも提出したというものだ(既に GooglePlay 等で公開されてるアプリなどにも利用されている。「〇〇というアプリを作ってるんですが、使わせて貰って良いですか?」と聞かれるようになったので、気兼ねなしに使えるようにアセットストアにも出したという経緯もある)。AssetStore版GoogleDrive版に機能的な違いはないので(AssetStore版 はアセットストアの規約に合わせただけ)、どちらを利用しても構わない(※ここでは AssetStore版を例にしている)。



 セットアップは以前の記事にあるので、そちらを参照して欲しい。AssetStore版GoogleDrive版では一部ファイル名やパス、素材が違うくらいで、内容的には同じだ。注意点は「Plugins」フォルダを「Assets」直下に移動し、「Plugins/Android」フォルダにあるサンプルのマニフェストファイル(AndroidManifest.xml)を用意しておくということだ(テストだけなら、"AndroidManifest_demo.xml"[AssetStore版]、または"AndroidManifest_test.xml"[GoogleDrive版]を複製してリネームすれば良い)。

AssetStore版のセットアップ
GoogleDrive版のセットアップ


1.プラグインのインポートとセットアップの準備が済んだら、プロジェクトビューの検索で「StorageOpenFileController」のプレファブを見つけよう。見つけたら、これをヒエラルキーに置き、後述のコードを書くことにより、Android でもファイルの情報を受け取れるようになる。本来なら Android でストレージの読み取りなどにはパーミッションなども必要になるが、前述のデモのマニフェスト("AndroidManifest_demo.xml"など)を使ってる分には既に含まれている(「READ_EXTERNAL_STORAGE」または「WRITE_EXTERNAL_STORAGE」が必要。デモにはそれ以外の権限も含まれているが、通常は不要な権限は削除した方が良い→ユーザーにインストを拒否られる確率が高くなるため)。

※Unity2018 以降、Android 8.0 以上を対象にしている場合は、「File>Build Settings...>Player Settings...>Other Settings>Configuration>Write Permission」を「Exernal (SD Card)」にするか、「Android アプリでパーミッション(権限)要求をする」でパーミッション要求をした方が良いかも知れない(Unity2017 のときと違い、自動で出なくなった(?))。

(パーミッション)
Android アプリでパーミッション(権限)要求をする
READ_EXTERNAL_STORAGE(ファイル読み取り権限)
WRITE_EXTERNAL_STORAGE(ファイル読み書き権限)



2.次に「StorageOpenFileController」で取得したファイル名を受け取るハンドラを、元のコード「ViewerUI.cs」の「OnOpenClicked」に追加しよう。書き方は前述のコードに追加する形となる。Android の場合ディレクティブは「UNITY_ANDROID」となるので、それを追加し、「StorageOpenFileController」でストレージを開くコードを Android プラットフォーム用に書いておこう。「using FantomLib;」を入れておくことを忘れずに。

プラットフォーム依存コンパイル

using FantomLib;

・・・(略)・・・

void OnOpenClicked()
{
#if UNITY_STANDALONE_WIN || UNITY_EDITOR_WIN
var path = FileDialogForWindows.FileDialog("open VRM", "vrm", "glb", "bvh");
#elif UNITY_ANDROID
var path = "";
StorageOpenFileController storageOpenFileController = FindObjectOfType<StorageOpenFileController>(); //ここはインスペクタで登録できるようにしても良い
storageOpenFileController.Show(); //実機ではエクスプローラのようなもので、ファイル選択ができるようになる
#else
var path = Application.dataPath + "/default.vrm";
#endif
if (string.IsNullOrEmpty(path))
{
return;
}
・・・(略)・・・
}

※この例はやっつけ的なコードなので、「StorageOpenFileController」をインスペクタで登録できるようにしたり、任意にまとめたりして使って下さい(笑)。


3.ランタイム時では「StorageOpenFileController」は閉じられてから、コールバックで結果(選択されたファイルパス名)が返ってくるので、「UNITY_ANDROID」ディレクティブ内ではパスを空(path = "")にしていることに注意して欲しい。これはすぐ下にある「string.IsNullOrEmpty(path)」で一旦終了することを意味する。

 なので、取得したパスを受け取るハンドラを作成する必要がある。ここでは簡略のため、元の「OnOpenClicked()」内のコードを一部まるっとコピーして、もう1つ「OnStorageOpenFile()」というメソッドを定義した(メソッド名は任意)。

public void OnStorageOpenFile(string path)
{
if (string.IsNullOrEmpty(path))
{
return;
}

var ext = Path.GetExtension(path).ToLower();
switch (ext)
{
case ".gltf":
case ".glb":
case ".vrm":
LoadModel(path);
break;

case ".bvh":
LoadMotion(path);
break;
}
}

※UniVRM v0.40 以前は拡張子分岐は無いが、同じように「LoadModel(path)」を呼べば良い。

 実際には「StorageOpenFileController」をインスペクタで登録できるようにしたり、拡張子による分岐などは重複してるので「OnOpenClicked() → OnStorageOpenFile(path)」へ行くように書き換えても良いだろう。その辺りはお任せする(笑)。とりあえずはコード自体はこれで良い。


4.後はヒエラルキーに戻って「StorageOpenFileController」のコールバック「OnResult」に先程の「OnStorageOpenFile(String)」に登録しよう。これで一応完成である。ただし、実機でしか確認できないので、Android ビルドして動作確認してみよう。



5.「File>Build Settings...」を開いてシーン「VRMViewer」を追加してビルドしよう。ビルドに関してはいくつか注意点があるので、以下を参照して欲しい。

「要求 API Level」の設定
シーンを追加してビルドする
Unity 2018.1.0~1.6 での Gradle ビルドにおいて、「Cannot read packageName from~(パス)\AndroidManifest.xml」と出る。




 ここまでできれば、例えば以前の「VRoid(VRM)を動かす」のようにして、ゲームに使うことも可能だろう。1つ1つの技術は結構手間のかかるものだと思うが、プラグインも含め、全て無料でできるので、これを使わない手はない(笑)。今までにない新たな利用法を考えてみるのも良いだろう。

●実機(Android)で「ニコニ立体ちゃん (VRM)」を読み込んでみた所

ニコニ立体ちゃん (VRM)
(c) DWANGO Co.,Ltd. ニコニ立体ちゃんライセンス


 今回はただ VRM を読み込んで動的にアバターを召喚(笑)しただけだが、実際にスマートフォンで利用するには画面解像度・回転の対応やピンチなど、使い勝手を良くした方が良いだろう。プラグインにはそういったスマホらしい操作(ピンチ・スワイプ・ロングタップ等)の例も入っている。VRM Live Viewer の Android 版はまさにその使用例なので、動作確認にインストして動かしてみるのも良いだろう(またはプラグインのデモもQRコードからインストできるようにしてあるので参考に)。

※この記事のUnityアセットはプラグインとして配布されています。









(関連記事)
【Unity】VRM(VRoid)をライブステージで踊らせるアプリを作ってみた
【Unity】VRoid(VRM)をインポートして動かす
【Unity】Unity2018.3.2 にアップグレードすると見た目がおかしくなることがある
【Unity】AssetStore版 FantomPlugin のセットアップ
【Unity】Androidのトーストやダイアログ、通知、音声認識、ハード音量操作など基本的な機能を使えるプラグインを作ってみた


関連記事

category: Unity

thread: ゲーム開発

janre: コンピュータ

tag: VRM  VRoid  Unityオープンソースライブラリ  Unityプラグイン  C# 
tb: 0   cm: --


プロフィール

Social

検索フォーム

全記事一覧

カテゴリ

ユーザータグ

最新記事

リンク

PR

▲ Pagetop