【シェーダー】バイリニア補間で4色グラデーションを作る

はじめに

シェーダーを使い、以下のような4色のグラデーションを作る方法を紹介します。

f:id:r-ngtm:20210116142756p:plain:w480 — 4色グラデーション

2色グラデーション

x座標を使って二つの色を線形補間した場合、以下のような二色のグラデーションを作ることができます。

f:id:r-ngtm:20210116153308p:plain:w480 — 2つの色を線形補間

vec3 c = mix(GREEN, BLUE, p.x);  // x座標で 緑と青を線形補間

4色グラデーション

x, y座標を使って４色を補完すると、以下のような４色のグラデーションを作ることができます。

f:id:r-ngtm:20210116152839p:plain:w480 — x, y で4つの色をブレンド

vec3 tc = mix(YELLOW, RED, p.x); // top : 黄と赤の線形補間 (上側の色)
vec3 bc = mix(GREEN, BLUE, p.x); // bottom : 緑と青の線形補間 (下側の色)
vec3 c = mix(bc, tc, p.y); // y座標で top と bottom の線形補間

この補間はバイリニア補間(双一次補間)という名前がついています。

GLSLによる4色グラデーション実装

uniform vec2 resolution;

#define YELLOW vec3(1,1,0)
#define RED vec3(1,0,0)
#define GREEN vec3(0,1,0) 
#define BLUE vec3(0,0,1)

void main()
{
    vec2 p = gl_FragCoord.xy / resolution.xy;    
    vec3 tc = mix(YELLOW, RED, p.x); // top color
    vec3 bc = mix(GREEN, BLUE, p.x); // bottom color
    vec3 c = mix(bc, tc, p.y);
    gl_FragColor = vec4(c, 1);
}