Oculus Go で React 360 の開発をはじめられる - dev.to/jgs

Oculus Go を買った https://note.mu/jgs/n/nd31e52697614
ちなみに、この FANBOX の記事で NetflixVR は左上の Void theater というところからゴロ寝追従モードに入ってくれることをコメントで教えてもらったので快適になりました


Oculus Go にはそれなりなブラウザが搭載されていることを Oculus GoのブラウザについてのWeb開発者目線からのまとめ - Qiita を読んで知ったので、WebVR はどんなもんかと見物するために買ったといっても過言ではない
だいたいの流れは上述の記事通りなのだけど、いくつかハマったので記しておく
まずは Oculus Go を開発者モードにする
これは UE4 Oculus GoでVRアプリの開発を開始するまでの方法 - Let's Enjoy Unreal Engine ここに詳しい
https://dashboard.oculus.com から団体を作るとスマホの Oculus アプリからデバイスの「その他の設定」から「開発者モード」という項目が出現するのでこれをトグルする

_
chrome://inspect/#devices

にアクセスして USB を接続すると Chrome のインスペクタから見えるのだが、

_
Pending authentication: please accept debugging session on the device.

と表示されてなかなかアクセスできない
Oculus Go で許可すると見れるようになるらしいが、それらしいダイアログが全く表示されない
Oculus の Developer 向けのページを見ても Windows 向けの zip は公開されているが、Mac には特に言及がない
adb がいるのかな?と推測して Android Studio をインストールするも

_

などと表示されてなかなか接続できない
半ばヤケクソで再起動を繰り返していたらコントローラが認識されなくなる...
これも調べてみると Oculus のボタンと戻るボタンを長押しすると再度ペアリングしてくれるようだ
それからいろいろ探ってみるも、全く Oculus Go で許可できなくて、アプリから設定をいろいろ変えてみたりして再起動したタイミングで起動時に許可を求めるダイアログが出た!!!!!!!!!!
いろいろ探ってみるとどうやらアンロックパターンを設定するとデバッグを許可するダイアログが出ないみたいだ...
また、許可する際に「このマシンから常にデバッグできるようにする」にチェックを入れて許可してもアンロックパターンを設定すると吹き飛んでしまうよう
なので、インスペクトする際にはとりあえずアンロックパターンを削除するのが定石っぽい
このアンロックパターンを削除するのも結構鬼門で、「Oculus 暗証番号」とかいうのを求められるのだが、正規ルートをなぞってきてもそんな番号を設定したおぼえはない
仕方ないので「Oculus 暗証番号をリセット」からリセットするのだが、リセット画面では8桁以上の入力を求められるのに実際の暗証番号入力画面では4桁しか入力できない謎仕様で合ってるんだか合ってないんだかよく分からない番号をとりあえず入力するとアンロックパターンは削除できる...。
インスペクタは
こんな感じで、ゴーグルをかぶらなくてもデバッグできるので楽そう〜とおもった
が、ブラウザの360度モードに入ると console にエラーを上げて死んでしまうのだ...
しょうがないので360度モードの時はコンソールやネットワークだけをとりあえず見れる程度におもっておく
さて、WebVR のことはあまり知らないのでとりあえず普段使っている React の

_
Learn Once Write Anywhere

を試すために ReactVR を触ってみようとおもったら、知らない間に React 360 に改名していたようだ
ドキュメントを読むに、ReactVR は内部で使うことになって2つに分裂してしまったので元 ReactVR の方が React 360 になったらしい
チュートリアルに従って作っていく
リポジトリ: https://github.com/e-jigsaw/Hello360
適当なディレクトリを切って

_
npm install react-360-cli

_
react-360 init Hello360

するとスキャフォールドを作ってくれて

_
npm install

がはじまるんだけど Electron のインストールとかもはじまって、何に使うんだ...みたいな気持ちになった
_
npm start

すると

_
localhost:8081

が立ち上がるのだが、シンプルな html が表示されるだけで何も出ない...
よくよくドキュメントを読んでみると

_
localhost:8081/index.html

にアクセスしろと書いてあるのでこちらを開くと CLI でビルドがはじまる
ビルドが完了すると360度見回せるビューが出現する!!
ソースを編集してリロードすると素早く反映してくれる謎技術。察するに React Native まわりの技術にのっかってる雰囲気がある
チュートリアルに従って VR ボタンを伴ったカウンターを作った
ブラウザの360度モードだと動画を撮影する手段が見当たらなくて困っている。解決方法を知っている方はコメントいただけると助かります...!!
とりあえず今日はこの辺で。作りたいものを考えはじめたんだけど、WebVR(標準は WebXR として策定されるらしい?)だと UI が Web のそれが全く通じない気がしたのでどういう UI がいいのか考えるのが楽しそう
Scrapbox Meetup #4 でも三次元で探索するにはどういう UI がいいか?という話題が LT で上がっていたが、確かに現在の Web のインターフェースは二次元で探索するのに適した UI だとおもうので三次元空間の面には持っていけるだろうが全体の体験の設計としては甘そう
Oculus Go のホーム画面の UI も結局ポインティングデバイスを使ってのソレなのでまだまだ、という感じがする
憧れ100%だけど
みたいな UI 作れるといいな...!!

#oculusgo #react360
original: https://dev.to/jgs/oculus-go--react-360--29lg
#20180526 #0526

関連ページとランダムに選ばれたページ