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

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の設定「背景色」を画像の色に合わせると目立たなくなることもありますが、それでも複雑な色の場合は目立つこともあるので、そういう場合は出力された画像を画像ソフトなどで開いて修正するといいかもしれません。