fc2ブログ
ヽ|∵|ゝ(Fantom) の 開発blog? ホーム » VRMLiveViewer公式ドキュメント »【VRMLiveViewer】魔法陣の床を作る

【VRMLiveViewer】魔法陣の床を作る  


 今回は VRM Live Viewer自作の床を作るサンプルを応用して、デモのような魔法陣の床を作ってみよう。

 光ってる部分は本来、マテリアルの Emission を使うべきなのかもだが、ここではあくまでデモと同じように、ライトをギミック的に使う方法なので、自作するときは、その部分だけ置き換えるのも良いだろう。

※VRMLiveViewer 3.1以降では Emission で発光させることもできます。発光の考え方は「VRoid の衣装を発光させる」と同じ。

♪[A]ddiction
モーション:hino 様 [ニコ動]
振付:足太ぺんた 様 [ニコ動]
楽曲:GigaReol×EVO+ 様 (※無音) [ニコ動]
カメラ:永远赤红的幼月 様 [bilibili]
背景動画:音街ウナ公式


 ここでは Unity 自体触ったことない人でもできるように細かく書いているので、簡単過ぎる人は、興味がある項目だけで十分だと思う。実際には以前の記事のデモ動画とやり方は同じで、少しばかり工夫しただけだったりする。なので、考え方だけわかれば、色々応用できるだろう。


(※) Unity 2020.3.21f1 / Windows11(x64) / UniVRM 0.89 で確認



■魔法陣のテクスチャを作る

 今回は一般配布されている魔法陣の素材を使わせて貰って、床を作ってみよう。配布元のデイジィ・ベル様に確認を取った所、フォントや添付素材を使って新しく作った素材なら、公開しても問題ないそうだ。とても有り難いですね。


ルーン文字フォント セット RuneAMN Series Fonts free (BOOTH)
フォント自体はこちらでも可 (daisybell-fonts)


1. まずは BOOTH で配布されているフリー版をダウンロードしよう。zip を解凍すると、いくつかフォルダがあるが、「extra/MagicCircle」の中に魔法陣の素材が入っている。「README_and_LICENSE.txt」に利用規約もあるので、一度目を通しておくと良いだろう。


2.「MagicCircle」フォルダ内には .svg と .ai のファイル形式(ベクタデータ)が入っているので(.jpg はサムネイル画像)、好きな方で良いが、ここでは .svg を使ってみる。使うグラフィックソフトは何でも良いが、GIMP で読み込めたので、必要ならインストールしよう。

GIMP (画像編集ソフト)



3. GIMP の場合は、メニューから「ファイル>開く/インポート」で .svg が開ける。デモでは「MagicCircle_RuneAMN_20141014.svg」を利用している。ここで自分で作ってみたい魔法陣を選択しても良い。開こうとすると、解像度を聞かれるので、1024x1024 にしておこう(高解像度にしたいなら、2048x2048 でも良いが、その分ファイルサイズは大きくなるので、注意)。



4. 読み込んだらそのまま編集しても良いし、他のグラフィックソフトに慣れているのなら「ファイル>名前を付けてエクスポート」で透過のできる .png で出力してしまうのも良い(.png ならどのソフトでも読み込める)。この辺りは任意で良い。



5. 画像の加工の操作は、各グラフィックソフトによるので割愛するが、元の線の黒塗りを白塗りにして欲しい(大まかには、黒線部分を選択し、白で塗り替えれば良い)。また、それぞれの円や図形を別々に回転させるために、レイヤーとして分離しておく。ここでは「MagicCircle_RuneAMN_20141014」を3つのレイヤーに分離したが、デモに使ってる魔法陣は「MagicCircle_RuneAMN_20141019」の真ん中にある(☆)を取り出して、4つ目として、適当にリサイズして中央に置いている。


●最後の(☆)は MagicCircle_RuneAMN_20141019 から


6. それぞれをレイヤーに分離したら、最後に発光してる感じを出すために、各レイヤーを複製して、「ガウスぼかし」フィルタ等(※名前はグラフィックソフトによる)を使って、ぼかした画像を重ねておく(デモの魔法陣では 4px のぼかしをかけている)。


●レイヤーを複製して、ぼかした画像を重ねるだけで良い


7. ぼかしを重ねたら、それぞれの円や図形ごとに .png で保存する(この例では4つ)。「VRMLiveViewerの床(GLB) 作成サンプル」には完成した .png, .psd (レイヤー)ファイルがあるので、必要なら見て欲しい。



■Unity で魔法陣の床(GLBモデル)を作る

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

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

 また、今回の魔法陣はBOOTHで配布している「VRMLiveViewerの床(GLB) 作成サンプル」もインポートしておくと簡単だ。完成版も入ってるので、覗いてわかるくらいなら、全部読む必要もないだろう。

VRMLiveViewerの床(GLB) 作成サンプル (BOOTH)


1. インポートしたサンプルの「VRMLiveViewer/FloorMake/Scenes/」にある FloorMake シーンに完成した魔法陣の床(MagicCircle_RuneAMN_20141014b)が入っている。ヒエラルキーで階層を開いて貰えばわかるが、構造としては4つの Plane に先ほど作った .png をテクスチャとしてマテリアルに当ててるだけだ(テクスチャのインポートは Project ビューに .png をドロップするだけで良い)。



2. テクスチャ(.png)の設定の注意点は Import Settings で「Alpha Is Transparancy」(アルファを透明にする)をオンにし、「Generate Mip Mpas」(ミップマップ生成)をオフにしておくことだ。



