shaderToy学习篇

分手后的思念是犯贱 2023-08-17 15:42 102阅读 0赞

觉得shadertoy上的一些网友的作品写得很好，加上自己对glsl一些内置函数，内置变量不是很熟悉，于是决定开始学习一下上面一些大佬的代码。

今天的案例是这个：

![1220416-20190731000924140-1539451798.png][]

附上shaderToy的地址：[https://www.shadertoy.com/view/ll2GD3][https_www.shadertoy.com_view_ll2GD3]

用three.js的ShaderMaterial实现的着色器代码如下：

参数说明：

resolution：传入的一个vec2，其实就是画布的大小(width,height).

代码解析：

**1⃣️画布归一化**

vec2 p = gl_FragCoord.xy / resolution.xy;

上述代码的作用是，使得画布上的任意一点p的横轴值范围和纵轴值范围都是\[0,1\]，极大地方便了后续色值的计算，因为色值每个通道的值范围也是\[0,1\]

**2⃣️y轴分块，x轴颜色渐变**

不难看出，分成了7等份

![1220416-20190731002350925-1654812224.png][]

针对每单独的一份呢，y轴颜色不做区分，x轴颜色渐变，并且是与x轴值相关，相关代码如下：

vec3 pal( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d ){
            return a + b*cos( 6.28318*(c*t+d) );
        }

该函数有4个形参，分别是t(x轴坐标值，注意x的范围此时是0到1)和自定义的4种颜色。

后面的三角函数可以看作 y = b \* cos(k(c\*x + d))，所以y的值范围是\[-b,b\],那么颜色3个通道的值肯定不能小于0啊，最好也是不能大于1的,所以在前面补上a，

并且a-b>0;a+b<1;

解该二元一次不等式得:

b<0.5,

然后我们再来看一下代码中计算颜色时给的实参：

![1220416-20190731003657224-484139775.png][]

对于每个维度来说，也确实是a > b的。

补充:对于a、b,每个维度之和小于等于1,

**3⃣️加边框**

// band
            float f = fract(p.y*7.0);
            // borders
            col *= smoothstep( 0.49, 0.47, abs(f-0.5) );

我刚开始想的时候，是想着用透明度做的,看到了作者的代码,又见到这个smoothstep函数,于是去详细了解了一下:

![1220416-20190731113540077-1897229171.png][]

图示法如下:

![1220416-20190731115115641-1804569203.png][]

所以,针对上述代码,first:

float f = fract(p.y*7.0);

p.y \* 7.0 的值为0.1、0.2、...1.0、1.1、1.2、...2.0、2.1、2.2、...3.0、3.1、3.2、........6.0、6.1、6.2、...7.0;

fract是取小数函数,所以对于每一段的f值范围都是0.0、0.1、0.2、0.3、0.4、0.5....0.9、0.0;

smoothstep( 0.49, 0.47, abs(f-0.5) )

abs(f-0.5) 走势是这样的(绝对值):0.5、0.4、0.3、0.2、0.1、0.0、0.1、0.2、0.3、0.4、0.5;

0.49 > 0.47,就是a > b;符合上述第二种计算规则,

所以该函数式算得的值走势是:0->平滑插值(升)->1->平滑插值(降)->0

col *= smoothstep( 0.48, 0.47, abs(f-0.5) );

所以在y轴上,之前的满屏,现在有了缝隙,效果如下:

![1220416-20190731121154437-913119552.png][]

因为末端smoothstep函数值为0,算得颜色为rgb(0.,0.,0.)

**4⃣️smoothstep函数处理获得其他效果**

float f = fract(p.y*7.0);
    abs(f-0.5)

abs最大值为0.5,所以只要smoothstep(a,b,x)中

a>b,并且

a>0.5,就不会出现缝隙;

b<0.5,才会有平滑效果.

col *= smoothstep( 0.98, 0.07, abs(f-0.5) );

smoothstep:

![1220416-20190801151310708-1023915013.png][]

效果如下:

![1220416-20190731123903595-965083955.png][]

col *= smoothstep( 0.98, 0.37, abs(f-0.5) );

smoothstep:

![1220416-20190801151504076-1656542102.png][]

效果如下:

![1220416-20190731124013595-1761958829.png][]

** 5⃣️sqrt(x \* (1-x))实现y轴弧形渐变**

首先看一下y = 0.5 + sqrt(x \* (1-x))的表示的图形

![1220416-20190801170128495-1580135822.png][]

所以对于着色器代码:

col *= 0.5 + 0.5*sqrt(4.0*f*(1.0-f));

转化为:

col *= 0.5 + sqrt(f*(1.0-f));

因为f变化顺序为0.5->0.0->0.5;所以对照上面的图形,y轴颜色的被乘数变化为1.0->0.5->1.0,注意这些变化为非线性的,所以y轴变化如下:

![1220416-20190801170814575-2020562219.png][]

再乘一次:

col *= 0.5 + sqrt(f*(1.0-f));

![1220416-20190801170858671-1216501407.png][]

继续:

![1220416-20190801170927820-291353649.png][]

继续:

![1220416-20190801171004257-991886428.png][]

转载于:https://www.cnblogs.com/eco-just/p/11273662.html

[1220416-20190731000924140-1539451798.png]: /images/20230810/e8a73a245f1247df9bb93ff057bfb9ba.png
[https_www.shadertoy.com_view_ll2GD3]: https://www.shadertoy.com/view/ll2GD3
[1220416-20190731002350925-1654812224.png]: /images/20230810/6d9cf4cf42ac48cfa48c970eabae28ca.png
[1220416-20190731003657224-484139775.png]: /images/20230810/a448fe40f32542f29476ed0192a060b3.png
[1220416-20190731113540077-1897229171.png]: /images/20230810/fea2997e07c9460cb4544694d2ff6538.png
[1220416-20190731115115641-1804569203.png]: /images/20230810/66e31f5a9f0042f58b99e632189c928c.png
[1220416-20190731121154437-913119552.png]: /images/20230810/6d64846b2ada4aac98f05f9fd952dd5f.png
[1220416-20190801151310708-1023915013.png]: /images/20230810/c0d43fc40ce143eea2c434dcfa2fca6a.png
[1220416-20190731123903595-965083955.png]: /images/20230810/2b8126c8b92240af92e83e3f4b892299.png
[1220416-20190801151504076-1656542102.png]: /images/20230810/a8ccccd5f8164e9d860b809c1a51fa10.png
[1220416-20190731124013595-1761958829.png]: /images/20230810/da0d087e8da24efd8bd4a514d59a6c3f.png
[1220416-20190801170128495-1580135822.png]: /images/20230810/2c99412bfecb407c94e303c206e03e2a.png
[1220416-20190801170814575-2020562219.png]: /images/20230810/e4717e353bd74474b8654ffca5964541.png
[1220416-20190801170858671-1216501407.png]: /images/20230810/a444ad7d20bb432fbab2f6f0c04507e4.png
[1220416-20190801170927820-291353649.png]: /images/20230810/2f0d87d90869463b9de54f4829a72482.png
[1220416-20190801171004257-991886428.png]: /images/20230810/2526887fa4e542ab86a95bfafcdd4614.png