DeNA TechCon2016 360VR Live Streaming

Copyright(C)DeNACo.,Ltd.AllRightsReserved.

360度/VRライブ・ストリーミングのはなし

TechCon 2016

Jan29,2016DeNATechCon

TakeyukiOguraシステム本部技術開発室DeNACo.,Ltd.


話すこと

n  360度VRライブ・ストリーミング⁃  ⼀般ユーザーが⼿持ちの360度カメラで配信するようなことを想定•  ⾼価な改造カメラで両眼視差を利⽤した⽴体視のような話はしません

n  Keyword⁃  virtual reality, live streaming, fisheye 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）

⁃  レンダリング、UI4

CreditName:TakeyukiOguraorGohoOgura


コンピューター・エンターテイメント業界貢献

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市況まとめ：既に進化は分岐

ヘビーなVRn  PC or コンソール

n  専⽤ヘッドセット

n  専⽤UI

n  ポジション・トラッキング〜5㎡

n  主なコンテンツ＝ゲーム

n  主要なヘッドセットが2016春発売開始⁃  恐らくGDC2016（3/14-3/18）前後

ライトなVRn  スマートフォン

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を問題なく楽しめるPC2016年 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万台

〜億台

Copyright(C)DeNACo.,Ltd.AllRightsReserved.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


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


360度VRライブ・ストリーミングと、普通のライブ・ストリーミングとの違いn  本質的に普通のライブ・ストリーミングと同じ

n  違うところ⁃  360度の情報を持つ映像を流す•  そうした映像つくる ← 360度カメラ•  送られてきた360度の情報を持つ映像のうち、視線の⽅向の映像を切り出す ← アプ

リ

14


360度VRライブ・ストリーミング（360度ならではの部分）


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

16


アプリ：360度の情報を持つ映像のうち、視線の⽅向の映像をリアルタイムに切り出す

例：視線⽅向、⾞前⽅を⾒るユーザー

例：視線⽅向、⾞後⽅を⾒るユーザー

360度の情報を持つ映像


視線⽅向をアプリに伝える⽅法

n  画⾯ドラッグ

n  ジャイロ・センサー

18


360度の情報 ⇄ 平⾯

投影（ProjecXon）


正距円筒図法（EquirectangularProjecNon）

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/


正距円筒図法（EquirectangularProjecNon）

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<slices0<v<stacks


Slice/Stackの⽅向

Slice Stack

23hYp://yourhealthiestyou.com/quick-snacks-yummy-recipes-for-quick-treats-to-keep-you-full-saXsfied


まとめ

n  360度VRライブ・ストッリーミングは本質的に普通のライブ・ストリーミングと同じ

n  違うところ⁃  360度の情報を持つ映像を流す•  そうした映像つくる ← 360度カメラ•  送られてきた360度の情報を持つ映像のうち、視線の⽅向の映像を切り出す ← アプ

リ

n  360度映像のデファクトスタンダードなフォーマット⁃  正距円筒図法•  地図投影法の１つ

24


ところで

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

25


DualFisheyeby“RICOHTHETAS”

26


Fisheyeby“EntaniyaFisheye280”

27


360度カメラで撮影した360度動画を⾒るまで

n  ⽣データはレンズの数だけ映像が分かれてる⁃  結合 → スティッチングと⾔う

n  スティッチングして正距円筒図法に座標変換すると360度動画として再⽣できるデータになる⁃  通常、カメラ会社の提供するPCアプリ、スマホアプリで、この変換を⾏う

28


問題の整理

n  正距円筒図法は球体にそのまま貼れるn  ⿂眼レンズは⿂眼レンズの都合で映像を撮っている

29

正距円筒図法球体（⽬標）⽣の映像

そのまま貼ればいいアプリで変換必要

n  動画なら変換に時間かかってもいい⁃  ライブ・ストリーミングは？

アプリで変換必要リアルタイムに変換必要


⿂眼レンズの都合？


⿂眼レンズがやってること＝射影

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


例１：単眼：Entaniya280

n  視野⾓： 280n  射影⽅式：等⽴体⾓射影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：Entaniya280

vec2 textureEntaniya280(sampler2D sampler, vec2 vT)

{

float th = PI * vT.y;

float 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);

（次ページ参照）



例２：２眼：RICOHTHETAS

n  視野⾓： 200（カタログデータなし）n  射影⽅式：等⽴体⾓射影（カタログデータなし）n  ⼊射⾓： 0 < θ < 100n  左右のレンズの性能は同じ

n  像⾼＝結像⾯での画像中⼼からの距離⁃  y = 2f sin (θ/2)

37


⽐較：RICOHTHETAm15

n  視野⾓： 184（カタログデータなし）n  射影⽅式：⽴体射影n  ⼊射⾓： 0 < θ < 92n  左右のレンズの性能は同じ

n  像⾼＝結像⾯での画像中⼼からの距離⁃  y = 2f tan (θ/2)

38


Pseudocode：RICOHTHETASvec2 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


結果：RICOHTHETAS

41

⽣データ⿂眼レンズの射影をリアルタイムで計算し、スティッチング

わずかにレンズのつなぎ⽬が⾒える（カメラの個体差あり）


まとめ

n  360度カメラで撮影した映像や、プレビューされる映像が、そのまま正距円筒図法というわけではない⁃  通常、カメラ会社の提供するPC, Macのアプリ、スマホアプリで、この変

換を⾏う⁃  ライブ・ストリーミングの場合はリアルタイムに変換する必要がある

n  ⿂眼レンズの仕様を調べて、⼊射⾓に対する像⾼を計算することで正しい映像が得られる

42


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


ライブ・ストリーミング

44

引⽤：hYp://gopro.comhYps://www.blackmagicdesign.comhYps://obsproject.comhYp://red5.orghYp://www.adobe.comhYps://www.wowza.com

カメラ（プレビュー映像）キャプチャー・デバイス

PC（ライブ配信ソフトウェア）

配信サーバースマートフォン（クライアントアプリ）

USB3ThunderboltHDMI


キャプチャー・デバイス

n  Blackmagic Design UltraStudio MiniRecordern  Blackmagic Design Intensity Shuttle

45


配信サーバー

n  Adobe Media Servern  Wowza Media Servern  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デコード → imageBuffern  Audio Toolbox Framework（iOS）n  Audio Track（Android）

⁃  ⾳をデコード → PCMn  imageBuffer, PCMのタイミングを合わせる

⁃  imageBuffer → OpenGL ExtensionでTexture⁃  PCM -> ⾳を出す

49


ジャイロ・センサー対応

n  フレームワークを使⽤する⽅が簡単⁃  Cardboard SDK (Google)⁃  Cardboard SDK-iOS(iOS互換、rsanchezsaez)

50


DEMO

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

51


障壁


障壁

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  [email protected]  [email protected]

61

Engineering

DeNA TechCon2016 360VR Live Streaming