NTTコム・CodeSprintオンラインハッカソン 最優秀賞受賞Repo
https://sandabu.github.io/SkywayVR/app/vr/build/
SkywayVRは1:1のコミュニケーションツールです．
- iOS safari 11
- iOS Chrome 63.0.3239.73
- Desktop Mac Chrome 62.0.3202.94（Official Build） （64 ビット）
- スマートフォン + スマートフォン向けVRヘッドセットの利用を推奨します．PC / SP， PC / PCも可能です
- バックライト・スリープが自動でONにならないようにゲスト・ホストユーザーのスマホ設定から行います．
- iPhoneでは，iOS/Safari 11からWebRTCに対応しているので，最新版でないと動きません．
- ドメインにアクセスします．
- 最初にホストユーザが「ホストとして入室する」をクリックし，場所を選んで入室します．
- 「Your id is XXX」と表示されたら，ゲストユーザにIDを伝えてください．表示されない場合はリロードしてください．
- ゲストユーザがドメインにアクセスします．
- 「ゲストとして入室する」をクリックし，場所を選び，3.で得られたIDをPeer IDに入力し，入室します．
- フロントのIDパネルが消え，アバターが表示されたら会話することができます．
- 画面左上にLikeボタンがあります．このボタンを注目すると相手に「いいね！」を送ることができます．
- いいねを受け取ると，アバターがいいね！して，効果音が鳴ります(スマートフォン未対応)
2016年はバーチャルリアリティ元年とも言われ，今年もその注目は常に集めています．しかし，VRヘッドセットとVRコンテンツを動かすPCは未だに高価であり，一般的とは言えません． そこで，スマートフォンをHMDとしたハコスコやGoogle Cardboardが台頭したことにより，没入感は低いですが，手軽にVR体験をすることができます． VRコンテンツは通常，UnityやUnreal Engineなどのゲームエンジンで開発され，アプリとしてAppStoreやGooglePlayからダウンロードする必要がありますが，2017年に正式リリースされたFacebook社のReactVRはReactNativeベースでWeb上で動かすことができます． 今回，SkywayとReactVRを組み合わせることによって，よりイマーシブな次世代のコミュニケーションを提案しました．
なぜVRなのか？
現在のリアルタイムコミュニケーションツールは，場所を選ぶことができません． SkywayVRならば，様々なロケーションでコミュニケーションが行えます．例えば，リゾート地をバックにミーティングをしたり，友達とのコミュニケーションにおしゃれなバーで話したり... 場所を変えることによって，より円滑なコミュニケーションにし，体験が向上されると考えます．
NTTコミュニケーション科学基礎研究所の大塚ら(2013)[1]は，遠隔コミュニケーション環境では，非言語情報が十分に伝達されないことが，不自然なコミュニケーションである原因と指摘してます． SkywayVRを用いると，その頭部の動きが相手のアバターに反映されます．首を縦に振ることによる「肯定」，横に振ることによる「否定」などのノンバーバルコミュニケーションがアバターを介して表現でき，平面ディスプレイでビデオチャットよりも高い臨場感を感じることができます．
また，現在，若者のコミュニケーションツールとしてLINEが一般的です． LINEの特徴的な機能は「スタンプ機能」です．スタンプはメッセージを送るよりも手軽に意思表示をすることができます． SkywayVRでも，「いいね！機能」を実装しています．ボタンを見るだけで，その会話内容に対して気軽にリアクションすることができます．
[1]大塚和弘, 熊野史朗, 松田 昌史, 大和淳司：「MM-Space: 頭部運動の物理的補強表現に基づく会話場再構成」，情報処理学会論文誌，Vol. 54, No. 4, pp. 1450-1461, 14 April 2013
10~30代・新しい物好きのイノベータ・アーリーマジョリティ
- インデックスページによる場所選択
- VR空間でのボイスチャット機能
- 頭部Rotation情報伝達
- いいね機能(詳細はHow to useより)
- ReactVR
- Skyway
- Semantic UI https://semantic-ui.com
- jQuery https://jquery.com/
- 「Your id is undefined」と表示されたら，リロードしてください
- 一部スマートフォンではアバターが表示されるまで時間がかかる場合があります．
- 「Click to dump」をクリックするとデバッグ用としてconsoleにPeerIDが表示されます．
- 音声が出力されない場合は，リロードしてください．
- インデックスページを作成し，PeerId直打ちをしないUX・スマホ対応
- SkywayとReactVRとのデータやりとり
- いいね機能
- 頭部Rotation伝達機能
ReactVRでのコンポーネントライフサイクルの中で，getUserMediaが取得できない
ReactVRはReactNativeベースで動いていますが，特徴的なのはWebWorker上で動いていることです． スマートフォンの加速度ジャイロセンサーから得られた情報をディスプレイに高速でレンダーしなければ，人間が期待する風景と，実際に見る風景との乖離が発生し，いわゆる「VR酔い」が発生します． WebWorkerはJSでマルチスレッドを実現するAPIであり，これを用いることにより，VR酔いを回避しています． workerはwindow直下のグローバル空間とは異なるので，メモリの共有ができず，WebRTCに必要なgetUserMediaを呼ぶことができませんでした．
Workerとグローバル空間でデータをやりとりする唯一の方法は，postMessage関数を呼び，文字列でやりとりすることです． そこで，Skywayがworkerと架け橋となるようにSkywayBridgeというクラスを作ました．具体的には，ピアとのやりとりを行い，また，Workerを通じてReactVRにメッセージを送受信するクラスです． ReactVR側・Skyway側でそれぞれpostMessage関数と，イベントリスナを実装し，この問題を解決しました．
例えば，HeadRotation情報はReactVRからSkywayBridgeに渡され，BridgeからSkywayを通じて送られ，相手側のdataConnから取得し，それをまた，ReactVRへ送信するフローとなっています．
ReactVRは今年正式リリースされたもので，リファレンスが少ないです． 新しい技術なので，誰もやったことがないものをテーマに企画・開発を行いました．
また，VRにおけるスタンプ(いいね機能)は未だに実装された例がありません． 新時代のコミュニケーション方法の一つを提案することで実験的な開発となりました．
例えば，インデックスページのUI/UXや，SP対応などです．
すぐに始められます．
ヘッドホンをした時，いいね！されると，アバター側から聞こえます． 通常の音声には指向性はありません．
iOS/Safari11よりWebRTCが対応され，これで主要ブラウザでは全てWebRTCに対応しました． スマートフォンVRとの組み合わせに興味を持ち，この企画を行いました．
VRエンジニアというと，UnityにてC#，Unreal EngineにてC++での記述がメインとなり，ジャンルの違うWebエンジニア的には，興味はあるが，学習コストが高いという印象があるという意見を聞いたことがあります． WebVRはA-frameやReactVRなどのフレームワークはありますが，代表的なコンテンツは未だにありません．SkywayVRを例に，WebエンジニアでもVRコンテンツが作成できることをアピールしたいと思います．
- Golden_Louvre by Zeljko Soletic
https://www.flickr.com/photos/136386099@N02/21597873406/
- Day for perfect reflection as lake by Graeme Davidson
https://www.flickr.com/photos/gdavidson/38498464661/in/pool-360degrees/
- 5000兆円ジェネレーター super
https://yurafuca.github.io/5000choyen/
- いいねボタン
- Riku 3D Face(https://sketchfab.com/models/35623d6dca4b4fafbe154cf21a8882d3) by Rikuvampire(https://sketchfab.com/Rikuvampire) is licensed under CC Attribution(http://creativecommons.org/licenses/by/4.0/)