前言
课程回顾:
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
javascript">varying vec2 vUv;void main()
{gl_FragColor = vec4(vUv,1.0, 1.0); // 这里改变颜色
}
javascript">varying vec2 vUv;
void main()
{gl_FragColor = vec4(vUv,0.0, 1.0);
}
2.着色器黑白变化颜色设置
2.1 右渐变
javascript">varying vec2 vUv;
void main()
{float strength = vUv.x;gl_FragColor = vec4(vec3(strength), 1.0); // 黑白渐进色 ，x由于二维坐标左到右，变大，可以利用这一点渐变
}
2.2 上渐变
javascript">varying vec2 vUv;
void main()
{float strength = vUv.y;gl_FragColor = vec4(vec3(strength), 1.0); // 黑白渐进色 ，x由于二维坐标左到右，变大，可以利用这一点渐变
}
2.3下渐变
javascript">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 之间循环
javascript">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
javascript">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); }
调整条形的大小
javascript">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重叠,相加就有了
javascript">varying vec2 vUv;void main()
{// patten 12float 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 网格白点
javascript">varying vec2 vUv;void main()
{// patten 13float 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); }
改变点的长度
javascript">varying vec2 vUv;void main()
{// patten 14float 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 相加
javascript">varying vec2 vUv;void main()
{// patten 15float 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 角的位置
javascript">varying vec2 vUv;void main()
{// patten 16float 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() 绝对值
javascript">varying vec2 vUv;void main()
{// patten 17float 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() 最大值
javascript">varying vec2 vUv;void main()
{// patten 18float 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 设置界限
javascript">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大一点），相乘取反
javascript">varying vec2 vUv;void main()
{// patten 20float 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恢复数据
javascript">varying vec2 vUv;void main()
{// patten 21float 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.0gl_FragColor = vec4(vec3(strength), 1.0); // 黑白渐进色 ，x由于二维坐标左到右，变大，可以利用这一点渐变// Black and with version// gl_FragColor = vec4(strength,strength,strength, 1.0); }
2.12 网格渐变
上面已经实现x轴条形渐变，乘上y就行
javascript">varying vec2 vUv;void main()
{// patten 22float 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 随机
javascript">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 23float 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函数中
javascript">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 24vec2 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); }
如何倾斜色块
javascript">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 25vec2 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的长度
javascript">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 26float 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的距离
javascript"> //float strength = length(vUv - 0.5);float strength = distance(vUv,vec2(0.5)); // 根据vec2改变中心点位置
javascript"> float strength = 1.0 - distance(vUv,vec2(0.5)); // 根据vec2改变中心点位置
javascript"> float strength = 0.015/distance(vUv,vec2(0.5)); // 根据vec2改变中心点位置
2.16 x,y轴拉伸,星星，
上面的x轴拉伸
创建vec2 ，设置数值
javascript">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 30vec2 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拉伸，相加
如何倾斜
javascript">#define PI 3.1415926535897932384626433832795varying 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 中心缺失,渐变,圆圈,不规则环
javascript">#define PI 3.1415926535897932384626433832795varying 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 34float 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); }
javascript"> // patten 35float strength = abs(distance(vUv,vec2(0.5)) - 0.25);
javascript"> // patten 36float strength = 1.0 - step(0.01,abs(distance(vUv,vec2(0.5)) - 0.25));
javascript">#define PI 3.1415926535897932384626433832795varying 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 37vec2 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); }
javascript">#define PI 3.1415926535897932384626433832795varying 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 38vec2 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); }
javascript">#define PI 3.1415926535897932384626433832795varying 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 39vec2 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) 弧度 反正切函数
javascript">
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 40float 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); }
javascript">
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 41float 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); }
javascript">
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 42float 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); }
javascript">
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 43float 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); }
javascript">
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 44float 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); }
javascript">
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 45float 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
请参考这边
javascript">#define PI 3.1415926535897932384626433832795varying 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 permutationvec4 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 46float 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); }
javascript"> // patten 47float strength = step(0.0,cnoise(vUv * 10.0)) ;
javascript"> // patten 48float strength = 1.0 - abs(cnoise(vUv * 10.0));
javascript"> float strength = sin(cnoise(vUv * 10.0) * 20.0);
// patten 50float 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); 防止色块叠加 颜色过深
javascript">#define PI 3.1415926535897932384626433832795varying 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 permutationvec4 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 50float strength = step(0.9,sin(cnoise(vUv * 10.0) * 20.0));// Clamp the strengthstrength = clamp(strength,0.0,1.0);// Colored versionvec3 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一些颜色的应用。
