2D SDF 应用

所谓 Signed Distance Field，Signed，正负号，Distance，点到点的距离，Field，区域，其实就是判断一个点是否在一个区域内。
—— Signed Distance Field - 知乎

图形绘制

图形绘制已经在前面的章节中有所提及，单纯的几何体并不能绘制出复杂的图案，所以还需要引入布尔运算，通过基础几何体的组合从而创造出更复杂的图案，所以可以利用这三个布尔运算方法：

// union (联合)
float opUnion( float d1, float d2 ) { return min(d1,d2); }

// substraction (差集)
float opSubtraction( float d1, float d2 ) { return max(-d1,d2); }

// intersection (交集)
float opIntersection( float d1, float d2 ) { return max(d1,d2); }

// 平滑版本
float opSmoothUnion( float d1, float d2, float k ) {
    float h = clamp( 0.5 + 0.5*(d2-d1)/k, 0.0, 1.0 );
    return mix( d2, d1, h ) - k*h*(1.0-h);
}
float opSmoothSubtraction( float d1, float d2, float k ) {
    float h = clamp( 0.5 - 0.5*(d2+d1)/k, 0.0, 1.0 );
    return mix( d2, -d1, h ) + k*h*(1.0-h);
}
float opSmoothIntersection( float d1, float d2, float k ) {
    float h = clamp( 0.5 - 0.5*(d2-d1)/k, 0.0, 1.0 );
    return mix( d2, d1, h ) + k*h*(1.0-h);
}

下面案例中上下两行表示未平滑和平滑版本，四列分别代表：Union (联合)、Substraction (差集)、Intersection (交集) 、Symmetric Difference（对称差集）：

See the Pen 1. draw all kinds of shape by ShaderFans (@shaderfans) on CodePen.

可快速复用的 SDF 函数集：2D distance functions、2D distance functions in L-infinity norm、3D distance functions、hg_sdf 。