バーチャル3Dクリエイター神部まゆみです(*^-^*)
この記事では、unityからSTYLYにアップロードしていきます。
シーンを全部作成するところまでやろうかと思ったけど、長くなりそうだから私のVRMモデル(VRoid製)をアニメーション付でアップロードして動作確認するところまでやります。
あとVRoidキャラの瞳のハイライトやHairBackが映らない問題があったから、その解決策も書きました。
前回までの記事はこちら。
やりたいこと
せっかくだから私のモデルをアップして、アニメーションクリップを再生できるようにしたい。
PlayMakerを使えば、条件を満たしたらアニメーションを切り替えたりもできるみたい？だけど、とりあえずは動けばいいかな。
キャラを動かすにはこの記事が参考になりそう。
できればたくさんのかわいい女の子や猫とかを配置して、癒しの空間を作ってみたいね( *´艸｀)
重くなりそうだから、どこまでできるかわからないけど…。
理想としては空間内でブラウザ埋め込んで見れる…ハーレム空間で作業できる…とかやってみたいけど、そこまでは無理かな？
unity内ではできるみたい？だけど、STYLYはスクリプト動かないみたいだから無理そう。
STYLYにアップロードする前の準備
参考にするのはこちら。
手順１：unity2019.3.6f1と、必要モジュールをインストールする
これを書いている2021/04/10現在、2021/01/14更新のSTYLYの記事によると、
STYLYは「Unity 2019.3.6f1」に対応しています。
さらに、以下のモジュールがインストールされているか確認してください。
- Windows Build Support (Windowsをお使いの場合、デフォルトでインストールされます。）
- Mac Build Support (Macをお使いの場合、デフォルトでインストールされます。)
- Android Build Support
- WebGL Build Support
- iOS Build Support
あーそうか、STYLYは複数デバイス対応だから、これらのモジュールを入れないといけないのか。
unityの過去バージョンはここから探して、unityhubで開けばインストールできるよ。
インストールできたら、適当な名前で2019.3.6f1のプロジェクトを作成すればOK。
2022/01/14追記：今は2019.4.29f1が推奨バージョンみたい。2019.4.31f1でもアップはできたけど…
久々にSTYLYをいじってみようとしたら、unityの推奨バージョンが2019.4.29f1になってました。
でも自分のunityに入ってたのが2019.4.31f1だったのでダメ元でやってみたら、プレハブのアップロードと配置はできました。
ちょっと前に作ったベッドをアップしてみた。
同じ2019.4x系だからかな？まぁ推奨バージョンから外れてるので不具合がある可能性もあるけど(;^_^A
一応参考までに追記してみました。
手順2:STYLY Plugin for Unityを入れる
ダウンロードはここから。
ダウンロードしたunitypackageをインポートします。
あれ、エラー出た(￣▽￣;)
Copying assembly from ‘Temp/com.unity.multiplayer-hlapi.Runtime.dll’ to ‘Library/ScriptAssemblies/com.unity.multiplayer-hlapi.Runtime.dll’ failed
ってエラーが出ました。
インポート成功すれば上のメニューに「STYLY」ってのができるはずだけど、できなかった。
とりあえず再インポートしてみるか…。
インポートしたファイルを削除して再インポートしてみたら行けました。
登録したメールアドレスとAPIキーを入れればいいらしい。
手順3:APIキーを設定してunityとSTYLYを接続
STYLYにログインして、向かって右上の自分のアイコン画像をクリックして、ACCOUNTを選ぶ。
出てきたメニューのACCOUNTタブを選ぶと、APIキーが表示されるのでコピーする。
メールアドレスとAPIキーを入れればOK。
これ入力だけしておけば、特にボタンを押さなくてもいいっぽい？
というか保存とかのボタンがない(￣▽￣;)
手順4: アップロードしたいプレハブかシーンを右クリック → STYLY → Upload prefab or scene to STYLY を選ぶだけ！ ※1プレハブ20MB以下推奨
えー！こんな簡単なのか(￣▽￣;)
スクリプトが使えないとか細かい制限はあるけど、プレハブ化してあれば大抵大丈夫みたい？
シーンも3Dモデルアセット内に読み込まれるみたいだから、シーンって言ってもまとめてプレハブをアップロードするような感じに近いのかな？
ただシーンはSTYLY STUDIO上で移動や回転、拡大縮小ができないみたい。
STYLY STUDIO上で配置とかを編集したいなら、プレハブを個別にアップしたほうがいい感じかな？
なんかすごい手軽にできそうだね。
でもまだ何も作ってないから、アップするものを用意しなきゃ。
VRMモデルをアニメーション付きでアップロードするには？
一番やりたいのはこれ！
私のモデルをアップして、部屋でダラダラしてる感じのアニメーションをさせて、「まゆみの部屋で一緒に過ごそう」みたいな空間を作ってこのブログに埋め込みたい(笑)。
できれば空間内でブラウザ埋め込んだりできたら理想だけど……とりあえず一緒に動画でも見れればいいか。
なんか思いのほか簡単にできそう
このページを参考にしました。
手順としては、
1,いつも通りuniVRMでunityにモデルを読み込んでシーンに配置
2,モデルのプレハブのanimator以外のコンポーネントを消す
3,アニメーターコントローラーを作成してモデルに適用、アニメーションクリップを読み込む
4,ヒエラルキーからプロジェクトにモデルをD&Dしてプレハブ化
5,プレハブ化したモデルを右クリック → STYLY → Upload prefab or scene to STYLY を選んでアップロード
って感じ。
スクリプト消すところ以外は特に難しいところもなさそうだし、なんかすぐできそう。
アニメーターコントローラー使えるなら、遷移させて複数のアニメーションもできるのかな？スクリプト使った制御はできないけど…。
VRoidで作ったVRMモデルをアニメーション付でSTYLYにアップロードした手順
なんか簡単にできそうだけど、私のモデルで手順を書いておこうかな。
いつもの露出多いスケベメイド服みたいなやつだと消されそうだから(笑)、露出の少ない服に着替えておく。
VRoidStudioからエクスポートしたての状態からやります。
1,uniVRMでunityにモデルを読み込んでシーンに配置
uniVRMはこれ。
unityバージョンとの相性でエラーが出たことは今のところないから、とりあえず最新版入れておけば大丈夫かな。
uniVRMをダウンロードして、unitypackageをインポートしておく。
その後VRoidStudioからエクスポートしたモデルをプロジェクトファイルにD&Dしてインポートして、シーンに配置すればOK。
2,モデルのプレハブのanimator以外のコンポーネントを消す
赤線を引いたところは全部コンポーネント削除します。
VRoidは揺れもの設定とかが入ってるsecondaryも消さないといけないみたい。
ただプレハブを解凍してからじゃないと削除できないので、先にプレハブをすべて解凍しておく。
揺れ物が使えないのはちょっと痛いけど、スクリプトだから仕方ないか…。
3,アニメーターコントローラーを作成してモデルに適用、アニメーションクリップを読み込む
プロジェクト内で右クリック→新規作成 でアニメーターコントローラーを選んで適当な名前をつけて作成、モデルのAnimatorコンポーネントのコントローラーのD＆Dして適用しておく。
アニメーションを用意するか作る
用意するならMixamoが楽で良いと思う。
STYLYさんも推奨してるし。
でもせっかくだから私はVeryAnimationでやってみようかな。
これMMDみたいに簡単に作れるからおススメ。
以前寝るポーズ作ってあったから、ちょっと編集したらできた。
こうやってダラダラしながら、あなたと一緒にVR空間で動画とか見れたらいいな( *´艸｀)
4,ヒエラルキーからプロジェクトにモデルをD&Dしてプレハブ化
5,プレハブ化したモデルを右クリック → STYLY → Upload prefab or scene to STYLY を選んでアップロード
ちゃんとアニメーション付きでアップできるのかな？
あれ、これ結構時間かかるな…5分くらいかかった(￣▽￣;)
でもなんとかアップロード成功したみたい。
動作チェック！さて動くかな？
おお！いた！いた！動いた！( *´艸｀)
あれ、でもループしてないっぽい？
よく見たら、アニメーションクリップのループにチェック入れてなかった…。
チェックしてまたアップロードやり直しだね(￣▽￣;)
目のハイライトが消えてヤンデレみたいになってるΣ(￣ロ￣lll)ｶﾞｰﾝ
あれ、ループできたけど、なんか目のハイライトが消えてる…。
ヤンデレっぽいのは大好きだけど…なんだろ、透過の問題？unityではちゃんと表示されてるけど…。
ハイライトをVRM/UnlitTransparentにしたら表示されたが…
調べたらシェーダーを変えれば直るっぽい。
VRM/UnlitTransparentにしたら大丈夫でした。
おお！いけた！目に光が戻った( *´艸｀)
冷静になって見ると、後ろのYour Positionさんがツボるｗ
しかしMeta Quest2で見たらまたハイライトが無くなっていた…なんでだろう？(-_-;)
シェーダーの問題だということは分かったから、別のシェーダーを試すしかないか…。
UTS2とかならいけるか？
あと細かいけど、髪の毛の生え際のあたり(HairBack)が表示されずにハゲてる(-_-;)
恐ろしく細かい部分…私じゃなきゃ見逃しちゃうね(ﾆﾁｬｱ
ただもしかして微妙に表示されてる？カメラが動くと微妙に消えたり現れたりしてるような？
unityでの表示はこんな感じ。
近づくとメッシュが消えるっていうのはunityでもある問題なんだけど、それはBounds Box？とかいう機能？らしく、中心0にして「オフスクリーン時に更新」で対応してる。
いつも参考にさせてもらってるkan-kikuchi先輩のブログが詳しいです。
これやらないと、STYLYでも近づくと髪の毛が消えたりした。
まさかこれが機能せずに近づくと消えてるとか？
シェーダーの問題なのか、近づいてメッシュが消えてるだけなのか問題を切り分ける
ために、HairBackマテリアルをstandardに変えて黒くしてみよう。
これでダメなら、transparentシェーダーが悪さしてそう。
あれっ、消えない！
やっぱtransparentが問題かな？
シェーダーのレンダリングをcutoutにしたら解決した
こういうの、とりあえずstandardシェーダー使っとけばちゃんと表示される気がする。デフォルトだし。
ちょっと黒いけど、影が当たってる感じっぽくてこれでも良いかな。
というか、MToonのレンダリングをcutoutにすればいいのか。
あっいけた！やっぱTransparentが原因だったのかな？
これ、目のハイライトが消えるのもtransparentの問題なのでは…？
ただ、まつげ部分とかのマテリアルのtransparentはちゃんと動作してるんだけどね。
目のハイライトは、MToonのレンダリングタイプをcutoutにしたら解決した
こっちもこれで解決した。
ただ、ハイライトの境目を若干ぼかしていたんだけど、ぼかしがなくなった。
でもそんなに重要じゃないし良いかな。
胸の部分のTシャツが破れてるように見えるのは、単に腕と肩ボーンの問題なので後で直す。これ曲げすぎるとなる。
STYLYではアニメーション遷移はちゃんと動くのか？
アニメーターコントローラーが使えるんだから、アニメーションの遷移もできるでしょ。
キー入力で切り替えて…とかはスクリプト使えないから無理かな。
こんな感じのアニメーションをunityで作った。
アニメーションが終了したら次のアニメーションへ…っていう単純な遷移。
ちゃんと遷移した！OK
Oculus Quest2でもちゃんと遷移しました。
あとは近付いたら赤面するとか、パンツが見える座標に来たら隠す動作をするとかもできたら良いけど(笑)、スクリプト使わないと無理かな？
PlayMaker使えばいけるか？
こちらの行動に対するリアクションがあると人間味が出て良さそう。
でもあんまり卑猥なものをアップしたら消されそう(￣▽￣;)
長くなったので続く
この後は部屋っぽいのを作って、動画を一緒に見れる感じの空間にしたい。
でもyoutubeから埋め込む場合、他人様の動画を貼ってもいいものか…。著作権フリーとか転載OKと謳ってるやつならリンク貼れば大丈夫かもしれないけども。
VRChatだとURL入れてユーザーが指定した動画見れる感じのワールドがなかったっけ？ああいうのが理想だけど。
というかSTYLYでどこまでできるのかまだ把握してないので、もう少し調べてみる必要がありそう。
でも手軽にVR空間作れるのはすごく良いね(*^-^*)
楽しみながらいじっていこうと思います。
追記：続きを書きました(*^-^*)
