VRM Live Viewer の背景画像(360/2D)を作る方法
【VRMLiveViewer】VRM(VRoid)をライブステージで踊らせるアプリを作ってみた
VRM には Unity で動的にモデルをインポートできる「UniVRM」というオープンソースが公開されているので、そのサンプルビューワと「ユニティちゃんライブステージ!」「ミライ小町」プロジェクト(オープンソース)を組み合わせて、VRM(VRoid)を動的に読み込んでダンスさせるアプリを作ってみた。一応、音楽も BVH/VMDモーションファイルも動的に読み込めるので、やろうと思えば自由な曲でダンスもできるかも知れない。
背景画像(360/2D)を作る方法
全行程
360度の背景画像は、エクイレクタングラー(正距円筒図法)形式
6枚の画像を用意します。(前、後、上、下、左、右)
※画像をクリックすると原寸大画像が別窓表示されるので、別名保存して使ってもらってOKです。
ファイル名はあらかじめ 「同ファイル名@front」 という形で
(6面:@front,@top,@bottom,@left.@right.@back)
6枚全部のファイル名を変更しておく。
- デスクトップにフォルダを作る。(例:haikei)※1
- 今デスクトップに作ったフォルダへ6枚の素材用画像をコピー&ペーストで入れる。
- Cube2DMを起動する。
- 入力フォルダ:デスクトップの今作ったフォルダを指定する。
(指定時フォルダ内のファイルを1つ選択しないと指定できない) - 入力形式:リストの一番上の
AllSkyViewer形式CubeMap
(6面:@front,@top,@bottom,@left.@right,@back)
を選択 - 入力ファイル名:「@front」を消す。
- 出力フォルダ:デスクトップの同じフォルダ。(指定時フォルダ内のファイルを1つ選択しないと指定できない)
- 出力ファイル名:(01から02へ)変更。
- 出力ファイル形式:「jpeg」へ変更。※2
- 出力形式:「全球パノラマ形式(正距円筒図法)」へ変更。
- 出力サイズを4倍の大きさにすると出力結果がきれい。
(今回は1000pxの画像を使ってるので4000pxに)※2 - frontとleftの左内側1pxだけ黒いライン(背景色)が入るようです。気になる場合は、Cube2DMの設定「背景色」を画像の色に合わせると目立たなくなることもありますが、それでも複雑な色の場合は目立つこともあるので、そういう場合は出力された画像を画像ソフトなどで開いて修正するといいかもしれません。
※1:わかりやすいようにデスクトップに作っています。階層内のフォルダ名に日本語などがあるとうまくいかないようです。
※2:出力サイズを4倍にするので、ファイルの種類をpngからjpegへ変更しています。pngのままだとファイルサイズが大きくなります。
※3:topとbottomの中心の一部に歪みが出るようです。
変換開始
上記6枚の画像を実際に変換した結果です。
幅4000px、高さ4000pxで作っています。
高さを2000pxで作ってみましたが、比べて見てすぐにわかる程度には画像が少し荒れていたので高さも4000pxで作った方がきれいだと思います。
上記の6枚の画像をクリックすると1000pxの画像が別窓表示されるので、右クリックで保存して、実際にCube2DMでこの手順で作れるのかどうか試してみてもらえると、理解が早まるのではないかと思います。
更に追記
- 正面、後面、右面、左面、は人間側から見た方向です。
- 上面と下面の中心部は歪むので、単色にしておくとわからなくなります。
- 関連記事
-
-
VRM Live Viewer の背景画像(360/2D)を作る方法 2021/09/27
-
テクスチャの模様が表示されない、解決方法 2022/04/06
-
コメントの投稿