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