VR HQ画質誕生秘話～こうして我々は国内最高画質VRストリーミング動画配信を成し遂げた～ @ xR Tech Tokyo #16

by Masahito Yano

Slide 1

Slide 1 text

1 合同会社DMM.com EC&デジタルコンテンツ本部動画配信事業部矢野完人( @yanoshi )

Slide 2

Slide 2 text

こんにちは 2

Slide 3

Slide 3 text

yanoshi といいます 3 xR Tech Tokyo 初参加 / 初登壇

Slide 4

Slide 4 text

普段は動画の配信基盤を作ってます 4 弊社の売上を支えてるよ!

Slide 5

Slide 5 text

のっきの発表エモかった! 5

Slide 6

Slide 6 text

Slide 7

Slide 7 text

7 2016年新卒入社配属先: CTO室動的画像リサイズエンジンのR&D 2016年当時

Slide 8

Slide 8 text

8 今!!! VR/3D/音声合成/ガジェット VRを含む動画配信基盤二人共弊社のVRの中心に

Slide 9

Slide 9 text

9 そんな二人でxR Tech Tokyoで登壇!!!

Slide 10

Slide 10 text

良い話!!! 10

Slide 11

Slide 11 text

クソエモい!!!!!!! 11

Slide 12

Slide 12 text

12 閑話休題

Slide 13

Slide 13 text

弊社動画サービスを知っている人 13

Slide 14

Slide 14 text

弊社動画サービスを使っている人 14

Slide 15

Slide 15 text

Slide 16

Slide 16 text

16 WARNING 注意事項 2018年3月、 DMM.comの成人向け事業(現 FANZA)は株式会社デジタルコマース社に継承されました。ただし、システムの開発や運用、一部の営業業務はデジタルコマース社からDMM.comに委託されており、プラットフォームはDMM.comが継続して提供することで合意しております。

Slide 17

Slide 17 text

17 WARNING 注意事項 2018年3月、 DMM.comの成人向け事業(現 FANZA)は株式会社デジタルコマース社に継承されました。ただし、システムの開発や運用、一部の営業業務はデジタルコマース社からDMM.comに委託されており、プラットフォームはDMM.comが継続して提供することで合意しております。

Slide 18

Slide 18 text

18 WARNING 注意事項 2018年3月、 DMM.comの成人向け事業(現 FANZA)は株式会社デジタルコマース社に継承されました。ただし、システムの開発や運用、一部の営業業務はデジタルコマース社からDMM.comに委託されており、プラットフォームはDMM.comが継続して提供することで合意しております。みんな覚えて帰ってね!

Slide 19

Slide 19 text

弊社がプラットフォームを提供する VR動画サービスを使っている人 19

Slide 20

Slide 20 text

みんなVRがだいすきでよかった(ほっ) 20

Slide 21

Slide 21 text

(まじかよ) 手が挙がらなかった時用のスライド 21

Slide 22

Slide 22 text

そんなVR好きの皆さん思い出してください 22

Slide 23

Slide 23 text

2015年 VR元年 23 2016年 VR元年 2017年 VR元年 2018年 VR元年そして今年 VR元年毎年VR元年!

Slide 24

Slide 24 text

2015年 VR元年 24 2016年 VR元年 2017年 VR元年 2018年 VR元年そして今年 VR元年毎年VR元年!

Slide 25

Slide 25 text

2015年 VR元年 25 2016年 VR元年 2017年 VR元年 2018年 VR元年そして今年 VR元年毎年VR元年! きっとその人にとって衝撃のあった年がVR元年

Slide 26

Slide 26 text

2015年 VR元年 26 2016年 VR元年 2017年 VR元年 2018年 VR元年そして今年 VR元年毎年VR元年! 弊社にとっては2016年

Slide 27

Slide 27 text

2015年 VR元年 27 2016年 VR元年 2017年 VR元年 2018年 VR元年そして今年 VR元年毎年VR元年! 弊社にとっては2016年 DMM VR動画リリース

Slide 28

Slide 28 text

28 • Gear VR / Android / iOS 向けでリリース • プレイステーション VRに対応! • Oculus Rift / HTC Vive に対応! • Windows MRに対応! 2016年 2017年 2018年 • Android での再生可能端末を増! • HQ画質リリース! 裾野を広げる VR元年! クオリティアップ

Slide 29

