1. 背景

2020年12月から YouTube で HDR の Live配信がサポートされた[1]
筆者は、YouTube の HDR の Live配信を SDRモニターで見た際の HDR to SDR 変換に関心がある
Google Chrome を使用して特性を調査したいが、筆者は Google Chrome の動画のカラーマネジメントを殆ど理解していなかった
そこで Google Chrome で動画を再生した際のカラーマネジメントに関する簡単な調査を行った

2. おことわり

この記事は 2020年1月に筆者のPC環境で検証しました。そのため、この記事を読んでいる方の環境で同じ結果が得られるかは不明です。ご了承ください。

筆者のPC環境は以下の通りです。

項目	値	バージョン	備考
OS	Windows10	20H2	-
Browser	Google Chrome	Version 87.0.4280.141 (Official Build) (64-bit)	-
GPU	GeForce GTX 1660 SUPER	461.09	Adjust video color settings は "User the video player setting" を選択した
Monitor	EIZO EV3237	-	ICC Profile は OS に設定していない

3. 目的

Google Chrome で動画を再生した際のカラーマネジメントについて調査する
具体的には以下の場合の動作を調査する
- 動画のメタデータ(※1) の Color primaries のパラメータ (BT.709, P3D65, BT.2020) を変えた場合
- 動画のメタデータ(※1) の Transfer characteristics (BT.709, sRGB, ST 2084 など) を変えた場合
- Windows のカラマーマネジメント機能でモニターの ICC Profile を設定した場合

※1 カラーマネジメントに関係する動画のメタデータついては以下の記事を参照（なお、今回の調査も以下の記事と同じく H.264 の .mp4 ファイルで行った）

trev16.hatenablog.com

4. 結論

SDR動画では Color primaries に対するカラーマネジメントのみ行われる (図1, 図2)
- Transfer characteristics に対するカラーマネジメントは行われない (図3)
- 「Web コンテンツなので sRGB の Transfer characteristics に変換する」といった処理は実行されない
SDR動画ではモニターの ICC Profile は無視される
- その結果、静止画と動画が混在するWebページでは静止画にのみカラーマネジメントが働く (図4, 図5)
- 従って Chrome で SDR動画を正確に表示するためには、BT.709 などの規格に忠実な表示を ICC Profile を使わずに行える表示デバイスが必要である（例：ソニーの業務用モニター）
HDR動画では Color primaries と Transfer characteristics(※2) に対するカラーマネジメントが行われる (図6)
HDR動画ではモニターの ICC Profile を何らかの形で参照している (図7)
- 細かい事は分かっていない。現時点では ICC Profile の設定値に依って HDR to SDR 変換の結果に差異が生じることのみ確認した
- 本件については別記事で調査する予定（調査しない可能性も 40%くらいある）

※2 ただし HDR の Transfer characteristics は ST2084 しか確認していません。HLG は個人的に苦手で確認しませんでした。


図1. Color primaries が "BT.2020" の動画を再生した様子。右の図2 と比較するとカラーマネジメントが働いていることが分かる	図2. 左の図1 をメタデータなしで表示した様子


図3. Transfer characteristics を変化させた場合に、0-255 の Code Value 値に変化が生じるか確認した様子。Transfer characteristics を変化させても Chrome の動画表示に変化が無いことが分かる（グラフが滑らかではないのは、動画データが 16-235 CV の Limited Range であるため）。


図4. モニターの ICC Profile を設定せずに静止画と動画が混在するページ[2] を見た例	図5. モニターの ICC Profile に ACES_AP0-Gamma3.5-D65 を設定して静止画と動画が混在するページ[2] を見た例。


図6. HDRの動画を再生した様子。モニターの ICC Profile は設定していない	図7. HDRの動画を再生した様子。モニターの ICC Profile に ACES_AP0-Gamma3.5-D65 を設定した。左の図6 と比較すると表示に変化が起こっていることが分かる

5. 調査に仕様したデータ

