ウーパの手習い

私的開発メモ用途なのでご容赦ください。2020年現在はSwiftとUnityでARのお勉強中。

VRChat SDK: VRC_WebPanelについて

VRChat上にWebページを表示させるためのWebPanelコンポーネント。Quadオブジェクトを作成し、VRC_WebPanelコンポーネントを割り当てるという実装の基本的な流れは、

bibinbaleo.hatenablog.com

 を読ませてもらって難なく組み込めました。記事中に書かれている通り、坪倉さま（）のWebPanelに関するツイートとそのコメントに書かれている内容を確認しておくとさらに良いと思います。

 

まずは、VRChatのWebPanelを使って気づいた点いくつか列挙。

・トリガーをアタッチする対称、いわゆるボタンのオブジェクトをStatic設定しても大丈夫か？→大丈夫でした。ライトマップのベイク対称にできます。

・ボタンオブジェクトのColliderを削除しても大丈夫か？→ダメ。OnInteractイベントは呼び出せなくなります。OnEnterTriggerイベントなら呼び出せそうですけど私は未検証です。

・離れた場所から、ブラウザ画面をタップしたい場合は、Proximity for Interactivityの値を大きくすれば、遠い場所からもWebPanelを操作できるようになる。

f:id:uuupacom:20180308000947p:plain

・VRC_WebPanelコンポーネントのDuplicateScreenに任意のマテリアルを指定してやれば、そのマテリアルにもWebPanelの内容をミラーリング表示できる。

f:id:uuupacom:20180308000520p:plain

例：離れた場所のディスプレイにも同じ画面を表示させることができます

 ・任意のGameObjectをVRC_WebPanelのMouseCursorObjectに割り当ててやれば、そのGameObjectがWebPanel上のカーソルになるらしいのだが、下の動画でも言及しておりますが、表示先のQuadのサイズ比率が悪影響して変形してしまいます。Quadの子オブジェクトにするとかちょっとやってみたものの解決しませんが、Quadのサイズ比率が1:1:1の時は正しく表示されるので、まぁ落ち着いたら逆算してサイズ割り出せばいいかと考えています。

 

そして、ここからが大問題

今回VRChat内にWebPanelを使ってWebサイトを表示させる目的は、VRChat上でSlideShare等を表示させて、仮想空間内で勉強会やプレゼンをしようと考えていたからなのですが、WebPanel上のSlideShareでページを進めようと画面にタッチすると、1ページ目から5ページ目にジャンプしてしまう症状が発生。

vrcprog.hatenablog.jp

を拝見すると、どうやらWebサイト内のJavaScriptでclick実装されている箇所は連続でクリックが呼び出されると仰っていて、４回連続でクリックが呼び出されている私の症状もまさにそれ。とりあえずここまでの忘備録として以下をツイートしました。

さらに、WebPanelを操作するためのボタンをいくつか作ってみて、WebPanelのURIを移動する（別のWebページに移動する）ボタンはすんなり実装できたけど、進む・戻るボタンが動かない症状に遭遇しておりました。

そうしたところ、下記の通りお教えいただき、Synchronize URI をチェックすれば「進む・戻る」ボタンは動きました。

ただし、私も検証できていませんが、仰る通りに操作権利が引き渡せない（＝最初に部屋に入った人しかWebPanelを操作できない）という不満点が残るのと、上で書いたJavaScriptの4クリック症状は依然そのままですので、同じく@naqtn様に教えていただいた

 の方法を採用することにしました。つまりSetWebPanelURIの引数にてJavaScript叩く方法です。

実装してみると全て解決。Unity上の設定含め、以下動画で説明しております。

ということで無事解決。JavaScript叩けるならいろいろできますね。 
上の動画で言及している通り、OnInteractイベントでJavaScriptを使って画面スクロールを実装した場合、

f:id:uuupacom:20180308011157p:plain

のようにActionsのところに、スクロールのJSと併せて、空のJSをコールしておくべしです。これがないと、トリガーオブジェクトをペチペチと連続クリックしたときにスクロールしてくれません。
※連続で同一の内容のJSを発火させない仕組みがあって、対応として間に別のJS（空っぽでもOK）をワンクッション挟めば解決するというイメージを勝手に持っております。

