4 颜色
简介
1 .访问向量的方式
//定义一个颜色变量
vec3 red=vec3(1.0,1.0,1.0,0.0)
red.x=1.0
red.y=1.0
red.z=1.0
red.r=1.0
red.g=1.0
red.b=1.0
red.s=1.0
red.t=1.0
red.p=1.0
red[0]=1.0
red[1]=1.0
red[2]=1.0
//四种访问方式
2 .这几种访问方式可以访问颜色通道，所以我们自然而然的就可以改变颜色的某个通道的值
3 .GLSL的本质就是用坐标值的大小根据某种规则去映射颜色
混合颜色mix(r1,r2,0-1)
1 .以百分比混合某个值
image.png
颜色随时间变化
1 .这里的颜色不随坐标变化，而是随时间变化。这也解释了颜色的变化规律，想要实现图形就必须随坐标变化，但是想要实现动画，就必须随时间变化。
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform float u_time;
vec3 colorA=vec3(0.0,0.0,0.0);
vec3 colorB=vec3(1.0,1.0,1.0);
void main() {
vec3 color=vec3(0.0);
float pct=abs(sin(u_time));
gl_FragColor=vec4(pct);
//跟随时间明暗变化的效果
}
2 .颜色在两种之间变化.
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform float u_time;
vec3 colorA=vec3(0.658,0.725,0.150);
//纯白
vec3 colorB=vec3(0.228,0.244,1.000);
//纯黑
//如果想要别的颜色之间变换，就要改变这个值
void main() {
vec3 color=vec3(0.0);
float pct=abs(sin(u_time));
color=mix(colorA,colorB,pct);
gl_FragColor=vec4(color,1.0);
//跟随时间明暗变化的效果
}
3 .颜色以彩虹色变化
image.png
1 .先让值1的r从0-1，然后让值1的
sin值的一些操作
image.png
1 .在 sin 里让 x 加上时间（u_time）。让sin 曲线随 x 轴动起来
2 .在 sin 里用 PI 乘以 x。注意 sin 曲线上下波动的两部分如何收缩了，现在 sin 曲线每两个整数循环一次.对应图3，乘大于1的，曲线频率变快。小于1，频率变慢
float rChange=abs(sin(u_time*3.1415926535));
3 .给 sin(x)（注意不是 sin 里的 x）加 1.0。观察曲线是如何向上移动的，现在值域变成了 0.0 到 2.0。扩展值的范围，之前是-1，1.现在变成了-2，2。如果乘，就是乘的倍数变化
4 .计算 sin(x) 的绝对值（abs()）。现在它看起来就像一个弹力球的轨迹。只会取正的值，图6,也就是0-1
5 .只选取 sin(x) 的小数部分（fract()）
6 .使用向正无穷取整（ceil()）和向负无穷取整（floor()），使得 sin 曲线变成只有 1 和 -1 的电子波
7 .总结：正弦曲线公式：y = A sin(Bx + C) + D A 控制振幅，A 值越大，波峰和波谷越大，A 值越小，波峰和波谷越小； B 值会影响周期，B 值越大，那么周期越短，B 值越小，周期越长。 C 值会影响图像左右移动，C 值为正数，图像右移，C 值为负数，图像左移。 D 值控制上下移动
8 .正弦公式y=Asin(Bx+c)+D
1 .A：决定图像的波峰和波谷的跨度，A值越大，波峰和波谷越大
2 .B:决定图像的变化周期，B值越大，周期越小，B值越小，周期越大
3 .C：决定图像的偏移，C是正值，整个图像向右平移，C是负值，整个图像向左平移
4 .D：决定图像的向下偏移，D值为正，整个图像向上平移，D值为负，整个图像向下平移
其余取值的操作
y = mod(x,0.5); // 返回 x 对 0.5 取模的值
//y = fract(x); // 仅仅返回数的小数部分
//y = ceil(x); // 向正无穷取整
//y = floor(x); // 向负无穷取整
//y = sign(x); // 提取 x 的正负号
//y = abs(x); // 返回 x 的绝对值
//y = clamp(x,0.0,1.0); // 把 x 的值限制在 0.0 到 1.0
//y = min(0.0,x); // 返回 x 和 0.0 中的较小值
//y = max(0.0,x); // 返回 x 和 0.0 中的较大值
1 .造型函数进阶https://thebookofshaders.com/05/?lan=ch
2 .着色器中不同函数的图形 https://www.iquilezles.org/www/articles/functions/functions.htm
分别合并颜色每一条通道的值，并展示合并值的曲线取值
#ifdef GL_ES
precision mediump float;
#endif
#define PI 3.14159265359
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
vec3 colorA = vec3(0.149,0.141,0.912);
vec3 colorB = vec3(1.000,0.833,0.224);
float plot (vec2 st, float pct){
// return smoothstep( pct-0.02, pct, st.y) -
// smoothstep( pct, pct+0.02, st.y);
// return smoothstep(0.001,0.02,abs(st.y-pct));
return (1.0-smoothstep(0.0,0.01,abs(pct-st.y)));
// 其实就是想做这个东西,为什么不用这种方式更简单的方式表示呢，这种函数竟然还是一个三元的
}
//整个函数有点像if操作.根据整个x坐标对应的y值，当前值，决定要返回的值.主要是y,如果想要展示的值必然对应
//这里我们想要实现的就是，如果某个x对应的y值等于pct,那么这里就显示pct值对应的颜色,否则就显示原来的颜色.
void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec3 color = vec3(0.0);
vec3 pct = vec3(st.x);
pct.r = smoothstep(0.0,1.0, st.x);
pct.g = sin(st.x*PI);
pct.b = pow(st.x,0.5);
// 图层1
// color等于一次，就会给他加一层颜色,这种是在原来的基础上叠加
color = mix(colorA, colorB, pct);
//这里已经做完了颜色的全部融合.两种颜色的rgb值分别按照pct颜色的rgb值进行混合
//下面做的就是把三种融合的比例以线的方式给可视化出来.按照ps的效果，这算是一个新的图层
// 测试，给原来彩色的加一个黑白的颜色：实测确实给盖住了,所以新图层的颜色，一定不能全部盖住原来的颜色，改变的颜色要有范围
// color=mix(colorA,colorB,0.5);
color = mix(color,vec3(0.938,1.000,0.364),plot(st,pct.r));
color = mix(color,vec3(0.0,1.0,0.0),plot(st,pct.g));
color = mix(color,vec3(0.0,0.0,1.0),plot(st,pct.b));
gl_FragColor = vec4(color,1.0);
}
HSB
image.png
1 .色度，饱和度，亮度三个属性表示颜色。人脑在辨别颜色的时候，不会把色光分解成RGB，而是按照色度，饱和度和亮度来判断的.所以这个也被称为最接近人眼睛的色彩
2 .色相（色度）就是纯色，即组成可见光谱的单色，红色在0°，绿色在 120°，蓝色在 240°。它基本上是 RGB 模式全色度的饼状图 。可以想象成一个圆盘，360度，每一个度代表一种颜色
3 .饱和度代表色彩的纯度，为零时即为灰色。白、黑和其他灰度色彩都没有饱和度。最大饱和度时是每一色相最纯的色光
4 .亮度是指色彩的明亮度。为零时即为黑色。最大亮度是色彩最鲜明的状态
HSV颜色空间
1 .一种颜色空间, 也称六角锥体模型
image.png
image.png
image.png
2 .图像识别都会用HSV图像空间，因为这个表达起来更加直观
3 .Hue（色调、色相）Saturation（饱和度、色彩纯净度）Value（明度）
HSL
x映射颜色值，y映射明亮度
1 .更加方便拾取颜色
