前言
课程回顾:
ShaderMaterial 这里用的是着色器材质
所以顶点和片段着色器就不需要像原始着色器那样添加需要的属性 然后写
片段着色器需要属性 ： 顶点 属性 -》变化 -》 片段中
顶点中的属性不需要声明 只需要声明传送的变量 例如 varying vec vUv; vUv = uv;
补充：uv 关于二维坐标，用于放置纹理或东西
平面二维坐标 左下角开始 x, y (0.0 - 1.0 / 0.0 - 1.0)
下面图片是一些参考理解示意图
图片想象成数字，数字大小想象成颜色强度
一、在片段着色器中实现一些效果
1.实现颜色的改变
在片段着色器中引入了向量vUv，同时我们创建vec4 等于对应的gl_FragColor
vec4 的参数 对应 rgba, r（红色）g(绿色) b(蓝色) a（阿尔法） 对应颜色
也可以叫xyza；x轴，y轴，z轴 , a（透明） 对应位置
对应值0.0 - 1.0
如何实现红蓝渐变
下方代码使用的是GLSL
varying vec2 vUv;
void main()
{
gl_FragColor = vec4(vUv,1.0, 1.0); // 这里改变颜色
}
varying vec2 vUv;
void main()
{
gl_FragColor = vec4(vUv,0.0, 1.0);
}
2.着色器黑白变化颜色设置
2.1 右渐变
varying vec2 vUv;
void main()
{
float strength = vUv.x;
gl_FragColor = vec4(vec3(strength), 1.0); // 黑白渐进色 ，x由于二维坐标左到右，变大，可以利用这一点渐变
}
2.2 上渐变
varying vec2 vUv;
void main()
{
float strength = vUv.y;
gl_FragColor = vec4(vec3(strength), 1.0); // 黑白渐进色 ，x由于二维坐标左到右，变大，可以利用这一点渐变
}
2.3下渐变
varying vec2 vUv;
void main()
{
float strength = 1.0 - vUv.y;
gl_FragColor = vec4(vec3(strength), 1.0); // 黑白渐进色 ，x由于二维坐标左到右，变大，可以利用这一点渐变
}
2.4 上渐变重复
mod(X, Y)函数返回X对Y取模的结果。如果X和Y都是数组，mod函数会对数组的每个元素分别进行取模运算
对上一步的结果取模 1.0，即计算该值除以 1.0 的余数。
由于取模 1.0 的效果是将值限制在 0 到 1 之间（不包括1）
，这个操作实际上是在做一个周期性变换，
使得 vUv.x 在 0 到 10 之间变化时，结果会在 0 到 1 之间循环
varying vec2 vUv;
void main()
{
float strength = mod(vUv.y * 10.0,1.0);
gl_FragColor = vec4(vec3(strength), 1.0); // 黑白渐进色 ，x由于二维坐标左到右，变大，可以利用这一点渐变
}
2.5 y白色条形
step(edge,x) 如果x < edge，返回0.0，否则返回1.0 ； x白色条形做法相同不过将数据y改成x
varying vec2 vUv;
void main()
{
float strength = mod(vUv.y * 10.0,1.0);
strength = step(0.5,strength);
gl_FragColor = vec4(vec3(strength), 1.0); // 黑白渐进色 ，x由于二维坐标左到右，变大，可以利用这一点渐变
// Black and with version
// gl_FragColor = vec4(strength,strength,strength, 1.0);
}
调整条形的大小
varying vec2 vUv;
void main()
{
float strength = mod(vUv.y * 10.0,1.0);
strength = step(0.8,strength); // 设置最大界限 可以调整
gl_FragColor = vec4(vec3(strength), 1.0); // 黑白渐进色 ，x由于二维坐标左到右，变大，可以利用这一点渐变
// Black and with version
// gl_FragColor = vec4(strength,strength,strength, 1.0);
}
2.6 网格
思路类似于x,y重叠,相加就有了
varying vec2 vUv;
void main()
{
// patten 12
float strength = step(0.8,mod(vUv.x * 10.0,1.0));
strength += step(0.8,mod(vUv.y * 10.0,1.0));
gl_FragColor = vec4(vec3(strength), 1.0); // 黑白渐进色 ，x由于二维坐标左到右，变大，可以利用这一点渐变
// Black and with version
// gl_FragColor = vec4(strength,strength,strength, 1.0);
}
2.7 网格白点
varying vec2 vUv;
void main()
{
// patten 13
float strength = step(0.8,mod(vUv.x * 10.0,1.0));
strength *= step(0.8,mod(vUv.y * 10.0,1.0));
gl_FragColor = vec4(vec3(strength), 1.0); // 黑白渐进色 ，x由于二维坐标左到右，变大，可以利用这一点渐变
// Black and with version
// gl_FragColor = vec4(strength,strength,strength, 1.0);
}
改变点的长度
varying vec2 vUv;
void main()
{
// patten 14
float strength = step(0.4,mod(vUv.x * 10.0,1.0));
strength *= step(0.8,mod(vUv.y * 10.0,1.0));
gl_FragColor = vec4(vec3(strength), 1.0); // 黑白渐进色 ，x由于二维坐标左到右，变大，可以利用这一点渐变
// Black and with version
// gl_FragColor = vec4(strength,strength,strength, 1.0);
}
2.8 角,十字架
思路就是，白点 x, y 相加
varying vec2 vUv;
void main()
{
// patten 15
float barX = step(0.4,mod(vUv.x * 10.0,1.0));
barX *= step(0.8,mod(vUv.y * 10.0,1.0));
float barY = step(0.8,mod(vUv.x * 10.0,1.0));
barY *= step(0.4,mod(vUv.y * 10.0,1.0));
float strength = barX;
strength += barY;
gl_FragColor = vec4(vec3(strength), 1.0); // 黑白渐进色 ，x由于二维坐标左到右，变大，可以利用这一点渐变
// Black and with version
// gl_FragColor = vec4(strength,strength,strength, 1.0);
}
思路，改变x,y 角的位置
varying vec2 vUv;
void main()
{
// patten 16
float barX = step(0.4,mod(vUv.x * 10.0,1.0));
barX *= step(0.8,mod(vUv.y * 10.0 + 0.2,1.0));
float barY = step(0.8,mod(vUv.x * 10.0 + 0.2,1.0));
barY *= step(0.4,mod(vUv.y * 10.0,1.0));
float strength = barX;
strength += barY;
gl_FragColor = vec4(vec3(strength), 1.0); // 黑白渐进色 ，x由于二维坐标左到右，变大，可以利用这一点渐变
// Black and with version
// gl_FragColor = vec4(strength,strength,strength, 1.0);
}
2.9 中间渐变,折角渐变，对角渐变
想象坐标轴1.0 - 0.0 ， 一个U型 ， 就是1.0 - 0.0 - 1.0 所以
abs() 绝对值
varying vec2 vUv;
void main()
{
// patten 17
float strength = abs( vUv.x - 0.5);
gl_FragColor = vec4(vec3(strength), 1.0); // 黑白渐进色 ，x由于二维坐标左到右，变大，可以利用这一点渐变
// Black and with version
// gl_FragColor = vec4(strength,strength,strength, 1.0);
}
折角，就是x,y 中间y渐变完成 ， 在加上x 就行
min() 最小值
max() 最大值
varying vec2 vUv;
void main()
{
// patten 18
float strength = min(abs( vUv.x - 0.5),abs( vUv.y - 0.5)) ;
gl_FragColor = vec4(vec3(strength), 1.0); // 黑白渐进色 ，x由于二维坐标左到右，变大，可以利用这一点渐变
// Black and with version
// gl_FragColor = vec4(strength,strength,strength, 1.0);
}
2.10 口型，正方形
参考上面最大值的形状， 中间数值小，两边数值高
根据step 设置界限
varying vec2 vUv;
void main()
{
// patten 19
// float strength = max(step(0.2,abs( vUv.x - 0.5)),step(0.2,abs( vUv.y - 0.5)));
float strength = step(0.2,max(abs( vUv.x - 0.5),abs( vUv.y - 0.5)));
gl_FragColor = vec4(vec3(strength), 1.0); // 黑白渐进色 ，x由于二维坐标左到右，变大，可以利用这一点渐变
// Black and with version
// gl_FragColor = vec4(strength,strength,strength, 1.0);
}
如何变小,上面有一个口， 1-上面的数值 ，相当中间正方形（0.25大一点），相乘取反
varying vec2 vUv;
void main()
{
// patten 20
float square1 = step(0.2,max(abs( vUv.x - 0.5),abs( vUv.y - 0.5)));
float square2 = 1.0 - step(0.25,max(abs( vUv.x - 0.5),abs( vUv.y - 0.5)));
float strength = square1 * square2;
gl_FragColor = vec4(vec3(strength), 1.0); // 黑白渐进色 ，x由于二维坐标左到右，变大，可以利用这一点渐变
// Black and with version
// gl_FragColor = vec4(strength,strength,strength, 1.0);
}
2.11 渐变(阶级分明)
上面右渐变，如何变成阶级分明
floor() 向下取整
0.0 - 1.0 逐渐变大这是右渐变， 0.01，0.11，0.22，... 1.0
向下取整 0.01/ 0 ； 0.11 ： 0 ； 1.0 ： 1
乘10变整数取整 ，0.0 /0， 0.1/0，... 1.0/ 1，1.1/ 1，.... 2.0/2， 2.1/2 ..... 10/10
除10恢复数据
varying vec2 vUv;
void main()
{
// patten 21
float strength = floor(vUv.x * 10.0) / 10.0; // vUv.x * 10.0 ,0 - 10; floor(vUv.x * 10.0) / 10.0 , 0-0.1-0.2-...1.0
gl_FragColor = vec4(vec3(strength), 1.0); // 黑白渐进色 ，x由于二维坐标左到右，变大，可以利用这一点渐变
// Black and with version
// gl_FragColor = vec4(strength,strength,strength, 1.0);
}
2.12 网格渐变
上面已经实现x轴条形渐变，乘上y就行
varying vec2 vUv;
void main()
{
// patten 22
float strength = floor(vUv.x * 10.0) / 10.0;
strength *= floor(vUv.y * 10.0) / 10.0;
gl_FragColor = vec4(vec3(strength), 1.0); // 黑白渐进色 ，x由于二维坐标左到右，变大，可以利用这一点渐变
// Black and with version
// gl_FragColor = vec4(strength,strength,strength, 1.0);
}
2.13 随机
varying vec2 vUv;
float random(vec2 st){ // 随机数 ,了解可参考：https://thebookofshaders.com/10/
return fract(sin(dot(st.xy,vec2(12.9898,78.233))) * 43758.5453123);
}
void main()
{
// patten 23
float strength = random(vUv);
gl_FragColor = vec4(vec3(strength), 1.0); // 黑白渐进色 ，x由于二维坐标左到右，变大，可以利用这一点渐变
// Black and with version
// gl_FragColor = vec4(strength,strength,strength, 1.0);
}
2.14 固定马赛克
将随机数，放到random函数中
varying vec2 vUv;
float random(vec2 st){ // 随机数 ,了解可参考：https://thebookofshaders.com/10/
return fract(sin(dot(st.xy,vec2(12.9898,78.233))) * 43758.5453123);
}
void main()
{
// patten 24
vec2 gfidUv = vec2(
floor(vUv.x * 10.0) / 10.0,
floor(vUv.y * 10.0) / 10.0
);
float strength = random(gfidUv);
gl_FragColor = vec4(vec3(strength), 1.0); // 黑白渐进色 ，x由于二维坐标左到右，变大，可以利用这一点渐变
// Black and with version
// gl_FragColor = vec4(strength,strength,strength, 1.0);
}
如何倾斜色块
varying vec2 vUv;
float random(vec2 st){ // 随机数 ,了解可参考：https://thebookofshaders.com/10/
return fract(sin(dot(st.xy,vec2(12.9898,78.233))) * 43758.5453123);
}
void main()
{
// patten 25
vec2 gfidUv = vec2(
floor(vUv.x * 10.0) / 10.0,
floor(vUv.y * 10.0 + vUv.x * 5.0) / 10.0 // y根据x变化
);
float strength = random(gfidUv);
gl_FragColor = vec4(vec3(strength), 1.0); // 黑白渐进色 ，x由于二维坐标左到右，变大，可以利用这一点渐变
// Black and with version
// gl_FragColor = vec4(strength,strength,strength, 1.0);
}
2.15 角渐变
length(vUv) 获取vUv的长度
varying vec2 vUv;
float random(vec2 st){ // 随机数 ,了解可参考：https://thebookofshaders.com/10/
return fract(sin(dot(st.xy,vec2(12.9898,78.233))) * 43758.5453123);
}
void main()
{
// patten 26
float strength = length(vUv);
gl_FragColor = vec4(vec3(strength), 1.0); // 黑白渐进色 ，x由于二维坐标左到右，变大，可以利用这一点渐变
// Black and with version
// gl_FragColor = vec4(strength,strength,strength, 1.0);
}
如何更改渐变位置
distance(vUv,vec2(0.5)) 获取距离，vUv坐标到其他点的距离 到0.5的距离
//float strength = length(vUv - 0.5);
float strength = distance(vUv,vec2(0.5)); // 根据vec2改变中心点位置
float strength = 1.0 - distance(vUv,vec2(0.5)); // 根据vec2改变中心点位置
float strength = 0.015/distance(vUv,vec2(0.5)); // 根据vec2改变中心点位置
2.16 x,y轴拉伸,星星，
上面的x轴拉伸
创建vec2 ，设置数值
varying vec2 vUv;
float random(vec2 st){ // 随机数 ,了解可参考：https://thebookofshaders.com/10/
return fract(sin(dot(st.xy,vec2(12.9898,78.233))) * 43758.5453123);
}
void main()
{
// patten 30
vec2 lightUv = vec2(
vUv.x * 0.1 + 0.45,
vUv.y * 0.5 + 0.25
);
float strength = 0.015/distance(lightUv,vec2(0.5)); // 根据vec2改变中心点位置
gl_FragColor = vec4(vec3(strength), 1.0); // 黑白渐进色 ，x由于二维坐标左到右，变大，可以利用这一点渐变
// Black and with version
// gl_FragColor = vec4(strength,strength,strength, 1.0);
}
同时，x,y拉伸，相加
如何倾斜
#define PI 3.1415926535897932384626433832795
varying vec2 vUv;
vec2 rotate(vec2 uv,float rotation, vec2 mid){
return vec2(
cos(rotation) * (uv.x - mid.x) + sin(rotation) * (uv.y - mid.y) + mid.x,
cos(rotation) * (uv.y - mid.y) - sin(rotation) * (uv.x - mid.x) + mid.y
);
}
void main()
{
// patten 32 可以旋转uv坐标
// float pi = 3.1415926535897932384626433832795;
vec2 rotateUv = rotate(vUv, PI * 0.25 ,vec2(0.5));
vec2 lightUvX = vec2( rotateUv.x * 0.1 + 0.45, rotateUv.y * 0.5 + 0.25 );
float lightX = 0.015/distance(lightUvX,vec2(0.5));
vec2 lightUvY = vec2( rotateUv.y * 0.1 + 0.45, rotateUv.x * 0.5 + 0.25 );
float lightY = 0.015/distance(lightUvY,vec2(0.5));
float strength = lightX * lightY ;
gl_FragColor = vec4(vec3(strength), 1.0); // 黑白渐进色 ，x由于二维坐标左到右，变大，可以利用这一点渐变
// Black and with version
// gl_FragColor = vec4(strength,strength,strength, 1.0);
}
2.17 中心缺失,渐变,圆圈,不规则环
#define PI 3.1415926535897932384626433832795
varying vec2 vUv;
vec2 rotate(vec2 uv,float rotation, vec2 mid){
return vec2(
cos(rotation) * (uv.x - mid.x) + sin(rotation) * (uv.y - mid.y) + mid.x,
cos(rotation) * (uv.y - mid.y) - sin(rotation) * (uv.x - mid.x) + mid.y
);
}
void main()
{
// patten 34
float strength = step(0.25,distance(vUv,vec2(0.5)));
gl_FragColor = vec4(vec3(strength), 1.0); // 黑白渐进色 ，x由于二维坐标左到右，变大，可以利用这一点渐变
// Black and with version
// gl_FragColor = vec4(strength,strength,strength, 1.0);
}
// patten 35
float strength = abs(distance(vUv,vec2(0.5)) - 0.25);
// patten 36
float strength = 1.0 - step(0.01,abs(distance(vUv,vec2(0.5)) - 0.25));
#define PI 3.1415926535897932384626433832795
varying vec2 vUv;
vec2 rotate(vec2 uv,float rotation, vec2 mid){
return vec2(
cos(rotation) * (uv.x - mid.x) + sin(rotation) * (uv.y - mid.y) + mid.x,
cos(rotation) * (uv.y - mid.y) - sin(rotation) * (uv.x - mid.x) + mid.y
);
}
void main()
{
// patten 37
vec2 wavedUv = vec2(
vUv.x,
vUv.y + sin(vUv.x * 30.0)*0.1
);
float strength = 1.0 - step(0.01,abs(distance(wavedUv,vec2(0.5)) - 0.25));
gl_FragColor = vec4(vec3(strength), 1.0); // 黑白渐进色 ，x由于二维坐标左到右，变大，可以利用这一点渐变
// Black and with version
// gl_FragColor = vec4(strength,strength,strength, 1.0);
}
#define PI 3.1415926535897932384626433832795
varying vec2 vUv;
vec2 rotate(vec2 uv,float rotation, vec2 mid){
return vec2(
cos(rotation) * (uv.x - mid.x) + sin(rotation) * (uv.y - mid.y) + mid.x,
cos(rotation) * (uv.y - mid.y) - sin(rotation) * (uv.x - mid.x) + mid.y
);
}
void main()
{
// patten 38
vec2 wavedUv = vec2(
vUv.x + sin(vUv.y * 30.0)*0.1,
vUv.y + sin(vUv.x * 30.0)*0.1
);
float strength = 1.0 - step(0.01,abs(distance(wavedUv,vec2(0.5)) - 0.25));
gl_FragColor = vec4(vec3(strength), 1.0); // 黑白渐进色 ，x由于二维坐标左到右，变大，可以利用这一点渐变
// Black and with version
// gl_FragColor = vec4(strength,strength,strength, 1.0);
}
#define PI 3.1415926535897932384626433832795
varying vec2 vUv;
vec2 rotate(vec2 uv,float rotation, vec2 mid){
return vec2(
cos(rotation) * (uv.x - mid.x) + sin(rotation) * (uv.y - mid.y) + mid.x,
cos(rotation) * (uv.y - mid.y) - sin(rotation) * (uv.x - mid.x) + mid.y
);
}
void main()
{
// patten 39
vec2 wavedUv = vec2(
vUv.x + sin(vUv.y * 100.0)*0.1,
vUv.y + sin(vUv.x * 100.0)*0.1
);
float strength = 1.0 - step(0.01,abs(distance(wavedUv,vec2(0.5)) - 0.25));
gl_FragColor = vec4(vec3(strength), 1.0); // 黑白渐进色 ，x由于二维坐标左到右，变大，可以利用这一点渐变
// Black and with version
// gl_FragColor = vec4(strength,strength,strength, 1.0);
}
2.18 渐变 弧形
atan(x) 弧度 反正切函数
varying vec2 vUv;
vec2 rotate(vec2 uv,float rotation, vec2 mid){
return vec2(
cos(rotation) * (uv.x - mid.x) + sin(rotation) * (uv.y - mid.y) + mid.x,
cos(rotation) * (uv.y - mid.y) - sin(rotation) * (uv.x - mid.x) + mid.y
);
}
void main()
{
// patten 40
float angle = atan(vUv.x,vUv.y);
float strength = angle;
gl_FragColor = vec4(vec3(strength), 1.0); // 黑白渐进色 ，x由于二维坐标左到右，变大，可以利用这一点渐变
// Black and with version
// gl_FragColor = vec4(strength,strength,strength, 1.0);
}
varying vec2 vUv;
vec2 rotate(vec2 uv,float rotation, vec2 mid){
return vec2(
cos(rotation) * (uv.x - mid.x) + sin(rotation) * (uv.y - mid.y) + mid.x,
cos(rotation) * (uv.y - mid.y) - sin(rotation) * (uv.x - mid.x) + mid.y
);
}
void main()
{
// patten 41
float angle = atan(vUv.x - 0.5,vUv.y - 0.5);
float strength = angle;
gl_FragColor = vec4(vec3(strength), 1.0); // 黑白渐进色 ，x由于二维坐标左到右，变大，可以利用这一点渐变
// Black and with version
// gl_FragColor = vec4(strength,strength,strength, 1.0);
}
varying vec2 vUv;
vec2 rotate(vec2 uv,float rotation, vec2 mid){
return vec2(
cos(rotation) * (uv.x - mid.x) + sin(rotation) * (uv.y - mid.y) + mid.x,
cos(rotation) * (uv.y - mid.y) - sin(rotation) * (uv.x - mid.x) + mid.y
);
}
void main()
{
// patten 42
float angle = atan(vUv.x - 0.5,vUv.y - 0.5);
angle /= PI * 2.0;
angle += 0.5;
float strength = angle;
gl_FragColor = vec4(vec3(strength), 1.0); // 黑白渐进色 ，x由于二维坐标左到右，变大，可以利用这一点渐变
// Black and with version
// gl_FragColor = vec4(strength,strength,strength, 1.0);
}
varying vec2 vUv;
vec2 rotate(vec2 uv,float rotation, vec2 mid){
return vec2(
cos(rotation) * (uv.x - mid.x) + sin(rotation) * (uv.y - mid.y) + mid.x,
cos(rotation) * (uv.y - mid.y) - sin(rotation) * (uv.x - mid.x) + mid.y
);
}
void main()
{
// patten 43
float angle = atan(vUv.x - 0.5,vUv.y - 0.5);
angle /= (PI * 2.0) ;
angle += 0.5;
angle *= 20.0;
angle = mod(angle,1.0);
float strength = angle;
gl_FragColor = vec4(vec3(strength), 1.0); // 黑白渐进色 ，x由于二维坐标左到右，变大，可以利用这一点渐变
// Black and with version
// gl_FragColor = vec4(strength,strength,strength, 1.0);
}
varying vec2 vUv;
vec2 rotate(vec2 uv,float rotation, vec2 mid){
return vec2(
cos(rotation) * (uv.x - mid.x) + sin(rotation) * (uv.y - mid.y) + mid.x,
cos(rotation) * (uv.y - mid.y) - sin(rotation) * (uv.x - mid.x) + mid.y
);
}
void main()
{
// patten 44
float angle = atan(vUv.x - 0.5,vUv.y - 0.5);
angle /= (PI * 2.0) ;
angle += 0.5;
float strength = sin(angle * 100.0);
gl_FragColor = vec4(vec3(strength), 1.0); // 黑白渐进色 ，x由于二维坐标左到右，变大，可以利用这一点渐变
// Black and with version
// gl_FragColor = vec4(strength,strength,strength, 1.0);
}
varying vec2 vUv;
vec2 rotate(vec2 uv,float rotation, vec2 mid){
return vec2(
cos(rotation) * (uv.x - mid.x) + sin(rotation) * (uv.y - mid.y) + mid.x,
cos(rotation) * (uv.y - mid.y) - sin(rotation) * (uv.x - mid.x) + mid.y
);
}
void main()
{
// patten 45
float angle = atan(vUv.x - 0.5,vUv.y - 0.5);
angle /= (PI * 2.0) ;
angle += 0.5;
float sinusoid = sin(angle * 100.0);
float radius = 0.25 + sinusoid * 0.02;
float strength = 1.0 - step(0.01,abs(distance(vUv,vec2(0.5)) - radius));
gl_FragColor = vec4(vec3(strength), 1.0); // 黑白渐进色 ，x由于二维坐标左到右，变大，可以利用这一点渐变
// Black and with version
// gl_FragColor = vec4(strength,strength,strength, 1.0);
}
2.19 柏林之声
patriciogonzalezvivo (Patricio Gonzalez Vivo) · GitHub
请参考这边
#define PI 3.1415926535897932384626433832795
varying vec2 vUv;
vec4 permute(vec4 x)
{
return mod(((x*34.0)+1.0)*x, 289.0);
}
vec2 fade(vec2 t)
{
return t*t*t*(t*(t*6.0-15.0)+10.0);
}
float cnoise(vec2 P) // 柏林之声
{
vec4 Pi = floor(P.xyxy) + vec4(0.0, 0.0, 1.0, 1.0);
vec4 Pf = fract(P.xyxy) - vec4(0.0, 0.0, 1.0, 1.0);
Pi = mod(Pi, 289.0); // To avoid truncation effects in permutation
vec4 ix = Pi.xzxz;
vec4 iy = Pi.yyww;
vec4 fx = Pf.xzxz;
vec4 fy = Pf.yyww;
vec4 i = permute(permute(ix) + iy);
vec4 gx = 2.0 * fract(i * 0.0243902439) - 1.0; // 1/41 = 0.024...
vec4 gy = abs(gx) - 0.5;
vec4 tx = floor(gx + 0.5);
gx = gx - tx;
vec2 g00 = vec2(gx.x,gy.x);
vec2 g10 = vec2(gx.y,gy.y);
vec2 g01 = vec2(gx.z,gy.z);
vec2 g11 = vec2(gx.w,gy.w);
vec4 norm = 1.79284291400159 - 0.85373472095314 * vec4(dot(g00, g00), dot(g01, g01), dot(g10, g10), dot(g11, g11));
g00 *= norm.x;
g01 *= norm.y;
g10 *= norm.z;
g11 *= norm.w;
float n00 = dot(g00, vec2(fx.x, fy.x));
float n10 = dot(g10, vec2(fx.y, fy.y));
float n01 = dot(g01, vec2(fx.z, fy.z));
float n11 = dot(g11, vec2(fx.w, fy.w));
vec2 fade_xy = fade(Pf.xy);
vec2 n_x = mix(vec2(n00, n01), vec2(n10, n11), fade_xy.x);
float n_xy = mix(n_x.x, n_x.y, fade_xy.y);
return 2.3 * n_xy;
}
void main()
{
// patten 46
float strength = cnoise(vUv * 10.0);
gl_FragColor = vec4(vec3(strength), 1.0); // 黑白渐进色 ，x由于二维坐标左到右，变大，可以利用这一点渐变
// Black and with version
// gl_FragColor = vec4(strength,strength,strength, 1.0);
}
// patten 47
float strength = step(0.0,cnoise(vUv * 10.0)) ;
// patten 48
float strength = 1.0 - abs(cnoise(vUv * 10.0));
float strength = sin(cnoise(vUv * 10.0) * 20.0);
// patten 50
float strength = step(0.9,sin(cnoise(vUv * 10.0) * 20.0));
3. 着色器颜色设置
mix(x, y, a) 返回线性混合的x和y，如：x*(1−a)+y*a
clamp(x, minVal, maxVal) 将x值钳于minVal和maxVal之间，意思就是当x<minVal时返回minVal，当x>maxVal时返回maxVal，当x在minVal和maxVal之间时，返回x
上面黑白都可以换成其他颜色也可以
strength = clamp(strength,0.0,1.0); 防止色块叠加 颜色过深
#define PI 3.1415926535897932384626433832795
varying vec2 vUv;
vec4 permute(vec4 x)
{
return mod(((x*34.0)+1.0)*x, 289.0);
}
vec2 fade(vec2 t)
{
return t*t*t*(t*(t*6.0-15.0)+10.0);
}
float cnoise(vec2 P) // 柏林之声
{
vec4 Pi = floor(P.xyxy) + vec4(0.0, 0.0, 1.0, 1.0);
vec4 Pf = fract(P.xyxy) - vec4(0.0, 0.0, 1.0, 1.0);
Pi = mod(Pi, 289.0); // To avoid truncation effects in permutation
vec4 ix = Pi.xzxz;
vec4 iy = Pi.yyww;
vec4 fx = Pf.xzxz;
vec4 fy = Pf.yyww;
vec4 i = permute(permute(ix) + iy);
vec4 gx = 2.0 * fract(i * 0.0243902439) - 1.0; // 1/41 = 0.024...
vec4 gy = abs(gx) - 0.5;
vec4 tx = floor(gx + 0.5);
gx = gx - tx;
vec2 g00 = vec2(gx.x,gy.x);
vec2 g10 = vec2(gx.y,gy.y);
vec2 g01 = vec2(gx.z,gy.z);
vec2 g11 = vec2(gx.w,gy.w);
vec4 norm = 1.79284291400159 - 0.85373472095314 * vec4(dot(g00, g00), dot(g01, g01), dot(g10, g10), dot(g11, g11));
g00 *= norm.x;
g01 *= norm.y;
g10 *= norm.z;
g11 *= norm.w;
float n00 = dot(g00, vec2(fx.x, fy.x));
float n10 = dot(g10, vec2(fx.y, fy.y));
float n01 = dot(g01, vec2(fx.z, fy.z));
float n11 = dot(g11, vec2(fx.w, fy.w));
vec2 fade_xy = fade(Pf.xy);
vec2 n_x = mix(vec2(n00, n01), vec2(n10, n11), fade_xy.x);
float n_xy = mix(n_x.x, n_x.y, fade_xy.y);
return 2.3 * n_xy;
}
void main()
{
// patten 50
float strength = step(0.9,sin(cnoise(vUv * 10.0) * 20.0));
// Clamp the strength
strength = clamp(strength,0.0,1.0);
// Colored version
vec3 blackColor = vec3(0.0);
vec3 uvColor = vec3(vUv,1.0);
vec3 mixedColor = mix(blackColor,uvColor,strength);
gl_FragColor = vec4(mixedColor,1.0);
// gl_FragColor = vec4(vec3(strength), 1.0); // 黑白渐进色 ，x由于二维坐标左到右，变大，可以利用这一点渐变
// Black and with version
// gl_FragColor = vec4(strength,strength,strength, 1.0);
}
总结
shader一些颜色的应用。
![[JAVA]MyBatis框架—获取SqlSession对象](https://i-blog.csdnimg.cn/direct/1b1ddf3a840f40fe8c1bf2d523a014a6.png)