その他、VRC_WebPanelの設定をいろいろON/OFFしていろいろ検証していたのですが、VRChatのデバッグって都度アップロードして時間がかかるので（哀れUUUPAよ追記を見よ！）、自分が何を検証したかを次々と忘れていってしまいました。思い出しましたらまた追記します。
追記：Unity&VRChatSDKって、都度アップロードして動作確認していたのですが、ローカルテストできると教えてもらいました。今までの自分何だったんだ、、。

 追記２：本件をVRChat伝道師のバーチャルのじゃロリ狐娘youtuberおじさん様にリツイートしていただきました。私が最初にVRChatで自作ワールドを作ろうとした時参考にさせてもらったチュートリアルビデオがバーチャルのじゃロリ狐娘youtuberおじさん様のビデオでしたので、その方に言及してもらって感無量です。おそらく本件に関して

 と呟いてくださっているのかと思うのですが、「既存のWebサイトをVRChat上で操作したいけれど、ボタン等のクリックイベントはじめ、Webページ上を操作するための命令がJavaScriptで記述されたWebサイトが結構存在していて、それをVRChatから操作するためには、そのWebページに記述されているJavaScriptの命令を直接呼び出すのが一番簡単だよね」というのがあります。さらに本件で話題としましたのが、現状のWebPanelの不具合なのか、JavaScriptで実装されたクリック（※htmlで実装されたaタグによるクリックは不具合起こりません）は、1クリックしたつもりが4連続クリックになってしまうという不具合が発生しており、それを解決するためにも、既存のWebページの操作を、そのWebページで定義されているJavaScriptを呼び出すことで実行させることが必要でした。

その他、動画内でも紹介しておりますような、WebPanel内ブラウザのスクロールや前のページに戻る機能など、ブラウザ自体を操作できるのもJavaScriptのいいところで、それらの機能はWebPanelコンポーネントの標準機能としても用意されていますが、本エントリ中程で書いているようにSynchronize URI設定の影響で、最初に部屋に入室した人しか操作できない仕様だそうでして、ではみんなでWebPanel内ブラウザを操作したいという場合は、JavaScriptを呼び出す方法ならいけるよねという利便性があるのだと思います。

phpとの関係性ですと、既存のWebページでは処理系のphpを動かすためのトリガー（ボタン等）が上記の通りJavaScriptで書かれていたりしますので、これもやはりJSを呼び出せるメリットかなと思いました。好きに実装できる自作webページの場合であればPHPを直接叩く構成のWebページを作ってそれをWebPanelのSetWebPanelURI経由で呼び出すことも可能なのでしょうが、とくに既存のWebページを操作する場合は、PHP実行処理コマンドが隠されている場合もあるので、その操作の入口（＝鍵）となっているJavaScriptを呼び出す方法しかないというケースがあるかと考えています。

「引数に使う値を固定値じゃなく動的に参照」という件は、「引数を参照」という意味合いが少し分かりかねますが、「インターネット（=VRC_WebPanel上Webページ）に対して命令と一緒に任意の変数を引数として送る」ことと、「インターネットから返ってきた値をVRChat上で参照する」という話でしたら、以下のように私は考えています。

まず「引数を使う（送る）」点については、VRC_WebPanelのSetWebPanelURIに好きな値を持たせた命令を送る（例えば本例のブラウザスクロール移動量とか、VRChat上で作成したゲームのスコア）などの、VRChat内の行動により変動する値を保持させて、それをSetWebPanelURIの引数としてブラウザ（インターネット）の世界に送ることはできます。

 ただ、「参照」というのが、VRChat上に、ブラウザ（インターネット）から返された値を持ち込む（例：あるウェブサイトのアクセスカウンタ数と同じ数の花オブジェクトをVRChat上で咲かせる）ことは現状のWebPanelコンポーネントではできないと認識しております。上述のインターネットに送信したゲームスコアを表示させたい時は、WebPanel上に表示させるしかないのではという認識です。
※スコアをネット送信するのではなく、VRChatのそのワールド内だけで管理するような場合はこれにあてはまらず、普通にワールド内のオブジェクトですべてを表現できるかと思います。

以上、疑問に思われている点に対して的外れなことを書いてましたらすいません。

私はまだVRChat SDKの全てのコンポーネントを把握しておりませんため、VRChat内での変数の保持や取得に関して不理解あるかもしれませんのでご容赦くださいませ。