OcuBen関西 #2
THETAで
モバイルVRコンテンツ開発
2015/11/01 noshipu

THETAって何？
ワンショットで360度のパノラマ画像を
撮影できるカメラ
360度の動画も撮影することができる
360度の空間を保存できる
→VRコンテンツとの相性がいい
最新型だと、ライブビュー機能も搭載
個人でパノラマVRの配信ができる時代に
(出典:https://developers.theta360.com/ja/)

スマートフォン用の公式アプリについて
RICOH THETA
・THETA用アプリ
・スマートフォンからリモート撮影
・スマートフォンにデータ転送や、SNS投稿機能
・最近、動画も読み込んで表示できるように
RICOH THETA S
・TEHTA S用アプリ
・スマートフォンからリモート撮影
・スマートフォンにデータ転送や、SNS投稿機能
・静止画モードではライブストリーミングできる
THETA +
・THETAで撮影した画像の編集アプリ
・フィルタ / トリミング / ビュー形式変更
・SNS投稿機能
・最近、動画も読み込んで表示できるように

「THETA」→「THETA S」でどこが進化したのか
かなり進化している！
・画質向上/夜景も綺麗に
・フィルター設定
・ライブストリーミング
・FullHD動画撮影
・動画時間延長
・撮影モードの動的切り替え
・充電しながら撮影(AC電源からの充電時)
・撮影サイズ変更
・API変更
・本体に高級感がでた(個人の感想)

今日、話すこと

⒈ THETAで撮影したコンテンツを使用したアプリを作る

⒉ THETAのAPIを使用したアプリを作る方法

THETAで撮影したコンテンツを使用したアプリを作る

準備
・Unity
ゲームエンジン。3Dを扱うサービスとかでもよく使われている
・パノラマ画像を貼り付ける球モデル
@warapuriさん提供の「Sherer100.fbx」がおすすめ
・パノラマ画像
THETAで撮影した画像を用意
・Google Cardboard SDK for Unity
モバイルVR(ハコスコ、Google Cardboard、タオバイザー等)で
ヘッドトラッキングを実装したい場合に扱う

パノラマ画像をハコスコで見るアプリを作る その１
Sherer100.fbxと使用したいパノラマ画像をインポート

パノラマ画像をハコスコで見るアプリを作る その２
phong1のシェーダーが「Unlit/Texture」であることを確認
Textureに持ってきたパノラマ画像のテクスチャをいれる

パノラマ画像をハコスコで見るアプリを作る その3
Sherer100をHierarchyに配置
Scaleを(-100, 100, 100)ぐらいに調整

パノラマ画像をハコスコで見るアプリを作る その4
Cardboard SDKをインポート
MainCameraを削除して、CardboardHeadを配置させる

パノラマ画像をハコスコで見るアプリを作る その5
とりあえず動いた！
Unityのバージョンに沿ったXcode対応はこちらで

THETAで撮影したパノラマ動画を使ったアプリについて
@warapuriさんの
「UnityとOculusで360度パノラマ全天周動画を見る方法」で紹介
されていますが、モバイルでも「Easy Movie Texture」を使用するこ
とで、動画も見ることが可能になります。

おまけ：UE4でパノラマ表示 その１
Sherer100.fbxと使用したいパノラマ画像をインポート

おまけ：UE4でパノラマ表示 その２
シェーディングモデルを「Unlit」に変更
Texture Sampleにパノラマ画像のテクスチャをいれて
エミッシブカラーに繋げる

おまけ：UE4でパノラマ表示 その３
UE4でもパノラマ画像が扱える！

THETAのAPIを使用したアプリを作る方法

THETAは開発者がハックできるデバイス
API仕様が公式から提供されているので、
開発者が端末をハックできる！
個人でもTHETAを絡ませた
オリジナルアプリが作れる！
どんなことができるか
・THETAとの接続
・リモート撮影
・ファイルの取得、削除
・端末設定や撮影設定の取得、更新
などなど
詳しいAPI仕様はこちらで

THETAのDeveloper向けサイトもあります
(出典:https://developers.theta360.com/ja/)
API仕様や、THETAのことに関することのお知らせや
開発について相談や、報告できる公式フォーラム
日本はそんな盛り上がっていないが、
英語の方は結構コメントし合ってて盛り上がってるイメージ
日本も色々THETAでハックした事例を書いていきましょう！

THETAアプリ作ってみた
タイムトラベレル
iOSアプリ
- FREE
ティザーサイト
一言で言うと、「プライベートなストリートビューを作れるサービス」
THETAで画像撮影していって、それぞれにリンクをつけていく
まだ、THETA Sが出る前に作ったので、APIはversion1を使用
これ作るついでに、API(version1)をUnityから叩けるプラグインを公開
https://github.com/noshipu/theta-unity-plugin

API version2の登場

PTP-IP通信からHTTP通信に！！！！！
HTTP通信になったことで、便利かつ、簡単に開発できるようになった
・HTTP通信
POSTでJSONを送るだけでAPIを実行できる
・開発が楽
プラグインを書かずに、ワンコード管理でできるようになった
PCで動くコードで、iOS/Androidで動作するようになるので、開発がかなり楽
になった
・つまりUnityでの開発が楽
マルチプラットフォームで書き出せるUnityとの相性が更に増した！

Open Spherical Camera APIに準拠
Google社のOpen Spherical Cameraに準拠されている
→同じ規格の共通のAPIを使ったカメラであれば同じコードで動く
今後色々と便利なアプリとかSDKとかでてきそうな予感
THETAの独自機能のためにAPIを拡張されている
THETA専用のものは、コマンド名やパラメータ名の
先頭に「_」がついている
(例)
camera._getVideo
camera._getLivePreview
_shutterVolume
_wlanChannel
iris360

現状、APIの互換性はないので注意！
API v1
NEW
API v2

UnityからAPI実行させるコード
// ヘッダー情報
Dictionary<string, string> header = new Dictionary<string, string> ();
header.Add ("Content-Type", "application/json;charset=utf-8");

// URLとJSON情報
string url = "http://192.168.11.1:80/osc/commands/execute";
string json = "{\"name\":\"camera.startSession\",\"parameters\":null}";
byte[] postBytes = Encoding.Default.GetBytes (json);

// 送信開始
WWW www = new WWW (url, postBytes, header);
yield return www;
基本的にはWWWクラスの使用でいけます。
ライブビューは通信完了までに処理を走らせないといけないため、
HttpRequestを使用しています。

ライブビュー機能
機能
接続形式
画像サイズ
FPS
ファイル仕様
ライブビュー
Wifi/API
640x320
10
Equirectangular
MotionJPEG
USBライブストリーミング
USB
1280x720
15
Dual-Fisheye
MotionJPEG
HDMIライブストリーミン
HDMI
1920x1080
30
Dual-Fisheye
グ
1280x720
YCbCr
720x480
PCから転送するのもできるが、基本的にモバイル開発であれば「ライブビュー」を使うしか
ないが、画質が低いが、Equirectangular形式なのは使いやすい。
10fpsで端末の画像を書き換えるのもなかなか重い処理なので、画像サイズ的には限界か
も…？

THETAアプリのApple審査
THETAと連携させるアプリをそのまま提出したら、リジェクトしました
その時のメッセージ一部：
We began the review of your app but are not able to continue because we need the associated hardware to fully assess your app features.
RICOH THETA
At your earliest convenience, please send the necessary hardware/accessory to the address below.
NOTE: Please include your app name and app ID in the shipment; failure to provide this information can delay the review process.
内容はTHETAが無いと確認できないので、
デバイスをアメリカに送ってくれという内容…

THETAアプリのApple審査
THETAと連携させるアプリをそのまま提出したら、リジェクトしました
その時のメッセージ一部：
We began the review of your app but are not able to continue because we need the associated hardware to fully assess your app features.
RICOH THETA
At your earliest convenience, please send the necessary hardware/accessory to the address below.
NOTE: Please include your app name and app ID in the shipment; failure to provide this information can delay the review process.
内容はTHETAが無いと確認できないので、
デバイスをアメリカに送ってくれという内容…
解決策:
アプリとデバイスの動作の確認ができる動画を撮影し、
その動画を送ることで審査通過できる

まとめ
THETA Sの登場で、パノラマ画像を使ったアプリ開発がかなり捗るように！
特にパノラマでのライブビューは今までに無い体験ができます。
これから色々な開発者がTHETAを使って、
どんな新しいコンテンツが世の中にでてくるのかすごい楽しみです。
興味のある人はTHETAを使ってイノベーション起こしましょう！
興味あるけど、THETA持ってない人は、
まずは帰りにヨドバシ行くか、Amazonでポチるところから始めましょう
ちなみに今買うならTHETA Sをおすすめします！！

最後に自己紹介
@noshipu のしぷ
Live2Dアプリとか、モバイルVRとか作ってます
仕事はゲーム系のサーバーサイドとか、
アプリエンジニアとか
ハッカソンに出始めました

質疑応答