ガンマ特性、ガンマ補正について知っておく。

web屋もいつか遭遇するので。

こんにちは、「ふ」です。
「ガンマ特性」「ガンマ補正」についての知識をお話ししていきます。

「ガンマ」とは、映像の明るさに関する指標のことで、カメラや映像制作を専門で扱う人たちにとっては、縁の深いものです。

「ふ」もそうですが、webやプログラミング界隈の人間には聞きなれない言葉でしょう。しかし我々においても画像を加工し、ディスプレイで表示させるという作業を行っています。
〜やがては「ガンマ」の知識が必要な場面に遭遇します。

そこで今回は「webやプログラミング勢に向けた、ガンマ講座」をお送りします。馴染みのあるRGBやPCのディスプレイを例にして進めていきますので、この機会に「ガンマ」についての理解を習得しておきましょう。

SVGコーディングブック

著者：ふ

Apple Booksでみる

このたびSVG本を出版しました。基本から応用まで、SVGの学習に役立ててください。

gamma特性とgamma値。

我々は普段、webデザインなどの配色にはRGBを使って指定→コンピュータに指令を送っています。

特別な加工を与えていないとき、RGB値の入力と出力は等しいはずです。
G = 0.5を入力すれば、出力のGも0.5。R = 0.1を入力すれば、出力Rも0.1..というように。
このinとoutの関係をグラフにした場合⬆︎のような、傾き45°の直線となります。

ところが。
最終的にディスプレイで表示させたとき、このようなin = outという関係にはなりません。

一般的なディスプレイには「クセ」があり、実際のinとoutの関係は⬆︎のような曲線となります。
中間部分がin値に対して小さい値で出力されてしまうのです。

ディスプレイも、入力や内部処理こそデジタル信号で介されますが、最終的に人の目に見えるように発光させる部分は、物理装置です。このような「クセ」があるのも分かります。

左の元画像をそのままディスプレイで出力させたとしたら、右のようになります。

右の画像はずいぶんと暗くなってしまいました。RGBでは、「値が小さい」イコール「暗い」ということになります。

このディスプレイの「クセ」を関数式で表すとしたら、おおよそ out = in ^2.2 の曲線となります。
^(ハット)はべき乗を表します。「outはinの2.2乗」という意味です。

「2.2」の部分は「指数(exponent)」と呼びます。この「2.2」という数値は一般的なディスプレイにおけるものであり、

一部のディスプレイやカメラなど他の環境にあっては、少しずつ値が変わってきます。out = in ^1.8だったり out = in ^2.4だったりします。ただクセの違いはあれど、それぞれを「outはinの〇〇乗」という関係式で表すことが可能です。
そこでinとoutの関係を

out = in ^γ

で表すようになりました。このin-outの関係をガンマ特性、γの値をガンマ値と呼びます。


ですからγ(ガンマ)は、単に指数を当てはめるための文字でしかなかったのです。べつにaでもXでもよかったんです。
ただ「γ」と言えば「RGBの入出力の関係を言っているんだな〜」と共通認識が得られるようにするため、この文字γが通例として使われるようになったのでしょうね。

ガンマ補正。

扨(さて)、ガンマ特性によって暗くなってしまった画像。
どうにかしたいですよね。

そこで。
y = x の直線に対し、ディスプレイのガンマ曲線を反転させたものを考えます。

入力信号をディスプレイに出力する前の段階で、反転させた曲線に変形させておきましょう。
変形後の、出力する直前の信号をpreoutとすると、preout = in ^1/2.2 となります。指数2.2を反転させたので、逆数にしたものですね。

加工したpreout信号をディスプレイに出力します。するとディスプレイのガンマ特性^2.2と相殺されて、最終的にin = outの状態で出力されます。

preoutに加工した入力信号をディスプレイに送ることで、右の画像のように元の明るさを保ったまま表示させることができました。

このpreoutへ信号を変形させる処理。
ガンマ特性によって偏りの生じるin-outの関係を補正することを、ガンマ補正と言います。

指数の部分を色々と変化させてみました。
指数を変化させると、グラフの中間部分が大きく変化していることが観察できます。 CGの世界でいうガンマとは、RGB信号の中間部分の入出力の関係、つまりは明るさのことを指します。

「特性」と「補正」は逆。

ガンマについて語られるとき「ガンマ特性2.2」「2.2のガンマ補正」などの言い回しを見かけることでしょう。ただし同じ「2.2」でも、特性と補正では逆の意味で使われている場合が多いので、注意が必要です。

「ガンマ特性2.2」というのは文字通り out = in ^2.2を意味します。
しかし「ガンマ補正2.2」と言った場合、 out = in ^1/2.2の処理を指すことが多いです。

通常ディスプレイなどの機器が持つガンマ特性は「2.2」や「1.8」など分かりやすい数値が多いです。するとそれを補正するときのガンマ値は「1/2.2」「1/1.8」の逆数になってしまうんですよね。

ガンマ補正に関しては、いちいち逆数で表現するのも面倒です。そこで「逆数とする前の、元の数値で表現」されることが一般化したのでしょう。
「ガンマ補正n」とあったときは、実際のガンマ値は1/nとなるので、気をつけてください。

sRGB色空間。

ここで疑問が生じます。
webに表示させる画像やスマホで撮った写真などは、別段、暗くなることもなく元々の明るさで画面に表示されます。これはどーなっているのでしょうか？

webやスマホなど、コンピュータの世界では、sRGB色空間という標準規格が採用されているからです。

グラフは、RGBとsRGBの関係を示したものです。
元のRGB値(横軸)が、⬆︎のような割合でsRGB値(縦軸)に変換されて最終的にディスプレイへと渡されます。

このカーブ、これまで何度か見てきましたよね？
そう、ガンマ値1/2.2の曲線です。

sRGB色空間を採用することにより、自動的に2.2のガンマ補正が施されていたのです。みなさんが撮影した写真や作成したイラストが自然な形で画面に表示されるのも、この「自動ガンマ補正」のおかげです。

ただこれにも問題がないわけではありません。我々が手動で色補正などを行ったとき、その補正基準が素のRGBであった場合。意図したとおりの結果が得られないこともあるので、そこについては対応が必要となってきます。

次回は本業にもどります(笑)

最後までお読みくださり、ありがとうございました。

ここのところ「ふ」はSVGのfilterについて調査していたのですが、どうしてもこのγに関する知識がないと前に進めない部分があり、今回記事を設けることにしました。
次回からは、本来のベクターグラフィックやwebデザインについてお伝えする「フーノページ」に戻って、発信していきたいと思います。

ではまた〜 🎵