URLひとつでVR！

- スマホブラウザ x VRのススメ -

津田良太郎

@utautattaro

 

3４ slides

10 minute

画像：いらすとや

本日の資料はこちらから

About me

GMOクラウドの津田です。

 

PhotonやPlayCanvas等

ゲーム開発のための

ツール・ミドルウェアの

啓蒙活動をしています。

 

最近はＷｅｂ回りが多いですが

電子工作なんかも好きです

utautattaro.com

本日の資料について

  • 先ほどツイートしました
  • ライブプレゼン機能があります
  • URLの/live以下を消すと機能なしverになります
  • 少しデモがあります

本LTの結論

スマホブラウザ x VRがアツい
開発にはPlayCanvasがお勧め

アジェンダ

  • 序論　そもそも
    • VR元年
    • WebVR　スマホVR
  • 本論
    • アカデミックな話
    • スマホブラウザVRに至った理由
    • PlayCanvas WebVR
    • PlayCanvasのいいところ
  • 結論
  • むすび

序論　そもそも

  • 2016年はVR元年らしい
  • 多くのHMD, VRコンテンツが登場
  • その中でも"WebVR"が徐々にキテる

ＷｅｂＶＲ ? 

OculusやHTC Vive等のHMDをWeb上でうごかそう、というもの
JSだけでVRできる！『WebVR』ことはじめ | HTML5Experts.jpより引用
 

URLひとつでVR体験をシェア

スマホブラウザ x ゴーグル ≠ WebVR

 

Google、2017年1月にWebVRに対応したAndroid Chromeをリリース - VRInside

まぎらわしいので

定義( Definition in this talk )

  • WebVR
    OculusやHTC Vive等のHMDをWeb上でうごかそう、というもの
     
  • スマホVR
    スマホ x ゴーグルで楽しむVRアプリケーション
    • スマホネイティブVR
      ネイティブアプリとしてスマホにインストールするタイプ
       
    • スマホブラウザVR
      Webアプリとしてスマホブラウザで閲覧するタイプ

今日は

スマホブラウザVR

の話をします！

本論

良いなと思った経緯を時系列で紹介します

2016年 4月

新卒入社

一年目の新人です

その前は

神奈川工科大学の白井研究室にいました

研究領域：エンタテイメントシステム・ＶＲ

自分のルーツ

もともと工業高校(電気・機械)

大学から情報メディア

 

四角い画面だけで完結しないものづくりが好き

学生時代一番バズった(怒られた)もの

自分の思想

 

　Virtual　　　　Material

実質的　　　　物質的
 

VR = EXPERIENCE

VR = 物質的には別だが
　　　　　実質的には同様である

VR = EXPERIENCE

「へーすごい」で終わらせないための

笑顔を利用したエンタテイメント体験の客観評価手法を研究

“Face à la mode: A new immersive entertainment system that can train body and facial expressions”

Yuria Suzuki, Ayumi Ando, Ryotaro Tsuda, Akihiko Shirai, , Virtual Reality International Conference – ACM VRIC 2015 Proceedings

 

ExPixel FPGA: Multiplex Hidden Imagery for HDMI Video Sources,

Hisataka Suzuki , Rex Hsieh, Ryotaro Tsuda , Akihiko Shirai, SIGGRAPH 2015 Posters

 

複数の笑顔認識デバイスの同時使用によるVRエンタテイメントシステムの評価，

津田 良太郎, 鈴木 百合彩, 安藤 歩美, 鈴木 久貴, 白井 暁彦，第20回日本バーチャルリアリティ学会大会

 

エンタテイメント体験前後の笑顔による体験評価

津田 良太郎，鈴木 百合彩，安藤 歩美，白井 暁彦, Entertainment Computing 2015

CONTENTS         < 　　   EXPERIENCE

技術     <　   認知心理学，大脳生理学

                      表情筋，感情と表情の関係

大学四年の時にやっていた勉強

流行りのVRの技術トレンドからは
どんどん離れていった

そして入社

昨今のVR・HMD開発事情

  • 最新HMDはハイエンドPCを求める

    • 没入型のVR体験には、3024x1680（片目1512x1680）の解像度と秒間90フレームの描画速度が求められ、
      HMDにおけるモーションセンサーのレイテンシ（遅延）は20ミリ秒以下に抑える必要があるとのこと。
      　　　　　　　　　「GeForce GTX VR Ready」とは一体何なのか？ CESでNvidiaを直撃 | Game*Spark - 国内・海外ゲーム情報サイト　より抜粋
       
    • 自分の持っているメインマシンでも追いつけないスペック
       
  • ​HMDも高価格。個人開発で買うのはちょっと考えてしまう値段
    ​
  • じゃあスマホVRやる？
    • Cardboardやハコスコは画期的でとても便利
    • Appleデベロッパー登録の壁, Android買う？
    • モバイル端末への苦手意識etc...

完全に取り残された　＼(^o^)／


スマホブラウザ x VR

そこで

