shader glsl 函數圖舉例 轉載https://juejin.cn/post/6844903671705108487
Shader 函數可視化
一、正弦余弦
正弦運動：y = sin(x)
余弦運動：y = cos(x)
動畫演示：
通過給sin()和cos()添加一些處理，可以制作出更多有趣的效果：
二、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);
三、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.);
四、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);
五、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.)
六、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)
七、floor
找到小於或等於參數的最接近的整數。
說明：floor()返回一個等於最小整數的值，該整數小於或等於x。
使用：
float floor(float x) vec2 floor(vec2 x) vec3 floor(vec3 x) vec4 floor(vec4 x) 復制代碼可視化呈現：y = floor(x)
八、ceil
找到大於或等於參數的最近整數。
說明：ceil()返回一個等於最接近的整數的值，該整數大於或等於x。
使用：
float ceil(float x) vec2 ceil(vec2 x) vec3 ceil(vec3 x) vec4 ceil(vec4 x) 復制代碼可視化呈現：y = ceil(x);
九、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);
十、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);
