DEV Community

Takaya Kobayashi
Takaya Kobayashi

Posted on

9 3

Oculus Go で React 360 の開発をはじめられる

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 をインストールするも

✈ ./adb shell
error: device unauthorized.
This adb server's $ADB_VENDOR_KEYS is not set
Try 'adb kill-server' if that seems wrong.
Otherwise check for a confirmation dialog on your device.
Enter fullscreen mode Exit fullscreen mode

などと表示されてなかなか接続できない

半ばヤケクソで再起動を繰り返していたらコントローラが認識されなくなる...

これも調べてみると 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 作れるといいな...!!

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay