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

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

正当なCSSです! クリエイティブ・コモンズ・ライセンス表示

2021.09.27 [月]

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


VRM Live Viewer とは?

VRMLiveViewer00.png

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

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


ヽ|∵|ゝ(Fantom) の 開発blog?から引用


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


ですね。



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


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




背景画像(360/2D)を作る方法

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


VRMLiveViewer01.jpg


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





全行程

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


Cube2D_masume01s.jpg

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


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



6枚の画像を用意します。(前、後、上、下、左、右)


testTex01@front.png testTex01@back.png testTex01@top.png testTex01@bottom.png testTex01@left.png testTex01@right.png

※画像をクリックすると原寸大画像が別窓表示されるので、別名保存して使ってもらってOKです。


ファイル名はあらかじめ 「同ファイル名@front」 という形で

(6面:@front,@top,@bottom,@left.@right.@back)

6枚全部のファイル名を変更しておく。


  1. デスクトップにフォルダを作る。(例:haikei)※1
  2. Cube2DM01a.png Cube2DM01b.png


  3. 今デスクトップに作ったフォルダへ6枚の素材用画像をコピー&ペーストで入れる。
  4. Cube2DM02psd.jpg


  5. Cube2DMを起動する。
  6. Cube2DM03.png


  7. 入力フォルダ:デスクトップの今作ったフォルダを指定する。
    (指定時フォルダ内のファイルを1つ選択しないと指定できない)
  8. Cube2DM04.png


  9. 入力形式:リストの一番上の
    AllSkyViewer形式CubeMap
    (6面:@front,@top,@bottom,@left.@right,@back)
    を選択
  10. Cube2DM05psd.png


  11. 入力ファイル名:「@front」を消す。
  12. Cube2DM06psd.png


  13. 出力フォルダ:デスクトップの同じフォルダ。(指定時フォルダ内のファイルを1つ選択しないと指定できない)
  14. Cube2DM07psd.png


  15. 出力ファイル名:(01から02へ)変更。
  16. Cube2DM08apsd.png

    Cube2DM08bpsd.png


  17. 出力ファイル形式:「jpeg」へ変更。※2
  18. Cube2DM09psd.png


  19. 出力形式:「全球パノラマ形式(正距円筒図法)」へ変更。
  20. Cube2DM10psd.png


  21. 出力サイズを4倍の大きさにすると出力結果がきれい。
    (今回は1000pxの画像を使ってるので4000pxに)※2
  22. Cube2DM11psd.png


  23. frontとleftの左内側1pxだけ黒いライン(背景色)が入るようです。気になる場合は、Cube2DMの設定「背景色」を画像の色に合わせると目立たなくなることもありますが、それでも複雑な色の場合は目立つこともあるので、そういう場合は出力された画像を画像ソフトなどで開いて修正するといいかもしれません。
  24. Cube2DM12a.png

    Cube2DM12bpsd.png



※1:わかりやすいようにデスクトップに作っています。階層内のフォルダ名に日本語などがあるとうまくいかないようです。


※2:出力サイズを4倍にするので、ファイルの種類をpngからjpegへ変更しています。pngのままだとファイルサイズが大きくなります。


※3:topとbottomの中心の一部に歪みが出るようです。


変換開始

testTex02_202109271912570bf.jpeg


上記6枚の画像を実際に変換した結果です。


幅4000px、高さ4000pxで作っています。

高さを2000pxで作ってみましたが、比べて見てすぐにわかる程度には画像が少し荒れていたので高さも4000pxで作った方がきれいだと思います。


上記の6枚の画像をクリックすると1000pxの画像が別窓表示されるので、右クリックで保存して、実際にCube2DMでこの手順で作れるのかどうか試してみてもらえると、理解が早まるのではないかと思います。



VRMLiveViewer02.png





更に追記


幅4000px、高さ2000px、の背景画像用ベースを置いときます。


一度まずこれをこのままVRM Live Viewer へ入れてみると


理解が早いと思います。



BG2D_B01.png

※画像クリック、別窓表示される原寸大画像を保存して使って下さい。


この画像をベースにして(レイヤーに置いて)背景画像を描くとわかりやすいので使って下さい。



WS000169.png


  • 正面、後面、右面、左面、は人間側から見た方向です。
  • 上面と下面の中心部は歪むので、単色にしておくとわからなくなります。



関連記事

« NEW  | HOME |  OLD »

コメント

コメントの投稿


「コメント非表示」管理人しか閲覧できないコメントにする。

 | HOME |