shader从入门到放弃（2） 常用函数
shader的入门到放弃
例子
//传入原始坐标，进行归一化，网格规则的格子是长方形，传入网格的数量
vec3 grid_rect(vec2 coord,float grid_size){
vec3 color = vec3(0.0);
vec2 uv = (coord/iResolution.xy -0.5) * 2.0;
vec2 cell =1.0 - 2.0 * abs(fract(uv * grid_size * 0.5) - 0.5);
//通用的颜色设置
color = step(cell.x,fwidth(cell.x)) * vec3(1.0) + step(cell.y,fwidth(cell.y)) * vec3(1.0);
//坐标轴颜色设置
//vec3 color2 = step(abs(uv.x),fwidth(uv.x)) * vec3(0.0,1.0,0.0) + step(abs(uv.y),fwidth(uv.y)) * vec3(0.0,1.0,0.0);
color = mix(color,vec3(0.0,1.0,0.0),step(abs(uv.x),fwidth(uv.x)));
color = mix(color,vec3(0.0,1.0,0.0),step(abs(uv.y),fwidth(uv.y)));
return color;
}
//传入原始坐标，进行归一化，正常的方格子
vec3 grid(vec2 coord,float grid_size){
vec3 color = vec3(0.0);
vec2 uv = (coord - 0.5 * iResolution.xy) /min(iResolution.y,iResolution.x) * 2.0;
vec2 cell =1.0 - 2.0 * abs(fract(uv * grid_size * 0.5) - 0.5);
//通用的颜色设置
color = step(cell.x,fwidth(cell.x)) * vec3(1.0) + step(cell.y,fwidth(cell.y)) * vec3(1.0);
//坐标轴颜色设置
//vec3 color2 = step(abs(uv.x),fwidth(uv.x)) * vec3(0.0,1.0,0.0) + step(abs(uv.y),fwidth(uv.y)) * vec3(0.0,1.0,0.0);
color = mix(color,vec3(0.0,1.0,0.0),step(abs(uv.x),fwidth(uv.x)));
color = mix(color,vec3(0.0,1.0,0.0),step(abs(uv.y),fwidth(uv.y)));
return color;
}
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// 测试 这个是生产正方形 标注你的网格
fragColor = vec4(grid(fragCoord,10.0),1.0);
//测试 这个生产的是长方形的
//fragColor = vec4(grid_rect(fragCoord,10.0),1.0);
}
上面是实现了一个，实现了一个画出网格的基础功能的示例
常用函数
fwidth(float x)
- 传入一个数值，计算横向相邻的像素的dx，也就是求导，求变化值，这个方向有GPU去决定的
- 这个值一般比较小，目前的使用就是判断像素值，如果距离小于这个变化值，则给这个像素上色的作用。
fract(vec2)
- 这是一个取小数的函数，可以传入float吧，也可以传入变量
- 这个作用就是在每一个去拿小数的位置
- 这个目前的例子，就是去划分格子
mix(a,b,c)
mix performs a linear interpolation between x and y using a to weight between them. The return value is computed as follows: x⋅(1−a)+y⋅a.
step(a,b)
step generates a step function by comparing x to edge.
For element i of the return value, 0.0 is returned if x[i] < edge[i], and 1.0 is returned otherwise.
- 代替if的，只会返回0,1 如果a<b则返回0，否则是1
smoothstep
smoothstep performs smooth Hermite interpolation between 0 and 1 when edge0 < x < edge1. This is useful in cases where a threshold function with a smooth transition is desired. smoothstep is equivalent to:
- 这个用来平滑这个step的。
- 这个如果是斜线，那么这个肯定会有锯齿，那么这个锯齿就需要使用这个smoothstep去平滑掉
处理前是这样的
他的函数图像是这样的。 这个处理之后的结果是这样的
