グラデーション・マップ

https://scrapbox.io/files/61667389f9569b0022971b70.png

ピクセルの明度などを基に、別の色へと割り当てるエフェクト。

トーンカーブやトーン・マッピングは、RGBそれぞれにチャンネル値を割り当てる

グラデーションマップは、何らかのスカラー量（1つの数量）に畳み込んでから、何らかのルックアップテーブルや関数を用いて色を割り当てる

Photoshop, クリスタ

その名の通り「グラデーションマップ」という名前のエフェクトがある

Blender

変化させれるチャンネルの種類は「RGB(A)」「HSV(A)」「HSL(A)」の3種類

HSV, HSLは、Hueについて「Clockwise」「Counter-Clockwise」「Near」「Far」の4種類の補間方法がある

https://docs.blender.org/manual/ja/2.90/_images/interface_controls_templates_color-ramp_interpolation.png

補間方法は「一定」「リニア」「イーズ」「カーディナル」「Bスプライン」の5種類

AfterEffectsでは

Tint - 明度0%と100%での色を指定し、中間を補間

Tritone - 0, 50, 100%の3点で指定

CC Toner: 3-5段階でグラデーション指定できる

Colorama（コロラマ）

円盤状のグラデーションエディタで、明度0%, 100%の割り当て後の色が滑らかに繋がるようにマッピングできる

明度に限らず、ｍピクセルのどの情報をもとにマッピングするかも指定できる

RGBA各チャンネル値、輝度、彩度、色相など

Substance

Gradient Mapノードがある。面白いのは、画面ドラッグで描いた線からグラデーションを生成できるUI

https://youtu.be/3y-7w9F2TpQ?t=199

シェーダ

じつは非常に簡単です。縦1pxなんかのグラデーション画像を与えてやって、サンプリングするだけ。

ひとクセあるポストエフェクトにどうぞ。

code:glsl

uniform sampler2D inputTex;

uniform sampler2D gradientTex;

varying vec2 uv;

vec4 gradientMap(float t) {

return texture2D(gradientTex, vec2(t, .5);

}

void main() {

vec4 src = texture2D(inputTex, uv);

float brightness = (src.r + src.g + src.b) / 3.0;

vec4 dst = gradientMap(brightness);

gl_FragCoord = dst;

}

https://scrapbox.io/files/616676cdb179e40021875269.png

写真史、美術史におけるグラデーションマップの発見

「ネガ」

https://scrapbox.io/files/61667714100ae6001dfcb4da.png

Alexis Andréさん