5.1. 動画データ

今回の調査に使用した動画データは以下の記事で再生可能である。興味のある方は、自分の PC の Webブラウザでも再現するか確認して頂きたい。

trev16.hatenablog.com

加えて、動画データは上の記事の中で「右クリック」→「Save video as...」で保存可能である。DaVinci Resolve で「Bypass Color Management」オプションを有効にすればカラーマネジメント前のデータを参照することが可能である (図8)。動画の生データを確認したい方は DaVinci Resolve でこの手順を試して頂きたい。


図8. 動画の生データを "Bypass Color Management" オプションを使って確認する様子

5.2. ICC Profile

調査に使用した ACES_AP0-Gamma3.5-D65 の ICC Profile はリンク先からダウンロード可能である。なお、このプロファイルは以下の記事で作成したものである。

trev16.hatenablog.com

6. 調査の詳細

ここから調査の詳細について書いていく。

6.1. 検証用のテストパターン

今回の検証用に図9 に示すテストパターンを作成した。本検証の主目的は動画データでの 0-255 CV の観測であったため、このようなパターンとなった。各ブロックは 64x64 px のサイズとし、エンコード時に余計なノイズが生じないようにした。


図9. 作成したテストパターン
① 0-255 の Code Value 確認パターン（Transfer characteristics の値とは関係なく 0-255 の値） ② R, G, B, M, Y, C。(Color primaries の値とは無関係) ③ Color Checkr。Color primaries の値に合わせて色変換を行ってある

6.2. Transfer characteristics に関する検証

Transfer characteristics の値によって Google Chrome がカラーマネジメントを行うか確認するため、6.1. で作成したテストパターンに対して、複数種類の Transfer characteristics のメタデータを付与して Code Value の変化を確認した。今回は BT.709, sRGB, Unknown, SMPTE ST 2084 の 4パターンを作成した。

各動画を Google Chrome で再生し、OSのスクリーンショット機能を利用して Code Value の変化を確認した。結果は結論の図4に示した通りである。Transfer characteristics は Google Chrome のカラーマネジメントに何も影響を与えなかった。

参考として、動画のエンコードオプションを以下に示す。

# BT.709
ffmpeg -color_primaries bt709 -color_trc bt709 -colorspace bt709 -r 24 -i input_seq_%4d.png -c:v libx264 -movflags write_colr -pix_fmt yuv444p -qp 0 -color_primaries bt709 -color_trc bt709 -colorspace bt709 output_bt709.mp4 -y

# sRGB
ffmpeg -color_primaries bt709 -color_trc iec61966-2-1 -colorspace bt709 -r 24 -i input_seq_%4d.png -c:v libx264 -movflags write_colr -pix_fmt yuv444p -qp 0 -color_primaries bt709 -color_trc iec61966-2-1 -colorspace bt709 output_srgb.mp4 -y

# Unknown
ffmpeg -color_primaries bt709 -color_trc unknown -colorspace bt709 -r 24 -i input_seq_%4d.png -c:v libx264 -movflags write_colr -pix_fmt yuv444p -qp 0 -color_primaries bt709 -color_trc unknown -colorspace bt709 output_unknown.mp4 -y

# SMPTE ST 2084
ffmpeg -color_primaries bt709 -color_trc smpte2084 -colorspace bt709 -r 24 -i input_seq_%4d.png -c:v libx264 -movflags write_colr -pix_fmt yuv444p -qp 0 -color_primaries bt709 -color_trc smpte2084 -colorspace bt709 output_st2084.mp4 -y

6.3. Color primaries に関する検証

Color primaries の値によって Google Chrome がカラーマネジメントを行うか確認するため、6.1. で作成したテストパターンに対して、複数種類の Color primaries のメタデータを付与して色の変化を確認した。今回は BT.709, P3D65, BT.2020 の 3パターンを作成した。また、 P3D65, BT.2020 に関しては HDR版も作成した。

