以下实例的图片依次对上面图片中应笛卡尔坐标行列。
shader中函数的基本理解
1.smoothstep 获取较为平滑的过渡效果length(uv) 降维效果
2.length(uv)将2D的转换为1D
3.atan(u,v) 获取角度 配合length 可以得到极坐标
4.pow(f,n) 将曲线变化变得平滑或尖锐
5.sin cos 周期函数，用于实现周期的效果(如来回移动，循环的移动等)
6.hash 获取标志ID，常用于基于空间划分的效果的实现
7.noise 同时具有随机性和连续性的函数
8.fbm 在基本函数的基础上，不断的叠加高频信息，丰富细节
假设uv 是 (-0.5,-0.5) 到(.5,0.5)
1.smoothstep eg:绘制smoothstep曲线
f(x) = xx(3.0-2.0*x)
具有淡入淡出效果
float3 DrawSmoothstep(float2 uv){
uv+=0.5;
float val = smoothstep(0.0,1.0,uv.x);
val = step(abs(val-uv.y),0.01);
return float3(val,val,val);
}
2.length eg:绘制圆点
float3 DrawCircle(float2 uv){
float val = (1.0-length(uv)*2);
val = smoothstep(0.0,0.1,val);
return float3(val,val,val);
}
3.atan eg:绘制花环
float3 DrawFlower(float2 uv){
float deg = atan2(uv.y,uv.x) + _Time.y * -0.1;
float len = length(uv)*3.0;
float offs = abs(sin(deg*3.))*0.35;
return smoothstep(1.+offs,1.+offs-0.05,len);
}
4.5.pow eg:让圆变得更虚or实
float3 DrawWeakCircle(float2 uv){
float val = clamp((1.0-length(uv)*2),0.,1.);
val = pow(val,2.0);
return float3(val,val,val);
}
float3 DrawStrongCircle(float2 uv){
float val = clamp((1.0-length(uv)*2),0.,1.);
val = pow(val,0.5);
return float3(val,val,val);
}
6.sin eg:跳动的小球
sin函数给2D小球y轴上的移动
float3 DrawBounceBall(float2 uv){
uv*=4.;//uv 空间[-2~2]
uv.y+=sin(ftime*PI);
float val = clamp((1.0-length(uv)),0.,1.);
val = smoothstep(0.,0.05,val);
return float3(val,val,val);
}
7.hash eg:不同颜色的格子
本教程中使用的Hash库来自Dave_Hoskin
具体实现见Hash.cginc
这里给出另外一种使用三角函数实现的Hash：
fixed2 Rand22(fixed2 co){
fixed x = frac(sin(dot(co.xy ,fixed2(122.9898,783.233))) * 43758.5453);
fixed y = frac(sin(dot(co.xy ,fixed2(457.6537,537.2793))) * 37573.5913);
return fixed2(x,y);
}
fract(sin(xbigVal1)bigVal2)产生的数比较随机的原因是：
sin(xbigVal1) 会将x值的变化波动被放大，且随机，设这个值的变化为detX,则 frac(detXbigVal2) 会让本来的小的波动再次放大，然后fract会让整体的数的变化受影响的因素变多，所以得到的了一个较为随机的值.
更多的说明请参考the book of shader
float3 DrawRandomColor(float2 uv){
uv+=0.5;
uv*=4.;
return Hash32(floor(uv));
}
8.noise eg:Perlin Noise展示
本教程中使用的Noise库来自ShaderToy多位作者,具体实现见Noise.cginc
本教程不再覆盖noise等基础函数的实,原理请参考candycat这篇blog
更多实例可以参考the book of shader
带有法线的noise函数的推导请看iq和Milo
float3 DrawRandomColor(float2 uv){
uv+=0.5;
uv*=4.;
return Hash32(floor(uv));
}
9.fbm eg:PerlinNoise FBM展示
FBM更多实例请参考the book of shader
float3 DrawRandomColor(float2 uv){
uv+=0.5;
uv*=4.;
return Hash32(floor(uv));
}