Wallpaper EngineでVRMモデルをデスクトップ背景にする

https://gyazo.com/ddcafa4a99fd6133780bcf3287c75e08

三行で

Wallpaper Engineは動画などをライブ壁紙として動かせるソフトウェア

Unityで作った.exeやWebGLビルドも壁紙として設定できる

WebGLビルドは外部VRMファイルの読み込みが面倒だった

Wallpaper Engine

https://www.youtube.com/watch?v=nxhBBgmAYdk

Steamで400円くらいで買える

この壁紙には画像や動画がだけでなく.exeや.htmlのファイルを設定できる。

URLを設定すればWebページも背景にできる。

そこでUnityでVRMモデルを読み込むアプリケーションを作って壁紙に設定して動かして見ることにした。

WallpaperEngineの壁紙をUnityのWebGLで作る

.exeが動くため、普通にビルドすればいいのだが一つ問題がある

html形式以外だと壁紙を設定する際のプロパティを作成できない

こういうの

https://gyazo.com/b7192e92c12fdc549b0512289af17f77

ファイル選択もあるのでここからVRMファイルを設定できるようにするためにWebGLビルドでやった

https://gyazo.com/792c069424ad6275cb90ec9431461a26

結論から言うとうまくいかなかった

読み込めるファイルの拡張子が.jpgや.mp4などのなどの画像か動画で固定されている

いろいろ試行錯誤したのでメモっておく

UnityのWebGLをWallpaperEngineで動かす

このサイトを参考に作成した

基本的にやること

1. HTMLのテンプレートを作成

2. WallpaperEngine用のプロパティを定義するjsonの作成

3. プロパティを読み取るためのJavascriptの作成

4. Javascriptの関数をUnityから呼び出すためのプラグイン(.jslib)の作成

プラグインの関数をコンポーネント(C#)から呼び出す

code:c#

using System;

using System.Collections;

using System.Collections.Generic;

using System.Runtime.InteropServices;

using UnityEngine;

public class ...

{

private static extern int GetIntHoge();

private static extern string GetStrFuga();

https://gyazo.com/792c069424ad6275cb90ec9431461a26

このファイル選択プロパティをjsonで設定するにはこんな感じ

code:json

"properties": {

"image": {

"text": "File picker",

"type": "file"

}

}

しかし、これだと画像ファイルの拡張子しか選択できない

NOTE: To restrict the type of file that the user can pick, use the following property:

"fileType": "image" => .jpeg, .jpg, .png, .pnga, .bmg, .gif, .svg, .webp (default)

"fileType": "video" => .webm, .ogg, .ogv (native supported)

とあるので画像や動画だけしか読み取れないのかな

ダメでした

ファイル選択機能のようにディレクトリを選択することができる

こんな感じ

https://gyazo.com/f1733f37117d3d0f7203237dda19ddc7

ここにやりかたが書いてある

スライドショーなどを行うための機能だと思われる

読み込みのモードが二つある

"mode" : "ondemand"

"mode" : "fetchall"

新しいファイルや削除されたファイルを通知する

(´･ω･｀)

ちなみに.vrmのファイルの拡張子をpngとかにすると読み込める。

https://gyazo.com/1e2939da066e7eec6e43107c89a9e3a3

steamのスレッドをあさってみたけど解決策はわからず

2017年3月にもっといろんなフォーマットのファイルを読み込めたらいいのにってコメントあり

結局Wallpaper EngineのUIからの読み込み方法がわからなかった

html以下の階層にVRMファイルをおいてそれを差し替えることで好きなVRMファイルを読み込めるようにした

やりかたとしてはSendMessage関数を使ってjs側から投げる

"VRMImporter"という名前のgameObjectを作ってそこにアタッチしたコンポーネントの関数を呼び出す

code:jslib

// SendMessage("object名","関数名","./hoge.vrm");

SendMessage("VRMImporter","FileSelected","./hoge.vrm");

code:cs

public void FileSelected(string url){

...

https://gyazo.com/ddcafa4a99fd6133780bcf3287c75e08

とりあえずこれで外部のVRMモデルを読み込んだりできるようになった…が、

それならWebGLでやる必要はあまりないかもしれない

.exe形式なら素直に作れるし設定UIは内部に作ればいいかな？

あとはダイアログとかから読み込んで、キャッシュしておくとか

課題