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でこの手順で作れるのかどうか試してみてもらえると、理解が早まるのではないかと思います。
追記
以前に書いた下記の検証内容は間違っていました、すいませんでした。
何を書いたのか消さずに残しておきます。
内容は不正確なのでフォント色をホワイトにしておきます。
読みたい方は内容の文字をマウスでなぞって選択すると反転するので読むことができます。
間違ったことを書いてしまってすいませんでした。
※検証してみた結果
正距円筒図法(エクイレクタングラー形式)画像を自分で作るよりも
どういう表示になるか理解した上で
3000pxx3000pxくらいの1枚の画像に絵を描いた方が
手間も少なく、きれいに、データも軽く
作れるようです。
上下方向にグラデーション
2000~3000pxくらいの正方形に、上下方向のグラデーションで1枚の絵を作り、それをそのままVRM Live Viewerへ投入した方が、手間無く、きれいな背景画像が作れます。
これは試験的にあわてて作ったので1000pxになってます。
これを使ってみるとVRM Live Viewerに投入した時に画像の粗さが出ることがわかりますので、2000~3000pxで描いた方が良いということがわかります。
- まとめ -
6枚の画像を作り、
Cube2DMを使って、
正距円筒図法(エクイレクタングラー形式)画像を作ることはできます。
が、
手間が掛かります。
ので、
サイズ2000~3000pxの正方形に絵を描いて、
それをそのままVRM Live Viewerへ投入した方が、
手間無く、きれいに、背景画像が作れます。
更に追記
- 正面、後面、右面、左面、は人間側から見た方向です。
- 上面と下面の中心部は歪むので、単色にしておくとわからなくなります。
- 関連記事
-
-
VRM Live Viewer の背景画像(360/2D)を作る方法 2021/09/27
-
テクスチャの模様が表示されない、解決方法 2022/04/06
-
コメントの投稿