各動画を Google Chrome で再生しカラーマネジメントが働くかを、目視およびOSのスクリーンショット機能で確認した。結果は結論の図1, 図2 に示した通りである。Google Chrome は Color primaries の値に対してカラーマネジメントを行うことが分かった。

参考として、動画のエンコードオプションを以下に示す。

# BT.709
ffmpeg -color_primaries bt709 -color_trc bt709 -colorspace bt709 -r 24 -i input_seq_bt709_%4d.png -c:v libx264 -movflags write_colr -pix_fmt yuv420p -crf 18 -color_primaries bt709 -color_trc bt709 -colorspace bt709 output_bt709_cms.mp4 -y

# P3D65 (SDR)
ffmpeg -color_primaries smpte432 -color_trc bt709 -colorspace bt709 -r 24 -i input_seq_p3d65_%4d.png -c:v libx264 -movflags write_colr -pix_fmt yuv420p -crf 18 -color_primaries smpte432 -color_trc bt709 -colorspace bt709 output_p3d65_cms.mp4 -y

# BT.2020 (SDR)
ffmpeg -color_primaries bt2020 -color_trc bt709 -colorspace bt2020nc -r 24 -i input_seq_bt2020_%4d.png -c:v libx264 -movflags write_colr -pix_fmt yuv420p -crf 18 -color_primaries bt2020 -color_trc bt709 -colorspace bt2020nc output_bt2020_cms.mp4 -y

# P3D65 (HDR)
ffmpeg -color_primaries smpte432 -color_trc smpte2084 -colorspace bt709 -r 24 -i input_seq_p3d65_hdr_%4d.png -c:v libx264 -movflags write_colr -pix_fmt yuv420p -crf 18 -color_primaries smpte432 -color_trc smpte2084 -colorspace bt709 output_p3d65_hdr_cms.mp4 -y

# BT.2020 (HDR)
ffmpeg -color_primaries bt2020 -color_trc smpte2084 -colorspace bt2020nc -r 24 -i input_seq_bt2020_hdr_%4d.png -c:v libx264 -movflags write_colr -pix_fmt yuv420p -crf 18 -color_primaries bt2020 -color_trc smpte2084 -colorspace bt2020nc output_bt2020_hdr_cms.mp4 -y

6.4. ICC Profile に関する検証

OS に対してモニターの ICC Profile が設定されていた場合に Google Chrome が ICC Profile に応じたカラーマネジメントを行うか確認を行った。具体的には以下の2通りの状況を用意して、Google Chrome での見え方を確認した。

(a) モニターの ICC Profile を設定していない場合
(b) モニターの ICC Profile に ACES_AP0-Gamma3.5-D65 を設定した場合

ICC Profile は図10 のようにして設定した。


図10. ACES AP0, Gamam3.5, D65 の ICC Profile をモニターに設定した様子

結果は結論の図4, 図5 に示した通りである。ICC Profile に対するカラーマネジメントは静止画にのみ行われ、動画には行われない事が分かった。

7. 感想

調査を通じて動画のカラーマネジメントに少しだけ詳しくなれた。疑問点のいくつかを解消できたので時間をかけて調査を行って良かったと考えている。

引き続き以下の点について調査していきたい。

BT.2020 to BT.709 変換が働くことは分かったが、Chrome上の BT.709 で想定されている Gamma は 2.2, 2.4, sRGB のどれなのか？
Google Chrome で HDR の .mp4 ファイルを再生した場合の HDR to SDR 変換の特性の調査
Google Chrome で YouTube の HDR Live 配信を再生した場合の HDR to SDR 変換の特性の調査

加えて新たな疑問点も生じた。動画に対するカラーマネジメントが、Chrome のブラウザアプリ上で行われているのか、それとも Windows OS が持つ機能(Enhanced Video Renderer ?) の中で行われているのかが分からなかった。こちらも機会があれば調査したい。筆者は Chrome のドキュメント[3]を読んでも細かい所は何も分からなかった。