Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

DeNA TechCon2016 360VR Live Streaming

4,099 views

Published on

360VRライブ・ストリーミングのバックグラウンドとなる技術全般と、そのコアとなるGPUによる魚眼レンズの射影変換とリアルタイム・スティンチングについて解説、実演しました。

Published in: Engineering
  • Be the first to comment

DeNA TechCon2016 360VR Live Streaming

  1. 1. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 360度/VRライブ・スト リーミングのはなし TechCon 2016 Jan 29, 2016 DeNA TechCon Takeyuki Ogura システム本部技術開発室 DeNA Co., Ltd.
  2. 2. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 話すこと 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
  3. 3. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. ⾃⼰紹介:⼩倉豪放 n  エンジニア(45歳) ⁃  ルーツはゲーム系 ⁃  専⾨:CG、GPU Computing ⁃  プロトタイプ ⇄ ゲーム、サービス制作 n  趣味 ⁃  読書 ⁃  旅⾏ ⁃  ガラクタづくり n  出⾝ ⁃  東京都 3
  4. 4. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 製作ゲーム・タイトル(サポート、プロトタイプを含まず) 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
  5. 5. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. コンピューター・エンターテイメント業界貢献 n  CEDEC運営委員 •  技術ロードマップの調査、招待セッション、公募セッションの選定 n  CEDEC(Computer Entertainment Developers Conference) ⁃  毎年8⽉9⽉に横浜で開催される⽇本最⼤のゲームカンファレンス n  CESA(Computer Entertainment Supplierʼs Association) ⁃  ⼀般社団法⼈コンピューターエンターテインメント協会 規模 2015 2014 セッション数 224 236 展⽰ブース数 51 57 スポンサー数 69 70 参加者総数 6373 6564
  6. 6. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 360度/VRライブ・スト リーミング
  7. 7. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 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年1⽉CESで多くの360度カメラ が発表。春から中頃にかけて、次々登場 n  YouTube, Facebookは既に360度動画 に対応済 7
  8. 8. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 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. 9. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 9 VRはスマートフォンの⽅が⼤きな市場 になるだろうと⾔われている
  10. 10. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 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
  11. 11. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. ヘビーなVRのコンテンツの戦況 n  3DプロフェッショナルのVR先⼈達の知恵 ⁃  ポリゴンでVRの世界を作り込むのは⼤変な作業 •  ディスプレーでは気にならなかったポリゴンのめり込み等が⽬⽴つ •  ビルボードが使えない ⁃  VR空間のキャラクターはより⼀層作り込む必要がある •  キャラクターを出せばいいというものではなくて、ユーザーを意識しているように演 出するAIが必要 ⁃  市場ができるまで1­3年、それから参加すると表明する⼤⼿もある 11
  12. 12. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. ライトなVRのコンテンツの戦況 n  Youtube, Facebookが対応している n  360度カメラのコストパフォーマンスはどんどん向上している ⁃  カメラがあれば誰でも撮影できる ⁃  ⼀般ユーザによる投稿も始まっている n  ライブ・ストリーミング・サービスはあまり⾒ない 12
  13. 13. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 13 360度VRライブ・ストリーミング
  14. 14. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 360度VRライブ・ストリーミングと、普通のライブ・ストリーミ ングとの違い n  本質的に普通のライブ・ストリーミングと同じ n  違うところ ⁃  360度の情報を持つ映像を流す •  そうした映像つくる ← 360度カメラ •  送られてきた360度の情報を持つ映像のうち、視線の⽅向の映像を切り出す ← アプ リ 14
  15. 15. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 15 360度VRライブ・ストリーミング (360度ならではの部分)
  16. 16. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 360度の情報を持つ映像(例:正距円筒図法) 16
  17. 17. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. アプリ: 360度の情報を持つ映像のうち、視 線の⽅向の映像をリアルタイムに 切り出す 例:視線⽅向、⾞前⽅を⾒るユーザー 例:視線⽅向、⾞後⽅ を⾒るユーザー 360度の情報を持つ映像
  18. 18. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 視線⽅向をアプリに伝える⽅法 n  画⾯ドラッグ n  ジャイロ・センサー 18
  19. 19. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 19 360度の情報 ⇄ 平⾯ 投影(ProjecXon)
  20. 20. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 正距円筒図法(Equirectangular ProjecNon) n  360度動画で使われる投影法のデファクト・スタンダード(360カメラのデー タ, YouTube) n  地図投影法の1つ n  緯度、経度が直⾏、等間隔 n  ⾼緯度の情報が東⻄に伸びている 20 正距円筒図法 引⽤: hYp://user.numazu-ct.ac.jp/~tsato/tsato/ document/mapcenter460/ ⾈型多円錐図法
  21. 21. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. ちなみに n  メルカトル図法 ⁃  正距円筒図法の東⻄に伸ばした⽐ 率で南北⽅向にも伸ばしたもの 21 正距円筒図法 メルカトル図法 (正⾓円筒図法) 引⽤: hYp://user.numazu-ct.ac.jp/~tsato/tsato/ document/mapcenter460/
  22. 22. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 正距円筒図法(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
  23. 23. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. Slice / Stack の⽅向 Slice Stack 23 hYp://yourhealthiestyou.com/quick-snacks-yummy-recipes-for-quick-treats-to-keep-you-full-saXsfied
  24. 24. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. まとめ n  360度VRライブ・ストッリーミングは本質的に普通のライブ・ストリーミン グと同じ n  違うところ ⁃  360度の情報を持つ映像を流す •  そうした映像つくる ← 360度カメラ •  送られてきた360度の情報を持つ映像のうち、視線の⽅向の映像を切り出す ← アプ リ n  360度映像のデファクトスタンダードなフォーマット ⁃  正距円筒図法 •  地図投影法の1つ 24
  25. 25. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. ところで n  360度カメラで撮影した映像や、プレビューされる映像が、そのまま正距円筒 図法というわけではない 25
  26. 26. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. Dual Fisheye by “RICOH THETA S” 26
  27. 27. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. Fisheye by “Entaniya Fisheye 280” 27
  28. 28. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 360度カメラで撮影した360度動画を⾒るまで n  ⽣データはレンズの数だけ映像が分かれてる ⁃  結合 → スティッチングと⾔う n  スティッチングして正距円筒図法に座標変換すると360度動画として再⽣でき るデータになる ⁃  通常、カメラ会社の提供するPCアプリ、スマホアプリで、この変換を⾏う 28
  29. 29. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 問題の整理 n  正距円筒図法は球体にそのまま貼れる n  ⿂眼レンズは⿂眼レンズの都合で映像を撮っている 29 正距円筒図法 球体(⽬標) ⽣の映像 そのまま貼ればいいアプリで変換必要 n  動画なら変換に時間かかってもいい ⁃  ライブ・ストリーミングは? アプリで変換必要 リアルタイムに変換必要
  30. 30. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 30 ⿂眼レンズの都合?
  31. 31. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. ⿂眼レンズがやってること = 射影 31 像⾼:y =f(θ) O 結像⾯ 天頂 20° 40° 60° 80° 100° 120° 140° 160° ⼊射⾓:θ様々な⽅向から来る情報を 2Dの映像にまとめる ⿂眼レンズを横から⾒た図
  32. 32. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. ⿂眼レンズの射影の種類 32 引⽤:hYp://fit-movingeye.jp/products/opXcs/consumer_opXcs/fi_series/fi_02.html
  33. 33. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 実際に2つの例で計算してみます n  例1:単眼 ⁃  Entaniya 280 + GoPro Hero 4 n  例2:2眼 ⁃  RICOH THETA S 33
  34. 34. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 例1:単眼: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
  35. 35. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. Pseudocode:Entaniya 280 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 ); (次ページ参照)
  36. 36. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 36
  37. 37. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 例2:2眼:RICOH THETA S n  視野⾓: 200(カタログデータなし) n  射影⽅式: 等⽴体⾓射影(カタログデータなし) n  ⼊射⾓: 0 < θ < 100 n  左右のレンズの性能は同じ n  像⾼=結像⾯での画像中⼼からの距離 ⁃  y = 2f sin (θ/2) 37
  38. 38. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. ⽐較:RICOH THETA m15 n  視野⾓: 184(カタログデータなし) n  射影⽅式: ⽴体射影 n  ⼊射⾓: 0 < θ < 92 n  左右のレンズの性能は同じ n  像⾼=結像⾯での画像中⼼からの距離 ⁃  y = 2f tan (θ/2) 38
  39. 39. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 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. 40. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 補正値は何処から? 40 576 1024
  41. 41. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 結果:RICOH THETA S 41 ⽣データ ⿂眼レンズの射影をリアルタイムで計算し、スティッチング わずかにレンズ のつなぎ⽬が⾒ える(カメラの 個体差あり)
  42. 42. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. まとめ n  360度カメラで撮影した映像や、プレビューされる映像が、そのまま正距円筒 図法というわけではない ⁃  通常、カメラ会社の提供するPC, Macのアプリ、スマホアプリで、この変 換を⾏う ⁃  ライブ・ストリーミングの場合はリアルタイムに変換する必要がある n  ⿂眼レンズの仕様を調べて、⼊射⾓に対する像⾼を計算することで正しい映像 が得られる 42
  43. 43. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 43 360度VRライブ・ストリーミング (普通のライブ・ストリーミングと同じ部分)
  44. 44. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. ライブ・ストリーミング 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
  45. 45. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. キャプチャー・デバイス n  Blackmagic Design UltraStudio MiniRecorder n  Blackmagic Design Intensity Shuttle 45
  46. 46. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 配信サーバー n  Adobe Media Server n  Wowza Media Server n  Red5 Mdedia Server 46
  47. 47. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. ライブ配信ソフトウェア n  OBS(Open Broadcaster Software) n  Adobe Flash Media Live Encoder 47
  48. 48. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. ストリーミング・プロトコル n  RTMP(Adobe) ⁃  配信(キャプチャーからサーバー) ⁃  受信(サーバーからクライアント) n  HLS(Apple) ⁃  受信 48
  49. 49. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. クライアント・アプリ 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
  50. 50. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. ジャイロ・センサー対応 n  フレームワークを使⽤する⽅が簡単 ⁃  Cardboard SDK (Google) ⁃  Cardboard SDK-iOS(iOS互換、rsanchezsaez) 50
  51. 51. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. DEMO n  会場のロボタクシーの内部 51
  52. 52. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 52 障壁
  53. 53. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 障壁 n  MP4プレーヤー ⁃  Unityでやりたかった ⁃  UnityのAssetに動画をインポートすると内部で⾃動的にOgg Theoraに変 換され、画質が変わる ⁃  マルチプラットホームでH.264をデコードするプラグインは資本規模の⼤ きな会社が提供している気配なし →Unityを諦めて、プラットホームのFrameworkを使った 53
  54. 54. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 障壁 n  当時は360度VRライブ・ストリーミングに使えるカメラが少なかった ⁃  アクション・カメラ •  ⿂眼レンズはある •  当時はプレビュー機能のないものが多かった(SP360, THETA m15) ⁃  Webカメラ •  プレビュー機能は強い •  ⿂眼レンズを別途⽤意。取付はDYI •  USB接続、ドライバ、アプリがWindows志向のものが多い ⁃  業務⽤監視カメラ •  ⾼価。解像度低い 54 →使えそうな360度カメラが2016の 春から続々出てくる
  55. 55. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 未解決な問題点 n  360カメラの⽣成する⽣データをどこで変換するべきか ⁃  サーバーで?クライアントで? n  画像の中でつかわれる部分が少ないと無駄が多い n  ⾼画質、⾼解像度での配信はまだ厳しい ⁃  フレームレートが⾼いことよりも、解像度が⾼いことの⽅が、クオリテ ィが⾼いと感じやすい ⁃  Facebookが進めている、球でなく多⾯体を使⽤するアルゴリズムがどこ まで解決するか? 55
  56. 56. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 360度カメラに関する標準化の動き n  Open Spherical Camera API ⁃  https://developers.google.com/streetview/open-spherical-camera/ ⁃  360度カメラにWiFi接続してコントロールするアプリケーションのAPI仕 様が策定され始めている ⁃  Theta sは対応 56
  57. 57. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. セッションは以上
  58. 58. こんなのを作りまして 360度カメラ Webサーバー
  59. 59. 猫カフェ・デビュー
  60. 60. 60 油断してるとコントロールセンターが襲撃される
  61. 61. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 以上 n  takeyuki.ogura@dena.com n  takeyuki.ogura@gmail.com 61

×