IPhone设计中G2连续是什么？丝滑的数学定义

欧阳大盆栽
1,727 阅读4分钟

又是好久没见啊。作为一个苦力运维工程师，总是要被动的去做很多事情。想要喝杯茶学学Shader真不容易啊。今天继续学习一些函数绘图，本文讨论一个稍微复杂的函数Smooth. 在物理世界中，存在很多平滑的曲线，而不是尖锐的直角。而在苹果的设计IPHONE7之后引入了一个叫做G2连续的工业设计概念。再比如IQ大神写的下面这个Shader觉得这个球很丝滑的融入到平面中。 所以什么是丝滑，他有没有明确的数学定义，公式是什么呢？

2406141126

光滑Smooth的直观感受

shadertoy: www.shadertoy.com/view/X3GGD3

在CSS中， border-radius 属性可以为元素的边框加一个圆角， 带来的感受是一个边没有立即转变到另外一个边，而是丝滑的转变。 2406132436

而在下面这个图中，左边的矩形与圆形的结合并不是生硬的，而是有一个丝滑的过度。就好像一滴水融入了水面。 而右边的矩形与圆形的结合便是用到了之前学习的 SDF_UNION 操作。

2406131517

如果还不够明显，可以看看IQ博客中给出两个图，左边的人偶使用的不smooth的union操作，右边的人偶使用的是smooth的union操作。 2406134357

光滑Smooth到底是什么？

从iOS 7开始，苹果更新了自家产品标志性的圆角图标轮廓，将工业设计中常用的曲率连续变化的概念应用到视觉层面，app图标从简单的圆角矩形（G1连续）转变为看起更顺滑的圆角矩形（G2连续）使得整个iOS系统的设计感都得到了提升，让用户看着更舒服。 2406133236

所以在工业界本来就有对Smooth的数理定义和等级划分，详细可以参考WIKI. 我们常常说的光滑其实是 Geometric continuity 几何连续。 一个曲线或曲面可以被描述为具有 Gn 连续性，n 是表示光滑度的增量，即在曲线上取一点，然后分析该点与其两侧线段的关系。

  • G0: 两侧曲线在这一点相遇(位置连续)。
  • G1: 两侧曲线这一点的切线方向相同(相切连续)。
  • G2: 两侧曲线在这一点的曲率相同(曲率连续)。

上面G0很好理解两个线只要连接了，那就是G0连续，我们的直角矩形就是G0连续, G1连续也比较好理解，以CSS或者IPHONE7以前的圆角矩形为例，直角边与圆角的切线是一条，那就是G1连续 2406134508 如果用法向量来表示, 法向量的方向不会出现瞬间跳跃 2406140223

数理定义

不过上面的图，都是一些感受上的东西，如果我们想要在Shader中使用他们，必须要用数学去定义并推导。 这里会补回忆一些数学基础知识， 因为笔者有10多年没碰过数学了，这里的内容有许多应该是非常基础的。

连续

在wiki的丝滑定义中，提到了位置连续，相切连续和曲率连续。 可是连续是什么呢？ Continuity of real functions is usually defined in terms of limits. A function f with variable x is continuous at the real number c, if the limit of 𝑓(𝑥),as x tends to c, is equal to 𝑓(c)

lim⁡x→x0f(x)=f(x0)\lim\limits_{x\to x_0}f(x) = f(x_0)

连续要求两个相近的x, 其f(x)的值也一样。

切线

2406151934

曲线 y=f(x) 在其上一点 P(x, y)处的切线PT是割线PQ, 当动点Q沿此曲线无限接近于点P时的极限位置。由于割线PQ的斜率为

k‾=f(x)−f(x0)x−x0\overline{k}=\frac{f(x)-f(x_0)}{x-x_0}

因此当 x→x0x \to x_0 时如果i‾\overline{i}的极限存在，则极限

lim⁡x→x0f(x)−f(x0)x−x0\lim\limits_{x\to x_0}\frac{f(x) - f(x_0)}{x-x_0}

即为切线PT的斜率， 同时考虑一个特殊情况，如果f(x)在x0x_0处单侧导数不存在，但是都趋近于 +∞+\infty 或者 −∞-\infty ，那么f(x)f(x) 在 x0x_0处有平行于y轴的垂直切线

曲率

曲率： 衡量曲线弯曲程度的量 曲率的影响因素为： 弧长和切线转角 2406152607

曲率公式推导

曲率k的定义为

k=lim⁡ΔS→0∣ΔαΔS∣=dαdSk = \lim\limits_{\Delta S \to 0} |\frac{\Delta \alpha}{\Delta S}| = \frac{d \alpha}{d S}

根据以上定义推导任意函数f(x)f(x)的曲率公式的过程如下 dSdS的推导

dS=(dx)2+(dy)2=(dx)2⋅[1+(dydx)2]=dx⋅1+(dydx)2=dx⋅1+y′2\begin{aligned} dS &= \sqrt{(dx)^2 + (dy)^2} \\ &= \sqrt{(dx)^2 \cdot [1+(\frac{dy}{dx})^2]} \\ &= dx \cdot \sqrt{1+(\frac{dy}{dx})^2} \\ &= dx \cdot \sqrt{1 + y'^2} \end{aligned}

dαd\alpha的推导

tan(α)=y′sec2(α)⋅dα=y′′dx(1+tan2(α))⋅dα=y′′dx(1+y′2)⋅dα=y′′dxdα=dx⋅y′′1+y′2\begin{aligned} tan(\alpha) &= y' \\ sec^2(\alpha) \cdot d\alpha &= y''dx \\ (1+tan^2(\alpha)) \cdot d\alpha &= y''dx \\ (1+y'^2) \cdot d\alpha &= y''dx \\ d\alpha &= dx \cdot \frac{y''}{1+y'^2} \end{aligned}

在套用曲率定义可以得到, 对于函数y=f(x), 其曲率为

k=∣y′′∣(1+y′2)32k = \frac{|y''|}{(1+y'^2)^{\frac{3}{2}}}

曲率圆

圆的曲率公式推导如下，其值为圆半径的倒数

2406150614

弧长=圆心角 乘 半径

S=ωrk=ωS=1r\begin{aligned} S &= \omega r \\ k &= \frac{\omega}{S} = \frac{1}{r} \end{aligned}

于是有一个概念叫做曲率半径和曲率圆。 曲率半径为曲率的倒数，过曲线的某一点做出一个圆，这个圆与曲线在该点处有公共切线，且曲率相等且凹凸方向相同，即称这个圆为该曲线在点的曲率圆。

geogebra: www.geogebra.org/classic/rwh…

2406152343

曲率梳

分析曲率的时候经常用到下面的工具，曲线转的越快，曲率梳越大，反之曲率梳越平坦 2406154023

reference

avatar
文章
阅读
粉丝