CrossRoadスマートフォン用の表示で見るCrossRoadAR、MR、VR、Babylon.jsを中心とした技術ブログ。Calendar2015の5日目です。今回は夏のOcuFesに出展した、UnboundedSpace3(US3)の技術的な内容を書きました。US3とは、VR空間に日常やっていることを持ち込んでみるための、UIの実験プロジェクトです。これまでの1と2は写真やドキュメントを見てみる、ということがメインでしたが、3になってウェブブラウジングの機能をつけました。詳細は以下の記事または動画をご確認ください。Space3の技術的な観点を2つにわけて、それぞれ説明していきます。OVRPlayerControllerの中に照準用オブジェクトをくっつける。照準の方向にrayを飛ばす関数を作成する。プレーヤーの操作で実行できるようにする。Packとは、OSSのhtml解析ライブラリです。読み込んだhtmlのタグを解析することで、htmlから特定の情報を抽出することができます。Packの基本的な使い方は以下が詳しいです。Space3では、アクセスしたページから特定のタグを抽出するのに使っています。開発にはUnity5を使いました。上記の紹介ページはC#アプリケーションでの利用方法ですが、Unityでも使用できます。Packのページにて、Downloadを選択して、必要な一式をダウンロードします。"Net20"フォルダに含まれている、HtmlAgilityPack.dllHtmlAgilityPack.xmlの2つをUnityで作ったプロジェクトのPluginsに入れます。導入はこれで完了です。注意すべき点として、netXXは使用する.NET環境のバージョンに依存するようです。当初、net40を入れたところエラーが出てしまいました。Unity5の.NETバージョンは4.0以下です。今回はnet20の中身を入れたところエラーが出なくなりました。HAPでもよいのですが、WindowsにはHAPだと何か別のライブラリとかぶるようです。htmlページを読み込んで指定タグの文字列を抽出するコードの一例を示します。(3)}}上記について、(1),(2),(3)を説明します。抽出式SelectNodesの引数として、htmlタグの中から抽出条件を書きます。抽出条件は、xPathという方式を使います。xPathとは、xmlに準拠した、文字列の特定の構文を見つける仕組みです。どんな書き方があるのか、などはW3Cのサイトに記載があります。正規表現なども使用可能で、ちょっと使うとだいたい使い方がわかる感じです。私の場合、何となく使えそうと思ってxPathの説明をよく読まずに試したため、以下の内容ではまりました。下記のようなHtmlコードがあったとします。href="http://aaa.com"></a>のリンクの中身を取りたいとき、(1)のように、//div[@id='aaa']//a[@href]と指定すればURLの中身を取り出すことができます。href="http://abc.com">・・・</div>のように、直下に<a>があるかないか、という解析をします。再帰的に見てくれるような勘違いをしてまして、気づくのにずいぶんかかりました。そのタグ直下にあるタグのみを検索という概念があります。node変数に格納した値から、innerTextを使うと、タグの中身を取得することができます。特定のアトリビュート(属性)を取り出すには、下記のように取り出したいアトリビュートを指定し、Valueを付けます。Calendar2015に投稿いたしました。下記よりご確認ください。Spaceにすると3次元空間の好きな位置に配置できるようになります。あとはこれをInstantiateなどでVector3で好きな位置に配置することで、3次元空間に配置できます。Space3では、頭の動きに追随するようにマーカーを置き、このマーカによって記事を選択しています。uGUI向けにはPhysics.Raycasterというメソッドをうまく使うとuGUIオブジェクトを選択することができるようですが、開発当時はそこを調べる時間がなかったため、従来通りのRaycastHitを使いました。このように準備しました。OVRPlayerControllerの中に照準用オブジェクトをくっつける。ここのTargetMarkerが該当します。これはPlaneにテクスチャを付け、shaderをUlintにしただけです。照準の方向にrayを飛ばす関数を作成する。プレーヤーの操作で実行できるようにする。iTweenによる記事選択時のアニメーション冒頭に紹介した動画の、開始20秒付近のようなアニメーションです。Vector3(1.0f,1.0f,1.0f),2.5f);を実行しているだけです。Prefabのscale(x,y,z)を0.01にしておき、Instantiate後にScaleToで2.5秒かけて通常のscaleに拡大しています。これをMoveToと同時に実行することで、動画のようなアニメーションを実現しています。当初DK2をかぶって周辺を見回していると、このように向きによって表示が欠けてしまうことがありました。最終的に、@needleさんに原因と対策方法を教えていただきました。@needleさん、ありがとうございます。Planesを1000より大きくする。今回の場合、作っているうちにOVRPlayerControllerとオブジェクトの距離を相当遠い位置にしていました。そのため、遠すぎて描画できなくなっていたようです。Space3の作り方解説は終わりです。明日はwaffle_makerさんによる投稿です。SDK解説編)Meta2のアプリ開発方法はUnityかOpenVRの2択があります。API(Android用...前回の続きです。»ProfileAR、MR、VR、Babylon.jsを中心とした技術ブログです。広く色々な技術を勉強するのが好きで、あれこれ書いています。詳細なプロフィールはこちらをご確認ください。2020)■プライバシーポリシー■こちらに記載しておりますのでご確認ください。■お問い合わせ■こちらよりお願いいたします。月別アーカイブスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。