【VRMLiveViewer】魔法陣の床を作る

2022/01/21 Fri [edit]

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

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

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

魔法陣の配布元のデイジィ・ベル様にご確認頂いて、素材の使用・公開も問題無いと了承を得たので、サンプルに追加しておきました（MagicCircle_RuneAMN_20141014b.glb）。

(BOOTH)https://t.co/vqZG13hEhf

そのうちブログに作り方書こう…(たぶん素材を見ればわかる程度)。pic.twitter.com/MVx4FEEkeT
— ヽ｜∵｜ゝ(Fantom)@VRMLiveViewer (@fantom_1x) January 9, 2022

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

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

■魔法陣のテクスチャを作る
■Unity で魔法陣の床(GLBモデル)を作る

(※) 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」を３つのレイヤーに分離したが、デモに使ってる魔法陣は「MagicCircle_RuneAMN_20141019」の真ん中にある(☆)を取り出して、４つ目として、適当にリサイズして中央に置いている。

●最後の(☆)は MagicCircle_RuneAMN_20141019 から

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

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

7. ぼかしを重ねたら、それぞれの円や図形ごとに .png で保存する（この例では４つ）。「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）が入っている。ヒエラルキーで階層を開いて貰えばわかるが、構造としては４つの 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] の３要素となる）。他の詳しい仕様は以下を参考にして欲しい。

・アニメーション (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)を変えれば色を変えられるので、１つ作るだけで済み、ちょっとお得だ(笑)。

・VRMLiveViewer用ライト設定集

思いつきで、ライトをギミック的に使える床(グリッド)を作ってみたら、思いのほかいい感じになった。キャラのライトを独立化して、床だけに強い光を当てると色だけ変えられるので、面白い効果が得られる。といっても作り方はいつもと変わらないんだけどね(笑)。あとで配布しておこう。#VRMLiveViewer pic.twitter.com/6UhfEsv3TZ
— ヽ｜∵｜ゝ(Fantom)@VRMLiveViewer (@fantom_1x) December 26, 2021

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

・エミッシブマテリアル