UnityでVRMファイルを表示するアプリを作ろうと思います。
VRMとはコンピュータで3Dキャラクタを扱うための規格で、例えばタイトル画像の女の子の画像はVRMで出来ています。
私はアプリ開発やプログラミングについて全くの素人なので、ゆるく見守ってやってください。
ど素人大ざっくり仕様
- 環境：Unity。バージョンは2018.4.20f1。とりあえず現状VRMファイルが最も多く使われていると思われるので。
- 画面：ひとつ。ボタンを左上隅に配置するだけです。
- 挙動：ボタンを押すとVRMが入っているフォルダを開き、VRMファイルを選択すると画面中心にTポーズでVRMファイルが表示されるようにします。
画面を作る
とりあえず画面を作ってみます。
Unityプロジェクトを新規作成しました。テンプレートはとりあえず3Dです。
GameObject → UI → Buttonと選びます。
画面左側のHierarchyで、Buttonを展開してTextを表示します。
画面右側のInspectorで、Textに「Select VRM」と記載します。
ボタンのフォントはとりあえずArialのままですが、Boldにします。
フォントサイズはとりあえず20にしました。
HierarchyでCanvasを選び、Inspector → Canvas Scaler (Script) → UI Scale Mode を変更して、「Scale With Screen Size」にします。
ここで再生ボタンをクリック！
・・・ボタンが画面からはみ出してしまいました。
ボタンを動かして、Pos X : -310、Pos Y : 200、Pos Z : 0 にします。
ボタンが左上隅に表示されるようになりました。
ボタンの挙動を作る
やりたいことを再掲します。
ボタンを押すとVRMが入っているフォルダを開き、VRMファイルを選択すると画面中心にTポーズでVRMファイルが表示されるようにします。
まずは、アプリ上でフォルダを開くダイアログが出るような仕組みを調べます。
フォルダを開いてファイルを選択する
ググると「エディタ拡張」や「EditorUtility」と書かれたページが多くヒットしますが、これらはアプリ上で使える仕組みではないのでパスします。
アプリ上でファイル選択ダイアログを開く方法にはいくつかあるようですが、今回はUnity Standalone File Browserというのを使うことにしました。
こちらの紹介記事の冒頭にあるリンクをクリックするとGitHubのUnity Standalone File Browserのページに飛びます。README.mdの中にある「Download Package」というリンクをクリックします。
するとunitypackageファイルがダウンロードされるので、UnityのProjectウインドウのAssetsフォルダにドラッグドロップで放り込みます。
次に、ボタン押下時に実行されるスクリプトを作ります。
UnityのHierarchyで「Button」を選択し、Inspectorの一番下の「Add Component」ボタンをおしてNew scriptを押してスクリプト名を指定します。とりあえず「SelectVRM」という名前にしました。
VisualStudioを開いてコードを編集します。
using System.Collections;
using UnityEngine;
using SFB;
public class SelectVRM : MonoBehaviour
{
public void OnClick()
{
// フィルタ付きでファイルダイアログを開く
var extensions = new[]
{
new ExtensionFilter( "VRM Files", "vrm" ),
new ExtensionFilter( "All Files", "*" ),
};
string[] paths = StandaloneFileBrowser.OpenFilePanel("Open VRM File", "", extensions, false);
Debug.Log(paths[0]);
}
}
コードをビルドしたら、ButtonのInspectorの「On Click()」でButton・SelectVRMを関連付けします。
これで再生して左上のSelectVRMボタンを押すと、VRMファイルだけを表示するフィルタがかかったファイル選択ダイアログが表示されます。※開発環境はWindowsです
ファイルを選択すると、UnityのConsoleウインドウに選択したファイルのパスがログとして表示されます。
これでファイルの選択まではできました！
VRMファイルを表示する
続いて、取得したパスの対象VRMファイルを開いてUnityのゲーム画面上に表示する処理を追加します。
その前にUnityでVRMが使えるようにするために、UniVRMをインポートします。
上記リンク先でバージョン名(v0.71.0など。Preリリースでない最新版でいいと思います)のリンクをクリックすると、下にダウンロードできるファイルの名前が出てきます。
「UniVRM-0.xx.0_db1b.unitypackage」というファイルをダウンロードして、Unityのプロジェクトウインドウ(Assetsフォルダ直下)にドラッグドロップするとインポートされます。
インポートされたら、Assetsフォルダ内に「VRM」「VRMShaders」といったフォルダが生成されます。
これでUnityでVRMファイルを扱う準備ができました。
先ほどのコード「SelectVRM」をVisualStudioで開いて、「Debug.Log(paths[0]);」をコメントアウトして下の通り書き足します。
//Debug.Log(paths[0]);
var parser = new GltfParser();
parser.ParsePath(paths[0]);
using (var context = new VRMImporterContext(parser))
{
context.Load();
context.EnableUpdateWhenOffscreen();
context.Root.transform.position = new Vector3(0, -8, 0);
context.Root.transform.localScale = Vector3.one * 8;
context.Root.transform.Rotate(0, 180, 0);
context.ShowMeshes();
context.DisposeOnGameObjectDestroyed();
};
ビルドしてUnityに戻り、再生ボタン→SelectVRMボタン→VRMファイルを選択すると、、
VRMが表示されました！
いろいろと直したい点はありますが、この記事はひとまずここまでとしたいと思います。
