中级Shader教程01 基本数学函数

TODO
基础函数: Smoothstep Sin Clamp Pow Length Sqrt
辅助函数: Saw WithIn Remap
图形: Circle Rect

图形

1.绘制圆点

//假设uv 是 (-0.5,-0.5) 到(.5,0.5)
//blur 是模糊程度 值越大边缘越模糊 0.0完全不模糊 1.0为正常模糊 负数 反向
inline float DrawCircle(float2 uv,float blur){
    float val = 1.0-length(uv);
    val = smoothstep(0.5,0.500001+blur*0.5,val);
    return val;
}

下面是从左到右依次为 blur=-0.1 blur=0.0 blur=0.1 blur=1.0的图像:

中级Shader教程01 基本数学函数_第1张图片
circle01.jpg
中级Shader教程01 基本数学函数_第2张图片
circle-01.jpg
中级Shader教程01 基本数学函数_第3张图片
circle10.jpg
中级Shader教程01 基本数学函数_第4张图片
grid_offset_uv.jpg
中级Shader教程01 基本数学函数_第5张图片
grid_rand_val.jpg
中级Shader教程01 基本数学函数_第6张图片
grid_uv_circle.jpg
中级Shader教程01 基本数学函数_第7张图片
offset_uv.jpg
中级Shader教程01 基本数学函数_第8张图片
perspective.jpg
中级Shader教程01 基本数学函数_第9张图片
uv_offset.gif
中级Shader教程01 基本数学函数_第10张图片
circle00.jpg

这是一个示例图片。

图片显示在 N 段文字的右边。

N 与图片高度有关。

刷屏行。

刷屏行。

到这里应该不会受影响了,本行应该延伸到了图片的正下方,所以我要足够长才能确保不同的屏幕下都看到效果。

随机值

.添加随机值

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会让整体的数的变化受影响的因素变多,所以得到的了一个较为随机的值

你可能感兴趣的:(中级Shader教程01 基本数学函数)