觉得shadertoy上的一些网友的作品写得很好，加上自己对glsl一些内置函数，内置变量不是很熟悉，于是决定开始学习一下上面一些大佬的代码。
今天的案例是这个：
附上shaderToy的地址：https://www.shadertoy.com/view/ll2GD3
用three.js的ShaderMaterial实现的着色器代码如下：
<script id="vertex-shader-1" type="x-shader/x-vertex"> void main(){ gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); } </script> <script id="fragment-shader-9" type="x-shader/x-fragment"> uniform vec2 resolution; 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) ); } void main( void ) { vec2 p = gl_FragCoord.xy / resolution.xy; vec3 col = pal( p.x, vec3(0.5,0.5,0.5),vec3(0.5,0.5,0.5),vec3(1.0,1.0,1.0),vec3(0.0,0.33,0.67) ); if( p.y>(1.0/7.0) ) col = pal( p.x, vec3(0.5,0.5,0.5),vec3(0.5,0.5,0.5),vec3(1.0,1.0,1.0),vec3(0.0,0.10,0.20) ); if( p.y>(2.0/7.0) ) col = pal( p.x, vec3(0.5,0.5,0.5),vec3(0.5,0.5,0.5),vec3(1.0,1.0,1.0),vec3(0.3,0.20,0.20) ); if( p.y>(3.0/7.0) ) col = pal( p.x, vec3(0.5,0.5,0.5),vec3(0.5,0.5,0.5),vec3(1.0,1.0,0.5),vec3(0.8,0.90,0.30) ); if( p.y>(4.0/7.0) ) col = pal( p.x, vec3(0.5,0.5,0.5),vec3(0.5,0.5,0.5),vec3(1.0,0.7,0.4),vec3(0.0,0.15,0.20) ); if( p.y>(5.0/7.0) ) col = pal( p.x, vec3(0.5,0.5,0.5),vec3(0.5,0.5,0.5),vec3(2.0,1.0,0.0),vec3(0.5,0.20,0.25) ); if( p.y>(6.0/7.0) ) col = pal( p.x, vec3(0.8,0.5,0.4),vec3(0.2,0.4,0.2),vec3(2.0,1.0,1.0),vec3(0.0,0.25,0.25) ); // band float f = fract(p.y*7.0); // borders col *= smoothstep( 0.49, 0.47, abs(f-0.5) ); // shadowing col *= 0.5 + 0.5*sqrt(4.0*f*(1.0-f)); gl_FragColor = vec4(col,1.0); } </script>
参数说明：
resolution：传入的一个vec2，其实就是画布的大小(width,height).
代码解析：
1⃣️画布归一化
vec2 p = gl_FragCoord.xy / resolution.xy;
上述代码的作用是，使得画布上的任意一点p的横轴值范围和纵轴值范围都是[0,1]，极大地方便了后续色值的计算，因为色值每个通道的值范围也是[0,1]
2⃣️y轴分块，x轴颜色渐变
不难看出，分成了7等份
针对每单独的一份呢，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,
然后我们再来看一下代码中计算颜色时给的实参：
对于每个维度来说，也确实是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函数,于是去详细了解了一下:
图示法如下:
所以,针对上述代码,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轴上,之前的满屏,现在有了缝隙,效果如下:
因为末端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:
效果如下:
col *= smoothstep( 0.98, 0.37, abs(f-0.5) );
smoothstep:
效果如下:
5⃣️sqrt(x * (1-x))实现y轴弧形渐变
首先看一下y = 0.5 + sqrt(x * (1-x))的表示的图形
所以对于着色器代码:
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轴变化如下:
再乘一次:
col *= 0.5 + sqrt(f*(1.0-f));
继续:
继续:
