のぐそんブログ

暗いおじさんがシコシコ書くブログです。

HSVを使って色をぬる

フラグメントシェーダーで描画した↓の丸に色を塗りたいと思います。

何も考えないでやると、こんな感じでしょうか。

void main( void ) {
    
    vec2 p = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x,resolution.y);
    float len = length(p);
    float light = 0.1 / len;
    vec3 color = vec3(0.5,0.5,1.0);
    gl_FragColor = vec4(vec3(light)* color  , 1.0);
}

少しイメージと違います。。。 さらに色を動的に変化させるにはRGBの値の組み合わせをそれぞれ制御する必要があるのできれいに切り替わらなそうです。

HSVをつかう

色を動的に変化させるには、HSVのH(色合)を変えたほうが制御しやすそうでした。 そこで、HSVの値からRGBの値に変換してgl_FragColorに入れてみたいと思います。

しかし、HSVからRGBに変換する方法がわからず、下記の記事からコピペしました。

glslでhsv2rgbとrgb2hsv

最終的には、以下のようになりました。

// hsvからRGBに変換
vec3 hsv(float h, float s, float v){
    vec4 t = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
    vec3 p = abs(fract(vec3(h) + t.xyz) * 6.0 - vec3(t.w));
    return v * mix(vec3(t.x), clamp(p - vec3(t.x), 0.0, 1.0), s);
}


void main( void ) {
    
    vec2 p = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x,resolution.y);
    float len = length(p);
    float light = 0.1 / len;
    vec3 color = hsv(abs(sin(time)),1.0,1.0);
    
    gl_FragColor = vec4(vec3(light) * color , 1.0);
}

まとめ

HSVの変換処理の中身が何をしているのかさっぱりわかりません。。。 これは便利関数として割り切って進もうと思います。