Slide 29 text

29 • Gear VR / Android / iOS 向けでリリース • プレイステーション VRに対応! • Oculus Rift / HTC Vive に対応! • Windows MRに対応! 2016年 2017年 2018年 • Android での再生可能端末を増! • HQ画質リリース! 売上 20億円売上 40億円裾野を広げる VR元年! クオリティアップ VR動画配信サービスでは世界最大売上高を誇る(多分)

Slide 30

Slide 30 text

めでたい! 30

Slide 31

Slide 31 text

でも苦労が絶えなかった 31

Slide 32

Slide 32 text

Q. 「VR動画配信」にどんなイメージを持ちますか？ 32 「普通の動画配信と同じでしょ？」「結局動画なんだし、プレイヤーで再生させてるだけでしょ？」「てかこれまでの基盤があれば簡単そう」そうだと良かったなぁ...

Slide 33

Slide 33 text

Q. 「VR動画配信」にどんなイメージを持ちますか？ 33 「普通の動画配信と同じでしょ？」「結局動画なんだし、プレイヤーで再生させてるだけでしょ？」「てかこれまでの基盤があれば簡単そう」そうだと良かったなぁ... ストア/プラットフォームトラフィックレンダリングパフォーマンスストレージ容量 SoC 『課題がいっぱい』

Slide 34

Slide 34 text

34 • Gear VR / Android / iOS 向けでリリース • プレイステーション VRに対応! • Oculus Rift / HTC Vive に対応! • Windows MRに対応! 2016年 2017年 2018年 • Android での再生可能端末を増! • HQ画質リリース! 売上 20億円売上 40億円裾野を広げる VR元年! クオリティアップ VR動画配信サービスでは世界最大売上高を誇る(多分) (｡>﹏<｡)

Slide 35

Slide 35 text

ということで、今日はみんな大好き苦労話します! 35 (｡>﹏<｡)

Slide 36

Slide 36 text

36 合同会社DMM.com EC&デジタルコンテンツ本部動画配信事業部矢野完人( @yanoshi )

Slide 37

Slide 37 text

自己紹介 37

Slide 38

Slide 38 text

Slide 39

Slide 39 text

What is HQ画質 39 60fps 4K超え高画質なエンコードとってもきれいなVR動画

Slide 40

Slide 40 text

What is HQ画質 40 60fps 4K超え高画質なエンコードとってもきれいなVR動画 HQを成し遂げるためにいくつもの課題があった

Slide 41

Slide 41 text

課題 41 60fps 4K超え高画質なエンコード課題1: そもそも素材が無い

Slide 42

Slide 42 text

42 課題1: そもそも素材が無い弊社はプラットフォーマーコンテンツホルダーが HQに耐えうる素材を作ってくれないと配信できない!

Slide 43

Slide 43 text

43 課題1: そもそも素材が無い 1. 現実的な納品要件を作成 2. 営業努力解決策

Slide 44

Slide 44 text

44 課題1: そもそも素材が無い PC VRを基準に4.5K以上の素材を納品してもらっています

Slide 45

Slide 45 text

45 課題1: そもそも素材が無い PC VRを基準に4.5K以上の素材を納品してもらっています解像度 / フレームレートが上がると編集が大変だから…

Slide 46

Slide 46 text

課題 46 高画質なエンコード課題1: そもそも素材が無い課題2: そもそも再生できない 60fps 4K超え課題3: トラフィック増

Slide 47

Slide 47 text

47 課題2: そもそも再生できないこれが本題と言っても良い

Slide 48

Slide 48 text

48 課題2: そもそも再生できない VR動画の仕組み弊社の場合は「正距円筒図法」を利用

Slide 49

Slide 49 text

49 課題2: そもそも再生できない VR動画の仕組み右目用左目用 180度サイドバイサイドの場合はこんな感じ

Slide 50

Slide 50 text

50 課題2: そもそも再生できない VR動画の仕組み右目用左目用約4000px 約2000px HQならこんな感じで60fps

Slide 51

Slide 51 text

51 課題2: そもそも再生できない VR動画の仕組み右目用左目用約4000px 約2000px HQならこんな感じで60fps おわかりいただけただろうか？

Slide 52

Slide 52 text

52 課題2: そもそも再生できない VR動画の仕組み右目用左目用約4000px 約2000px HQならこんな感じで60fps 解像度がクソ高い

