Shader 函數可視化

1、正弦餘弦

正弦運動：y = sin(x)

餘弦運動：y = cos(x)

動畫演示：

經過給sin()和cos()添加一些處理，能夠製做出更多有趣的效果：

2、smoothstep

在兩個值之間取埃爾米特插值（Hermite interpolation）link，它的值永遠是 0~1。

描述：在edge0和edge1之間取一個平緩的差值，在咱們須要一個平滑的漸變的時候特別有用。當前值小於edge0，取值爲0。當前值大於edge1，取值1。在這個區間內，取edge0和edge1的差值。

適用場景1：因爲它的值永遠介於 0~1，edge0 和 edge1 的差值只會決定曲線的陡或平緩，因此咱們能夠控制他們的差值來作一些動畫速度的變化。好比：

zoom(uv, smoothstep(0.0, nQuick, progress));
複製代碼

上面經過控制 nQuick 的值來決定 zoom 縮放速度了。

適用場景2：smoothstep在edge0,edge1爲0的時候，至關於step：

smoothstep(0.0, 0.0, x);
複製代碼

那咱們怎麼實現相似 step(edge, x) 的 edge 移動的效果呢，只須要這麼作就同樣了：

smoothstep(0.0, 0.0, x-edge);
複製代碼

smoothstep() 的運算一樣能夠製做出一些不一樣的變體曲線：

y = smoothstep(0.0,1.0,x) - smoothstep(1.0,  2.0, x); 
複製代碼

使用：

float smoothstep(float edge0, float edge1, float x)  
vec2 smoothstep(vec2 edge0, vec2 edge1, vec2 x)  
vec3 smoothstep(vec3 edge0, vec3 edge1, vec3 x)  
vec4 smoothstep(vec4 edge0, vec4 edge1, vec4 x)

vec2 smoothstep(float edge0, float edge1, vec2 x)  
vec3 smoothstep(float edge0, float edge1, vec3 x)  
vec4 smoothstep(float edge0, float edge1, vec4 x)
複製代碼

它等同於：

genType t;  /* Or genDType t; */
t = clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);
return t * t * (3.0 - 2.0 * t);
複製代碼

可視化呈現：y = smoothstep(0.0,1.0,x);

3、clamp

將值限制在兩個其餘值之間。link

說明：clamp()返回minVal到maxVal範圍內的值。返回值計算：min(max(x, minVal), maxVal)。

使用：

float clamp(float x, float minVal, float maxVal)  
vec2 clamp(vec2 x, vec2 minVal, vec2 maxVal)  
vec3 clamp(vec3 x, vec3 minVal, vec3 maxVal)  
vec4 clamp(vec4 x, vec4 minVal, vec4 maxVal)

vec2 clamp(vec2 x, float minVal, float maxVal)  
vec3 clamp(vec3 x, float minVal, float maxVal)  
vec4 clamp(vec4 x, float minVal, float maxVal)
複製代碼

可視化呈現：y = clamp(x,0.,1.);

4、step

經過比較兩個值生成步進函數。link

說明：step()經過將x與edge進行比較來生成步進函數。對於返回值i，若是x[i] < edge[i]則返回0.0，不然返回1.0。

適用場景：step()有着一個最大的特徵，那就是非黑即白。edge 表示非黑即白的邊界，小於edge就是黑(0)，大於edge就是白(1)。當咱們這麼使用時，能夠判斷像素點是否存在歸一化座標系裏：

step(0.0, p.y) * step(p.y, 1.0) * step(0.0, p.x) * step(p.x, 1.0)
複製代碼

當它爲 0 時，表示像素點在水平或垂直方向超出了邊界；當它爲 1 時，表示在座標系內。當我咱們把它和mix(texture2D_1, texture2D_2, step())函數一塊兒用時，就能夠獲得非黑即白的兩張相連的紋理圖（紋理圖超過邊界的部分會用紋理圖2取代）。

使用：

float step(float edge, float x)  
vec2 step(vec2 edge, vec2 x)  
vec3 step(vec3 edge, vec3 x)  
vec4 step(vec4 edge, vec4 x)

