【デブサミ2017】スマホでアルファ動画が使えるH2MDを使って 30分でWEBムービー演出を作る
0 likes6,829 views
このスライドはDevelopers Summit 2017「【16-B-L】 スマホでアルファ動画が使えるH2MDを使って30分でWEBムービー演出を作る」にて発表したものです。 http://event.shoeisha.jp/devsumi/20170216 ■資料中のリンク H2MDのデモ: https://h2md.axell-embedded.com/ H2MD Webサイト: https://h2md.axell-embedded.com/ ブロックサイズ大小の比較: http://cdn.richlab.io/pj/h2md/demo/blocksize/movie.mp4 使用事例A: http://cdn.richlab.io/pj/h2md_twomen/demo-v1.0.6-with-webgl.html 使用事例B: http://cdn.richlab.io/pj/h2md/demo/hensho_click/index.html 使用事例C: https://h2md.axell-embedded.com/demo/game/
【デブサミ2017】スマホでアルファ動画が使えるH2MDを使って 30分でWEBムービー演出を作る
- 1. 株式会社アクセル スマホでアルファ動画が使えるH2MDを使って 30分でWEBムービー演出を作る 2017年2⽉16⽇ ＠DeveloperSummit 2017 株式会社アクセル リッチラボ株式会社
- 2. 2 ● H2MDとはなにか？ ● 株式会社アクセルが開発した動画コーデック ● 圧縮技術で連番画像と⽐べて動画容量を⼤幅削減 ● アルファ（透過）ムービーが扱える
- 5. 5 ● 連番画像と⽐べて動画容量を⼤幅圧縮 横640px・縦700pxの8秒のアルファ付き動画 形式 容量 ファイル数 ⾮圧縮 77.5MB 1 PNG連番 23.6 MB 248 H2MD 1.58MB（＊1） 22（＊2） （＊2）エンコード設定によりファイルを少なくする事も出来ます （＊1）FPS設定や画質設定などによりさらに容量を削減可能です
- 6. 6 ● アルファ（透過）ムービーが扱える アルファムービーとは？ → PNGなどで利⽤される「透過⾊（アルファ）」を持ったムービーデータ → 活⽤することで演出の開発・実装が、容易かつ単純になります
- 8. © Rich Lab Co., Ltd. H2MD形式へのエンコードについて リッチラボ株式会社 高田 健介
- 9. © Rich Lab Co., Ltd. 自己紹介 •高田健介 (リッチラボ株式会社 デザイナー) •普段はリッチ広告のディレクション、コンテ作成、開発業務等 •これから紹介するH2MDエンコーダー “Rich Lab Encoder” でも開発に参加 9 バナーを クリック こんなことを やっています
- 10. © Rich Lab Co., Ltd. これからご紹介すること: 動画をH2MDに変換する方法と パラメータの設定 10
- 11. © Rich Lab Co., Ltd. H2MDへの変換はEncoderを使います 11 MP4, AVI(アルファ有／無), MOV(アルファ有／無)等 H2MD アップロード ダウンロード • 指定の動画フォーマット以外のものをエンコードする場合や、アルファ無しの動画をアルファ付きの 動画にする場合は、動画編集ソフトでの作業が必要になります。 • その他PNGの連番画像の入力にも対応しています 動画をエンコード
- 12. © Rich Lab Co., Ltd. Demo 12
- 13. © Rich Lab Co., Ltd. エンコードの際にできること 13 •ファイルの選択 •パラメータの設定 •クオリティ •FPS •ブロックサイズ •アルファビット •イントラサイズ •(エンコードを待つ) •ダウンロードする
- 14. © Rich Lab Co., Ltd. エンコードの際にできること 14 •ファイルの選択 •パラメータの設定 •クオリティ •FPS •ブロックサイズ •アルファビット •イントラサイズ •(エンコードを待つ) •ダウンロードする
- 15. © Rich Lab Co., Ltd. クオリティ=画像の綺麗さ •640x360, FPS 15, ブロックサイズ 16, アルファビット 0, 42秒の動画 15 90 50 15 15.24MB 3.05MB 1.01MB クオリティ
- 16. © Rich Lab Co., Ltd. 16 H2MD再生の仕組み 動画格子状に切られた画像
- 17. © Rich Lab Co., Ltd. 17 “ブロックサイズ” とは ブロックサイズ 小 ブロックサイズ 大
- 18. © Rich Lab Co., Ltd. ブロックサイズの画質に与える影響 18 ブロックサイズ大・小で エンコードしたファイルの比較動画
- 19. © Rich Lab Co., Ltd. 一方で再生パフォーマンスへの影響もある 19 8 16 32 1 ブロックサイズ 処理回数の比 (理論値･ブロックサイズ32を1とした場合) 416
- 20. © Rich Lab Co., Ltd. 20 ブロックサイズの影響まとめ 端末の要求スペック 高 低 動きの滑らかさ ◯ △ ブロックサイズ 8 64
- 21. © Rich Lab Co., Ltd. アルファビット=アルファの画質 21 4 6 8 16段階 64段階 256段階 アルファビット
- 22. © Rich Lab Co., Ltd. パラメータの設定についてまとめ •各パラメータの調整が柔軟 •かつ、主に3つのパラメータの調整だけすれば 良い ➔ 狙った表現が簡単に実現できます •素材や見せ方により適切な数値が異なります 22
- 23. © Rich Lab Co., Ltd. パラメータ調整の例 例) ドロップシャドウの入った動画等、 不透明度のグラデーションがあるもの ▶ アルファビットは高め(4~6) ▶ クオリティはその分低く ▶ (ブロックサイズは再生性能が許す限り小さく) 例) PC向けに15秒のTVCMをきれいに出したい ▶ アルファビットは0 ▶ クオリティは容量が許す範囲で大きく ▶ ブロックサイズは再生性能が許す限り小さく 23
- 24. © Rich Lab Co., Ltd. エンコードしたファイルを 実装する方法について 24
- 30. © Rich Lab Co., Ltd. H2MDの活用事例 30
- 31. © Rich Lab Co., Ltd. Demo A.Webページ上にposition: fixedな動画を置く B.クリックで枠から飛び出す動画 C.ブラウザゲームでの利用例 ※各例、是非スマートフォンでご覧ください 31 A B C
- 32. © Rich Lab Co., Ltd. 採用事例 •テレビ局 番組特集サイト •ダイジェスト映像をインライン再生(音声有) •大手ゲームメーカー プロモーションサイト •オープニングムービー •製菓メーカー イベント特設サイト •スマートフォンのカメラで撮った画像を映像化 •他多数 32
- 33. © Rich Lab Co., Ltd. H2MDに関してのお問い合わせ •詳しい情報等気になる方はAsk the Speaker(この会場を出て 右方向)までお越し下さい。 •Encoderのご利用につきましてはRich Labにお問い合わせ下さ い •「リッチラボ」で検索、もしくは下記メールアドレスへ richlab-info@mail.yahoo.co.jp •Encoderのテストアカウントも発行可能です 33