3. 当てるマテリアルもサンプルを複製した方が簡単だと思うが、注意点は「Rendering Mode」は「Fade」にしておくことだ(Transparent はガラスのように透明でありながら、素材が存在する感じで、Fade は透明部分は何もないようにしたいときに使う)。Albedo に作ったテクスチャ(.png)を当てられるので、好きに変更すると良い(□部分に Project ビューからテクスチャ(.png)をドロップするか、○から選択する)。



4. 作ったマテリアルを、各 Plane の MeshRenderer にドロップすれば、Sceneビューにも反映される。今回はそれぞれの円や図形を別々に回転したいので,サンプルのように各テクスチャごとに Plane (GameObject) を作って、それぞれにマテリアルを当てよう。



5. ここまでできたら、床としては十分だが、せっかくなので、アニメーションの仕様も確認しておこう。アニメーションの注意点としては「オブジェクトのルートにアニメーションを付ける」ということだ。また現在のところ(UniVRM0.89 時点)、Transform のアニメーションのみが対応している(つまり、位置[Position]、回転[Rotation]、伸縮[Scale] の3要素となる)。他の詳しい仕様は以下を参考にして欲しい。

アニメーション (UniVRM マニュアル)
アニメーション背景 (バーチャルキャスト公式)


6. サンプルには「MagicCircle_loop_30s.anim」が作ってあって、これはそれぞれ「MagicCircle1~4」を交互に 30秒で 360度回転するアニメーションになっている。これもそのまま使うのが簡単だが、自分で数を増やしたり減らしたりしたいときのために、簡単な方法を教えておこう。



7. アニメーションを編集するには、アニメーションのあるルートの GameObject をヒエラルキーで選択し、[Ctrl+6] (メニューなら「Window>Animation>Animation」) で Animation ウィンドウを開く。不要なものは各プロパティの「-」から「Remove Propery」すれば良いが、追加したいなら「Add Property」で動かしたいプロパティを追加する。



8. 使えるのは基本的に Transform のプロパティなので、例えば、ここではその中から「Rotation」(回転)を追加しよう。仮に「MagicCircle 5」というものを作ったなら(ヒエラルキーで MagicCircle~ を選択し、[Ctrl+D] してリネームする)、初期状態では変化のないデータとなっている。「Curve」のタブを押すと平坦なので、それがよくわかる。




9. このまま「Curve」で他の「MagicCircle 3、4」などを見てもらえばわかるが、このカーブは横が時間軸で、縦が値となっている。例えば MagicCircle 3 は 時間 0秒 で 360度、30秒 で 0度まで線形に変化する。MagicCircle 4 は 時間 0秒 で 0度、30秒 で 360度だ。ただし、Unity上ではカーブを曲線にしても効くが、GLBでは直線しか効かないっぽい(?)。細かい設定方法は公式マニュアルか過去記事を見て欲しい(大雑把には、Left/Right Tangent を Broken - Linear にすると良い)。

カーブの編集 (Unity マニュアル)
GLBで背景モデルを自作する - アニメーションをする (過去記事)




10. ここで欲しいカーブを [Ctrl+A] で全選択、[Ctrl+C] でコピーしておく。そして仮の「MagicCircle 5」を開いて、[Ctrl+V] でペーストしよう。あっというまに複製で完成だ(笑)。



11. 値を編集したいなら、キーフレームをドラッグしても良いが、キーフレーム上で「右クリック>Edit Key...」で直接値を入力しても良い(この方が正確な値を設定できる)。例えば、回転速度を速くしたいなら時間を短く、遅くしたいなら時間を長くすれば簡単だ。Animation ウィンドウの使い方は公式マニュアルを見るか、ググれば色々出てくるだろう。

Animation ウインドウの利用法 (Unity マニュアル)
アニメーションの使い方 (ググる)



12. あとは、glb としてエクスポートするだけだ。ヒエラルキーでルートを選択して、メニューから「UniGLTF>Export UniGLTF-x.x.x」(x.x.x はバージョン) なので簡単だ。サンプルに入ってる素材は自由に使って貰って構わないので、色々やってみると良いだろう。




 デモでは「ライト設定集」の「20211226_Addiction_ぼやけたグリッドの床」のライト設定を使っている。適当に色相(H)を変えれば色を変えられるので、1つ作るだけで済み、ちょっとお得だ(笑)。

VRMLiveViewer用 ライト設定集

♪[A]ddiction
モーション:hino 様 [ニコ動]
振付:足太ぺんた 様 [ニコ動]
楽曲:GigaReol×EVO+ 様 (※無音) [ニコ動]
カメラ:永远赤红的幼月 様 [bilibili]
背景動画:音街ウナ公式


 冒頭にも書いたが、本来マテリアルの Emission を使う方が一般的だが、こういうやり方もアリだろう。もちろん Emission 使って、いくつか色を作るのも良い(ただし、エミッシブマテリアルが効果的なのは、いくつか環境が揃ってる必要がある)。まぁ、好きにやって欲しい。

エミッシブマテリアル






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


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



category: VRMLiveViewer公式ドキュメント

thread: ソフトウェア開発

janre: コンピュータ

tag: VRMLiveViewer  背景3Dモデル  GLB 
tb: 0   cm: --


トラックバック

トラックバックURL
→http://fantom1x.blog130.fc2.com/tb.php/409-5b1648e6
この記事にトラックバックする(FC2ブログユーザー)

プロフィール

Social

検索フォーム

全記事一覧

カテゴリ

ユーザータグ

最新記事

リンク

PR

▲ Pagetop