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

電子工作、ミシン、ペンタブレット、で使える、アイデア・材料・道具の紹介。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






追記

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

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

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

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

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



※検証してみた結果


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


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


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

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

作れるようです。




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


BG2D_A01vlv.jpg

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


BG2D_A01.png

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

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



- まとめ -



6枚の画像を作り、

Cube2DMを使って、

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


が、


手間が掛かります。


ので、


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


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


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







更に追記


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


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


理解が早いと思います。



BG2D_B01.png

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


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



WS000169.png


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



« NEW  | HOME |  OLD »

コメント

コメントの投稿


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

 | HOME |