unityからSTYLYに、VRoidで作ったVRMモデルをアニメーション付でアップロードしてみた!瞳のハイライトが消える問題も解決

STYLY

バーチャル3Dクリエイター神部まゆみです(*^-^*)

 

今日はunityからSTYLYにアップロードしていくよ。

シーンを全部作成するところまでやろうかと思ったけど、長くなりそうだから私のVRMモデル(VRoid製)をアニメーション付でアップロードして動作確認するところまでやるよ。

あとVRoidキャラの瞳のハイライトやHairBackが映らない問題があったから、その解決策も書いたよ。

 

前回までの記事はこちら。

STYLYでシーンを作成してPublishしてみた!これでまゆみの部屋(試作)が完成?
バーチャル3Dクリエイター神部まゆみです(*^-^*) 今日はSTYLYでシーンを作成してPublish(公開)していくよ。 STYLYはVR空間をブラウザだけで手軽に作成できるサービスね。 前回の記事はこちら。 ...
STYLYに登録してみた!登録からチュートリアル終了まで
バーチャル3Dクリエイター神部まゆみです(*^-^*) 今回はSTYLYに登録して、チュートリアルまで終わらせてみた記事です。 STYLYについて調べている人は参考にしてね。 STYLYとは? 自分のVR空間を作れる...

————-PR———————-

現在、2021年の新作人気アセットが50%オフで買えるunityアセットリフレッシュセールをやってるみたいです(日本時間2021/10/02 PM15:59まで)。

unityアセットリフレッシュセール50% off

欲しいアセットはこの機会に買っておくと良いかも。

————————————-

 

  1. やりたいこと
  2. STYLYにアップロードする前の準備
    1. 手順1:unity2019.3.6f1と、必要モジュールをインストールする
    2. 手順2:STYLY Plugin for Unityを入れる
      1. あれ、エラー出た( ̄▽ ̄;)
    3. 手順3:APIキーを設定してunityとSTYLYを接続
    4. 手順4: アップロードしたいプレハブかシーンを右クリック → STYLY → Upload prefab or scene to STYLY を選ぶだけ! ※1プレハブ20MB以下推奨
  3. VRMモデルをアニメーション付きでアップロードするには?
    1. なんか思いのほか簡単にできそう
  4. VRoidで作ったVRMモデルをアニメーション付でSTYLYにアップロードした手順
    1. 1,uniVRMでunityにモデルを読み込んでシーンに配置
    2. 2,モデルのプレハブのanimator以外のコンポーネントを消す
    3. 3,アニメーターコントローラーを作成してモデルに適用、アニメーションクリップを読み込む
      1. アニメーションを用意するか作る
    4. 4,ヒエラルキーからプロジェクトにモデルをD&Dしてプレハブ化
    5. 5,プレハブ化したモデルを右クリック → STYLY → Upload prefab or scene to STYLY を選んでアップロード
  5. 動作チェック!さて動くかな?
    1. 目のハイライトが消えてヤンデレみたいになってるΣ( ̄ロ ̄lll)ガーン
      1. 同じ問題で詰まっている先輩がいた!
      2. Oculus Quest2で見たらまたハイライトが無くなっていた…なんでだろう?(-_-;)
    2. あと細かいけど、髪の毛の生え際のあたり(HairBack)が表示されずにハゲてる(-_-;)
      1. シェーダーの問題なのか、近づいてメッシュが消えてるだけなのか問題を切り分ける
      2. シェーダーのレンダリングをcutoutにしたら解決した
    3. 目のハイライトは、MToonのレンダリングタイプをcutoutにしたら解決した
  6. STYLYではアニメーション遷移はちゃんと動くのか?
    1. ちゃんと遷移した!OK
  7. 長くなったので続く

やりたいこと

せっかくだから私のモデルをアップして、アニメーションクリップを再生できるようにしたい。

PlayMakerを使えば、条件を満たしたらアニメーションを切り替えたりもできるみたい?だけど、とりあえずは動けばいいかな。

キャラを動かすにはこの記事が参考になりそう。

VTuberの3DモデルをSTYLYにアップロードする | STYLY
今回はVTuberの3Dモデル(FBXやVRM)に動きを付けて、STYLYにアップロードする方法を紹介します。 STYLYのUnityプラグインを使えば、3Dモデルの質感や動きを保ちつつ、Unityから簡単にアップロードできます。 自作モデルのVR展示会など色々なことに応用できるので、ぜひ活用してみてください。

 

