TODO
基礎(chǔ)函數(shù): Smoothstep Sin Clamp Pow Length Sqrt
輔助函數(shù): Saw WithIn Remap
圖形: Circle Rect

圖形

1.繪制圓點

//假設(shè)uv 是 (-0.5,-0.5) 到(.5,0.5)
//blur 是模糊程度 值越大邊緣越模糊 0.0完全不模糊 1.0為正常模糊 負(fù)數(shù) 反向
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的圖像：

circle01.jpg

circle-01.jpg

circle10.jpg

grid_offset_uv.jpg

grid_rand_val.jpg

grid_uv_circle.jpg

offset_uv.jpg

perspective.jpg

uv_offset.gif

circle00.jpg

<img src="http://127.0.0.1:4000/assets/img/blog/ShaderTutorial2D/BaseMath/circle01.jpg" width="128"> <img src="http://127.0.0.1:4000/assets/img/blog/ShaderTutorial2D/BaseMath/circle00.jpg" width="128"> <img src="http://127.0.0.1:4000/assets/img/blog/ShaderTutorial2D/BaseMath/circle01.jpg" width="128"> <img src="http://127.0.0.1:4000/assets/img/blog/ShaderTutorial2D/BaseMath/circle10.jpg" width="128">

<img align="right" src="https://raw.githubusercontent.com/mzlogin/mzlogin.github.io/master/images/posts/markdown/demo.png"/>

這是一個示例圖片。

圖片顯示在 N 段文字的右邊。

N 與圖片高度有關(guān)。

刷屏行。

刷屏行。

到這里應(yīng)該不會受影響了，本行應(yīng)該延伸到了圖片的正下方，所以我要足夠長才能確保不同的屏幕下都看到效果。

隨機值

.添加隨機值

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)產(chǎn)生的數(shù)比較隨機的原因是：
sin(xbigVal1) 會將x值的變化波動被放大，且隨機，設(shè)這個值的變化為detX,則 frac(detXbigVal2) 會讓本來的小的波動再次放大，然后fract會讓整體的數(shù)的變化受影響的因素變多，所以得到的了一個較為隨機的值