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

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

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

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へアクセスできます。

ページ読み込み完了時に指定の関数を実行

便利な追加コード

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

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

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

CSSの動的変更

外部CSSの動的追加

Jacascriptの動的実行・関数追加

外部Javascriptの動的追加

 

カテゴリー: Unity

コメントを残す

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