できればたくさんのかわいい女の子や猫とかを配置して、癒しの空間を作ってみたいね( *´艸`)

重くなりそうだから、どこまでできるかわからないけど…。

理想としては空間内でブラウザ埋め込んで見れる…ハーレム空間で作業できる…とかやってみたいけど、そこまでは無理かな?

unity内ではできるみたい?だけど、STYLYはスクリプト動かないみたいだから無理そう。

STYLYにアップロードする前の準備

参考にするのはこちら。

UnityからSTYLYにプレハブとシーンをアップロードする方法 | STYLY
本記事では、Unityで作成した「プレハブ」と「シーン」をSTYLY上で使用するための方法をご紹介します。STYLYでは、3DModel、Particle System(Shuriken)、Light、UI要素、Shader(Amplifed Shaderを使ったものなど)、PlayMaker、インタラクションSDKな...

手順1: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

出展元:https://styly.cc/ja/manual/unity-asset-uploader/

あーそうか、STYLYは複数デバイス対応だから、これらのモジュールを入れないといけないのか。

unityの過去バージョンはここから探して、unityhubで開けばインストールできるよ。

Get Unity - Download Archive - Unity
Unity is the ultimate game development platform. Use Unity to build high-quality 3D and 2D games, deploy them across mobile, desktop, VR/AR, consoles or the Web...

 

インストールできたら、適当な名前で2019.3.6f1のプロジェクトを作成すればOK。

styly unity

手順2:STYLY Plugin for Unityを入れる

ダウンロードはここから。

STYLT VR APP/STYLY Plugin for Unity DOWNLOAD | STYLY
STYLYには、ファッションや音楽、映像、グラフィックなど、現代のカルチャーを体現する世界中のアーティスト/クリエイターが作成した個性豊かなVRシーンが10,000以上投稿されています。これらシーンに全て無料でアクセスすることができます。

ダウンロードしたunitypackageをインポートします。

styly unity import

あれ、エラー出た( ̄▽ ̄;)

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キーが表示されるのでコピーする。

styly apikey

メールアドレスとAPIキーを入れればOK。

これ入力だけしておけば、特にボタンを押さなくてもいいっぽい?

というか保存とかのボタンがない( ̄▽ ̄;)

手順4: アップロードしたいプレハブかシーンを右クリック → STYLY → Upload prefab or scene to STYLY を選ぶだけ! ※1プレハブ20MB以下推奨

えー!こんな簡単なのか( ̄▽ ̄;)

スクリプトが使えないとか細かい制限はあるけど、プレハブ化してあれば大抵大丈夫みたい?

シーンも3Dモデルアセット内に読み込まれるみたいだから、シーンって言ってもまとめてプレハブをアップロードするような感じに近いのかな?

ただシーンはSTYLY STUDIO上で移動や回転、拡大縮小ができないみたい。

STYLY STUDIO上で配置とかを編集したいなら、プレハブを個別にアップしたほうがいい感じかな?

 

なんかすごい手軽にできそうだね。

でもまだ何も作ってないから、アップするものを用意しなきゃ。

VRMモデルをアニメーション付きでアップロードするには?

一番やりたいのはこれ!

私のモデルをアップして、部屋でダラダラしてる感じのアニメーションをさせて、「まゆみの部屋で一緒に過ごそう」みたいな空間を作ってこのブログに埋め込みたい(笑)。

できれば空間内でブラウザ埋め込んだりできたら理想だけど……とりあえず一緒に動画でも見れればいいか。

なんか思いのほか簡単にできそう

このページを参考にしました。

VTuberの3DモデルをSTYLYにアップロードする | STYLY
今回はVTuberの3Dモデル(FBXやVRM)に動きを付けて、STYLYにアップロードする方法を紹介します。 STYLYのUnityプラグインを使えば、3Dモデルの質感や動きを保ちつつ、Unityから簡単にアップロードできます。 自作モデルのVR展示会など色々なことに応用できるので、ぜひ活用してみてください。

手順としては、

1,いつも通りuniVRMでunityにモデルを読み込んでシーンに配置

2,モデルのプレハブのanimator以外のコンポーネントを消す

3,アニメーターコントローラーを作成してモデルに適用、アニメーションクリップを読み込む

4,ヒエラルキーからプロジェクトにモデルをD&Dしてプレハブ化

5,プレハブ化したモデルを右クリック → STYLY → Upload prefab or scene to STYLY を選んでアップロード

って感じ。

スクリプト消すところ以外は特に難しいところもなさそうだし、なんかすぐできそう。

アニメーターコントローラー使えるなら、遷移させて複数のアニメーションもできるのかな?スクリプト使った制御はできないけど…。

VRoidで作ったVRMモデルをアニメーション付でSTYLYにアップロードした手順

なんか簡単にできそうだけど、私のモデルで手順を書いておこうかな。

いつもの露出多いスケベメイド服みたいなやつだと消されそうだから(笑)、露出の低いニートTシャツに着替えておく。

パンツも履いたし(笑)これなら大丈夫でしょ。どこからどう見ても健全!(*^-^*)

VRoidStudioからエクスポートしたての状態からやります。

1,uniVRMでunityにモデルを読み込んでシーンに配置

uniVRMはこれ。

Releases · vrm-c/UniVRM
Unity package that can import and export VRM format - vrm-c/UniVRM

unityバージョンとの相性でエラーが出たことは今のところないから、とりあえず最新版入れておけば大丈夫かな。

uniVRMをダウンロードして、unitypackageをインポートしておく。

 

その後VRoidStudioからエクスポートしたモデルをプロジェクトファイルにD&Dしてインポートして、シーンに配置すればOK。

2,モデルのプレハブのanimator以外のコンポーネントを消す

赤線を引いたところは全部コンポーネント削除します。

VRoidは揺れもの設定とかが入ってるsecondaryも消さないといけないみたい。

ただプレハブを解凍してからじゃないと削除できないので、先にプレハブをすべて解凍しておく。

揺れ物が使えないのはちょっと痛いけど、スクリプトだから仕方ないか…。

3,アニメーターコントローラーを作成してモデルに適用、アニメーションクリップを読み込む

プロジェクト内で右クリック→新規作成 でアニメーターコントローラーを選んで適当な名前をつけて作成、モデルのAnimatorコンポーネントのコントローラーのD&Dして適用しておく。

アニメーションを用意するか作る

用意するならMixamoが楽で良いと思う。

STYLYさんも推奨してるし。

Mixamoのアニメーションをunityに持って行ったメモ。VeryAnimationで簡単に編集できた
バーチャル3Dクリエイター神部まゆみです(*^-^*) この記事は、Mixamoでアニメーションをダウンロードしてunityに持っていき、ヒューマノイドのキャラに適用させたメモ。 実はこの記事は、三か月くらい前?に下書き...

 

でもせっかくだから私はVeryAnimationでやってみようかな。

これMMDみたいに簡単に作れるからおススメ。

 

以前寝るポーズ作ってあったから、ちょっと編集したらできた。

こうやってダラダラしながら、あなたと一緒にVR空間で動画とか見れたらいいな( *´艸`)

