VR Mastodon

VR、AR、MR情報とマストドンの運用についてのメモサイト by mastodon-omoshiro.com管理人

雑記

【Unity】Embedded BrowserとVrGrabberを使ってVR空間で簡単ブラウザ操作

更新日:

はじめに

こちらは、「Unity アセット真夏のアドベントカレンダー 2017」の8/30日分の記事です。

Embedded BrowserとVrGrabberを利用して、↓の動画のようなことができるようになるので興味がある方は参考にどうぞ!

 

実行環境

Embedded Browser

VrGrabber
 ※hecomi先生作成のGrabberです。詳細はこちらの記事を参照ください。

Unity 5.6.1p2
 ※Unity 2017.1.0でも確認しています

・Oculus Rift + Touch

・Windows10

VrGrabberの基本的な使い方

ここでは、概要だけ記載しますので、詳しい使い方はhecomi先生の記事を参照ください。

1.「VrGrabber-v0.0.1.unitypackage」のダウンロード
こちらのページのreleaseリンクをクリックすると「VrGrabber-v0.0.1.unitypackage」リンクがありますので、こちらをクリックしてダウンロードしましょう。

2.ダウンロードできたらUnityを起動して「VrGrabber-v0.0.1.unitypackage」をダブルクリックでimport

3.OVRCameraRig > TrackingSpace の配下に Vrg Right Grabber と Vrg Left Grabber を VrGrabber > Prefabs からD&D
※私の場合は、LocalAvatar > OVRCameraRig という構成になっており、LocalAvatar の配下に Vrg Right Grabber と Vrg Left Grabber を配置しています。どちらでも大丈夫。

4.掴みたいオブジェクトにAdd Componentから、VrgGrabbable を追加

以上です。非常に簡単ですね。まずは適当にオブジェクトを作って色々試してみてください。

使い方をざっと説明すると、中指トリガーでオブジェクトを掴めます。掴んだ状態でアナログスティックの上下で近づけたり、遠ざけたりできます。また両手でつかんだ状態で広げたり、縮めたりscaleを調整することも可能です。これをMITライセンスで公開してくれているhecomi先生に感謝です。

Embedded Browserの基本的な使い方

このアセットを利用することで非常に簡単にVR空間にブラウザを表示させることができます。アセットの紹介ページに記載のある通りかなりいろいろなことができますが、今回はごく一部の機能の紹介となります。

紹介ページに記載の特徴(Google翻訳)

特徴
   - サイトを2Dまたは3Dオブジェクトにレンダリングする
   - クロムバックエンド。クラス最高のサポート:HTML 5、CSS 3、JavaScript
   - UnityからJavaScriptを呼び出す
   - JavaScriptからUnityに電話をかける¹
   - 透明または色付きページの背景
   - HTML +アセットをゲームに埋め込む
   - 包括的な3D UI / HUDデモ
   - コンテキストメニュー、アラート/プロンプト/確認
     - カスタマイズ可能なデザイン、OSモーダルなし
   - 制御:url、back、reload、resizeなど
   - ミップマップエミュレーションシェーダ:輝きのない速いテクスチャの更新
   - 新しいウィンドウの作成を細かく制御
   - 最小限のJSONライブラリ
   - Chromiumのオープンコーデックのための<video>サポート(h.264 / mp3はライセンス供与されていません)
   - SVGをレンダリングする
   - カーソルをカスタマイズする
   - Adob​​e Flash、ページインスペクタの実験的サポート
   - クッキーの編集/削除
   - カスタマイズ可能なマウス/キーボード入力
     - 含まれるもの:メッシュクリック、FPS、Unity GUI
   - 自動的にファイルをビルドする

では、実際に利用してみましょう。

アセットをimportしたら、ProjectのAssetsの下に ZFBrowser ができています。
Demoを試してみたい方は、少し準備が必要で、Assets > ZFBrowser > Demo > DemoBrowserAssets.zip のzipファイルを解凍すると「BrowserAssets」フォルダが入っているので、これをエクスプローラー上でAssetsと同じ階層に配置します。

通常はこの状態で Assets > ZFBrowser > Demo の下にある MainDemoシーンが利用可能になるはずなのですが、
私の環境だとコンパイルエラーがでており、HUDManager.cs の以下の部分をコメントアウトしています。

// var fpsInput = ((Behaviour)GetComponentInChildren(Type.GetType("FPSInputController, Assembly-UnityScript")));
// fpsInput.enabled = enableIt; 

それでは、実際の利用方法です。

1.ZFBrowser > Prefabs 以下の 「BrowserQuad (FPS UI)」を Hierarchy にD&D
 ※BrowserQuad は、視線によるマウス操作のスクリプト(FPSBrowserUI.cs)がついていないため、今回はBrowserQuad (FPS UI)を利用しています。

2.Inspector の Browser(Script) のUrlパラメータに表示したいUrlを設定

これだけで実行時にブラウザが表示され指定したURLのWebが表示されます。
実行中は Inspector に下記のような操作ボタンが表示され、デバッグが可能です。

※Load HTMLを使って、UIとして利用することも可能です

Embedded Browserのカスタマイズ

このままだと、VR空間にいるのにブラウザ操作のためマウスを手放せない状態になってしまいますので、Oculus Touchで操作できるようにカスタマイズを行います。

rayをマウスカーソルに置き換える

BrowserInput.cs を以下のように編集

20行目あたり
private bool kbWasFocused = false;
private bool mouseWasFocused = false;

この後に以下を追加

private bool trigerWasPulled = false;

すぐ下の

