glslでカラーバーっぽいものを作ってみた
glslの勉強で作ってみたカラーバーっぽいシェーダー。
シェーダー詳しくなりたい。
glsl sandboxではなく、glslを解説しているサイトに直打ちで作ったので他に移植する時には調整が必要かも。
![](https://assets.st-note.com/img/1675571577339-tWzN0Zlnf3.png?width=1200)
//https://thebookofshaders.com/edit.php#07/rect-making.frag
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
float drawRect(vec2 st, float left, float bottom, float right, float top){
vec2 rect1 = step(vec2(left, bottom), st);
float pct = rect1.x * rect1.y;
vec2 rect2 = step(vec2(right, top), 1.0-st);
pct *= rect2.x * rect2.y;
return pct;
}
void main(){
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec3 color = vec3(0.0);
//ue
float pct = drawRect(st, (1.0 - (1.0/6.0)), 0.2, 0.0, 0.0);
color += vec3(pct,0.0,0.0);
float pct2 = drawRect(st, (1.0 - 2.0 *(1.0/6.0)), 0.2, (1.0/ 6.0), 0.00);
color += vec3( 0, 0, pct2);
float pct3 = drawRect(st, (1.0 - 3.0 * (1.0/6.0)), 0.2, 2.0 *(1.0/6.0), 0.0);
color += vec3(0, pct3, 0 );
float pct4 = drawRect(st, (1.0 - 4.0 * (1.0/6.0)), 0.2, 3.0 * (1.0/6.0), 0.0);
color += vec3(0.0, pct4 , pct4 );
float pct5 = drawRect(st, (1.0 - 5.0 * (1.0/6.0)), 0.2, 4.0 * (1.0/6.0), 0.0);
color += vec3(pct5 , pct5, 0);
float pct6 = drawRect(st, (1.0 - 6.0 * (1.0/6.0)), 0.2, 5.0 * (1.0/6.0), 0.0);
color += vec3(pct6, pct6, pct6);
//sita
float pct7 = drawRect(st, 0.65, 0.0, 0.0, 0.8);
color += vec3(0);
float pct8 = drawRect(st, 1.5 * (1.0 / 6.0), 0.0, 3.5 * (1.0 / 6.0), 0.8);
color += vec3(pct8);
float pct9 = drawRect(st, 0.0, 0.0, 0.4, 0.8);
color += vec3(0);
gl_FragColor = vec4(color,1.0);
}