GLSL shader 编写技巧

基础描述

1、在 glsl 中 gl_FragCoord 能获取当前片源在 viewport 内的坐标（原点在左下角，取值范围是 0-width/height) ,通过 uniform 传递viewport width height 就能将 gl_FragCoord 转换到 0 ~ 1.0 范围

2、在glsl 中 gl_PointCoord 可以在绘制点的模式时获取当前片源在点中的坐标（是一个以每个原点的局部坐标，取值范围 0 ~ 1.0， 原点在当前绘制点的左下角，注意默认点是方形的，如果需要变原点需要自己根据坐标处理），这个变量对用点精灵的模式绘制很有用。 

(0,1)  --------    (1,1)  → 右上
   |                      |
   |  点精灵区域  |
   |                      |
(0,0)   --------   (1,0)  → 右下
 

3、step(edge, x) 用于判断x 是否大于 edge,用于替代 if(x > edge ) 

4、smoothstep(edge0, edge1, x)  一般 edge0 < edge1 则用于在  0 ~ 1 的平滑过渡，一般用于图形边缘做边缘抗锯齿用。  也可以 edge0 > edge1 则 用于 1 ~ 0 的反向过渡。 smoothstep 也可以用于代替 if( x > edge) 并且做边缘过渡  smooth(edge,edge+0.001,x) 也能做到相同效果

5、fract(x) 可以提取x小数部分，如果我们x 本身取值 0 ~ 1.0 结合  fract(x*n) 就可以实现将 x 分割成n段的 0 ~ 1 的坐标了。使用 floor(x*n) 就能获取到 每段属于第几段。

6、随机数生成

6.1 一维随机数  fract(sin(x)*n)  通过 对x 取 sin 值然后放大n倍取小数部分获取 0 ~ 1 的随机值，可以放大 n 值活得波动更大的随机值。

float random(float x){
    float n = 1000.0;
    return fract(sin(x)*n);
}

6.2 二维随机，通过将二维向量和一个固定的变化向量点乘获得一个值然后 sin 计算得到一个 0 ~ 1.0 的值然后再变化  cosntF 随机值，取小数部分得到一个 0 ~ 1 的随机值

float random (vec2 st) {
    vec2 constVec = vec2(12.9898,78.233);
    float constF = 43758.5453123; 
    float dtValue = dot(st.xy, constVec );
    float sinValue = sin(dtValue)*constF ;
    return fract(sinValue);
}