public void HandleInput() {

この後に以下を追加

// 右人差し指トリガー
float rTrigger1 = OVRInput.Get(OVRInput.RawAxis1D.RIndexTrigger);

// 押す・離す
if (!trigerWasPulled & rTrigger1 > 0.8) {
    BrowserNative.zfb_mouseButton(browser.browserId, BrowserNative.MouseButton.MBT_LEFT, true,1);
    trigerWasPulled = true;
} else if(trigerWasPulled & rTrigger1 < 0.2) {
    BrowserNative.zfb_mouseButton(browser.browserId, BrowserNative.MouseButton.MBT_LEFT, false,1);
    trigerWasPulled = false;
}

※ここでマウスの左クリックを押したとき、離したときの処理の代わりを記載しています
 zfb_mouseButton の4つ目の引数でダブルクリックを制御できますが、今回ダブルクリックは使用しないので1としています

ClickMeshBrowserUI.cs を以下のように編集

31行目の

public void Awake() { 

の前に変数を追加

GameObject m_vrgRightGrabber;

35行目あたりの

InputSettings = new BrowserInputSettings();

の後に以下を追加

m_vrgRightGrabber = GameObject.Find("Vrg Right Grabber");

80行目あたりの

public virtual void InputUpdate() {

の直前に以下の変数を追加

Vector3 preRayDirection_;
RaycastHit targetHit_;
float maxGrabDistance = 10f;

90行目あたりの

if (hit.transform != meshCollider.transform) {

をコメントアウトして以下のように置き換える

var forward = m_vrgRightGrabber.transform.forward;

var ray = new Ray();
// orgin:レイの原点
ray.origin = m_vrgRightGrabber.transform.position;
// direction:レイの方向
// 0.25fを小さくするとレイのしなりが大きくなる。1にすると真っ直ぐになる。
ray.direction = Vector3.Lerp(preRayDirection_, forward, 0.25f);

targetHit_ = new RaycastHit();

bool vrg_hit = Physics.Raycast(ray, out targetHit_, maxGrabDistance);
preRayDirection_ = vrg_hit ? ray.direction : forward;

// if (hit.transform != meshCollider.transform) {
if (targetHit_.transform != meshCollider.transform) {

110行目あたり

var localPoint = hit.textureCoord;

をコメントアウトして以下に置き換える

// var localPoint = hit.textureCoord;
var localPoint = targetHit_.textureCoord;

ここまでで、右の人差し指トリガーをマウスの左クリックとして利用できるようになります。

VrGrabberでブラウザを操作できるようにする

1.BrowserQuad (FPS UI)にAdd Componentから、VrgGrabbable を追加する

2.Rigidbody のUse Gravity のチェックをはずす

3.Rigidbody のIs Kinematic にチェックをつける

4.以下のスクリプト(StopTest.cs)を作成して、BrowserQuad (FPS UI)にAdd Component

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class StopTest : MonoBehaviour {
    public Rigidbody rb;

    void Start() {
        rb = GetComponent<Rigidbody>();
    }

    void Update() {
        rb.velocity = Vector3.zero;
        rb.angularVelocity = Vector3.zero;
    }
}

※4.ではブラウザを掴んで離したあとに飛んでいかないようにしています

Resize、マウススクロール、ブラウザ進む、戻るをアナログスティックで操作

BrowserInput.cs を以下のように編集

先ほど追加した変数

private bool trigerWasPulled = false;

の後にさらに追加

// Resize用 サイズ初期値
private int curentSizeWidth = 512;
private int curentSizeHeight = 512;

さらにそのすぐ下にある

public void HandleInput() {

の後に以下を追加

// Resize処理 =================================
// 右スティックを右に倒す(サイズアップ)
if (OVRInput.GetDown(OVRInput.RawButton.RThumbstickRight)) {
    curentSizeWidth += 200;
    curentSizeHeight += 200;
    browser.Resize (curentSizeWidth,curentSizeHeight);
}
// 右スティックを左に倒す(サイズダウン)
if (OVRInput.GetDown(OVRInput.RawButton.RThumbstickLeft)) {
    curentSizeWidth -= 200;
    curentSizeHeight -= 200;
    browser.Resize (curentSizeWidth,curentSizeHeight);
}

// ブラウザ進む・戻る ============================
// 左スティックを右に倒す(ブラウザ進む)
if (OVRInput.GetDown(OVRInput.RawButton.LThumbstickRight)) {
    browser.GoForward();
}
// 左スティックを左に倒す(ブラウザ戻る)
if (OVRInput.GetDown(OVRInput.RawButton.LThumbstickLeft)) {
    browser.GoBack();
}

// ブラウザスクロール ============================
// 左スティックを上に倒す(上にスクロール)
if (OVRInput.Get(OVRInput.RawAxis2D.LThumbstick).y > 0.8) {
    BrowserNative.zfb_mouseScroll (browser.browserId, 0, 30);
}
// 左スティックを下に倒す(下にスクロール)
if (OVRInput.Get(OVRInput.RawAxis2D.LThumbstick).y < -0.8) {
    BrowserNative.zfb_mouseScroll (browser.browserId, 0, -30);
}

おわりに

これでVR空間内で主要なブラウザの機能は利用できる状態になったかと思います。文字の入力は今のところキーボードなので、VR空間にキーボードを出すようにしたらより快適になりますね。

Embedded Browserでは、このほかにも特徴に記載したような様々な機能がありますので、この機会に触ってみてはいかがでしょうか。

最後に、8/31のUnity アセット真夏のアドベントカレンダー 2017Limes@XRDeveloperさんによる「Shader Forgeのこと」です!

 

-雑記

Copyright© VR Mastodon , 2017 AllRights Reserved Powered by AFFINGER4.