スマホとPCで動くWebVRアプリ「VR Flight Simulator」をつくった

WebVRやってみた

 

 

つくったもの

 

個人的にスマホブラウザVRに興味があって、表現の幅をずっと模索していたんだけれど、ブラウザの制約×スマホインタフェースの制約の二重苦で、結局「WebVR!!!」と大見栄を切って出しているコンテンツも「これ360空間にプリミティブメッシュ配置しただけじゃないですか?」「画面が近くなっただけじゃないですか?」と言われるとぐぬう…となるだけだったので悔しかった。

それを打開する一つのヒントになるかもしれない自分なりのコンテンツを作ってみた。着想はこの前のGGJ

 

「VR Flight Simulator」

 

動作環境

PCとスマホだけで動作。ハイスペックPCは不要。スマホも現行モデルならだいたい問題なし。
WebVRなのでネット環境必須。
普及の面を考えると、ハイエンドHMDやハイスペックPCは使いたくなかった。というか自分持ってないし。。。。

インタフェース

PCで操作、スマホを簡易HMDにして装着。
入力はPCブラウザで扱えるものなら何でも使えるためゲームパッドとかも利用可能。
スマホVRにコントローラーを足せるのは大きい。

実装

開発フレームワークはいつも通りPlayCanvasを利用。
自分はゲーム開発から入ったので、マークアップで3D空間を構築するイメージがどうしてもつかめない。
ビジュアルエディタがしっかりあるPlayCanvasはその辺ありがたい。

PlayCanvasにはWebVRスターターキットがあるので、VRビューの実装はノンプログラミングでできるので大変便利。
参考・PlayCanvasでのWebVRサポート

ゲームプレイヤー ←→ スマホVRビューワーの同期にはPhoton Cloudを利用
他のリアルタイム通信エンジンと比べてJavaScriptSDKがしっかりあるので選択。
node.jsでwebsocketサーバーも選択肢にあるが、サーバーの管理が必要なことと細かい実装の変更に対するサーバー実装のコストが大きくなりそうだったので、クライアントの記述だけで解決するPhoton Cloudを採用
PhotonとPlayCanvasのつなぎこみには以前作ったプラグインを利用。

仕組み

つなぎこみまでの流れはこんな感じ。
GGJの時はここまで実装する余裕がなかったので、ゲームプレイヤーもVRビューワーも同roomに詰め込みまくる実装にしていたが、ゲームプレイヤーが複数存在する場合、VRビューワーはすべてのゲームプレイヤーの座標を同期しようとするため、複数プレイヤーが存在する場合VRカメラがパタパタする。なのでその時はVR版ゲームプレイヤーのURLは公開しないという方法でやっていた。

今回はルームの接続手順を変更、ゲームプレイヤーは必ず新規ルーム作成、VRビューワーはパラメーターで受け取ったroomのみに入室する流れにした。これでプレイヤー間で競合してしまう問題は解決。

QRコードの作成はjQery.qrcode.jsを使用。パラメータからの受取なんかも調べたら簡単に実装できた。

あそぶ

操作方法
A…左旋回 D…右旋回 W…前進 F…上昇

ある程度速度が出ると上昇しやすくなると思う。空港(?)はマップ内に4箇所あるのでぜひすべてに着陸してみてほしい。
もちろんこのQRをスマホで読み込むことでスマホがHMDに早変わりする。

大画面でゲームをプレイしたい方はこちら

プロジェクト

PlayCanvasでpublicプロジェクトなのでシーン,ソースコード,アセット等はすべて見ることができるのでぜひ見ていただきたい。複製も可。 (※閲覧にはPlayCanvasアカウントが必要です)

所感

接続方法がネットなので遅延は怖い。環境によっては同期が遅くなって酔う。
いろんな端末で試してみた感じAndroid Chromeの調子がいい感じ。

スマホブラウザVRにインタフェースを拡張する意味では結構アリ。

PlayCanvasの描画性能すごい、これシーン全体で74万ポリ。水面シェーダーはサンプル使いまわしだけどUVスクロールで結構きれい。

まあWebVRとしては、今までにないコンテンツができた気がするので満足。

QRコードを複数台のスマホで読み取ればVR体験のシェアなんかもできてしまうし、この手法はいろんな方向に拡張できるのかも。

 

ということでWebVRアプリを作ってみた。
是非遊んでみてね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA