DeNA TechCon2016 360VR Live Streaming

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
360度/VRライブ・スト
リーミングのはなし
TechCon 2016
Jan 29, 2016
DeNA TechCon
Takeyuki Ogura
システム本部技術開発室
DeNA Co., Ltd.

話すこと
n  360度VRライブ・ストリーミング
⁃  ⼀般ユーザーが⼿持ちの360度カメラで配信するようなことを想定
•  ⾼価な改造カメラで両眼視差を利⽤した⽴体視のような話はしません
n  Keyword
⁃  virtual reality, live streaming, ﬁsheye lens, 360 camera, cardboard,
Gear VR, Entaniya, GoPro, RICOH THETA, projection, viewing angle,
equirectangular, image height, stitching, OpenGL, shader, GPU,
texture movie, capture, H.264, RTMP, HLS
2

⾃⼰紹介：⼩倉豪放
n  エンジニア（45歳）
⁃  ルーツはゲーム系
⁃  専⾨：CG、GPU Computing
⁃  プロトタイプ ⇄ ゲーム、サービス制作
n  趣味
⁃  読書
⁃  旅⾏
⁃  ガラクタづくり
n  出⾝
⁃  東京都
3

製作ゲーム・タイトル（サポート、プロトタイプを含まず）
n  Virtua Fighter 2 (Arcade)
⁃  2D表⽰全般
n  Virtua Fighter 4 (Arcade)
⁃  モーション・ライブラリ
⁃  レンダリング、イフェクト
n  Virtua Cop 2 (Arcade、Saturn)
⁃  破壊物、乗り物（物理エンジン）
n  Sonic the Fighters （Arcade）
⁃  キャラクター・モーフィング
n  Naomi Library (Dream Cast)
n  Shenmue Ⅰ (Dream Cast)
n  Shenmue Ⅱ (Dream Cast)
⁃  モーション・ライブラリ
⁃  レンダリング・ライブラリ
⁃  イフェクト全般
n  Ninety Nine Nights（Xbox360）
⁃  オプティマイズ
n  Aqua Forest（iOS）
n  PHYZIOS Studio（iOS, PC）
n  PHYZIOS Sculptor（iOS）
⁃  レンダリング、UI
4
Credit Name:
Takeyuki Ogura or Goho Ogura

コンピューター・エンターテイメント業界貢献
n  CEDEC運営委員
•  技術ロードマップの調査、招待セッション、公募セッションの選定
n  CEDEC（Computer Entertainment Developers Conference）
⁃  毎年８⽉９⽉に横浜で開催される⽇本最⼤のゲームカンファレンス
n  CESA（Computer Entertainment Supplierʼs Association）
⁃  ⼀般社団法⼈コンピューターエンターテインメント協会
規模 2015 2014
セッション数 224 236
展⽰ブース数 51 57
スポンサー数 69 70
参加者総数 6373 6564

360度/VRライブ・スト
リーミング

VR市況まとめ：既に進化は分岐
ヘビーなVR
n  PC or コンソール
n  専⽤ヘッドセット
n  専⽤UI
n  ポジション・トラッキング〜5㎡
n  主なコンテンツ＝ゲーム
n  主要なヘッドセットが2016春発売開始
⁃  恐らくGDC2016（3/14-3/18）前後
ライトなVR
n  スマートフォン
n  （Cardboardの類）
n  UIは特になし
n  ポジション・トラッキングなし
n  主なコンテンツ＝360度動画
n  2016年１⽉CESで多くの360度カメラ
が発表。春から中頃にかけて、次々登場
n  YouTube, Facebookは既に360度動画
に対応済 7

VR市況まとめ：規模（グローバル）
n  ハイエンドPC
⁃  Steamユーザー数
n  コンソール
⁃  Xbox One
⁃  PS4
n  ハイエンドスマホ
8
2015年11⽉NVIDIA発表：
VRを問題なく楽しめるPC
2016年 1300万台
2020年 1億台

最後の公表値：
2014年11⽉ 1000万台
VGChartz発表：
2015年8⽉ 1325万台
総務省H27⽩書グローバル市場
動向
2014年スマホ12億台
うち40%がハイエンド
2015年3⽉DEGICA発表：
DEGICA=Steamの代理店
2014年1⽉ 7500万⼈
2014年9⽉ 1億⼈
2015年3⽉ 1億2500万⼈

2015年11⽉25⽇SCE発表：
3020万台
1300万台
1億2500万⼈
1300万台
3000万台
〜億台

9
VRはスマートフォンの⽅が⼤きな市場
になるだろうと⾔われている

VR市況まとめ：コンテンツ
n  プラットホーム
⁃  Oculus Store（GearVR⽤）、Oculus Share（Oculus Rift⽤）
n  ニュース
⁃  ソニー平井社⻑VRゲーム「100タイトル投⼊」を宣⾔
⁃  Oculus Story Studio：Short Film ”Henry” 2016Q1
n  カンファレンス
⁃  SWSX VR/AR TRACK
⁃  VRDC (Virtual Reality Developers Conference)がGDC2016と並⾏し
て開催
10

ヘビーなVRのコンテンツの戦況
n  3DプロフェッショナルのVR先⼈達の知恵
⁃  ポリゴンでVRの世界を作り込むのは⼤変な作業
•  ディスプレーでは気にならなかったポリゴンのめり込み等が⽬⽴つ
•  ビルボードが使えない
⁃  VR空間のキャラクターはより⼀層作り込む必要がある
•  キャラクターを出せばいいというものではなくて、ユーザーを意識しているように演
出するAIが必要
⁃  市場ができるまで１３年、それから参加すると表明する⼤⼿もある
11

ライトなVRのコンテンツの戦況
n  Youtube, Facebookが対応している
n  360度カメラのコストパフォーマンスはどんどん向上している
⁃  カメラがあれば誰でも撮影できる
⁃  ⼀般ユーザによる投稿も始まっている
n  ライブ・ストリーミング・サービスはあまり⾒ない
12

13
360度VRライブ・ストリーミング

360度VRライブ・ストリーミングと、普通のライブ・ストリーミ
ングとの違い
n  本質的に普通のライブ・ストリーミングと同じ
n  違うところ
⁃  360度の情報を持つ映像を流す
•  そうした映像つくる ← 360度カメラ
•  送られてきた360度の情報を持つ映像のうち、視線の⽅向の映像を切り出す ← アプ
リ
14

15
（360度ならではの部分）

360度の情報を持つ映像（例：正距円筒図法）
16

アプリ：
360度の情報を持つ映像のうち、視
線の⽅向の映像をリアルタイムに
切り出す
例：視線⽅向、⾞前⽅を⾒るユーザー
例：視線⽅向、⾞後⽅
を⾒るユーザー
360度の情報を持つ映像

視線⽅向をアプリに伝える⽅法
n  画⾯ドラッグ
n  ジャイロ・センサー
18

19
360度の情報 ⇄ 平⾯
投影（ProjecXon）

正距円筒図法（Equirectangular ProjecNon）
n  360度動画で使われる投影法のデファクト・スタンダード（360カメラのデー
タ, YouTube）
n  地図投影法の１つ
n  緯度、経度が直⾏、等間隔
n  ⾼緯度の情報が東⻄に伸びている
20
正距円筒図法
引⽤：
hYp://user.numazu-ct.ac.jp/~tsato/tsato/
document/mapcenter460/
⾈型多円錐図法

ちなみに
n  メルカトル図法
⁃  正距円筒図法の東⻄に伸ばした⽐
率で南北⽅向にも伸ばしたもの
21
正距円筒図法
メルカトル図法（正⾓円筒図法）
引⽤：
hYp://user.numazu-ct.ac.jp/~tsato/tsato/
document/mapcenter460/

正距円筒図法（Equirectangular ProjecNon）
22
図引⽤：hYp://marina.sys.wakayama-u.ac.jp/~tokoi/?date=20090912
(u, v)f(u, v) = (u, v)
f:恒等写像 slice, stack番号がそのまま(u, v)に
0 < u < slices
0 < v < stacks

Slice / Stack の⽅向
Slice Stack
23 hYp://yourhealthiestyou.com/quick-snacks-yummy-recipes-for-quick-treats-to-keep-you-full-saXsﬁed

まとめ
n  360度VRライブ・ストッリーミングは本質的に普通のライブ・ストリーミン
グと同じ
n  違うところ
⁃  360度の情報を持つ映像を流す
•  そうした映像つくる ← 360度カメラ
•  送られてきた360度の情報を持つ映像のうち、視線の⽅向の映像を切り出す ← アプ
リ
n  360度映像のデファクトスタンダードなフォーマット
⁃  正距円筒図法
•  地図投影法の１つ
24

ところで
n  360度カメラで撮影した映像や、プレビューされる映像が、そのまま正距円筒
図法というわけではない
25

Dual Fisheye by “RICOH THETA S”
26

Fisheye by “Entaniya Fisheye 280”
27

360度カメラで撮影した360度動画を⾒るまで
n  ⽣データはレンズの数だけ映像が分かれてる
⁃  結合 → スティッチングと⾔う
n  スティッチングして正距円筒図法に座標変換すると360度動画として再⽣でき
るデータになる
⁃  通常、カメラ会社の提供するPCアプリ、スマホアプリで、この変換を⾏う
28

問題の整理
n  正距円筒図法は球体にそのまま貼れる
n  ⿂眼レンズは⿂眼レンズの都合で映像を撮っている
29
正距円筒図法球体（⽬標）⽣の映像
そのまま貼ればいいアプリで変換必要
n  動画なら変換に時間かかってもいい
⁃  ライブ・ストリーミングは？
アプリで変換必要
リアルタイムに変換必要

30
⿂眼レンズの都合？

⿂眼レンズがやってること＝射影
31
像⾼：y ＝ｆ（θ）
O
結像⾯
天頂
20°
40°
60°
80°
100°
120°
140°
160°
⼊射⾓：θ様々な⽅向から来る情報を
2Dの映像にまとめる
⿂眼レンズを横から⾒た図

⿂眼レンズの射影の種類
32
引⽤：hYp://fit-movingeye.jp/products/opXcs/consumer_opXcs/fi_series/fi_02.html

実際に２つの例で計算してみます
n  例１：単眼
⁃  Entaniya 280 + GoPro Hero 4
n  例２：２眼
⁃  RICOH THETA S
33

例１：単眼：Entaniya 280
n  視野⾓： 280
n  射影⽅式：等⽴体⾓射影
n  焦点距離： f = 1.07(mm)
n  ⼊射⾓： 0 < θ < 140
n  像⾼＝結像⾯での画像中⼼からの距離(mm)
⁃  y = 2f sin (θ/2)
⁃  ただし、我々が欲しいのはカメラの内部の実際の距離ではなく、ネット
を延々と送られてきた映像（テクスチャー）の中⼼からの距離
⁃  つまり、2f = 0.5 / sin ( 280.0/2.0 / 2.0 ) とする
34

Pseudocode：Entaniya 280
vec2 textureEntaniya280(sampler2D sampler, vec2 vT)
{
ﬂoat th = PI * vT.y;
ﬂoat r_uv = u_fK * sin( th/2.0 );
vec2 vT0;
vT0.x = 0.5 + r_uv / u_fAspctRatio * sin(2.0 * PI * vT.x);
vT0.y = 0.5 + r_uv * cos(2.0 * PI * vT.x);
vec4 vC = texture2D( sampler, vT0 );
return vC;
}
void main()
{
vec3 vRGB = textureEntaniya280 ( s_t2DVideo, vT ).rgb;
gl_FragColor = vec4( vRGB, 1.0);
}
35
vec2 textureEquirectangular(sampler2D sampler, vec2 vT)
{
vec4 vC = texture2D( sampler, vT );
return vC;
}
u_fK = 0.5 / sin ( 280.0/2.0 / 180.0*PI / 2.0 );
（次ページ参照）

36

例２：２眼：RICOH THETA S
n  視野⾓： 200（カタログデータなし）
n  射影⽅式：等⽴体⾓射影（カタログデータなし）
n  ⼊射⾓： 0 < θ < 100
n  左右のレンズの性能は同じ
n  像⾼＝結像⾯での画像中⼼からの距離
⁃  y = 2f sin (θ/2)
37

⽐較：RICOH THETA m15
n  視野⾓： 184（カタログデータなし）
n  射影⽅式：⽴体射影
n  ⼊射⾓： 0 < θ < 92
n  左右のレンズの性能は同じ
n  像⾼＝結像⾯での画像中⼼からの距離
⁃  y = 2f tan (θ/2)
38

Pseudocode：RICOH THETA S
vec2 textureDualFisheyeRight(sampler2D sampler, vec2 vT)
{
float th = PI * vT.y;
float r_uv = u_fK * sin( th/2.0 );
vec2 vT0;
vT0.X = 777.0/1024.0 + r_uv / fAspctRatio * 475.0/490.0 *
sinf(2 * PI * vT.x);
vT0.Y = 255.0f/576.0f + r_uv * cosf(2 * M_PI * vT.x);
vec4 vC = texture2D( sampler, vT0 );
return vC;
}
39
void main()
{
vec3 vRGB;
if( v_position.x < -0.5 ) {
vRGB = textureDualFisheyeLeft ( s_t2DVideo, vT.xy ).rgb;
}
else if( v_position.x > 0.5 ) {
vRGB = textureDualFisheyeRight( s_t2DVideo, vT.xy).rgb;
}
else {
vec3 vRGB0 = textureDualFisheyeLeft ( s_t2DVideo, vT.xy ).rgb;
vec3 vRGB1 = textureDualFisheyeRight ( s_t2DVideo, vT.xy).rgb;
float fA = v_position.x + 0.5;
vRGB = vRGB0*( 1.0 - fA ) + vRGB1 * fA;
}
gl_FragColor = vec4( vRGB, 1.0);
}
レンズの縦横の歪みが
残っているっぽい
（次ページ参照）
左右レンズのつなぎ⽬の処理

補正値は何処から?
40
576
1024

