広色域とハイダイナミックレンジに関するW3Cのワークショップ
アクセシビリティ・エンジニア 中村(直)W3C Workshop on Wide Color Gamut and High Dynamic Range for the Webというワークショップが7月から9月にかけて、バーチャルイベントとして、主に事前収録されたセッション形式で開催されています。
はじめに、ワークショップの名称になっているWide Color Gamut(WCG)について触れておきたいと思います。
よく知られているように、WebではsRGBの色域で表される色を用いています。これはテレビのハイビジョン規格から派生した、1996年に策定された標準に基づいたものですが、この25年もの間変わることなく使われ続けています。しかしその一方で、技術の進歩はめざましいものがあります。1996年当時に主流だったブラウン管ディスプレイは液晶ディスプレイや有機ELに取って代わり、現在ではスマートフォンのようなデバイスでも動画を楽しめるような世の中になりました。テレビ放送では、アナログ放送がデジタル放送に切り替わり、4K/8K放送も開始されています。モニターの解像度が最もわかりやすい変化ではありますが、より広い色域とダイナミックレンジが扱えるようになってきています。
広色域などと訳されるWide Color Gamutは、sRGBよりも広い色域のことを指します。夕焼けの色、花火の色、草木の緑色などの鮮やかな色はsRGBの外側にあります。DCI-P3と呼ばれるデジタルシネマの規格を元にAppleが策定したDisplay P3は、いまや身近なデバイスで対応しています。Wide Gamut Color in CSS with Display-P3に示されているように、ここ5年で発売されたiPhoneやMacBook Pro、またAndroid にワイドカラー フォトが登場: 対応するために知っておくべきことに示されているように、Pixel 3やSamsung Galaxy S10といったAndroid端末が既に対応しています。
その一方で、テレビ・映画業界はDisplay P3よりもさらに広い色域を扱う、ITU-R BT.2020を策定しています。4K/8K放送で採用されている色域でもあります。
Webでもそういった色域を適切に扱えるようになる必要があるわけですが、CSS Color Level 4(参考日本語訳)では10. Profiled, Device-dependent Colorsとしてそのような色域が仕様上扱えるようになっています。もっとも、CSSを定義するCSS Snapshot 2020(参考日本語訳)では仕様として安定している一方でテストと実装経験が必要と位置づけられているものではあります。
WCGに関しては、IgaliaのFelipe Erias氏によるThe path towards richer colors in Chromiumでは、Chromiumで広色域の実装に必要なものについて、またCSS Color Module Level 4のエディターでもあるLea Verou氏によるTowards a Color API for the Web Platformは、色域に依存しないColor API(GitHub)の課題について、セッションで取り上げられているのが興味深く感じました。
次に、High Dynamic Range(ハイダイナミックレンジ、HDR)についてですが、ダイナミックレンジとはどのようなものでしょうか。
ヒトの目は、夜空から太陽光まで、広範囲の明るさを知覚できます。最も明るい白輝度を最も暗い黒輝度で割ったものをダナミックレンジと呼び、値が大きいほど画像や映像の再現性が高まります。白輝度が80 cd/m2のsRGBは、5%(4cd/m2)の表示フレア(viewing flare)を持ち、全ダイナミックレンジ(total dynamic range)は20倍になります。
Display P3は、白輝度が約200 cd/m2、黒輝度が0.80 cd/m2でよく使用され、全ダイナミックレンジは250倍となります。輝度の限界は、ディスプレイ全体を最大輝度の白色に設定した場合の消費電力と熱によって設定されます。また、白色はテキストの典型的な背景であり、「紙の白」や「メディアの白」を表すため、ユーザーの快適さも向上します。放送業界では、これは標準ダイナミックレンジ(SDR)と呼ばれていますが、ヒトの目が知覚できるものをはるかに下回っています。
自然界では、非常に明るい物体が視野の割合はごく一部に限られます。また、私たちはかなり暗い部屋でも細部を見ることができます。シーンごとの明るさの変化と局所的なハイライトという2つの側面を利用することで、ディスプレイは暗いシーンではバックライトを下げ、明るいシーンではバックライトを上げることで、より広いダイナミックレンジを実現できます。さらに、画面の小さな部分にバックライトを設置すれば、紙の白よりもはるかに明るく小さなハイライトを、小さな面積と時間で表現できます。これはハイダイナミックレンジと呼ばれます。
ITU-R BT.2100では、PQ方式の電気光学伝達関数で、紙の白を約200cd/m2で表示します。しかし、最も暗い黒は0.001 cd/m2、ピークの白は10000 cd/m2で、全ダイナミックレンジは1000万倍にもなります。これは理論上のピークですが、ピーク輝度が1000~4000 cd/m2のリファレンスモニターが映画やテレビの制作に現場で広く使用されています。また、民生機器ではピーク輝度が500〜1200 cd/m2のものが一般的になりつつあります。
HDRは、ストリーミング、テレビ放送、ゲーム機、ハイエンドのスマートフォンでのHDR映像の再生などで使用されており、静止画にも使われ始めています。その一方で、Webは現在、標準ダイナミックレンジのままです。
HDRについては、BenQのChris Bai氏によるHow to Enable HDR Mode on Your HDR Compatible Monitor under Windows OS?で、Windows 10でHDRモードを有効にする方法を紹介しています。もっとも、筆者のプライベートの環境ではHDRモードに対応していない古いモニターのために、有効にはできませんでしたが、試してみる価値はあるでしょう。また、GoogleのKenneth Russell氏とMozillaのJeff Gilbert氏の共同で、Deep Dive on HDR, WCG and Linear Rendering in WebGL and WebGPUというセッションもあります。低レベルのAPIに関心がある人には参考になるのではないでしょうか。
WCGとHDRの説明を交えて、ごく簡単にセッションの一部の紹介をしてみました。WCGやHDRはハードウェアが対応しないことにははじまらないという面はあるため、Web制作の実務で考慮するにはまだまだ時間がかかるでしょう。その一方で、Webでより高度な色を扱える環境は着々と準備が進められてきているとも言えるでしょう。