Slide 53

Slide 53 text

53 課題2: そもそも再生できない VR動画の仕組み右目用左目用約4000px 約2000px HQならこんな感じで60fps ソフトウェアデコードでは厳しい

Slide 54

Slide 54 text

54 課題2: そもそも再生できない VR動画の仕組み右目用左目用約4000px 約2000px HQならこんな感じで60fps ハードウェアデコードでは大きな制限が

Slide 55

Slide 55 text

55 課題2: そもそも再生できない VR動画の仕組み右目用左目用約4000px 約2000px HQならこんな感じで60fps スマホのSoCでは厳しい!

Slide 56

Slide 56 text

56 課題2: そもそも再生できないお客様の声 AQUOS sense2を使っているけど、対応端末になっていないのは納得がいかない! Snapdragon 801とSnapdragon 450を比較すると計算性能に差なんてそんなに無いんじゃない!? 確かにCPU/GPUは差がないかもね!

Slide 57

Slide 57 text

57 課題2: そもそも再生できないお客様の声 AQUOS sense2を使っているけど、対応端末になっていないのは納得がいかない! Snapdragon 801とSnapdragon 450を比較すると計算性能に差なんてそんなに無いんじゃない!? 確かにCPU/GPUは差がないかもね! デコーダーが弱いの!!! わかる???(白目)

Slide 58

Slide 58 text

58 課題2: そもそも再生できないスマホのSoCはスマホ用に作られている! 本来は4K超えの解像度をデコードするシチュエーションが無いはず! ハイエンドSoCでも4K超えのデコードは厳しいローエンドなら2Kが以下略

Slide 59

Slide 59 text

59 課題2: そもそも再生できない混沌とするデコーダ仕様 iPhone H.264: 4K 60fps Android H.264: Over4K 60fps (Snapdragon 8xx ) Oculus Go H.264: Over4K 60fps PC VR H.264: 4K 60fps / VP9: 8K 60fps PSVR H.264: 3.5K 60fps

Slide 60

Slide 60 text

60 課題2: そもそも再生できない混沌とするデコーダ仕様 iPhone H.264: 4K 60fps Android H.264: Over4K 60fps (Snapdragon 8xx ) Oculus Go H.264: Over4K 60fps PC VR H.264: 4K 60fps / VP9: 8K 60fps PSVR H.264: 3.5K 60fps 大変だぁ…

Slide 61

Slide 61 text

61 課題2: そもそも再生できない混沌とするデコーダ仕様 iPhone H.264: 4K 60fps Android H.264: Over4K 60fps (Snapdragon 8xx ) Oculus Go H.264: Over4K 60fps PC VR H.264: 4K 60fps / VP9: 8K 60fps PSVR H.264: 3.5K 60fps ユーザーに最高の動画を届けたい

Slide 62

Slide 62 text

62 課題2: そもそも再生できないストレージとエンコーダーのパワーで押し切る!!!! 解決策

Slide 63

Slide 63 text

63 課題2: そもそも再生できない iPhone H.264: 4K 60fps Android H.264: Over4K 60fps (Snapdragon 8xx ) Oculus Go H.264: Over4K 60fps PC VR H.264: 4K 60fps / VP9: 8K 60fps PSVR H.264: 3.5K 60fps デバイスに最適なファイルをそれぞれ用意します! 解決策

Slide 64

Slide 64 text

64 課題2: そもそも再生できないエンコーダ素材オブジェクトストレージいっぱい作ったエンコーダーを作成エンコード速度 0.0x ～ 0.x fps程度

Slide 65

Slide 65 text

65 課題2: そもそも再生できないエンコーダ素材オブジェクトストレージいっぱい作ったエンコーダーを作成エンコード速度 0.0x ～ 0.x fps程度くっそ遅くてめっちゃ大変

Slide 66

Slide 66 text

66 課題2: そもそも再生できないオブジェクトストレージ配信ミドルウェアキャッシュサーバー MP4 Wowza OpenResty iPhone Oculus Go PC VR PSVR Android 出し分け配信情報管理 (st-api) 作った配信情報管理システムを作り

Slide 67

Slide 67 text

67 課題2: そもそも再生できない再生可否判定ライブラリを作成 Android H.264のパケットを生成し再生可否判定作った H.264のテストデータを生成しデコーダーに投げてデコード結果をエラーハンドリング

