開発入門 > Unity > Unity・VR内でブラウザを利用するメモ

Unity・VR内でブラウザを利用するメモ

VR空間内でウェブブラウザを利用することのできるEMBEDDED BROWSERの利用メモです。
公式ドキュメントはこちらのReadmeZFBrowser Documentationを参照、

b1

EMBEDDED BROWSERアセットを利用することで、VR空間内で簡単にウェブサイトを利用することができます。後ろでChromiumブラウザが動作する仕組みで動作するため、WebGLコンテンツやYoutubeなどChromeで動作するウェブサイトであればそのままなんでも表示できます。

単なるウェブ表示用だけではなく、UI表示用パネルとしても利用価値大です。

また
・平面以外のオブジェクトに表示
・ウェブページ内のJavascriptからUnity上の関数を呼んだり
・Unity上の関数からウェブページ上の関数を呼んだり
できます。

利用方法は簡単で、ブラウザーPrefabをヒエラルキーに追加するだけです。URLを設定すれば実行時にウェブが表示されます

b2

実行時にはデバッグ用のボタンがInspectorに表示されるので便利です。

b3

ブラウザPrefabは下記の4つが用意されています。

BrowserGUI
3D空間ではなく、2DのUIとして画面上にウェブを表示したい場合に利用します。

BrowserQuad
3D空間でウェブを表示する場合は通常こちらを利用します。

BrowserQuad (FPS UI)
マウス操作の代わりに視点でポインタを移動するスクリプトが入っています。

BrowserSphere
任意の形状のオブジェクトにウェブを表示する球体でのデモPrefabです。

 

スクリプトからブラウザの制御

スクリプトからブラウザの制御方法です。

 

指定のURLのページを表示

指定の場所までページをスクロール

DOMへのアクセス(EvalJs経由で制御)

HTMLを直接読み込み

ちなみに、HTMLの背景はデフォルトでは透過状態になっています。透過pngをimgタグで表示した場合、下のように透けて表示されます。ウェブサーバー不要で、EMBEDDED BROWSERをHTMLを利用したUIキャンバスにできて便利。

b4

Javascriptの関数を呼ぶ

Javascriptで関数が呼ばれた際にUnity内の関数が実行されるように登録

Unityプロジェクト内のHTMLファイルへのアクセス

Assetsフォルダと同列に(下位フォルダではなく)、BrowserAssetsフォルダを作成

localGame://index.html

でBrowserAssets内のindex.htmlへアクセスできます。

ページ読み込み完了時に指定の関数を実行(Whenloadedはブラウザ内でユーザーがクリックした移動した遷移は取得不可)

ブラウザ内でユーザー遷移を補足して、RegisterFunctionを実行する方法

 

 

 

 

便利な追加コード

EMBEDDED BROWSERに標準で用意されていないが便利なコードを作成したので共有

ユーザーエージェントの変更

呼び出し方(どこかで1回呼べば以降変更されます)

CSSの動的変更

外部CSSの動的追加

Jacascriptの動的実行・関数追加

外部Javascriptの動的追加

 

カテゴリー: Unity
4 comments on “Unity・VR内でブラウザを利用するメモ
  1. noguchi より:

    お世話になります。
    質問をさせていただきたいのです。

    Unity内でJavascriptの関数を実行するには、
    //calls window.setPlayerStats(“myPlayerName”, 2, 4200, false) in the browser
    browserObj.CallFunction(“setPlayerStats”, “myPlayerName”, 2, 4200, false);

    とありますが、
    例えば、alertを実行しようとした時には、
    どのようなコードになるのでしょうか?

    • from2001 より:

      browserObj.CallFunction(“window.alert”, “message”);
      のようになりますでしょうか。

      またはJS側で用意している関数側にAlertも含め処理を記述するのがわかりやすいと思います。

  2. 匿名 より:

    unity側とブラウザ側でデータのやり取りはできないでしょうか?

    JavaScriptで取得した値をunity側のC#で扱いたいのですが

    • from2001 より:

      ”Javascriptで関数が呼ばれた際にUnity内の関数が実行されるように登録”
      のサンプルに示したように、C#側でコールバック関数を登録しておいて、JS側からその関数を引数付きで渡してあげることで、JS->Unityにデータを渡すことができますよ。

"Unity・VR内でブラウザを利用するメモ" に 1 トラックバック・ピンバック
  1. […] Unity・VR内でブラウザを利用するメモ | Psychic VRラボの殴り書き [VR][browser][Unity]“EMBEDDED BROWSER”/”後ろでChromiumブラウザが動作する仕組みで動作” […]

コメントを残す

メールアドレスが公開されることはありません。