結果：RICOH THETA S
41
⽣データ⿂眼レンズの射影をリアルタイムで計算し、スティッチング
わずかにレンズ
のつなぎ⽬が⾒
える（カメラの
個体差あり）

まとめ
n  360度カメラで撮影した映像や、プレビューされる映像が、そのまま正距円筒
図法というわけではない
⁃  通常、カメラ会社の提供するPC, Macのアプリ、スマホアプリで、この変
換を⾏う
⁃  ライブ・ストリーミングの場合はリアルタイムに変換する必要がある
n  ⿂眼レンズの仕様を調べて、⼊射⾓に対する像⾼を計算することで正しい映像
が得られる
42

43
（普通のライブ・ストリーミングと同じ部分）

ライブ・ストリーミング
44
引⽤：
hYp://gopro.com
hYps://www.blackmagicdesign.com
hYps://obsproject.com
hYp://red5.org
hYp://www.adobe.com
hYps://www.wowza.com
カメラ（プレビュー映像）キャプチャー・デバイス
PC（ライブ配信ソフトウェア）
配信サーバー
スマートフォン（クライアントアプリ）
USB3
ThunderboltHDMI

キャプチャー・デバイス
n  Blackmagic Design UltraStudio MiniRecorder
n  Blackmagic Design Intensity Shuttle
45

配信サーバー
n  Adobe Media Server
n  Wowza Media Server
n  Red5 Mdedia Server
46

ライブ配信ソフトウェア
n  OBS（Open Broadcaster Software）
n  Adobe Flash Media Live Encoder
47

ストリーミング・プロトコル
n  RTMP（Adobe）
⁃  配信（キャプチャーからサーバー）
⁃  受信（サーバーからクライアント）
n  HLS（Apple）
⁃  受信
48

クライアント・アプリ
n  RTMP, HLSをDEMUX
⁃  同じ時刻の、映像：H.264, ⾳：AACを分離
n  Video Toolbox Framework（iOS）
n  Media Framework（Android）
⁃  1フレごと：H.264デコード → imageBuffer
n  Audio Toolbox Framework（iOS）
n  Audio Track（Android）
⁃  ⾳をデコード → PCM
n  imageBuffer, PCMのタイミングを合わせる
⁃  imageBuffer → OpenGL ExtensionでTexture
⁃  PCM -> ⾳を出す
49

ジャイロ・センサー対応
n  フレームワークを使⽤する⽅が簡単
⁃  Cardboard SDK (Google)
⁃  Cardboard SDK-iOS(iOS互換、rsanchezsaez)
50

DEMO
n  会場のロボタクシーの内部
51

52
障壁

障壁
n  MP4プレーヤー
⁃  Unityでやりたかった
⁃  UnityのAssetに動画をインポートすると内部で⾃動的にOgg Theoraに変
換され、画質が変わる
⁃  マルチプラットホームでH.264をデコードするプラグインは資本規模の⼤
きな会社が提供している気配なし
→Unityを諦めて、プラットホームのFrameworkを使った
53

障壁
n  当時は360度VRライブ・ストリーミングに使えるカメラが少なかった
⁃  アクション・カメラ
•  ⿂眼レンズはある
•  当時はプレビュー機能のないものが多かった（SP360, THETA m15）
⁃  Webカメラ
•  プレビュー機能は強い
•  ⿂眼レンズを別途⽤意。取付はDYI
•  USB接続、ドライバ、アプリがWindows志向のものが多い
⁃  業務⽤監視カメラ
•  ⾼価。解像度低い
54
→使えそうな360度カメラが2016の
春から続々出てくる

未解決な問題点
n  360カメラの⽣成する⽣データをどこで変換するべきか
⁃  サーバーで？クライアントで？
n  画像の中でつかわれる部分が少ないと無駄が多い
n  ⾼画質、⾼解像度での配信はまだ厳しい
⁃  フレームレートが⾼いことよりも、解像度が⾼いことの⽅が、クオリテ
ィが⾼いと感じやすい
⁃  Facebookが進めている、球でなく多⾯体を使⽤するアルゴリズムがどこ
まで解決するか？
55

360度カメラに関する標準化の動き
n  Open Spherical Camera API
⁃  https://developers.google.com/streetview/open-spherical-camera/
⁃  360度カメラにWiFi接続してコントロールするアプリケーションのAPI仕
様が策定され始めている
⁃  Theta sは対応
56

セッションは以上

こんなのを作りまして
360度カメラ
Webサーバー

60
油断してるとコントロールセンターが襲撃される

以上
n  takeyuki.ogura@dena.com
n  takeyuki.ogura@gmail.com
61

DeNA TechCon2016 360VR Live Streaming

More Related Content

What's hot

Viewers also liked

Similar to DeNA TechCon2016 360VR Live Streaming

DeNA TechCon2016 360VR Live Streaming