【Three.js基础学习】24. shader patterns

前言

课程回顾:

        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 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 网格白点

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); }

改变点的长度

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 相加

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 角的位置

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() 绝对值

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() 最大值

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 设置界限

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 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恢复数据

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就行

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 随机

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函数中

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); }

如何倾斜色块

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的长度

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的距离

      //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 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拉伸，相加

如何倾斜

#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 中心缺失,渐变,圆圈,不规则环

#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); }

    // patten 35float strength = abs(distance(vUv,vec2(0.5)) - 0.25);


      // patten 36float strength = 1.0 - step(0.01,abs(distance(vUv,vec2(0.5)) - 0.25));

#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); }

#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); }

#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) 弧度 反正切函数


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); }


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); }


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); }


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); }


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); }


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

请参考这边

#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); }

   // patten 47float strength = step(0.0,cnoise(vUv * 10.0)) ;


    // patten 48float strength = 1.0 - abs(cnoise(vUv * 10.0));

    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); 防止色块叠加 颜色过深

#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一些颜色的应用。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/16744.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

构建客服知识库：企业效率提升的关键步骤

构建客服知识库：企业效率提升的关键步骤

客服知识库是企业提升客户服务效率和质量的重要工具。它不仅帮助客服团队快速准确地回答客户问题&#xff0c;还能通过数据分析来优化服务流程和提升客户满意度。 1. 明确知识库的目标和范围 构建客服知识库的第一步是明确其目标和范围。这包括确定知识库的主要用户群体、需要…
阅读更多...
运动汇 专业的比赛管理平台数据获取

运动汇 专业的比赛管理平台数据获取

在获取到运动汇的网站链接后&#xff0c;界面如图所示: 右键检查&#xff0c;我们会发现没有任何数据&#xff0c;只有当我们点开这些"第一单元"、"第二单元"等&#xff0c;数据才会加载出来&#xff1b; 由于我们只需要分析这一个网页并获取其中的数据&a…
阅读更多...
免费送源码：Java+Springboot+MySQL Springboot多租户博客网站的设计 计算机毕业设计原创定制

免费送源码：Java+Springboot+MySQL Springboot多租户博客网站的设计 计算机毕业设计原创定制

Springboot多租户博客网站的设计 摘 要 博客网站是当今网络的热点&#xff0c;博客技术的出现使得每个人可以零成本、零维护地创建自己的网络媒体&#xff0c;Blog站点所形成的网状结构促成了不同于以往社区的Blog文化&#xff0c;Blog技术缔造了“博客”文化。本文课题研究的“…
阅读更多...
Docker环境搭建Cloudreve网盘服务（附shell脚本一键搭建）

Docker环境搭建Cloudreve网盘服务（附shell脚本一键搭建）

Docker搭建Cloudreve Cloudreve介绍&#xff1a; Cloudreve 是一个基于 ThinkPHP 框架构建的开源网盘系统&#xff0c;旨在帮助用户以较低的成本快速搭建起既能满足个人也能满足企业需求的网盘服务。Cloudreve 支持多种存储介质&#xff0c;包括但不限于本地存储、阿里云OSS、…
阅读更多...
Macs Fan Control - 控制 Apple 计算机上的风扇

Macs Fan Control - 控制 Apple 计算机上的风扇

免费下载 提供 macOS 和 Windows &#xff08;Boot Camp&#xff09; 版本 https://apsgo.cn/joN0WG Mac 风扇控制 监视和控制 Apple 计算机上的风扇 实时监控风扇速度和温度传感器&#xff0c;包括第三方 HDD/SSD&#xff08;使用 S.M.A.R.T.&#xff09;。设置自定义 RP…
阅读更多...
3.STM32之通信接口《精讲》之USART通信

3.STM32之通信接口《精讲》之USART通信

本节将进行实战&#xff0c;基础了解请查看第二节&#xff08;Whappy&#xff09;开始背&#xff01;&#xff01; USART ---》全双工 异步/同步 点对点 USART&#xff1a;STM32自带硬件电路&#xff0c;通过配置相对应的寄存器来设置数据帧的发送&#xff0c;我们收发只需要…
阅读更多...
无插件H5播放器EasyPlayer.js网页web无插件播放器选择全屏时，视频区域并没有全屏问题的解决方案

无插件H5播放器EasyPlayer.js网页web无插件播放器选择全屏时，视频区域并没有全屏问题的解决方案

EasyPlayer.js H5播放器&#xff0c;是一款能够同时支持HTTP、HTTP-FLV、HLS&#xff08;m3u8&#xff09;、WS、WEBRTC、FMP4视频直播与视频点播等多种协议&#xff0c;支持H.264、H.265、AAC、G711A、MP3等多种音视频编码格式&#xff0c;支持MSE、WASM、WebCodec等多种解码方…
阅读更多...
SPIRiT-Diffusion：基于自一致性驱动的加速MRI扩散模型|文献速递-基于深度学习的病灶分割与数据超分辨率

SPIRiT-Diffusion：基于自一致性驱动的加速MRI扩散模型|文献速递-基于深度学习的病灶分割与数据超分辨率

Title 题目 SPIRiT-Diffusion: Self-Consistency Driven Diffusion Model for Accelerated MRI SPIRiT-Diffusion&#xff1a;基于自一致性驱动的加速MRI扩散模型 01 文献速递介绍 磁共振成像&#xff08;MRI&#xff09; 在临床和研究领域被广泛应用。然而&#xff0c;其…
阅读更多...
Vue3中一级导航栏的吸顶导航交互以及Pinia优化重复请求