スマホブラウザ x VRの

いいところ悪いところ

  • ユーザー視点
    • HMDを必要としない
    • アプリをインストールする必要がない
    • スマホとゴーグルのみで完結
  • 開発者視点
    • 接続してビルドする必要がない
    • プラットフォームの違いにネイティブほど縛られない
    • マーケットを通すことなく配信可能
  • 悪いところ
    • パフォーマンスはネイティブに比べ落ちる
    • できることはネイティブに比べ少ない
    • 集客やマネタイズは自分でやる必要有り

WebVR スマホVRだと

mozilla  A-Frameが有名

 

ただ自分の場合

  • ＨＴＭLで3D空間を構築するイメージがつかめない
  • ３Ｄ開発にはビジュアルエディターが欲しい
  • ＷｅｂＧＬに関する知識が乏しい
  • 配信する能力が乏しい(サーバー用意，モバイル対応等)
  • Unityは3年くらいやっている
  • Web周りに関する知識は乏しい

PlayCanvas WebVR

そこで

demo

What is PlayCanvas

ブラウザ上で動作するクラウド型HTML5 + WebGL3Dゲームエンジン

無料から使えて
開発から公開までワンストップ

オープンソース

マルチプラットフォーム(Web)

ビジュアルエディター

リアルタイムシャドウ・物理

WebVR Ready

スマホブラウザでも動作

demo

PlayCanvasの良いところ

便利なキットがある

Model Viewer Starter Kit

  • 手軽に3Dモデルを公開できるKit
  • モデルをぐりぐり見れるインタフェースが実装済み

    VR Starter Kit
  • 手軽にスマホVRアプリケーションが作れるKit
  • スマホのセンサーからVRトラッキング
  • サイドバイサイドビュー　等が実装済み

demo

PlayCanvasの良いところ

Editorが優秀

  • HIERARCHY, INSPECTOR...わかりやすいレイアウト
  • code editorもある。補完も優秀
  • Javascript, GLSL, HTML, CSSが書ける
  • fbx, obj自動インポート
  • WebGLに関する深い知識不要ではじめられる
  • Rigidbody, collision...
  • ゲームエンジン慣れしている人なら敷居は低い
  • 無料の公開環境もあり、エディタから一発

demo

PlayCanvasの良いところ

高即時性

  • ノンコンパイル・ノンリローディングでシームレス開発
  • 全ての端末からリアルタイムに結果確認
  • 複数ユーザーでのオンラインペアプロなんかも可能

demo

最近の開発風景

PlayCanvasの良いところ

軽量

  • 全てjavascriptで構成されたWebGL特化型エンジン
  • iframeで組み込める・スマホで動く軽さ
  • タッチインタフェースのイベントも多数用意
  • 自分のiPhone 5sでもギリ動く

demo

PlayCanvasの良いところ

開発者との距離が近い

  • forumの質問にCEOとCTOが答えてくれる
  • twitter監視してくる

２０１６年1月 PlayCanvasを触り始めた頃　まだ白井研の学生

demo

PlayCanvasの良いところ

Open & Share

  • 基本の設計思想はOpen & Share
  • 全てのパブリックプロジェクトは閲覧可能
  • リリース情報をみんなで共有 & 楽しむ
     
  • 人のプロジェクトを参考にできる
  • forkもできる
  • 困ったときは聞ける
  • 英語ミスっても大目に見てくれる

demo

HTC Viveが出たときも
いち早く自作APIを公開&Share

enterVr();

Subtitle

速報

https://blog.playcanvas.com/webvr-support-in-playcanvas/

PlayCanvasを使ったら

  • ＨＴＭLで3D空間を構築するイメージがつかめない
  • ３Ｄ開発にはビジュアルエディターが欲しい
    　→　優秀なビジュアルエディターで解決！
     
  • ＷｅｂＧＬに関する知識が乏しい
    　→　PlayCanvasがやってくれるので問題なし！
     
  • 配信する能力が乏しい(サーバー用意，モバイル対応等)
    　→　無料でplaycanvas上にデプロイ可能！
    　　　　タッチインタフェース向けイベント有り！キット有り！
     
  • Unityは3年くらいやっている
  • Web周りに関する知識は乏しい
    　→　ゲーム開発の感覚でWebGLコンテンツが作成可能！
    　　　　非ゲームへの応用も！

結論

スマホブラウザ x VRがアツい
開発にはPlayCanvasがお勧め

さいごに

PlayCanvas

ワークショップ開催します！

•WebGLで動くブラウザゲームを
PlayCanvasで簡単に作っちゃおう【初級編】

•2016/11/24 (木) 19:00 ～ 21:30

•セルリアンタワー11F（東京都渋谷区桜丘町26-1 ）

•ご参加はこちらから

デジゲー博参戦予定！

11/13(日) 秋葉原UDX

PlayCanvas運営事務局　B-20ab

当日はなんか面白いデモ用意します

ありがとうございました！

津田良太郎

@utautattaro