コンピューターが速くなり、メモリが安くなる程チャレンジしたい高解像度化。4K/8Kなど広さの解像度や、フレームレートという時間の解像度に加えて、表現できる色自体の高解像度化も図りたい。HDR(High Dynamic Range)に対応したテレビで対応コンテンツを見ると、今までのディスプレイでは表現できなかった発色と、光の表現を体感できる。ぜひ、これをプログラミングで自由自在に使いたい!

残念なことにブラウザにおけるHDR向けの仕様策定は始まったばかり。まだ実際のブラウザでは試すことはできない様子。
High Dynamic Range and Wide Gamut Color on the Web


LCh 3 colors picker」(src on GitHub)
CSS4で対応予定のLCH色指定、ステキな色選択LChコンポーネントがあったので、export文を1行加え、ESモジュール対応、シンプルなサンプルと3色選ぶアプリを作ってみた。HSLと違って、色相が変わっても見た目の明るさがほぼ同じで使い勝手よし!

既存のRGBで表現できている範囲が白線で表示できる機能があってONにしている。この境界はHDR対応のディスプレイやテレビだとぐっと広がっているはず。 ブラウザでHDRが気軽に楽しめる日が待ち遠しい。


テレビのHDRモードをHLGにすると、色の分解能はともかくダイナミックレンジは広くなる。ひとまずこれを利用して、花火などの表現には使えそう。

iPhoneのディスプレイも通常のRGBそれぞれ8bitの計24bitでは収まらない表示能力があるはず。ブラウザが対応するのも待つばかりでなく、ネイティブアプリとして開発して、せっかくの性能をフルに使う方法、また調べてみたい。

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / RSS