シェーダーで配色するときに、以下のようなpalette関数を使うといい感じのグラデーションを作ることができる。しかし、パラメータからどういうグラデーションができるか予測しづらいという欠点もある。この記事は、palette関数でパラメータを変えたときの挙動をメモ的にまとめたものである。

vec3 palette(float t, vec3 offset, vec3 amplitude, vec3 frequency, vec3 phase) {
    return offset + amplitude * cos(6.28318530718 * (t * frequency + phase));

なお、この記事で出てくるコードは上述したpalette関数をマクロ関数にしたものを使用している。

#define palette(t,offset,amplitude,frequency,phase) ((offset)+(amplitude)*cos(6.28318*((t)*(frequency)+(phase))))

まずはphase以外を固定して試してみる。

位相の差を等間隔にすると、虹色のグラデーションになる。

palette(t, 0.5, 0.5, 1.0, vec3(0.0, 0.333, 0.666))

RGBの位相差を等間隔なまま小さくすると、グラデーションに明るい部分(白色)と暗い部分(黒色)が表れる。

palette(t, 0.5, 0.5, 1.0, vec3(0.0, 0.2, 0.4))
palette(t, 0.5, 0.5, 1.0, vec3(0.0, 0.1, 0.2))
palette(t, 0.5, 0.5, 1.0, vec3(0.0, 0.05, 0.1))

palette(t, 0.5, 0.5, 1.0, vec3(0.0, 0.4, 0.2))
palette(t, 0.5, 0.5, 1.0, vec3(0.0, 0.2, 0.1))
palette(t, 0.5, 0.5, 1.0, vec3(0.0, 0.1, 0.05))

palette(t, 0.5, 0.5, 1.0, vec3(0.2, 0.4, 0.0))
palette(t, 0.5, 0.5, 1.0, vec3(0.1, 0.2, 0.0))
palette(t, 0.5, 0.5, 1.0, vec3(0.05, 0.1, 0.0))

RGBのうち2つの位相差を小さくすると、2色のグラデーションのようになる。

palette(t, 0.5, 0.5, 1.0, vec3(0.0, 0.1, 0.5))
palette(t, 0.5, 0.5, 1.0, vec3(0.5, 0.0, 0.1))
palette(t, 0.5, 0.5, 1.0, vec3(0.1, 0.5, 0.0))

ここからはphase以外もいじってみる。

frequencyをいじると、いろいろな色が現れるようになるが制御が難しそう。

palette(t, 0.5, 0.5, vec3(1.0, 2.0, 3.0), vec3(0.0, 0.333, 0.666))

offsetとamplitudeもいじってみる。

例えば、R成分を定数にしてみるとこんな感じ。

palette(t, vec3(0.0, 0.5, 0.5), vec3(0.0, 0.5, 0.5), 1.0, vec3(0.0, 0.0, 0.2))
palette(t, vec3(0.5, 0.5, 0.5), vec3(0.0, 0.5, 0.5), 1.0, vec3(0.0, 0.0, 0.2))
palette(t, vec3(1.0, 0.5, 0.5), vec3(0.0, 0.5, 0.5), 1.0, vec3(0.0, 0.0, 0.2))

offset、amplitudeもいじるといい感じのグラデーションができるが、結局挙動を予想しながら作るのは難しい。

palette(t, vec3(0.7, 0.5, 0.3), vec3(0.2, 0.3, 0.3), 1.0, vec3(0.0, 0.35, 0.5));
palette(t, vec3(0.4, 0.5, 0.5), vec3(0.2, 0.3, 0.2), vec3(2.0, 1.0, 1.0), vec3(0.0, 0.4, 0.5))
palette(t, vec3(0.2, 0.6, 0.4), vec3(0.1, 0.5, 0.1), vec3(1.0, 1.0, 2.0), vec3(0.0, 0.3, 0.15))
palette(t, vec3(0.5, 0.7, 0.5), vec3(0.5, 0.1, 0.5), 1.0, vec3(0.0, 0.5, 0.3))