4,ヒエラルキーからプロジェクトにモデルをD&Dしてプレハブ化

5,プレハブ化したモデルを右クリック → STYLY → Upload prefab or scene to STYLY を選んでアップロード

ちゃんとアニメーション付きでアップできるのかな?

あれ、これ結構時間かかるな…5分くらいかかった( ̄▽ ̄;)

でもなんとかアップロード成功したみたい。

動作チェック!さて動くかな?

おお!いた!いた!動いた!( *´艸`)

あれ、でもループしてないっぽい?

よく見たら、アニメーションクリップのループにチェック入れてなかった…。

チェックしてまたアップロードやり直しだね( ̄▽ ̄;)

目のハイライトが消えてヤンデレみたいになってるΣ( ̄ロ ̄lll)ガーン

あれ、ループできたけど、なんか目のハイライトが消えてる…。

ヤンデレっぽいのは大好きだけど…なんだろ、透過の問題?unityではちゃんと表示されてるけど…。

同じ問題で詰まっている先輩がいた!

何度やってもダメだったので、検索して見つけたこの人のお陰で本当に助かった。

ありがとうございます(*^-^*)

STYLYにVRoidのVRMを取り込む際に瞳ハイライトが消えてしまうときの対策 - Pikali’s diary
先日STYLY VRoid Studio Workshop at TIMEMACHINE styly.connpass.com に参加してSTYLYにVRoidをアップロードしてみました。 方法はこちらを使用しました。 後日STYLYにVRoidのVRMを取り込む際に瞳ハイライトが消えてしまっていたのがわかったので...

 

じゃあこれでいいのかな。

おお!いけた!目に光が戻ったよ( *´艸`)

