でん⚡きかいでんのブログ

3Dプリンター、3DCG、PC、電子工作、HTML、CSS、ミシン、ペンタブレット、アイデア・材料・道具の紹介。PCデータのわかりやすいバックアップ方法。PC関連機器の使用感レビューなど。

2021.09.27 [月]

VRM Live Viewer の背景画像（360/2D）を作る方法

VRM Live Viewer　とは？

【VRMLiveViewer】VRM（VRoid）をライブステージで踊らせるアプリを作ってみた

　VRM には Unity で動的にモデルをインポートできる「UniVRM」というオープンソースが公開されているので、そのサンプルビューワと「ユニティちゃんライブステージ！」「ミライ小町」プロジェクト（オープンソース）を組み合わせて、VRM（VRoid）を動的に読み込んでダンスさせるアプリを作ってみた。一応、音楽も BVH/VMDモーションファイルも動的に読み込めるので、やろうと思えば自由な曲でダンスもできるかも知れない。

ヽ｜∵｜ゝ(Fantom) の開発blog？から引用

VRM（VRoid）をライブステージで踊らせるアプリ

ですね。

ヽ｜∵｜ゝ(Fantom)@VRMLiveViewerさんが作製され、

このページからダウンロードできるようになっています。

背景画像（360/2D）を作る方法

様々な種類のファイルを投入できるようになってますね。

この中の「背景画像/動画(360/2D)」の背景画像の作り方です。

全行程

360度の背景画像は、エクイレクタングラー（正距円筒図法）形式

これを作るためにCube2DMというソフトを使用させて頂きました。

このソフトでVRM Live Viewer用の背景画像を作成する手順です。

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でこの手順で作れるのかどうか試してみてもらえると、理解が早まるのではないかと思います。

2021年10月18日(火)追記

以前に書いた下記の検証内容は間違っていました、すいませんでした。

何を書いたのか消さずに残しておきます。

内容は不正確なのでフォント色をホワイトにしておきます。

読みたい方は内容の文字をマウスでなぞって選択すると反転するので読むことができます。

間違ったことを書いてしまってすいませんでした。

※検証してみた結果

正距円筒図法（エクイレクタングラー形式）画像を自分で作るよりも

どういう表示になるか理解した上で

3000pxx3000pxくらいの1枚の画像に絵を描いた方が

手間も少なく、きれいに、データも軽く

作れるようです。

上下方向にグラデーション

2000～3000pxくらいの正方形に、上下方向のグラデーションで1枚の絵を作り、それをそのままVRM Live Viewerへ投入した方が、手間無く、きれいな背景画像が作れます。

これは試験的にあわてて作ったので1000pxになってます。

これを使ってみるとVRM Live Viewerに投入した時に画像の粗さが出ることがわかりますので、2000～3000pxで描いた方が良いということがわかります。

- まとめ -

6枚の画像を作り、

Cube2DMを使って、

正距円筒図法（エクイレクタングラー形式）画像を作ることはできます。

が、

手間が掛かります。

ので、

サイズ2000～3000pxの正方形に絵を描いて、

それをそのままVRM Live Viewerへ投入した方が、

手間無く、きれいに、背景画像が作れます。