vec2 step(float edge, vec2 x)  
vec3 step(float edge, vec3 x)  
vec4 step(float edge, vec4 x)
複製代碼

可視化呈現：y = step(0.5,x);

5、mod

以第二個模數計算第一個參數的值。

說明：x指定要求模的值，y指定要獲取模數的值。計算公式爲：x - y * floor(x / y)。

使用：

float mod(float x, float y)  
vec2 mod(vec2 x, vec2 y)  
vec3 mod(vec3 x, vec3 y)  
vec4 mod(vec4 x, vec4 y)

vec2 mod(vec2 x, float y)  
vec3 mod(vec3 x, float y)  
vec4 mod(vec4 x, float y)
複製代碼

可視化呈現：y = mod(x,1.)

6、fract

計算參數的小數部分。

說明：fract()返回x的小數部分。計算公式爲x - floor(x)。

適用場景：假如咱們在一個歸一化的座標系裏，fract(uv) 可以讓像素點永遠都在座標系裏不會超出邊界。以從上往下平移做爲例子，fract()可讓從上往下的平移無限循環，且首尾相連。

使用：

float fract(float x)  
vec2 fract(vec2 x)  
vec3 fract(vec3 x)  
vec4 fract(vec4 x)
複製代碼

可視化呈現：y = fract(x)

7、floor

找到小於或等於參數的最接近的整數。

說明：floor()返回一個等於最小整數的值，該整數小於或等於x。

使用：

float floor(float x)  
vec2 floor(vec2 x)  
vec3 floor(vec3 x)  
vec4 floor(vec4 x)

複製代碼

可視化呈現：y = floor(x)

8、ceil

找到大於或等於參數的最近整數。

說明：ceil()返回一個等於最接近的整數的值，該整數大於或等於x。

使用：

float ceil(float x)  
vec2 ceil(vec2 x)  
vec3 ceil(vec3 x)  
vec4 ceil(vec4 x)
複製代碼

可視化呈現：y = ceil(x);

9、sign

提取參數的符號。

說明：若是x小於0.0，則sign()返回-1.0，若是x等於0.0，則返回0.0，若是x大於0.0，則返回+1.0。

適用場景：sign()用來判斷運動方向很是高效，由於它的值只有 -1,0,1，因此咱們能夠經過

vec2 direction = vec2(0.0, 1.0);   // x, y 表明方向
sign(direction)
複製代碼

來判斷水平和垂直的方向，正數爲正方向，負數爲反方向，也不用擔憂用戶傳了超出長度爲1的值。

使用：

float sign(float x)  
vec2 sign(vec2 x)  
vec3 sign(vec3 x)  
vec4 sign(vec4 x)
複製代碼

可視化呈現：y = sign(x);

10、mix

將值限制在兩個其餘值之間並作融合，經常使用於顏色混合：

說明：mix()在x和y之間執行線性插值，使用它們之間的權重。返回值計算爲x*(1-a)+y*a。能夠這麼理解，a決定了x,y所佔的比重，好比a < 0.5，那麼x的比重更大，a > 0.5，y的比重更大。當 a = 0.5時，x和y的比重各一半。

使用場景：咱們常常會有一些動畫，須要在單位時間內往返一次，好比先放大後縮小。經過如下公式能夠輕鬆作到（scale 表示放大的倍數）：

mix(scale, 1.0, 2.0 * abs(progress - 0.5))
複製代碼

上面的公式便可作到先放大到scale（當進度爲0.5時達到最大），而後再縮小到1。

使用：

float mix(float x, float y, float a)  
vec2 mix(vec2 x, vec2 y, vec2 a)  
vec3 mix(vec3 x, vec3 y, vec3 a)  
vec4 mix(vec4 x, vec4 y, vec4 a)

vec2 mix(vec2 x, vec2 y, float a)  
vec3 mix(vec3 x, vec3 y, float a)  
vec4 mix(vec4 x, vec4 y, float a)
複製代碼

可視化呈現：y = mix(0.,1.,x);