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

🕗 发布于 2024-11-18 02:39 学习 three.js javascript shader

前言

课程回顾:

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

原文地址：https://blog.csdn.net/weixin_41722662/article/details/143797341

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：[笔记]LLC过流的分析和调试
下一篇：MATLAB实现狼群算法优化柔性车间调度(GWO-fjsp)

第七章：TDengine SHOW 命令大全
SHOW命令用于获取TDengine数据库中的系统信息、元数据、状态等。通过SHOW命令，用户可以方便地查看数据库的各种信息，如数据库列表、表结构、索引、连接信息等。
阅读更多2024-11-18
【Linux内核剖析】深入分析inet_init的处理机制
inet_init是 Linux 内核中用于初始化 TCP/IP 协议栈的函数。它在内核启动时被调用，完成各种协议和数据结构的注册和初始化。
阅读更多2024-11-18
【C++进阶篇】——string类的使用
是 C++ 标准库的一部分，但它不是 STL 容器的一部分。STL 容器是指那些基于模板的容器，如std::list等。提供了类似于 STL 容器的功能，比如动态内存管理、迭代器支持等，但它的设计和实
阅读更多2024-11-18
Javaweb开发核心之应用上下文知识（笔记）
⽐比如：PageContext，ServletRequest，HttpSession，ServletContext；简介:讲解Javaweb作⽤用域对象介绍和ServletContext讲解。就是对象
阅读更多2024-11-18
Web Service 学习笔记
Web Service 即 web 服务，它是一种跨编程语言和跨操作系统平台的远程调用技术。Java 中共有三种 Web Service 规范：- JAX-WS(JAX-RPC): 基于 xml 数据
阅读更多2024-11-18
使用函数的选择法排序
其中a是待排序的数组，n是数组a中元素的个数。该函数用选择法将数组a中的元素按升序排列，结果仍然在数组a中。
阅读更多2024-11-18
Leetcode 3356. Zero Array Transformation II
Leetcode 3356. Zero Array Transformation II
阅读更多2024-11-18
图形最高分
游戏一开始，玩家在每一轮可以合并两个图形，当只有一个图形的时候游戏结束，每个图形都有一个大小，合并完成后的图形的大小为x+y,x和y分别为合并之前的两个图形，与此同时，玩家会获得x*y的分数。现在屏幕
阅读更多2024-11-18
nodejs入门（1）：nodejs的前后端分离
浏览器和前端web服务器交互，前端web服务器和后端web服务器进行交互，前端web服务器向后端的web服务器请求数据，对后端服务器得到请求后将数据传递给前端web服务器，格式化后由浏览器展示。好的，
阅读更多2024-11-18
wife_wife
在下面的信息中加上"__proto__":{"isAdmin":true}上网查了一下，用到了Javascript原型链污染攻击。用这个漏洞的前提是后端使用的语
阅读更多2024-11-18