冷静になって見ると、後ろのYour Positionさんがツボるw

Oculus Quest2で見たらまたハイライトが無くなっていた…なんでだろう?(-_-;)

シェーダーの問題だということは分かったから、別のシェーダーを試すしかないか…。

UTS2とかならいけるか?

あと細かいけど、髪の毛の生え際のあたり(HairBack)が表示されずにハゲてる(-_-;)

恐ろしく細かい部分…私じゃなきゃ見逃しちゃうね(ニチャア

ただもしかして微妙に表示されてる?カメラが動くと微妙に消えたり現れたりしてるような?

unityでの表示はこんな感じ。

近づくとメッシュが消えるっていうのはunityでもある問題なんだけど、それはBounds Box?とかいう機能?らしく、中心0にして「オフスクリーン時に更新」で対応してる。

いつも参考にさせてもらってるこの先輩のブログが詳しいです。

カメラが近づくと消えるメッシュの原因と対処法【Unity】【トラブルシューティング】 - (:3[kanのメモ帳]
この記事でのバージョン Unity 2017.4.7f1 はじめに 今回はカメラが近づくと消えてしまうメッシュの話! なお、本記事に出てくるキャラクターは以下のアセットを使っています。 Unity Mask Man | 3D Humanoids | Unity Asset Store 原因

 

これやらないと、STYLYでも近づくと髪の毛が消えたりした。

まさかこれが機能せずに近づくと消えてるとか?

シェーダーの問題なのか、近づいてメッシュが消えてるだけなのか問題を切り分ける

ために、HairBackマテリアルをstandardに変えて黒くしてみよう。

これでダメなら、transparentシェーダーが悪さしてそう。

 

あれっ、消えない!

やっぱtransparentが問題かな?

シェーダーのレンダリングをcutoutにしたら解決した

こういうの、とりあえずstandardシェーダー使っとけばちゃんと表示される気がする。デフォルトだし。

ちょっと黒いけど、影が当たってる感じっぽくてこれでも良いかな。

というか、MToonのレンダリングをcutoutにすればいいのか。

あっいけた!やっぱTransparentが原因だったのかな?

これ、目のハイライトが消えるのもtransparentの問題なのでは…?

ただ、まつげ部分とかのマテリアルのtransparentはちゃんと動作してるんだけどね。

目のハイライトは、MToonのレンダリングタイプをcutoutにしたら解決した

こっちもこれで解決した。

ただ、ハイライトの境目を若干ぼかしていたんだけど、ぼかしがなくなった。

でもそんなに重要じゃないし良いかな。

 

胸の部分のTシャツが破れてるように見えるのは、単に腕と肩ボーンの問題なので後で直す。これ曲げすぎるとなる。

STYLYではアニメーション遷移はちゃんと動くのか?

アニメーターコントローラーが使えるんだから、アニメーションの遷移もできるでしょ。

キー入力で切り替えて…とかはスクリプト使えないから無理かな。

 

こんな感じのアニメーションをunityで作った。

アニメーションが終了したら次のアニメーションへ…っていう単純な遷移。

ちゃんと遷移した!OK

STYLY アニメーションクリップ 遷移

 

Oculus Quest2でもちゃんと遷移しました。

あとは近付いたら赤面するとか、パンツが見える座標に来たら隠す動作をするとかもできたら良いけど(笑)、スクリプト使わないと無理かな?

PlayMaker使えばいけるか?

こちらの行動に対するリアクションがあると人間味が出て良さそう。

でもあんまり卑猥なものをアップしたら消されそう( ̄▽ ̄;)

長くなったので続く

この後は部屋っぽいのを作って、動画を一緒に見れる感じの空間にしたい。

でもyoutubeから埋め込む場合、他人様の動画を貼ってもいいものか…。著作権フリーとか転載OKと謳ってるやつならリンク貼れば大丈夫かもしれないけども。

VRChatだとURL入れてユーザーが指定した動画見れる感じのワールドがなかったっけ?ああいうのが理想だけど。

というかSTYLYでどこまでできるのかまだ把握してないので、もう少し調べてみる必要がありそう。

 

でも手軽にVR空間作れるのはすごく良いね(*^-^*)

楽しみながらいじっていこうと思います。

 

タイトルとURLをコピーしました