Slide 68

Slide 68 text

68 課題2: そもそも再生できない再生可否判定ライブラリを作成 Android H.264のパケットを生成し再生可否判定作った H.264のテストデータを生成しデコーダーに投げてデコード結果をエラーハンドリング実は「通常画質」で大活躍見れなかった1割のユーザーにVR動画届ける

Slide 69

Slide 69 text

69 課題2: そもそも再生できない仕様書記載スペックを超える再生を実現エンコードパラメータチューニング PSVR H.264: 3.5K 4K 60fps マルチスライスにしたりB-frame無くしたり

Slide 70

Slide 70 text

70 課題2: そもそも再生できないデバイスに最適なエンコードと動的な出し分けを実現解決策

Slide 71

Slide 71 text

課題 71 高画質なエンコード課題1: そもそも素材が無い課題2: そもそも再生できない 60fps 4K超え課題3: トラフィック増

Slide 72

Slide 72 text

72 課題3: トラフィック増ビットレートが増えた分トラフィックも増加

Slide 73

Slide 73 text

73 課題3: トラフィック増解決策動的にオフロードするキャッシュアーキテクチャの実現

Slide 74

Slide 74 text

74 課題3: トラフィック増解決策オブジェクトストレージ配信ミドルウェアキャッシュサーバー MP4 Wowza OpenResty 配信アーキテクチャ概略図ユーザー

Slide 75

Slide 75 text

75 課題3: トラフィック増解決策オブジェクトストレージ配信ミドルウェアキャッシュサーバー MP4 Wowza OpenResty コンテンツAの視聴状況ユーザー少ない

Slide 76

Slide 76 text

76 課題3: トラフィック増解決策オブジェクトストレージ配信ミドルウェアキャッシュサーバー MP4 Wowza OpenResty コンテンツAの視聴状況ユーザー少し多い

Slide 77

Slide 77 text

77 課題3: トラフィック増解決策オブジェクトストレージ配信ミドルウェア MP4 Wowza コンテンツAの視聴状況ユーザーキャッシュサーバー OpenResty 多い

Slide 78

Slide 78 text

78 課題3: トラフィック増解決策オブジェクトストレージ配信ミドルウェア MP4 Wowza コンテンツAの視聴状況ユーザーキャッシュサーバー OpenResty CDN とても多い賢く動的にトラフィック制御 (VODST v.4)

Slide 79

Slide 79 text

79 課題3: トラフィック増 GWにピークトラフィックを無事更新 290Gbps

Slide 80

Slide 80 text

課題 80 高画質なエンコード課題1: そもそも素材が無い課題2: そもそも再生できない 60fps 4K超え課題3: トラフィック増無事解決!

Slide 81

Slide 81 text

苦労の結果HQ画質が実現 81 そんなこんなで今のHQ画質があります

Slide 82

Slide 82 text

苦労の結果HQ画質が実現 82 エモいでしょ？

Slide 83

Slide 83 text

苦労の結果HQ画質が実現 83 エモいでしょ？通信環境によるストリーミングの限界アプリケーションのUI/UX 撮影環境の最適化まだまだ課題はいっぱい WebVR等を利用したもっと簡単な視聴体験

Slide 84

Slide 84 text

VRはまだまだ伸び代が!? 84 今最も再生総回数の多い作品は実はVRだったり

Slide 85

Slide 85 text

VRはまだまだ伸び代が!? 85 最も強いデバイスはスマホ

Slide 86

Slide 86 text

これからも進化するよ! 86 VR動画のさらなる進化にご期待下さい!

Slide 87

Slide 87 text

87 宣伝

Slide 88

Slide 88 text

88 基盤は無事エモい感じになってきた

Slide 89

Slide 89 text

89 今度はアプリがエモくなるよ!

Slide 90

Slide 90 text

求む 90 弊事業部で Unityを利用した VR動画アプリケーション内製化進行中! Unityエンジニア募集

Slide 91

Slide 91 text

求む 91 ちょびっと内緒の話 Unityエンジニア募集

Slide 92

Slide 92 text

求む 92 興味のある方は懇親会 or @yanoshi までやっていき Unityエンジニア募集

Slide 93

Slide 93 text

93 利用素材情報 "Twemoji" by Twitter, Inc and other contributors is licensed under CC-BY 4.0