Shader 用到的数学函数总结及用法

news2024/11/23 15:24:56

在写shader相关的程序的时候往往需要用到 OpenGL内置的数学库，下面列举几个常用的函数用法和效果，下面的所有代码都是运行在shadertoy在线工具上的，推荐一个好用的数学工具desmosDesmos

abs(x)
step(edge,x)
dot(uv1,uv2)

1：abs(x) 取绝对值

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;
    uv -= 0.5;
    
    uv.x *= iResolution.x / iResolution.y;
    
    
    vec3 col = vec3(0.);
    uv = abs(uv);
    
    float c = uv.x;
    
    // 0.2 <= c => 0 0.2 > c => 1 step(.2,c) reverse color
    col += step(c,.2);
    
    

    // Output to screen
    fragColor = vec4(col,1.0);
}

一般abs操作的时候会对uv坐标取绝对值，一般应用于对称的图形绘制上。

2：step(edge,x) 取0或者1：函数通常用于比较输入值与阈值，并返回一个阶跃函数的结果。阶跃函数的意思是，如果输入值小于或等于阈值，则返回0；如果输入值大于阈值，则返回1。

col += c;
    
    // 0.2 <= c => 0 0.2 > c => 1 step(.2,c) reverse color
    col += step(c,.2);

如果使用的是 step(0.2,c)那么如果c > 0.2 返回1，c <= 0.2 返回0，反应到图形是就是黑白块的显著分割

如果反过来 step(c,0.2) 的结果就是颠倒黑白显示，原理很好理解如果0.2 > c 返回1，如果0.2 <= c返回0，也就是 c < 0.2 => 1 c >= 0.2 => 0 正好与上述的方法相反。

3： dot(a,b) 在着色器中，`dot()` 函数通常用于计算两个向量的点积。点积是将两个向量相乘并将结果相加得到的标量值。`dot()` 函数在着色器中经常用于计算光照模型中的光照强度，或者进行向量投影、判断两个向量的相关性等操作

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;
    uv -= 0.5;
    
    uv.x *= iResolution.x / iResolution.y;
    
    
    vec3 col = vec3(0.);
    //uv = abs(uv);
    
    // 根据uv坐标来决定哪些地方显示白色那些地方显示黑色 c只是控制颜色的显示，
    // uv决定哪些地方显示那些颜色
    float c = dot(uv,vec2(3.,1.));
    col += c;
    
    // 0.2 <= c => 0 0.2 > c => 1 step(.2,c) reverse color
    //col += step(c,0.2);
    
    

    // Output to screen
    fragColor = vec4(col,1.0);
}

可能单纯的dot函数你并不能看出来图形为什么这么显示，那么知道dot的数学公式之后你会豁然开朗的感觉 dot(a,b) = a.x * b.x + a.y * b.y

那么上面的dot(uv,vec2(3,1)) 表示的就是 c = uv.x * 3 + uv.y * 1 也就是 0 = 3x + y - c 怎么样这个公式熟悉不熟悉，这就是高中学到的曲线方程，再想到高中学到的曲线的动态规划曲线的右上方的点都大于零，曲线上的点都等于零，曲线的左下方小于零，这样不是很直观我还是上图吧：