ブラウザによって色が異なる「色空間」の不思議な世界

ブラウン管や液晶ディスプレイ、スマートフォン、デジタルカメラでは、赤・緑・青の3種の三原色を組み合わせることで幅広い色を再現するRGBカラーモデルが採用されており、ウェブページや画像の色合いはRGBで「同じ色」になるように指定されています。しかし、ムービーの場合はそもそも同じRGBが出力されないという問題が存在するという点について、ビデオパフォーマンスモニタリングツールを販売するMUXが解説しています。

Your browser and my browser see different colors | Mux blog
https://mux.com/blog/your-browser-and-my-browser-see-different-colors/

色の見え方には観測者同士による差異が存在するため、デジタルの世界では色を定量化するために、赤(R)・緑(G)・青(B)をそれぞれ0から255の値で表す「色空間」という手法が採用されています。PCにおいてはsRGBやAdobe RGBが色空間として一般的ですが、動画においてはSDコンテンツはBT.601、HDコンテンツはBT.709という色空間が一般的とのこと。

MUXが指摘する問題は、「BT.601とBT.709では、ブラウザによって異なる色が表示されることがある」というもの。動画を記録・変換・再生するためのフリーソフトウェアの中でも特に広く使われているFFmpegで以下のコマンドを入力して、テストムービーを作成します。色空間としてはデジタル放送で採用されるYUV 420を使用。色は指定しないため、デフォルトの「yuv（0,0,0）」のムービーが生成されます。

ffmpeg -f rawvideo -s 320x240 -pix_fmt yuv420p -t 1 -i /dev/zero -an -vcodec libx264 -profile:v baseline -crf 18 -preset:v placebo -color_range pc -y 601.mp4

生成されたムービーをMacのSafariでレンダリングすると、以下のようになります。この色をRGB形式で表すと、「rgb（0,135,0）」となります。

ここでは、「ムービーの色空間YUV420をブラウザの色空間sRGBに変換する」という処理をSafari自らが行っています。しかし、ムービーのデータには「色空間はYUV420である」という情報は記載されていないため、Safariは経験的な推測によって色空間の処理を行っているとのこと。こうしたSafariの推測に任せたくない場合は、「-color_trc」「-colorspace」「-color_primaries」などのコマンドで色空間に関する情報をメタデータに記入します。上記のコマンドを追加したムービーをSafariでレンダリングした表示が以下。Safariの推測に任せた表示と同一のものが生成されました。

続いては先ほどのコマンドに、「-vf "colorspace=all=BT.709"」を追加してBT.709形式の色空間に変換します。

ffmpeg -i 601vui.mp4 -an -vcodec libx264 -profile:v baseline -crf 18 -preset:v placebo -vf "colorspace=range=pc:all=bt709" -y 709.mp4

これをSafariでレンダリングしたものが以下。「rgb（8,157,0）」という、先ほどに比べてやや明るい緑色が表示されました。

こちらも「-color_trc」「-colorspace」「-color_primaries」を使って、色空間に関する情報をメタデータに記入してみます。これをSafariでレンダリングすると以下のようになり、BT.601とはほんの少しだけ異なる「rgb（0,132,0）」という色合いが表示されました。

以上の結果から、MUXは「ムービーをレンダリングする際、Safariは色空間がBT.601だと想定する」と推測しています。ただし、BT.701はHDコンテンツの標準形式なので、実際にHDに相当する解像度の1920×1080でテストムービーを生成して表示してみます。以下の画像では、SDコンテンツの結果が上段、HDコンテンツの結果が下段となっていますが、これら2つに差異はありません。

同様の実験をMacのChromeで行うと、ハードウェアアクセラレーションがオンの状態ではSafariとほぼ同一の結果が得られます。

しかし、ハードウェアアクセラレーションをオフにすると、色空間の情報をメタデータに記入した上でも、BT.601とBT.701は異なる色として表示されます。

輪をかけてひどいのがMacのFirefoxで、メタデータに色空間の情報が存在しないBT.601では、明らかに濃い緑色が表示されました。

今度はMacではなくWindowsを使って、同様の色実験を続けます。WindowsでのEdgeが以下。メタデータを無視し、さらに色空間がBT.601という想定でレンダリングを行っているように見えます。

WindowsでのChrome(ハードウェアアクセラレーションがオン)では、以下のような奇妙な結果に。BT.601とBT.701の色空間や、メタデータの有無、解像度によってバラバラな色が表示されます。この結果について、Muxは「OSかビデオカードドライバのレベルで何かが起きているのでは」と一言。

一方、FirefoxはWindowsとMacで差はなく、メタデータに色空間の情報が存在しないBT.601では明らかに濃い緑色が表示されるという結果でした。

一連の結果から、MuxはFFmpegを使用する場合はメタデータにしっかり色空間の情報を記入すべきと指摘。各ブラウザの開発者に対しては、各ブラウザのプロジェクトリーダー間で色空間に関する会合がもたれるべきだと主張しています。