Vue3中一级导航栏的吸顶导航交互以及Pinia优化重复请求

一、前言 在日常的网站中&#xff0c;当鼠标滚轮往页面的底部滑动时&#xff0c;会出现顶部导航栏的隐藏&#xff0c;而出现新的导航栏显示&#xff0c;这就是一级导航栏的吸顶导航交互。本文当实现改模块功能的实现。 二、示例图 参考黑马程序员小兔仙儿PC端项目&#xff1a;…
阅读更多...
JDK17源码系列-ArrayList源码解读

JDK17源码系列-ArrayList源码解读

JDK17源码系列-ArrayList接口源码解读 1.List集合接口类图 2.ArrayList详细类图 ArrayList继承了AbstractList实现了List、Serializable等接口&#xff0c;实现Serializable接口使得ArrayList类的对象可以串行化&#xff0c;串行化后&#xff0c;对象可以进行网络传输&#x…
阅读更多...
VBA学习笔记：点击单元格显示指定的列

VBA学习笔记：点击单元格显示指定的列

应用场景&#xff1a; 表格中列数较多&#xff0c;特定条件下隐藏一些无关的列&#xff0c;只保留相关的列&#xff0c;使表格更加清晰。 示例&#xff1a;原表格如下 点击一年级&#xff0c;只显示一年级相关的科目&#xff1a; 点击二年级&#xff0c;只显示二年级相关的科…
阅读更多...
RNN深度学习案例：LSTM火灾温度预测

RNN深度学习案例：LSTM火灾温度预测

本文为为&#x1f517;365天深度学习训练营内部文章 原作者&#xff1a;K同学啊 一 前期准备数据 1.导入数据 import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns from sklearn.preprocessing import MinMaxScaler from keras.lay…
阅读更多...
nmap简单使用

nmap简单使用

nmap的基本功能 nmap有4个基本功能&#xff0c;分别是 端口扫描 主机探测 服务识别 系统识别 端口扫描 nmap 183.2.172.185 从图中可以看出开放了80和443端口 指定端口扫描 指定端口扫描使用-p参数&#xff0c;可以一次性扫描一个或多个或某个范围内的端口 nmap 183.…
阅读更多...
python文件排序都有哪些方法

python文件排序都有哪些方法

在python环境中提供两种排序方案&#xff1a;用库函数sorted()对字符串排序&#xff0c;它的对象是字符&#xff1b;用函数sort()对数字排序&#xff0c;它的对象是数字&#xff0c;如果读取文件的话&#xff0c;需要进行处理&#xff08;把文件后缀名‘屏蔽’&#xff09;。 …
阅读更多...
uni-app快速入门（五）--判断运行环境及针对不同平台的条件编译

uni-app快速入门（五）--判断运行环境及针对不同平台的条件编译

一、判断运行环境 在实际项目开发中&#xff0c;经常需要进行开发环境和生产环境的切换&#xff0c;uni-app可根据process.env.NODE_ENV判断当前运行环境是开发环境和生产环境&#xff0c;根据不同的环境调用不同的后台接口&#xff0c;具体实现方式: 在项目的static目录下建…
阅读更多...
QT定时器

QT定时器

QT定时器 1.概述 这篇文章介绍如何使用定时器 2.定时器 2.1.创建项目 新建一个普通的widget类型项目&#xff0c;在widget.ui文件中添加一个label控件 2.1.QTimer 在帮助文档搜索timerEvent&#xff0c;查看QTimer Class 类提供的定时器。 该类提供了一个定时事件的函…
阅读更多...
双指针优质算法题集

双指针优质算法题集

目录 一、双指针算法介绍 二、移动0 1、题目链接 2、题解 3、代码实现 &#xff08;1&#xff09;、初次实现&#xff1a; &#xff08;2&#xff09;、优化后的实现&#xff1a; 二、复写0 1、题目链接&#xff1a; 2、题解 3、代码实现 一、双指针算法介绍 这里的指…
阅读更多...
博奥龙黑胶虫去除剂，新品来袭！

博奥龙黑胶虫去除剂，新品来袭！

形态特征&#xff1a; 大小方面&#xff1a;黑胶虫的直径通常在 0.5~1 微米左右&#xff0c;一般比细菌要小&#xff0c;但在显微镜下仍可明显观察到。 形状方面&#xff1a;其形态不规则&#xff0c;初始呈现点状&#xff0c;随着培养时间的增加其形态可以转变为密集的小黑点…
阅读更多...
使用Element UI实现前端分页，及el-table表格跨页选择数据，切换分页保留分页数据，限制多选数量

使用Element UI实现前端分页，及el-table表格跨页选择数据，切换分页保留分页数据，限制多选数量

文章目录 一、前端分页1、模板部分 (\<template>)2、数据部分 (data)3、计算属性 (computed)4、方法 (methods) 二、跨页选择1、模板部分 (\<template>)2、数据部分 (data)3、方法 (methods) 三、限制数量1、模板部分 (\<template>)2、数据部分 (data)3、方法…
阅读更多...
HTML5+CSS前端开发[保姆级教学]+基本文本控制标签介绍

HTML5+CSS前端开发[保姆级教学]+基本文本控制标签介绍

引入&#xff1a;Hello&#xff0c;各位编程猿们&#xff01;前几篇文章介绍了软件的安装以及编写新闻文章的代码初体验&#xff0c;这一篇我们来巩固一些这些知识点&#xff0c;复习一下基本文本控制标签&#xff01;&#xff01;&#xff01; 知识点一&#xff1a;基本文本控…
阅读更多...
最新文章

Copyright @ 2022~2023