Shader中使用距离函数（Distance Function）绘制二维图形

最新推荐文章于 2024-07-09 10:49:06 发布

王王王渣渣

最新推荐文章于 2024-07-09 10:49:06 发布

阅读量4.8k

点赞数 3

分类专栏：图形学文章标签：距离函数 DistanceFunc

本文链接：https://blog.csdn.net/wangjiangrong/article/details/115728022

版权

本文详细介绍了距离函数的概念及其在二维图形绘制中的应用，包括如何计算点到圆的最短距离，如何用Shader在屏幕上绘制圆形，并通过距离函数实现等高线效果。同时，讨论了将GLSL代码转换为Unity Shader的过程，为读者展示了如何在不同的场景中使用距离函数。

摘要由CSDN通过智能技术生成

更详细的介绍见：https://zhuanlan.zhihu.com/p/365440831

距离函数是什么？

距离函数顾名思义是一个和距离有关的函数，既然是函数，我们就可以用 f(x) 来表示。那么 f(x) 里面干了些什么呢？它会返回空间中任何一个点到物体表面的最短距离。

这么说可能有点不好理解，我们来看一个例子，如下图：

在二维空间中，黑色的圈就是我们圆的物体表面，圆心在原点，半径为r。而ABCD点，是我们空间中任意点的四个采样，我们来看看这些点到圆面上的最短距离d怎么算。

通过数学常识我们知道，任意点到圆面的最近距离，必然是该点与圆心的连线在圆上的交点与该点的距离，例如A点到圆上的最短距离就是AP的长度。那么PA的长度怎么求呢？因为我们圆心在原点，因此PA=OA-OP，而OP的长度就是半径r，因此PA=OA-r 。该式子同样适合于其他三个点。

也就是说我们可以得到一个函数 f(v)=|v|-r ，输入值v即为二维空间中任意点的坐标（一个二维向量），|v|就是向量v的模，代表到原点的长度/距离，r为圆的半径，那个这个函数就是半径为r，圆心在原点的圆的距离函数。

我们还可以发现，如果f(x)的返回值为0，那么这个点就在圆上，例如B点，也就是说我们只要通过这个函数，找出所有返回值为0的点，这些点就会形成一个圆。

此外对于D点而言，f(x)返回的是负数，这是因为点在圆内，OD<r，得到负数，也就是说圆内所有点到圆上的最短距离我们都可以认为是负的。

通过这个例子我们可以总结出，距离函数会返回空间中任何一个点到物体表面的最短距离，我们只需要找出距离为0的所有点，即可得到这个物体表面，而距离小于0的点代表在物体内部，距离大于0的点代表在物体外。对于这种带有正负的距离函数，我们也称为符号距离函数（Signed Distance Function，简称SDF）或定向距离函数（Oriented Distance Function，简称SDF）。距离函数在光线追踪中有着重要的作用，我们也可用距离函数来画一些几何体。

附：wiki的解释：https://en.wikipedia.org/wiki/Signed_distance_function

这里大家可能会问，前面的例子我们的圆的圆心正好在原点，所以可以得到 f(v)=|v|-r，那要是不是这样的怎么办？例如下图：

此时A到圆心的长度AH就不能用 |OA| 来代替了，那么我们怎么求AP的长度？这里我们可以应用平移变换的思想，不管圆心在哪，都是从原点平移了 $\vec{OH}$ （设该向量为h），空间中任意点同样也是平移了h，把这个平移值去掉就变成了了按原点计算，因此对于圆心在H，半径为R的圆，其距离函数为：f(v)=|v-h|-r 。