Unity, HoloLens でブラウザ風ウィンドウを作る
こんにちは、たるこすです。
今回は Unity, HoloLens で使えるブラウザ風ウィンドウを作成しました。
Browser-like window with Unity & HoloLens
大まかな仕組みとしては、HoloLens で表示させたいページの URL を別マシンに送り、web ページをレンダリングした結果の画像を HoloLens に送ってきて表示しています。
そのため（今のところは）ボタンやリンクのクリック、アニメーションや動画などの動的な表示はできません。
HoloLens 単体で使えるブラウザについてはいろいろ調べてみましたが、フォーラムを見ても実現方法は見つかりませんでした。また、Unity のアセットストアにはブラウザ用アセットがいくつかありますが、どれも UWP に対応していないため HoloLens で利用することができません。
サーバ側のセットアップ
リクエストされた Web ページをレンダリングして画像にして返す部分は OSS の Splash を利用しました。
http://splash.readthedocs.io/en/stable/index.htmlsplash.readthedocs.io
Docker のイメージが用意されているので簡単にサービスを立てることができます。
今回は手元の Windows マシン上で、Docker for Windows を利用しました。Docker for Windows で Kitematic を立ち上げると、GUI で Docker コンテナを立ち上げることができます。検索欄に scrapinghub/splash と打ち込み、左上に出てきた splash の CREATE ボタンを押して、コンテナを作成します。
サービスが起動すると、Splash コンテナ側の 8050 番ポートで HTTP の API を受け付けています。私の環境ではデフォルトだとコンテナ側の8050番がホスト側の32768番にマッピングされていました。
そのため、ブラウザで http://localhost:32768 を開くと以下のように Splash のトップページが表示されます。
さらに、ブラウザで http://localhost:32768/render.jpeg?url=http://www.google.com&wait=2&render_all=1 にアクセスすると、以下のように http://google.com のページが jpeg 形式で表示されます。
url=… の部分を変えればそのページが jpeg 形式で表示されるので試してみてください。
Unity での処理
Unity 側では Splash の URL にアクセスし、得られた画像データをテクスチャとして使うことで web 画面を表示します。
まず、以下のように RawImage を作成します。
作成した RawImage に以下のスクリプトをアタッチします。
GetWebTexture.cs の OpenPage メソッドを呼ぶと、http://www.google.com/search?&sourceid=navclient&btnI=I&q=" + keyword のページが表示されます。これは Google のトップページで「I’m Feeling Lucky」ボタンを押したときの URL で、検索結果のトップのページが表示されます。今の実装では、通常の検索結果ページが表示されてもリンクをクリックしてページ遷移することができないため、このようにしています。
直接 URL を指定してページを表示したい場合には、スクリプトの url の部分を変更してください。
冒頭のデモ動画のアプリでは、Scroll View を使ってページの画像をスクロールできるようにしたり、HoloToolkit に含まれるキーボードを使って検索ワードを入力できるようにして、よりブラウザ風に見えるようにしています。
おわりに
ボタンのクリックや動的な表示ができないという問題点もありますが、それらを必要としないような利用用途であれば十分使えるのではないかと思います。スクリプトを使って大量のウィンドウを配置することもできますし、事前に見せたいページの URL を設定しておいて部屋中に表示するということもできるので、使い方によっては面白い表現ができそうです。
