シェーダーで配色するときに、以下のような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))
